Accessible Rich Internet Applications (ARIA) Basics

Feature Description
tabindex
  • Used for identifying elements that can receive keyboard focus.
  • tabindex=-1: Element can receive keyboard focus, but not in tab order of page.
  • tabindex=0: Element can receive keyboard focus, is included in tab order of page.
  • tabindex>0: Element can receive keyboard focus, but changes tab order of page
    (NOTE: tabindex>0 is rarely if ever used, has many browser compatibility issues).
focus()
  • Method to move keyboard focus to a DOM node using javascript.
  • Visually styling keyboard focus:
    • Mimic the mouse hover styling to match look and feel or website, to make it feel an integral part of the website design.
    • Include a strong visual CSS border or outline to make the focus standout as users tab through the page.
role
Accessible Name
  • aria-labelledby attribute: List of IDREFs to elements with text content on the page.
  • aria-label attribute: String defining the accessible name.
  • Text content of the element with widget role (e.g. text of menu item).
  • title attribute: String defining the accessible name (e.g. name of last resort).
  • Accessible name algorithm
Properties and States
W3C Authoring Resources