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")
