Sign in Get started

HTML Tutorial · HTML5 Features · Lesson 31 of 34

HTML ARIA Essentials

Use native elements first, then ARIA roles, states and live regions where HTML alone can't express what's happening.

The first rule of ARIA

Use a native HTML element if one exists. A <button> is focusable, works with Enter and Space, and is announced as a button. A <div role="button"> gets the announcement but none of the behaviour unless you add it yourself.

A clickable div vs a real buttonTry it yourself
<p>Try both with the keyboard: press Tab, then Enter.</p>
<div onclick="alert('div clicked')" style="display:inline-block;padding:6px 10px;background:#ddd;cursor:pointer">Save (div)</div>
<button onclick="alert('button clicked')">Save (button)</button>
<p>The div can't be focused or activated with the keyboard; the button can.</p>

When ARIA helps

ARIA (Accessible Rich Internet Applications) adds information that HTML can't express on its own:

Attribute Use
aria-expanded whether a toggle's content is open
aria-controls which element a control affects
aria-current="page" the current link in navigation
aria-describedby extra description, such as an error message for a field
aria-live="polite" announce updates (search results, saved messages) without moving focus
aria-label a name for an element with no visible text (an icon button)
aria-expanded and a live regionTry it yourself
<button aria-expanded="false" aria-controls="filters" id="toggle">Filters</button>
<div id="filters" hidden>
  <label><input type="checkbox"> In stock only</label>
</div>
<p aria-live="polite" id="live"></p>
<script>
  const btn = document.getElementById("toggle"), panel = document.getElementById("filters");
  btn.addEventListener("click", () => {
    const open = btn.getAttribute("aria-expanded") === "true";
    btn.setAttribute("aria-expanded", String(!open));
    panel.hidden = open;
    document.getElementById("live").textContent = open ? "Filters hidden" : "Filters shown";
  });
</script>

Things to avoid

  • Don't add role to elements that already have the right meaning (<button role="button">).
  • Never put aria-hidden="true" on something that can receive focus.
  • Don't use ARIA to fix what a native element already does better.

Test with the keyboard only (Tab, Enter, Space, Esc) and with a screen reader (NVDA, VoiceOver).

Test yourself

What is the first rule of ARIA?

  1. Add a role to every element
  2. Use a native HTML element with the right semantics and behaviour if one exists
  3. Always use aria-label instead of visible text
  4. Hide decorative text with aria-live
Show answer

Answer: Use a native HTML element with the right semantics and behaviour if one exists

Native elements bring keyboard support and correct semantics for free.