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

Next lesson: Visually hidden heading

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies