89

All custom functionality utilizes the appropriate ARIA features for states, properties, and values. (e.g. aria-expanded, aria-haspopup)

WCAG 2 criterion

4.1.2 Name, Role, Value (Level A)

Tools and requirements

• Screen Reader
• Manual Assessment

Test procedure

During manual evaluation, observe the interactions of all elements and functionality on the page using a screen reader. Each of the following types of interactions must be announced as follows.

"Custom functionality" for the purposes of this criterion is focusing on non-native HTML functions, like accordions, modals, and dropdown menus. Not buttons, links, or form fields which have native HTML tags.

• Accordion
  • Announced as "Button" on the element which triggers the accordion. (<button> OR role="button")
  • The accordion state must be announced as expanded or collapsed (aria-expanded="true/false")
• Comboboxes
  • Announced as "Combobox" on the element which triggers the combobox open (role="combobox")
  • The state of the combobox must always be announced as either expanded or collapsed (aria-expanded="true/false")
• Tablist
  • Announced as "Tablist" on the grouping of tabs (role="tablist")
  • If the tab list has a visible label, set aria-labelledby to the id of the labeling element. If not, use aria-label to provide a label.
  • Each individual tab is announced as "Tab" (role="tab")
  • The selected tab must announce as selected (aria-selected="true")
  • Each panel which contains individual tab content is announced as "tabpanel" (role="tabpanel)
  • Each tabpanel which is not visible must be hidden from the screen reader (aria-hidden="true" and/or CSS display: none;)
• Navigation (including Pagination)
  • Announced as "list"
  • Any parent navigation item with a drop down must announce expandable content (aria-haspopup="true")
  • Any triggers to open drop downs must announce as "button"
  • If there is a visual indicator of the current item in the navigation list, then the element must announce that the user is on the current item (aria-current="page")

If the item you are currently assessing is not listed above, refer to the W3C WAI-ARIA 1.1 reference for details on how it should properly work. (https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)