R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Correct Use of ARIA Roles

  • June 1, 2025

Correct Use of ARIA Roles

Rule ID: aria-roles
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

Ensure that all values assigned to the role attribute in HTML elements strictly match valid ARIA role names. Roles must:

  • Be spelled correctly.

  • Refer to actual, non-abstract ARIA roles.

  • Match the correct role type based on the element’s function.

Valid ARIA Roles by Category

Document Blocks:
application, article, blockquote, caption, document, feed, group, heading, list, listitem, note, paragraph, separator (non-focusable), toolbar

Document Content:
code, definition, deletion, emphasis, figure, img, insertion, mark, math, meter, strong, subscript, superscript, term, time, tooltip

Landmarks:
banner, complementary, contentinfo, form, main, navigation, region, search

Live Regions:
alert, log, marquee, status, timer

Presentational Roles:
none, generic, presentation – used to suppress the native semantics of an element

Tables:
cell, columnheader, row, rowgroup, rowheader, table

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

Composite Widgets:
combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, treegrid

Windows:
alertdialog, dialog

Example Fix:

If your element currently has:

html
<div role="card"></div>

This is incorrect, as card is not a valid ARIA role. A corrected version might be:

html
<div role="region" aria-label="Profile Card"></div>

Always reference the WAI-ARIA specification to confirm valid role values.

Why it Matters

When invalid ARIA roles are used, assistive technologies such as screen readers cannot determine the function or purpose of the elements. This disrupts the ability of users with disabilities to:

  • Understand what the element is.

  • Interact with the content effectively.

  • Navigate the page meaningfully.

Invalid roles lead to communication breakdowns between the webpage and assistive tools, significantly impacting usability and accessibility compliance.

Rule Description

ARIA role attributes must contain valid, non-abstract values. Each role must:

  • Be spelled correctly.

  • Match a defined ARIA role.

  • Be suitable for use (not an abstract or deprecated role).

This ensures that assistive technologies can accurately interpret and communicate element functionality to users.

The Algorithm (in simple terms)

The accessibility tool:

  1. Finds all elements with a role attribute.

  2. Checks if the value assigned matches a valid, recognized ARIA role.

  3. Flags the element if:

    • The role does not exist.

    • The role is abstract.

Tags:
Share:

Leave A Comment