Use correct parent elements for 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

Certain ARIA roles must be contained by particular parents (Rule ID: aria-required-parent)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (1.3.1)

• EN 301 549

• WAI-ARIA 1.1

Impact

Critical level impact affecting:

• Blind users

• Deafblind users

• Users with mobility impairments

Proper Implementation

Elements must be contained within appropriate parent elements with required ARIA roles. Relationships can be established through:

• Proper role hierarchy

• ARIA relationship attributes (aria-owns, aria-controls)

• DOM structure

• Correct parent-child combinations

Examples of Correct Usage

1. Using role="listitem" Inside role="list":
role="listitem" is correctly placed within a parent element with role="list", ensuring proper semantic structure for assistive technologies.

2. Using role="row" Inside role="rowgroup":
role="row" is correctly nested within a parent role="rowgroup", ensuring a valid table structure.

3. Using role="option" Inside role="listbox":
role="option" elements are correctly placed inside a role="listbox", ensuring the listbox and its options are announced properly by screen readers.

4. Using role="menuitem" Inside role="menu":
role="menuitem" is correctly placed within a role="menu" container, ensuring proper navigation for assistive technologies.

5. Using role="tabpanel" Inside role="tablist":
role="tabpanel" elements are correctly associated with role="tab" elements within a role="tablist", ensuring proper tabbed navigation.

Common Errors to Avoid

1. role="listitem" Without a role="list" Parent:
   role="listitem" is missing a parent with role="list", causing screen readers to misinterpret the structure.

2. role="row" Outside a role="rowgroup" or role="table":
role="row" must be contained within a role="rowgroup" or role="table". Without the proper parent, the table structure is invalid.

3. role="option" Outside a role="listbox":
role="option" elements are not contained within a role="listbox", preventing proper announcement and navigation by assistive technologies.

4. role="menuitem" Outside a role="menu":
role="menuitem" elements are not inside a role="menu" container, making the structure inaccessible for screen readers.

5. role="tabpanel" Without a role="tablist":
role="tabpanel" elements must be associated with role="tab" and contained within a role="tablist" for proper tab navigation.

Rationale

• Ensures proper semantic structure

• Enables correct interpretation by assistive technologies

• Maintains hierarchical relationships

• Critical for component functionality

• Provides necessary context for screen readers

Evaluation Method

1. Inspect the Code

   • Verify that:

     • ARIA child roles are nested within the correct parent roles.

     • Parent-child relationships follow WAI-ARIA specifications.

     • If necessary, relationships are established using attributes like aria-owns or aria-controls.
       
       

2. Test with Assistive Technology

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

     • The ARIA structure is announced correctly.

     • Interactive and navigational elements behave as expected.
       
       

Evaluation Checklist