Invalid ARIA attribute name
aria/attribute-unknown
- WCAG success criterion
- 4.1.2 (level A)
- Outcome class
- Automatic. An automated check that can report a confirmed violation.
- Area
- Accessibility, Technical Robustness
- Default severity
- high
- axe-core rule
aria-attr-name-invalid
Why we flag this
Assistive technologies ignore the attribute entirely.
Attribute name does not exist in the ARIA specification.
What the rule checks
Scope. Every attribute whose name starts with aria- on an element in the accessibility tree.
Expectation. Fails for each aria-* attribute that WAI-ARIA does not define (typically a typo such as aria-describeby): the browser ignores it and the intended relationship or state is lost. Attributes from the WAI-ARIA 1.3 draft that browsers already map (aria-description, aria-braillelabel, ...) are defined and pass. Hidden subtrees are not exposed and are out of scope; content that becomes visible or is changed by script is judged as rendered. One finding per unknown attribute.
Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; WAI-ARIA 1.2 section 6.6 (definitions of states and properties)
Detection: shared; needs dom, ax_tree.
Failing example
The check reports a violation here. Corpus case aria_attribute_validation. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ARIA attribute validation corpus case</title>
</head>
<body>
<main>
<h1>Various ARIA attribute misuses</h1>
<!-- aria-attr-name-invalid: not a real ARIA attribute -->
<div aria-nonexistentattr="true">Unknown ARIA attribute</div>
<!-- aria-prohibited-attr: aria-label is prohibited on role="presentation" -->
<span role="presentation" aria-label="Redundant label">Decorative span</span>
<!-- aria-allowed-attr: aria-checked is not allowed on role="img" -->
<div role="img" aria-checked="true" aria-label="Icon">Icon</div>
<!-- aria-roles: not a real ARIA role -->
<div role="not-a-real-role">Invalid role value</div>
<!-- aria-valid-attr: aria-controls present but empty -->
<button aria-controls="" aria-label="Toggle">Toggle</button>
<!-- aria-valid-attr-value: aria-labelledby references a non-existent id -->
<p aria-labelledby="does-not-exist">Broken reference</p>
<!-- aria-required-parent: role="tab" outside a tablist -->
<div role="tab" tabindex="0">Orphan tab</div>
<!-- aria-hidden-focus: a focusable element inside aria-hidden -->
<div aria-hidden="true">
<button tabindex="0">Hidden but still focusable</button>
</div>
<!-- aria-invalid-without-describedby -->
<label for="email-field">Email</label>
<input id="email-field" type="email" aria-invalid="true">
</main>
</body>
</html>Passing example
The check passes here and reports nothing. Corpus case aria_attrs_valid. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Account settings - Example shop</title>
</head>
<body>
<header>
<p>Example shop</p>
</header>
<main>
<h1>Account settings</h1>
<h2>Contact</h2>
<!-- Correctly spelled attributes; aria-description is a WAI-ARIA 1.3
attribute that browsers already map -->
<label for="email">E-mail address</label>
<input id="email" type="email" autocomplete="email" aria-describedby="email-hint" aria-description="Required for orders">
<p id="email-hint">We only use it for order confirmations.</p>
<!-- The referenced hint exists but is hidden: referring to hidden
content is allowed (accname 1.2, step 2B) -->
<label for="phone">Phone number</label>
<input id="phone" type="tel" autocomplete="tel" aria-describedby="phone-hint">
<p id="phone-hint" hidden>Only used for delivery questions.</p>
<!-- aria-errormessage only matters while aria-invalid is true -->
<label for="zip">Postal code</label>
<input id="zip" type="text" autocomplete="postal-code" aria-invalid="false" aria-errormessage="zip-error">
<!-- Valid tokens, including the boundary values of each value type -->
<button type="button" id="mute" aria-pressed="mixed">Mute notifications</button>
<button type="button" id="filter" aria-expanded="undefined">Filter</button>
<div id="privacy-heading" role="heading" aria-level="3">Privacy</div>
<div id="storage" role="meter" aria-label="Storage used" aria-valuenow="2.5" aria-valuemin="0" aria-valuemax="1e1">2.5 of 10 GB</div>
<a href="/settings" id="current" aria-current="page">Settings</a>
<!-- Attributes the role supports; a native checkbox with ARIA it does
not duplicate -->
<input type="checkbox" id="agree" aria-describedby="agree-hint">
<label for="agree">Share my wish list</label>
<p id="agree-hint">Friends with the link can see it.</p>
<div role="checkbox" id="newsletter" tabindex="0" aria-checked="false" aria-label="Newsletter"></div>
<!-- Naming is allowed on region and navigation -->
<section id="data-section" aria-label="Your data">
<p id="lead">Your data stays with us.</p>
</section>
<!-- Each group owns a different element -->
<div role="group" id="owner-a" aria-label="Billing" aria-owns="billing-address"></div>
<div role="group" id="owner-b" aria-label="Shipping" aria-owns="shipping-address"></div>
<p id="billing-address">Main Street 1, 12345 Sampletown</p>
<p id="shipping-address">Harbour Road 7, 12345 Sampletown</p>
<!-- Collapsed: the controlled panel may only be created on opening
(WAI-ARIA 1.2 combobox/disclosure, ACT 6a7281) -->
<button type="button" id="more-btn" aria-expanded="false" aria-controls="more-panel">More options</button>
<button type="button" id="less-btn" aria-expanded="true" aria-controls="less-panel">Fewer options</button>
<div id="less-panel">Only the essentials are shown.</div>
</main>
<footer>
<p>Example shop</p>
</footer>
</body>
</html>This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.