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.

Test your site for free

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

Before (non-compliant)
<!-- 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>
After (compliant)
<!-- 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?
Only when native HTML elements are insufficient. The first rule of ARIA is: 'If you can use a native HTML element with the desired semantics and behavior, do so rather than adding an ARIA role.' Use ARIA for components that do not exist in native HTML: tabs, accordions, context menus, modals, etc.
How do I verify my ARIA attributes are correct?
Consult the WAI-ARIA Authoring Practices Guide (APG) for each component. It defines the required roles, properties, and keyboard behaviors. Test with a screen reader (NVDA is free) to verify announcements. Scrutia automatically checks ARIA attribute conformance during its audit.
aria-label vs aria-labelledby: what is the difference?
aria-label takes a text string as its value: <nav aria-label="Main navigation">. aria-labelledby references the id of another element whose text serves as the label: <section aria-labelledby="section-title"><h2 id="section-title">Our services</h2></section>. Prefer aria-labelledby when a visible heading already exists — it avoids text duplication.
Is bad ARIA worse than no ARIA?
Yes, in most cases. Incorrect ARIA creates false expectations for screen reader users. They expect behavior that does not exist, which is more disorienting than a complete absence of information. If you are unsure of your ARIA implementation, it is better not to add it and use native HTML elements.
Do React/Vue frameworks handle ARIA automatically?
No. React and Vue do not handle ARIA attributes automatically. It is up to the developer to add the correct roles, properties, and keyboard behaviors. Some component libraries (Radix UI, Headless UI, React Aria) provide accessible components by default with correctly implemented ARIA. Prefer these libraries over custom-built components.

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