This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

From WCAG WG

Status

Status

surveyed by TF

• 1 Nov 2012: Ready for WG Review

Using ARIA Label

User Agent Notes

• Jaws V.11 and greater has complete support.
• ChromeVox V.1 and greater has complete support
• VoiceOver V.3 and greater supports ???
• NVDA 2 supports Aria Describedby ???
• Window Eyes as of V.7 ???.

Applicability

As of this writing this technique applies to HTML technologies.

This technique relates to:

• [http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html Success Criterion 1.1.1 (Text Alternatives)

Description

The purpose of this technique is to provide descriptions of objects that can be read by assistive technology. The aria-label attribute provides a way to place a text label on an object, such as an button. This is called a "programmatic association" in WCAG 2. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

Examples

Example 1

The following example shows a best practice of how a aria-label could be used to distinguish two navigation landmarks in a HTML4 and XHTML 1.0 document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.

<div id="leftnav" role="navigaton" aria-label="Main Navigation">
<ul><li>...a list of links here ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Secondary Navigation">
<ul><li>...a list of links here ...</li> </ul></div>

Example 2

The following example shows a best practice of how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.

<div role="region" aria-label="weather portlet"> 
...
</div>

Example 3

Below is an example of a math ML function, using the math role, appropriate label, and MathML rendering:

<div role="math" aria-label="a times x squared plus b times x plus c equals 0">
  <math xmlns='http://www.w3.org/1998/Math/MathML'>
    <mrow>
      <mrow>
         <mrow>
            <mi>a</mi>
            <mo>⁢ <!-- invisible times --></mo>
            <msup>
              <mi>x</mi>
              <mn>2</mn>
            </msup>
         </mrow>
         <mo>+</mo>
         <mrow>
            <mi>b</mi>
            <mo>⁢ <!-- invisible times --></mo>
            <mi>x</mi>
         </mrow>
         <mo>+</mo>
         <mi>c</mi>
      </mrow>
      <mo>=</mo>
      <mn>0</mn>
    </mrow>
  </math>
</div>

Example 4

Put some more examples in here:

Resources

WAI ARIA 1.0 Authoring Practices

Related Techniques

• ARIA-XX: Using aria-labelledby to provide labels for objects.
• ARIA-XX: Using aria-label to provide labels for objects.
• G92: Providing long description for non-text content that serves the same purpose and presents the same information
• H45: Using longdesc

Tests

Procedure

1. Examine each element where a aria-label role attribute is present.
2. Examine whether the aria-label attribute is semantically executed properly.
3. Examine whether the text description accurately labels the object or provides a description of its purpose or provides equivalent information.

Expected Results

Tests #1, #2 and #3 are true.