10 Common ARIA Mistakes in React & Next.js (And How to Fix Them)

Web developers frequently turn to ARIA (Accessible Rich Internet Applications) attributes to enhance the accessibility of complex web components. However, employing ARIA improperly can actually degrade accessibility rather than improve it. Below are the ten most common ARIA pitfalls found in React and Next.js projects, along with guidance on rectifying these issues.

1. Employing "Fake Buttons": Developers sometimes mistakenly use div elements with onClick handlers instead of native button elements. This approach fails to provide crucial keyboard interactions like Tab navigation, Enter/Space activation, and proper accessibility tree roles.

❌ Incorrect:

<div onClick={handleClick}>Submit</div>

✅ Correct:

<button type="button" onClick={handleClick}>Submit</button>

2. Superfluous ARIA Roles: Adding redundant ARIA roles to semantic HTML elements is unnecessary and can clutter the accessibility tree. Modern screen readers inherently recognize HTML5 semantic tags like nav, article, and section.

❌ Redundant:

<button role="button">Click me</button>

✅ Accurate:

<button>Click me</button>

3. Omitting aria-expanded: For collapsible accordions and dropdown menus, it's essential to communicate the current state (open or closed) to screen reader users. This attribute clarifies the panel's status.

✅ Accessible:

<button aria-expanded={isOpen} aria-controls="faq-content-1" onClick={() => setIsOpen(!isOpen)}>

What is WCAG 2.2?</button>

<div id="faq-content-1" hidden={!isOpen}>...</div>

4. Unlabeled Icon Buttons: Icon-only buttons pose challenges for screen reader users, as they receive no textual context. Assigning an aria-label resolves this issue.

❌ Unlabeled:

<button onClick={handleSearch}>SearchIcon</button>

✅ Labeled:

<button onClick={handleSearch} aria-label="Search articles">

SearchIcon aria-hidden="true"</button>

5. Hiding Focusable Elements via aria-hidden="true": If an element can be reached via keyboard, removing it from the accessibility tree leads to confusing keyboard traps known as "ghost focus."

❌ Ghost Focus Issue:

<button aria-hidden="true" onClick={openModal}>Open</button>

❗️ Recommended Practice:

Use aria-hidden="true" only on non-focusable elements (e.g., decorative icons) to prevent accessibility issues.