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.

Create a free account to save this page, take notes and track your progress. Sign in

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.

Was this page helpful?