ARIA Violations
What are ARIA violations and how do they break assistive technology?
What is aria violations?
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elements are insufficient. ARIA violations occur when these attributes are used incorrectly — for example, applying an invalid role, using aria-labelledby to reference a non-existent ID, or adding redundant ARIA roles to elements that already have implicit semantics.
ARIA violations occur when Accessible Rich Internet Applications attributes are used incorrectly, such as applying invalid roles, referencing non-existent IDs, or adding redundant semantics. Incorrect ARIA is often worse than no ARIA because screen readers trust these attributes to describe element behavior accurately.
Why does aria violations matter?
Incorrect ARIA is often worse than no ARIA at all. A screen reader trusts ARIA attributes to accurately describe what an element is and what state it is in. When ARIA lies — for example, marking a div as role="button" without adding keyboard handlers — the screen reader announces it as a button, but it does not behave like one. This mismatch creates a confusing and broken experience for assistive technology users.
Key statistics
Pages using ARIA averaged 41% more detectable accessibility errors than pages without ARIA, demonstrating the harm of incorrect usage.
Source: WebAIM Million
How to fix it
-
1
Follow the first rule of ARIA: if you can use a native HTML element with the semantics you need (<button>, <nav>, <dialog>), use it instead of adding ARIA roles to a generic element.
-
2
Validate that every aria-labelledby and aria-describedby value references an ID that actually exists in the DOM.
-
3
Ensure ARIA roles match the element's actual behavior. If you use role="button", the element must be focusable and respond to Enter and Space key presses.
-
4
Run an automated accessibility scanner (like axe-core) to catch common ARIA misuse patterns, then manually verify the flagged issues.
-
5
Keep ARIA attributes up to date with dynamic state changes — for example, toggle aria-expanded="true"/"false" when an accordion opens or closes.
Code example
<div role="button" onclick="submitForm()">
Submit
</div>
<!-- Not focusable, no keyboard handler, screen reader says "button" but Tab skips it --><button type="submit" onclick="submitForm()">
Submit
</button>
<!-- Native button: focusable, keyboard-operable, correct semantics automatically -->Frequently asked questions
Related topics
Keyboard Navigation
Keyboard navigation means that every interactive element on a page — links, buttons, form fields, menus, and custom widgets — can be reached and operated using only the keyboard (typically via the Tab, Enter, Space, and arrow keys). This is a fundamental accessibility requirement because many users cannot use a mouse.
Form Labels
Form labels are HTML <label> elements that programmatically associate a text description with a form input (text field, checkbox, select, etc.) using the for attribute matched to the input's id. Without a label, screen readers announce a form field as just "edit text" or "checkbox" with no indication of what information the user should enter.
Structured Data
Structured data is machine-readable markup (typically JSON-LD using the Schema.org vocabulary) embedded in your page's HTML that explicitly describes the content's type, properties, and relationships. It tells search engines and AI systems exactly what your content is — an article, a product, a recipe, an FAQ — rather than requiring them to infer it from unstructured text.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.