Fix · Moderate · should fix soon
How to fix: ARIA misuse and conflicting roles
Custom components break in screen readers because of conflicting or invalid ARIA. ARIA overrides native semantics. Wrong ARIA is worse than no ARIA.
- WCAG references
- 4.1.2
- Severity
- Moderate
What it looks like in the wild
Custom components break in screen readers because of conflicting or invalid ARIA.
The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.
Why it fails WCAG
ARIA overrides native semantics. Wrong ARIA is worse than no ARIA.
Map this back to 4.1.2 when you log the bug. Auditors and procurement teams expect that mapping; "broken" is not enough context.
The wrong pattern (avoid)
<a role="button" href="#" onclick="...">Save</a>The right pattern (copy this)
<button type="button" onclick="...">Save</button>Notes from real audits
First rule of ARIA: do not use ARIA when native HTML will do.
Related fixes
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.