I Learned The First Rule of ARIA the Hard Way

The Pitfalls of Overusing ARIA

A developer shipped a seemingly accessible component, passing all automated tests and keyboard navigation checks, but a screen reader user couldn’t interact with it. The root cause was an unnecessary role="link" attribute added to a <button> element, demonstrating how ARIA can introduce ambiguity when used to supplement existing semantic HTML.

Why This Matters

The ideal model assumes developers correctly implement ARIA to enhance accessibility, but reality shows ARIA is often misused, leading to degraded user experiences. Poorly implemented ARIA can introduce conflicts with native element behavior, creating confusion for assistive technologies and ultimately increasing the cost of remediation – a single accessibility bug can impact a significant percentage of users, and legal repercussions for non-compliance are substantial.

Key Insights

• ARIA is not a replacement for semantic HTML: Adding ARIA roles to elements that already have appropriate semantic meaning can break accessibility.
• Native elements have built-in accessibility: Browsers provide default accessibility features for semantic HTML elements like <button> and <a>.
• aria-expanded for dynamic state: ARIA is best used to communicate missing state or dynamic changes, like the expanded/collapsed state of a widget.

Working Example

const button = document.getElementById("toggle");
const panel = document.getElementById("panel");
button.addEventListener("click", () => {
const expanded = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", !expanded);
panel.hidden = expanded;
});

Practical Applications

• Disclosure Widget: Use a native <button> with aria-expanded to indicate whether a collapsible panel is open or closed.
• Pitfall: Using role="link" on a <button> to style it like a link can break expected keyboard behavior and confuse screen readers.

References:

• https://css-tricks.com/i-learned-the-first-rule-of-aria-the-hard-way/