ARIA: button role

Reference

• 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.

tabindex

• -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

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

Reference

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