ARIA attributes must conform to valid names

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

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Start learning today

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)]

  • 4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.0 (A)]

  • 4.1.2: MUST: Name, Role, Value

How to Fix the Problem

This rule checks for the presence of an unrecognized ARIA attribute, which prevents the attribute from functioning as intended.

Ensure all ARIA attributes (as opposed to the values inside of them) used are spelled correctly and correspond to valid ARIA attribute names.

For example, aria-hidden="true" would pass, while aria-visible="rute" would fail.

Authoring Tools: Using authoring and debugging tools that compare attributes for widget roles, states, and properties to those supported in WAI-ARIA may check the validity of ARIA attributes automatically during development, but they cannot reliably eliminate the need for testing.

Related WAI-ARIA 1.1 W3C Recommendation Sections: To be certain you are using recognized attribute names and that they are spelled correctly, refer to the following sections for complete details of each ARIA attribute:

Why it Matters

If the developer uses a non-existent or misspelled ARIA attribute, the attribute will not be able to perform the accessibility function intended by the developer.

In order to allow assistive technologies to convey appropriate information to persons with disabilities, user interface elements intended to improve the accessibility and interoperability of web and application content must conform to properly spelled and current ARIA attributes.

When developers do not use attributes defined in the WAI-ARIA 1.1 W3C Recommendation, they do not properly convey user interface behaviors and structural information to assistive technologies in document-level markup.

Rule Description

ARIA attributes starting with aria- must have valid names. Referring to a misspelled attribute or to one that does not exist will result in an invalid attribute and thus failure of this rule.

The Algorithm (in simple terms)

Checks all elements that contain WAI-ARIA attributes to ensure that the attributes are valid attributes.

Resources

Deque University Course Pages (subscription required)

  • Landmark Roles
  • Widget Roles
  • Pseudo HTML Roles
  • The Document Role
  • The Application Role
  • The Presentation Role
  • The Math Role
  • The Definition Role
  • The Note Role
  • The Directory Role
  • Abstract Roles

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 - Supported States and Properties

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); }