ARIA

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that describe interface components to assistive technologies. A custom button, a tabbed system, a dynamic notification: when semantic HTML is not enough, ARIA adds the missing information. But an ARIA attribute without the corresponding behavior does more harm than good.

Your <div> works like a button. Sighted users click without issue. But a screen reader sees only an anonymous block of text. ARIA exists to fix that, and the first thing to know is when not to use it.

#When to use ARIA (and when to abstain)

The ARIA in HTML specification establishes a rule that the W3C calls the "first rule of ARIA": if a native HTML element with the desired semantics exists, use it. No ARIA.

A <button> handles focus, Enter and Space keys, and announces itself correctly to screen readers. All of that for free. Adding role="button" to a <div> forces you to recreate each of these behaviors in JavaScript.

<!-- ❌ Simulated semantics, missing behavior -->
<div role="button" onclick="save()">Save</div>
 
<!-- ✅ Native semantics, behavior included -->
<button onclick="save()">Save</button>

ARIA takes over where HTML stops: tabs, dropdowns, modals, dynamic notification zones. The W3C APG documents each pattern with its structure, keyboard handling, and required attributes.

#The mistake that shows up on every project

Adding an ARIA attribute without providing the corresponding behavior. That's lying to the screen reader.

aria-expanded="false" on an accordion button? The screen reader announces "collapsed". If a click opens the panel without JavaScript toggling the value to true, the user still hears "collapsed" in front of visible content. The interface says one thing, the screen shows another.

Same trap with redundancy. A <nav role="navigation"> only clutters the code: <nav> already carries the navigation role.

Every ARIA attribute is a contract. If you declare a state, keep it in sync. If you assign a role, provide the expected keyboard behavior.

#In summary

Semantic HTML first. ARIA only when native HTML doesn't cover the need. And every ARIA attribute you add must be backed by JavaScript that keeps its promise.