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.

Live Examples

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

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>