ARIA basics
Use role, aria-label, aria-labelledby and aria-describedby.
What is ARIA?
Sometimes a tag alone does not tell an element's purpose. A <div> might open a menu on click, but that fact is not visible. ARIA (Accessible Rich Internet Applications) steps in here: it adds attributes that give screen readers extra information.
The most common are: role names the element's job, aria-label gives a short name, aria-labelledby points at another element for the name, and aria-describedby adds an extra description.
The role attribute
The role attribute states an element's job explicitly. For example role="navigation" means a menu, role="search" a search box, role="button" a button.
Semantic tags already carry their role, so adding role="navigation" inside <nav> is redundant. Use ARIA only when HTML does not carry the role: role="button" on a clickable <div>, for instance.
Naming attributes
There are three ways to give an element an accessible name: aria-label writes the short text directly; aria-labelledby points at another element's id and uses its text as the name; aria-describedby does the same to attach an extra description.
Example: <section aria-labelledby="title"> takes the section's name from a <h2 id="title"> on the page. The name is not duplicated then; it can change in one place.
Exercise Add aria-labelledby to a section
Add a <section> to body. Add the aria-labelledby="title" attribute to the section. Inside the section put an <h2 id="title"> with the text Section title.
Show example solution
<body>
<section aria-labelledby="title">
<h2 id="title">Section title</h2>
</section>
</body>Test yourself
-
Which of these is NOT an ARIA attribute?
- aria-label
- role
- placeholder
- aria-describedby
Show answer
placeholder — Correct. placeholder is an input attribute, not ARIA.
-
Complete the role attribute
<div ____="navigation"> <a href="/home">Home</a> </div>Show answer
<div role="navigation"> <a href="/home">Home</a> </div> -
Match each attribute to its purpose
- aria-label
- Writes a short name directly
- aria-labelledby
- Takes the name from an id
- aria-describedby
- Links an extra description
- role
- States the role