Certain ARIA roles must contain particular children

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

Build more accessible websites with axe DevTools Pro

Find and fix more issues with Intelligent Guided Tests™ by answering a series of simple questions about your page content. Free trial. No credit card needed.

Compliance Data & Impact

User Impact

Critical
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (A)]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.0 (A)]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.2 (A)]

  • 1.3.1: MUST: Info and Relationships

    How to Fix the Problem

    Ensure elements including explicit or implicit ARIA roles include required children elements.

    The following attribute values indicate relationships between element that cannot be readily determined from the document structure. The relationships are linked to characteristics tables that list explicit and implicit role attribute values as well as role attribute values inherited by nested children elements.

    For similar (opposite) information, refer to Certain ARIA roles must be contained by particular parents.

    Why it Matters

    For each role, WAI-ARIA explicitly defines which child and parent roles are allowable and/or required. ARIA roles missing required child roles will not be able to perform the accessibility functions intended by the developer.

    Assistive technology needs to convey the context to the user. For example, in a treeitem, it is important to know the parent (container), item, or siblings in the folder. This can be done in two ways:

    1. Code order or DOM: The necessary context is often clear from the code order or DOM.
    2. ARIA: ARIA (such as aria-owns) can be used provide the relationships when the hierarchy is not the same as the code structure or DOM tree.

    Rule Description

    Some ARIA parent role values applied to elements must contain specific child elements and role values to perform intended accessibility function.

    The Algorithm (in simple terms)

    Checks all elements that contain a WAI-ARIA role to ensure that all required children roles are present.

    Resources

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.8 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: