Module 8: Accessibility · Lesson 6 of 7
ARIA Basics: aria-label, aria-hidden and aria-current
All lessons in Module 8
Goal: Use a few ARIA attributes to fill gaps, and know when to leave ARIA out.
Learn
ARIA attributes change what assistive technology hears. Nothing you see changes, and no behavior is added. They work like captions written for a screen reader.
You will reach for these three most:
aria-label="Play"names an element with no visible text, like an icon-only button.aria-hidden="true"hides decoration, like an icon next to a word, so nobody hears it read out as an odd symbol.aria-current="page"marks the menu link for the page you are on.
The first rule of ARIA: if a real HTML element does the job, use it. <div role="button"> sounds like a button, yet Tab can't reach it and Enter does nothing (see the lesson on keyboard and focus). A <button> works with no extra effort. Bad ARIA does more harm than none.
The short version
- ARIA changes only what assistive technology is told. It adds no styling and no keyboard behavior.
- Use a native element whenever one exists.
<button>,<nav>and<label>beat any ARIA copy of them. - For screen readers,
aria-labelreplaces an element's visible text, so save it mostly for elements that have none. - Never put
aria-hidden="true"on anything people can focus or click.
Example
<nav>
<a href="index.html">Home</a>
<a href="news.html" aria-current="page">News</a>
</nav>
<button aria-label="Close">×</button>
<button><span aria-hidden="true">★</span> Favorite</button>Your task
This music player's buttons are bare symbols, and a screen reader reads them as "black right-pointing triangle". Fix it:
- Give the three symbol buttons an
aria-label: Previous track, Play and Next track. - The Like button already has visible text, so hide its heart icon with
aria-hidden="true"on the<span>. - Mark the Player link as the current page with
aria-current="page". - Replace
<div role="button">with a real<button>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<span aria-label="Favorite">★</span>Right
<span role="img" aria-label="Favorite">★</span>A plain span or div may not carry aria-label, so screen readers can ignore it, and role="img" gives the symbol a role that can hold a name.
Wrong
<button aria-label="Submit the form">Send</button>Right
<button>Send</button>The aria-label overrides the visible word Send, so a voice control user who says "click Send" may never reach the button.
Go deeper
The W3C guide Using ARIA (opens in a new tab) lists five rules. The first is the one you just learned: prefer native HTML. The other four follow from it. Don't change a native element's meaning without good reason. Make every ARIA control work with the keyboard. Never hide focusable elements. Give every interactive element an accessible name.
There is data behind the first rule. WebAIM's yearly scan of the top million home pages keeps finding that pages using ARIA have more detected accessibility errors on average than pages without it. Each ARIA attribute promises the screen reader user something, and when the page doesn't deliver, they are worse off than with no ARIA at all.
You'll meet a few more attributes later. aria-expanded="true" or "false" on a menu button says whether its menu is open. aria-describedby links a field to a hint or error message. aria-live="polite" on a container makes screen readers announce text that changes inside it, such as Added to cart. These usually need JavaScript to update them, and the W3C ARIA Authoring Practices Guide (opens in a new tab) shows tested patterns for each widget.
To check your work, open the Accessibility panel in DevTools. It shows the role, name and states the browser actually computed, and those are what the screen reader gets.
Frequently asked questions
What is ARIA in HTML?
ARIA (Accessible Rich Internet Applications) is a W3C standard, published as the WAI-ARIA 1.2 specification (opens in a new tab): a set of role and aria-* attributes that describe elements to assistive technology such as screen readers. It can add a name, a state like expanded or current, or a role when plain HTML has no element for the job. ARIA never changes how a page looks or behaves. Its job is to fill the gaps real HTML leaves.
When should you use aria-label?
Use aria-label when an interactive element or a landmark needs a name but shows no text. Typical cases are an icon-only button (<button aria-label="Close">) and a second <nav>. Skip it on elements that already have visible text. Don't count on it for a plain <div> or <span> either: it isn't allowed there and often gets ignored.
What is the difference between aria-hidden and display: none?
display: none (or the hidden attribute) hides an element from everyone. Nobody sees it and nothing reads it. aria-hidden="true" leaves the element on screen and hides it from screen readers only. Both hidden and the aria-* attributes are listed in the global attributes reference. Use aria-hidden for decoration that sighted users see and that would be noise when read aloud, like an icon next to a word.
