I Learned The First Rule of ARIA the Hard Way | CSS-Tricks

"Some time ago, I shipped a component that felt accessible by every measure I could test. Keyboard navigation worked. ARIA roles were correctly applied. Automated audits passed without a single complaint. And yet, a screen reader user couldn't figure out how to trigger it. When I tested it myself with keyboard-only navigation and NVDA, I saw the same thing: the interaction simply didn't behave the way I expected."

"Nothing on the checklist flagged an error. Technically, everything was "right." But in practice, the component wasn't predictable. Here's a simplified version of the component that caused the issue: As you can see in the demo, the markup is not at all complicated: <button class="cta" role="link">Save changes</button> And the fix was much easier than expected. I had to delete the ARIA role attribute that I had added with the best intentions."

A component passed automated accessibility audits and keyboard navigation but was still unusable for a screen reader user. Keyboard-only testing with NVDA reproduced the unexpected interaction. The markup used a native button element with an ARIA role of link (<button class="cta" role="link">Save changes</button>), which altered how assistive technology interpreted the control. Removing the ARIA role restored predictable behavior. Semantic HTML supplies many accessibility features and interaction semantics that ARIA can unintentionally override. ARIA should be used only when native element semantics do not already provide the needed accessibility.

Read at CSS-Tricks