Today I Learned

TIL, 2021-07-28, Button Role

ARIA: button role


  • role="button" will make an element appear as a button control to a screen reader. Then, aria-pressed to create toggle buttons.
  • If you are using role="button", instead of semantic button or input type="button" elements, you will need to make the element focusable and need to define event handlers for click and keydown events, including Enter and Space keys.
  • aria-pressed - toggle button.
  • aria-expanded - if the button supports a grouping of other elements.
  • Should be activated by both Enter and Space.


  • -1 means the element cannot be reached via keyboard, but could be focused with JS or visually clicking with the mouse.
    • When you have off-screen content that appears on a specific event. Can’t focus any element with a negative tabindex, but a script can do so with focus().
  • 0 means the element should be focusable AFTER any positive tabindex values and its order is defined by the document’s source order.
  • Positive value - focusable in sequential keyboard navigation which is the order defined by the value of the number.
  • Content should be semantically described using semantic elements.

HTML elements reference


  • address - contact information.
  • article - a self-contained composition.
  • aside - a portion of a document whose content is only indirectly related to the document’s main content.
  • section - should always have a heading, with very few exceptions.
  • figure - self-contained content, with a figcaption.
  • abbr - an abbreviation, optional title attribute can provide an expansion or description for the abbreviation.
  • data .
  • time - represents a specific period in time.
  • area - image map - has predefined clickable areas.
  • picture.
  • details - disclosure widget with an open state.

Accessibility in Angular Applications


  • Designing for accessibility - simple animations/interactions, responsive design, high contrast users.
  • LineAnnouncer.
  • Keyboard navigation - ListKeyManager.

This project is maintained by daryllxd