🎓 A1Learner
🔍

HTML ARIA Basics

ARIA is a group of attributes that add names and roles to elements for assistive tools. An assistive tool is a program that helps a person use a page, like a screen reader.

Naming a button with aria-label

The visible letter on this button is only an X. The aria-label gives the button a full name for assistive tools.

<button aria-label="Close menu">X</button>
<p>The button above closes the menu.</p>

A role names a plain box

A div element has no meaning of its own. The role value navigation tells assistive tools that the box holds navigation links.

<div role="navigation">
<a href="about.html">About</a>
<a href="blog.html">Blog</a>
</div>

A role for search

The role value search marks the part of the page that searches the site. The label inside still names the field in visible words.

<div role="search">
<label for="q">Search this site</label>
<input type="text" id="q" name="q">
</div>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bakery</title>
</head>
<body>
<h1>Bakery</h1>
<button aria-label="Open menu">Menu</button>
<nav aria-label="Main">
<a href="home.html">Home</a>
<a href="cakes.html">Cakes</a>
</nav>
<main>
<p>Fresh bread every morning.</p>
</main>
</body>
</html>

Key points

  • ARIA: Accessible Rich Internet Applications, the name for this group of attributes
  • ARIA speaks only to assistive tools, and the visible page stays the same
  • Accessible name: the name an assistive tool announces for an element
  • aria-label: an attribute that gives an element an accessible name
  • Role: an attribute value that says what kind of thing an element is

In this example, the visible page is a small bakery page. The button carries an aria-label that names it for assistive tools. The nav element carries an aria-label of Main, so a listener hears which navigation it is. The links and the paragraph print as normal text. ARIA added names behind the scenes and changed nothing on screen.

Note

Built-in elements with real labels need less ARIA, so plain HTML comes first

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does the aria-label attribute do?