Certain ARIA roles must contain particular children

Rule ID: aria-required-children
Ruleset: axe-core 4.7
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A)

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Learn More about Deque University

Compliance Data & Impact

User Impact

Critical
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)

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

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)

  • ARIA Concepts
  • Role
  • ARIA Widget Examples

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

  • Accessible Rich Internet Applications (WAI-ARIA) 1.1 - The Roles Model

Refer to the complete list of axe 4.7 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:

'; document.getElementById("form_message").innerHTML = checkMarkAnimation + msg + "
"; if (!!window.MSInputMethodContext && !!document.documentMode ) document.getElementById("form_message").innerHTML = checkMark + msg + "
"; else document.getElementById("form_message").innerHTML = checkMarkAnimation + msg + "
"; } if(type === "warning" ) { document.getElementById("form_message").style.color = "#916216"; document.getElementById("form_message").innerHTML = warningIcon + msg + "
"; } if(type === "error" ) { document.getElementById("form_message").style.color = "#b40909"; document.getElementById("form_message").innerHTML = errorIcon + msg + "
"; } document.getElementById("form_message").tabIndex = -1; document.getElementById("form_message").focus(); } function clearMessage() { document.getElementById("form_message").innerHTML = ""; } function showFeedbackForm() { document.getElementById("feedback-form").className = ""; document.getElementById("feedback-info").className = "deque-hidden"; document.getElementById("yesButton").focus(); setTimeout((function (){ document.getElementById("yesButton").focus(); }), 5000); } function hideFeedbackForm() { if( feedbackData ) { document.getElementById("feedback-info").className = ""; showMessage("You have cancelled editing your earlier feedback.", "warning"); } document.getElementById("feedback-form").className = "deque-hidden"; document.getElementById("yesButton").style.display = ""; document.getElementById("noButton").style.display = ""; document.getElementById("noFeedback").className = "deque-hidden"; setTimeout((function() { clearMessage(); }), 4000); }