Use up-to-date ARIA roles

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

Deprecated ARIA roles must not be used in web content (Rule ID: aria-deprecated-role)

Applicable Standards

• WCAG 2.0 Level A (4.1.2)

• WCAG 2.1 Level A (4.1.2)

• WCAG 2.2 Level A (4.1.2)

• EN 301 549 (9.4.1.2)

Impact

Minor level impact affecting:

• Blind users

• Deafblind users

• Users with mobility impairments

Proper Implementation

• Use current WAI-ARIA roles only

• Replace deprecated roles with modern alternatives

• Follow WAI-ARIA specification guidelines

• Use semantic HTML elements when possible

• Verify role support in assistive technologies

Examples of Correct Usage

1. Using Modern ARIA Roles:
   The dialog role is a current ARIA role that provides proper semantics for assistive technologies, ensuring users are aware of the modal dialog.

2. Replacing Deprecated radiogroup Role:
   The group role is used with modern form elements instead of the deprecated radiogroup role, ensuring proper semantics and functionality.

3. Using banner for Page-Level Header:
   The banner role identifies the page's header in a modern and accessible way.

4. Using navigation Role for Menus:
   The navigation role is properly applied to the <nav> element, providing clear semantics for assistive technologies.

5. Replacing Deprecated region Role:
   

   The <section> element with aria-labelledby replaces the deprecated region role when used without accessible labeling.

Common Errors to Avoid

1. Using Deprecated radiogroup Role:
   The radiogroup role is deprecated and should be replaced with the group role or semantic <fieldset> and <legend> elements.

2. Misusing Deprecated region Role Without Labeling:
   The region role is deprecated unless it is accompanied by an accessible name (e.g., aria-labelledby or aria-label).

3. Using Deprecated tooltip Role:
   The tooltip role is deprecated in favor of the aria-describedby attribute, which provides better semantics for tooltips.

4. Using Nonexistent ARIA Roles:
   The dropdown role is not a valid ARIA role and should be replaced with the menu or listbox role depending on the functionality.

5. Applying ARIA Roles to Native Elements Without Need:
   The role="button" is redundant because the <button> element already has built-in semantics.

Rationale

• Ensures compatibility with modern assistive technologies

• Maintains consistent accessibility support

• Prevents accessibility barriers

• Supports proper semantic structure

• Enables reliable screen reader interpretation

Evaluation Method

1. Inspect the Code

   • Verify that:

     • Only valid and current ARIA roles are used.

     • Deprecated roles are replaced with modern alternatives.

     • ARIA roles are applied only when necessary (e.g., avoid overriding native semantics).

2. Test with Assistive Technology

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to confirm:

     • ARIA roles are announced correctly.

     • Deprecated roles do not cause unexpected behavior.

Evaluation Checklist