ARIA role must be appropriate for the element

It is possible to use ARIA roles to describe elements that are not natively supported by HTML or supported but not fully. Semantic elements have roles by default; *p> has the "paragraph" role, and <input type="radio"> has the "radio" role. The non-semantic elements are not assigned roles; <div> and *span> without semantics are null. Semantic information can be obtained from the role attribute.

ARIA roles are HTML attributes. Element roles are added using the role="role type" attribute, where role type is the role's name in the ARIA specification. ARIA states and properties are required for some roles, but others work only in combination with other roles.

As an example, screen readers will identify <ul role="tabpanel"> as a 'tab panel'. Tab panels that do not support nested tabs are not tab panels, which means accessibility is negatively impacted.

Fixing the problem

Role="" values need to correspond to the following WAI-ARIA roles:

1. Landmark: article, banner, complementary, main, navigation, region, search, contentinfo
2. Widget: alert, alertdialog, application, dialog, group, log, marquee, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, progressbar, separator, slider, spinbutton, status, tab, tablist, tabpanel, timer, toolbar, tooltip, tree, treegrid, treeitem
3. Pseudo HTML: button, button, checkbox, columnheader, combobox, form, grid, gridcell, heading, img, link, listbox, listitem, option, radio, radiogroup, row, rowgroup, rowheader, scrollbar, textbox
4. Document: document (when creating a document region inside an other type of region)
5. Application: application (only around a widget to enable normal keyboard shortcuts for page content)
6. Presentation: presentation (to cancel the native role of the element)
7. Other Semantic: math, definition, note, directory
8. Abstract: command, composite, input, landmark, range, section, sectionhead, select, structure, widget

Video