ARIA Labels

ARIA is often the only way to add accessible labels to page elements.

The Problem

The purpose of some page elements are not immediately apparent with HTML alone. For example - graphical buttons, complex form elements, and multiple instance of sectioning elements.

The Solution

Adding ARIA labels provides additional context that assitive technologies can use to enhance the DOM accessibility tree.

Related Articles

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

before

after

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/aria/labels/before/index.html to /examples/aria/labels/after/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Accessibility Solutions - ARIA - Labels</title>
<link rel="stylesheet" href="../../../presentation.css" />
</head>
<body id="top">
<main>
<h1>ARIA Labels</h1>

<article
aria-labelledby="section-label-examples">
<header>
<h2
id="section-label-examples">Section Label Examples</h2>
<p>
Sectioning elements (<code>&lt;article></code>,
<code>&lt;aside></code>, <code>&lt;nav></code>,
<code>&lt;section></code>, etc.) that are not the only one of its
type on the page need a label, so screen reader users are able to
easily understand the content and context of the section.
</p>
</header>

<section
aria-labelledby="labelledby">
<h3
id="labelledby">Labeling Sections with Visible Content</h3>
<p>
If the section you need to label is labelled by an existing visible
element, you can use <code>aria-labelledby</code> referencing the ID
of that label.
</p>
<p>
<em
>Note: as of this writing it appears a section element labelled
this way does not appear in the VoiceOver Rotor, using
<code>aria-label</code> noted below does.</em
>
</p>
</section>

<section
aria-label="Labeling Sections using aria-label">
<h3>Labeling Sections with <code>aria-label</code></h3>
<p>
If the section you need to label doesn't have an existing visible
label to use, you can manually add a label using
<code>aria-label</code>.
</p>
</section>
</article>

<article
aria-labelledby="general-label-examples">
<header>
<h2
id="general-label-examples">General Label Examples</h2>
<p>
ARIA Labels are not limited to section elements, they can be used to
add a descriptive label to any typical HTML element that needs
better descriptive context.
</p>
</header>

<h3>Labeling a button with an icon</h3>
<p>
The button below uses a capital "X" to signify a close icon, to make
this more approachable to screen reader users we can apply an
<code>aria-label</code> to the button to be read aloud to screen
reader users.
</p>
<button
aria-label="Close">X</button>

<h3>Multiple Labels</h3>
<p>
The fieldset below is using multiple IDs in an
<code>aria-labelledby</code>, screen readers will pick up on this
extra context and say "Billing First Name", and "Billing Last Name".
</p>
<fieldset>
<legend
id="shipping-id">Billing</legend>
<div>
<div id="first-name">First Name</div>
<input type="text"
aria-labelledby="shipping-id first-name" />
</div>
<div>
<div id="last-name">Address</div>
<input type="text
" aria-labelledby="shipping-id last-name" />
</div>
</fieldset>
</article>
</main>
</body>
</html>