Incorrect or missing ARIA attributes
The issue
ARIA (Accessible Rich Internet Applications) attributes allow making dynamic web components accessible to assistive technologies. WCAG success criterion 4.1.2 requires that for all user interface components, the name, role, and value can be programmatically determined, which implies correct use of ARIA attributes when native HTML elements are insufficient. The problem of incorrect ARIA takes multiple forms. Using an incorrect role is the first error: assigning role="button" to an element that behaves like a link, or role="menu" to a simple list of navigation links. Each ARIA role implies specific behaviors and keyboard interactions defined by the WAI-ARIA Authoring Practices Guide. A role="menu" implies that arrow keys navigate between items, Enter activates the selected item, and Escape closes the menu. If these behaviors are not implemented, the ARIA role is misleading and disorients the user. Missing required ARIA attributes is another common error. A tab component (role="tablist") must include role="tab" on each tab, role="tabpanel" on each panel, aria-selected to indicate the active tab, aria-controls to link each tab to its panel, and aria-labelledby to link each panel to its tab. Omitting any of these attributes breaks the screen reader experience. The first rule of ARIA is not to use it if a native HTML element does the job. A native HTML button is always preferable to a div role="button". A native HTML select is always preferable to a custom div role="listbox". ARIA does not add native functionality — it only announces information to assistive technologies. If the underlying behavior is not implemented, ARIA creates a worse experience than its absence.
Does your site have this issue?
106 RGAA criteria analyzed in 5 minutes by our AI.
Impact on users
Incorrect ARIA attributes create a dissonance between what the screen reader announces and what the component actually does. If a screen reader announces 'menu, 5 items' but arrow keys do not work, the blind user is disoriented. They expect behavior that does not exist. This is worse than no ARIA, because without ARIA the screen reader would simply announce links — and the user would know how to interact with them. Incorrect aria-expanded, aria-selected, and aria-checked attributes are particularly problematic: they indicate a state (open/closed, selected/unselected) that does not reflect reality. The user believes a menu is closed when it is open, or that a checkbox is checked when it is not. Poorly implemented ARIA is a frequent cause of accessibility audit failures because it demonstrates an attempt at conformance without the necessary rigor.
Code example
<!-- Menu with incorrect ARIA -->
<div role="menu">
<a href="/home">Home</a>
<a href="/products">Products</a>
<a href="/contact">Contact</a>
</div>
<!-- Incomplete tabs -->
<div>
<button aria-selected="true">Tab 1</button>
<button>Tab 2</button>
</div>
<div>Tab 1 content</div>
<div style="display:none">Tab 2 content</div><!-- Simple navigation: no need for role="menu" -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Tabs with complete ARIA -->
<div role="tablist" aria-label="Sections">
<button role="tab" id="tab-1" aria-selected="true"
aria-controls="panel-1">Tab 1</button>
<button role="tab" id="tab-2" aria-selected="false"
aria-controls="panel-2" tabindex="-1">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
Tab 1 content
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
Tab 2 content
</div>Frequently Asked Questions
When should I use ARIA attributes?
How do I verify my ARIA attributes are correct?
aria-label vs aria-labelledby: what is the difference?
Is bad ARIA worse than no ARIA?
Do React/Vue frameworks handle ARIA automatically?
Does your site have this issue?
Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.
Run a free audit