Redundant ARIA
Native HTML semantics are overridden or repeated, increasing complexity without accessibility gains.
Try It Yourself
This simulator is intentionally broken. Recreate the failure path, capture evidence, and validate the fix with the same sequence.
Scenario
In a high-pressure workflow, Engineering teams try to complete a core task and hit this failure pattern.
Watch For
- No user value added, but markup complexity increases.
- Potential inconsistent announcements in edge AT combinations.
Done When
- Native semantics are used first, with ARIA only when required.
- Redundant role attributes are removed from semantic elements.
Scenario
A person in this audience group is trying to complete a core task quickly and encounters this failure pattern.
Guided Run Progress
0 / 5 steps marked
Track setup, action, and failure signals as you run the simulation.
Quick Run Checklist
Demo warning
Redundant ARIA can add noise and confusion for maintainers and sometimes for assistive technologies.
How to trigger the issue
Compare native semantic markup with the noisy ARIA-overloaded version to see unnecessary verbosity.
Rendered noisy markup
Native elements already expose these semantics. Added roles create noisy redundancy.
Broken code pattern
<button role="button">Save</button>
<nav role="navigation" aria-label="Primary navigation">...</nav>Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- Open markup comparison panel.
- Review native element behavior before checking ARIA-heavy variant.
2. Reproduction Steps
- Inspect duplicate roles on native semantic elements.
- Compare announcement output between native and redundant variants.
- Evaluate maintainability overhead in repetitive patterns.
3. Expected Failure Signals
- No user value added, but markup complexity increases.
- Potential inconsistent announcements in edge AT combinations.
- Developers may copy ineffective patterns across codebase.
4. Fix Verification
- Native semantics are used first, with ARIA only when required.
- Redundant role attributes are removed from semantic elements.
- Team patterns document when ARIA is truly necessary.
Evidence Capture Checklist
- Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
- Capture screen recording + keyboard path from first interaction to failure state.
- Map failure to WCAG 4.1.2 (Level A) and affected user groups.
- Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.
The Impact
What Happens
- Code maintenance burden increases
- Team accessibility understanding erodes
- Potential announcement duplication appears
Who Gets Hurt
The Broken Code
<button role="button" aria-pressed="false">Save</button>
<nav role="navigation" aria-label="Main navigation">
...
</nav>
<!-- Native semantics already provide these roles -->WCAG 4.1.2: Reference
"For all user interface components, the name and role can be programmatically determined."
Level A - Clean semantic HTML should be the default. ARIA is a supplement, not decoration.
Related Low Issues
Explore neighboring failures in the same severity band.