Any values that are assigned to ARIA role values must be valid. Role values must be spelled correctly, correspond to existing ARIA role values, and must not be abstract roles.
Why It Matters
When you assign invalid ARIA role values to elements, they are not interpreted by assistive technology.
When assistive technologies don’t understand the role of each element on a web page, they are not able to interact with it correctly or communicate the role to the user.
Fixing the Issue
Ensure all values assigned to role=”” correspond to valid ARIA roles.
Available roles include:
- Document blocks: application, article, blockquote, caption, document, feed, group, heading, list, listitem, note, paragraph, separator (when not focusable), toolbar.
- Document Content: code, definition, deletion, emphasis, figure, img, insertion, mark, math, meter, strong, subscript, superscript, term, time, tooltip
- Landmark: banner, complementary, contentinfo, form, main, navigation, region, search.
- Live region: alert, log, marquee, status, timer.
- Presentational: none, generic, presentation (to cancel the native role of the element)
- Table: cell, columnheader, row, rowgroup, rowheader, table.
- Widget: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, searchbox, separator (when focusable), slider, spinbutton, switch, tab, tabpanel, textbox, treeitem.
- Widget (composite): combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, treegrid.
- Window Roles: alertdialog, dialog.
Test Cases
For more examples, visit W3C’s GitHub’s ATC Rules library.
