Features
Start a free trial

Ensure all elements with a role attribute use a valid value

Rule ID: aria-roles User Impact: critical Guidelines: WCAG 2.0

Elements with ARIA roles must use valid, non-abstract role values to ensure proper interpretation by assistive technologies.

Why It Matters

Assigning invalid or abstract ARIA role values to elements can lead to misinterpretation by assistive technologies, hindering their ability to interact with and convey the element's purpose to users. This miscommunication can result in a subpar user experience for individuals relying on these technologies.

How to Fix

Ensure that all elements with ARIA roles use valid, concrete role values:

  • Verify that the role attribute value is correctly spelled and corresponds to an existing ARIA role.
  • Avoid using abstract roles that are not intended for direct use in content.
  • Consult the WAI-ARIA specifications to confirm the validity of role values.

Example

Fail

An element with an invalid ARIA role value:

Copy code
<div role="invalidrole">Content</div>

Pass

An element with a valid ARIA role value:

Copy code
<div role="button">Click Me</div>

About This Rule

This rule checks that all elements with a role attribute use valid, non-abstract ARIA role values, as specified in the WAI-ARIA guidelines. Ensuring valid role values is essential for assistive technologies to accurately convey the purpose and functionality of elements to users.

List of Valid ARIA Roles

Document Structure Roles

  • article
  • document
  • heading
  • list
  • listitem
  • paragraph
  • section
  • separator (when not focusable)
  • toolbar

Landmark Roles

  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • region
  • search

Live Region Roles

  • alert
  • log
  • marquee
  • status
  • timer

Widget Roles

  • button
  • checkbox
  • gridcell
  • link
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • progressbar
  • radio
  • scrollbar
  • searchbox
  • separator (when focusable)
  • slider
  • spinbutton
  • switch
  • tab
  • tabpanel
  • textbox
  • treeitem

Composite Widget Roles

  • combobox
  • grid
  • listbox
  • menu
  • menubar
  • radiogroup
  • tablist
  • tree
  • treegrid

Window Roles

  • alertdialog
  • dialog

Other Rules

Interested in other web accessibility rules? Please see these other rules: