A11Y Solutions
Provides auto-suggestions when entering text


    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.

    Please note that this Before example contains inaccessible code, use this link to skip to the After Live Example



    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.


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

    <!DOCTYPE html>
    <html lang="en">
    <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" />
    <body id="top">
    <h1>ARIA Labels</h1>

    id="section-label-examples">Section Label Examples</h2>
    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.

    id="labelledby">Labeling Sections with Visible Content</h3>
    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.
    >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

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

    id="general-label-examples">General Label Examples</h2>
    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.

    <h3>Labeling a button with an icon</h3>
    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.

    <h3>Multiple Labels</h3>
    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".
    <div id="first-name">First Name</div>
    <input type="text"
    aria-labelledby="shipping-id first-name" />
    <div id="last-name">Address</div>
    <input type="text
    " aria-labelledby="shipping-id last-name" />