Web checklist

Checkpoint AA2.4.6: *WCAG 2.0 AA* Headings and Labels

Headings and labels describe topic or purpose.


Rationale

Descriptive headings enable users to easily navigate to sections of interest, understand the structure of the Web page and how all the content is related. Descriptive headings help people with cognitive disabilities to read and understand content better. Because screen reader users often use headings to navigate a page, the headings must make sense when read out of context and they must accurately describe the content that follows them. Descriptive headings also help low-vision users focus on relevant content.

Descriptive labels help users identify specific elements in the content. Screen reader users are able to understand the purpose of an <input> element when descriptive labels are programmatically associated with each <input> element. Descriptive labels for other elements in the content enable all users to more easily understand the structure and information on the Web page.

Required development and unit test techniques


To comply with this checkpoint, you must meet all the following techniques. These techniques are defined in WCAG 2.0 Level AA Success Criterion 2.4.6 (link resides outside of ibm.com).

  1. Descriptive headings: Provide descriptive headings.
  2. Descriptive labels: Provide a descriptive label to clarify an interactive element's purpose.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

Applications that provide WAI-ARIA must add the following statement to the checkpoint comments column of the Web Accessibility Checklist:

Note: This product uses WAI-ARIA to comply with this checkpoint. WAI-ARIA is supported on Windows using Firefox version 3.6 or later and JAWS version 12 or later, and supported on iOS v5.0 and later using Safari and VoiceOver.

General examples

  1. Descriptive headings: Provide descriptive headings.

    To comply with technique 1, you must implement the following example.

    General example 1

    A page that describes animal care at a pet shelter may have the following headings:
    <h1>Animal care</h1>
    <h2>Dog care</h2>
    <h2>Cat care</h2>

    The dog and cat care headings are organized under the animal care main heading and provide specific care information for each type of animal.

    Required unit test for general development technique 1

    Use available tools to determine if the page or site contains headings.

  2. Descriptive labels: Provide a descriptive label to clarify an interactive element's purpose.

    To comply with technique 2, you must implement all of the following examples.

    General example 2

    A form asks for a person's first and last name. The input elements are descriptively labeled "First name" and "Last name." The labels and fields are programmatically associated via the for attribute of the label element.

    <form>
         <label for="name1">First name</label>
         <input name="name1" id="name1" size="30" />
         <label for="name2">Last name</label>
         <input name="name2" id="name2" size="30" />
    </form>

    General example 3

    A form asks for a person's email address and the form cannot be submitted until the user enters an address. You must have a visible indication of which fields are required that is included in the label of the interactive element. This is typically accomplished using an '*' in the label of the element, but the use of '(required)' is also acceptable. Additionally, IBM accessibility guidelines require the aria-required="true" attribute to ensure that screen readers will announce that this is a required field.

    The following code examples demonstrate two of the acceptable ways to indicate an input element is required. You can use an '*' in the label for the input element as follows:

    <form>
         <label for="email">* Email address</label>
         <input name="email" id="email" size="30" aria-required="true"/>
    </form>

    Alternatively, you can use '(required)' to indicate a required field as follows:

    <form>
         <label for="email">Email address (required)</label>
         <input name="email" id="email" size="30" aria-required="true"/>
    </form>

    For additional information on descriptive headings, refer to WCAG 2.0 examples for providing descriptive headings (link resides outside of ibm.com). For additional information on descriptive labels and labeling required fields, refer to WCAG 2.0 examples for providing descriptive labels and labeling required fields (link resides outside of ibm.com).

    Required unit tests for general development technique 2

    Use available tools to locate the interactive elements in the content. Manually review each interactive element, identify the purpose of the component and confirm the following:


Recommended development techniques

Although you are not required to implement the recommended techniques in order to comply with this checkpoint, you should review these techniques because they can improve the accessibility and usability of the application. Refer to WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 2.4.6 (link resides outside of ibm.com) for a list of techniques and examples.


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.