Techniques for WCAG 2.0

# HTML and XHTML Techniques for WCAG 2.0

This Web page lists HTML and XHTML Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0. For a list of techniques for other technologies, see the Table of Contents.

## H2: Combining adjacent image and text links for the same resource

### Applicability

HTML and XHTML documents that contain links.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

### Description

This objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a link are contained in a document.

Many kinds of links have both a text and iconic link adjacent to each other. Often the text and the icon link are rendered in separate links, in part to create a slight visual separation from each other. Visually they appear to be the same link, but they are experienced by many people as two identical links and this can be confusing. To avoid this, some authors omit alternative text from the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link. The preferred method to address this is to put the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text.

Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.

### Examples

#### Example 1

The icon and text are contained in the same `a` element.

Example Code:

     <a href="products.html">
       <img src="icon.gif" alt="" />
       Products page
     </a>

#### Example 2

A link contains an icon and text, and the site help refers to the icon. The `img` has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.

Example Code:

    <a href="foo.htm">
      <img src="house.gif" alt="home page icon"/>
      Go to the home page
    </a>

#### Failure Example 3

This example demonstrates a failure to apply this technique. An icon and text link are side by side. The text alternative for the image is the same as the text link beside it, leading to a "stutter" effect as the link is read twice.

Example Code:

    <a href="products.html">
       <img src="icon.gif" alt="Products page" />
     </a>
     <a href="products.html">
       Products page
     </a>

#### Failure Example 4

This example demonstrates a failure to apply this technique. An icon and text link are side by side. In an attempt to remove the "stutter" the text alternative for the image is null. However, now one of the links has an unknown destination, which is its own link text problem.

Example Code:

    <a href="products.html">
       <img src="icon.gif" alt="" />
     </a>
     <a href="products.html">
       Products page
     </a>

#### Failure Example 5

This example demonstrates an incorrect implementation of this technique. The icon and text are contained in the same a element. However, the text alternative for the icon is a duplicate of the link text, leading to a "stutter" effect as the description is read twice.

Example Code:

    <a href="products.html">
      <img src="products.gif" alt="Products page"/>
      Products page
    </a>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 - how to specify alt text

### Related Techniques

- G91: Providing link text that describes the purpose of a link
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- H30: Providing link text that describes the purpose of a link for anchor elements
- C9: Using CSS to include decorative images
- F89: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link

### Tests

#### Procedure

For each `a` in the content that contains an `img` element:

1. Check that there is no adjacent `a` element that has the same `href` attribute and the same description

For each `a` in the content that is contained in a table:

1. Check that there is no `a` element in an adjacent table cell that has the same `href` attribute and the same description

#### Expected Results

- All checks above are true.

## H4: Creating a logical tab order through links, form controls, and objects

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.3 (Focus Order)
  - How to Meet 2.4.3 (Focus Order)
  - Understanding Success Criterion 2.4.3 (Focus Order)

### Description

The objective of this technique is to provide a logical tab order when the default tab order does not suffice. Often, G59: Placing the interactive elements in an order that follows sequences and relationships within the content is sufficient and this technique is not necessary. It can be very easy to introduce usability bugs when setting the tab order explicitly.

In some cases, the author may want to specify a tab order that follows relationships in the content without following the order of the interactive elements in the code. In these cases, an alternative order can be specified using the `tabindex` attribute of the interactive element. The `tabindex` is given a value between 0 and 32767.

When the interactive elements are navigated using the tab key, the elements are given focus in increasing order of the value of their `tabindex` attribute. Elements that have a `tabindex` value higher than zero will receive focus before elements without a `tabindex` or a `tabindex` of 0. After all of the elements with a tabindex higher than 0 have received focus, the rest of the interactive elements are given focus in the order in which they appear in the Web page.

### Examples

#### Example 1

A genealogical search form searches for marriage records. The search form includes several input fields for the bride and the groom. The form is marked up using a data table that includes the fields of the groom in the first column and the fields of the bride in the second column. The order in the content is row by row but the author feels it is more logical to navigate the form column by column. This way, all the groom's criteria can be filled in before moving on to the bride's criteria. The `tabindex` attributes of the input fields are used to specify a tab order that navigates column by column.

Example Code:

    <form action="#" method="post">
     <table summary="the first column contains the search criteria
      of the groom, the second column the search criteria of
      of the bride">
     <caption>Search for marriage records</caption>
     <tr>
       <th>Search criteria</th>
       <th>Groom</th>
       <th>Bride</th>
     </tr>
     <tr>
      <th>First name</th>
      <td><input type="text" size="30" value="" name="groomfirst"
          title="First name of the groom" tabindex="1"></td>
      <td><input type="text" size="30" value="" name="bridefirst"
           title="First name of the bride" tabindex="4"></td>
     </tr>
     <tr>
      <th>Last name</th>
      <td><input type="text" size="30" value="" name="groomlast"
          title="Last name of the groom" tabindex="2"></td>
      <td><input type="text" size="30" value="" name="bridelast"
          title="Last name of the bride" tabindex="5"></td>
     </tr>
     <tr>
      <th>Place of birth</th>
      <td><input type="text" size="30" value="" name="groombirth"
          title="Place of birth of the groom" tabindex="3"></td>
      <td><input type="text" size="30" value="" name="bridebirth"
          title="Place of birth of the bride" tabindex="6"></td>
     </tr>
    </table>
    </form>

#### Example 2

A Web page contains a search field in the upper right corner. The field is given tabindex="1" so that it will occur first in the tab order, even though it is not first in the content order.

#### Example 3

`Tabindex` values need not be sequential nor must they begin with any particular value. The values do not have to be unique. Elements that have identical `tabindex` values are navigated in the order they appear in the character stream. So in the following example, the tab order would be one, three, two, four.

Example Code:

    <a href="" tabindex="1">one</a>
     <a href="" tabindex="2">two</a>
     <a href="" tabindex="1">three</a>
     <a href="" tabindex="2">four</a>

In sections of the content where the tab order follows the content order, it can be less error prone to give all elements the same tabindex value rather than specifying a different number for each element. Then it is easy to rearrange those elements or add new elements and maintain a logical tab order.

Example Code:

     <a href="xxx" tabindex = "1">First link in list</a>
    <a href="xxx" tabindex = "1">Second link in list</a>
    <a href="xxx" tabindex = "1">Link that was added long
      after the original list was created</a>
    <a href="xxx" tabindex = "1">Third link in list</a>
      ...
    <a href="xxx" tabindex = "1">Twentieth link in list</a>

### Resources

Resources are for information purposes only, no endorsement implied.

- Tabbing navigation in the HTML 4.01 specification

### Related Techniques

- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability
- F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

### Tests

#### Procedure

1. Check if `tabindex` is used

2. If `tabindex` is used, check that the tab order specified by the `tabindex` attributes follows relationships in the content.

#### Expected Results

- Check #2 is true.

## H24: Providing text alternatives for the `area` elements of image maps

### Applicability

HTML and XHTML Documents that contain `area` elements.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

### User Agent and Assistive Technology Support Notes

The HTML 4.01 specification explains that the text of the `alt` attribute is to be displayed when the element cannot be rendered normally. User Agents will display the `alt` attribute text when images are not displayed. However, currently, visual User Agents do not display the alt attribute text for area elements of image maps when accessed by keyboard or when images are not displayed, and may clip the area elements if the intrinsic size of the image is not used. In addition, the display of alt attribute text in response to mouse-hover does not display in the font size or color combination set in the User Agent.

The `title` attribute is meant to provide additional information. However, current implementation in User Agents is access to either the title or alt attribute, but not both. User Agents generally will display the `title` attribute text when the mouse is placed over the element containing the `title` attribute. For example, Internet Explorer will display the `alt` text on mouse-over if there is no `title` text, Firefox and Opera only display the `title` text on mouse-over and do not use the `alt` attribute text for this purpose. Thus, to ensure the alt attribute text is visible on mouse-over, the same text should be used on the title attribute.

Therefore, when using image maps, successful implementation of this technique would require either:

- Ensuring the area element alt attribute value is displayed in response to attaining focus (including keyboard focus), and that this applies both to situations where images are loaded and not loaded. OR

- A redundant mechanism serving the same purpose as the area elements is present in the Web Page.

### Description

The objective of this technique is to provide text alternatives that serve the same purpose as the selectable regions of an image map. An image map is an image divided into selectable regions defined by `area` elements. Each area is a link to another Web page or another part of the current Web page. The `alt` attribute of each `area` element serves the same purpose as the selectable area of the image.

### Examples

#### Example 1

This example uses the `alt` attribute of the `area` element to provide text that describes the purpose of the image map areas.

Example Code:

    <img src="welcome.gif" usemap="#map1"
        alt="Areas in the library. Select an area for
    more information on that area." />
    <map id="map1" name="map1">
      <area shape="rect" coords="0,0,30,30"
        href="reference.html" alt="Reference" />
      <area shape="rect" coords="34,34,100,100"
        href="media.html" alt="Audio visual lab" />
    </map>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 client-side image maps

- HTML 4.01 - how to specify alt text

### Related Techniques

- G91: Providing link text that describes the purpose of a link
- H30: Providing link text that describes the purpose of a link for anchor elements

### Tests

#### Procedure

For each `area` element in an image map:

1. Check that the `area` element has an `alt` attribute.

2. Check that the text alternative specified by the alt attribute serves the same purpose as the part of image map image referenced by the `area` element of the imagemap.

#### Expected Results

- The above checks are true.

## H25: Providing a title using the title element

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.2 (Page Titled)
  - How to Meet 2.4.2 (Page Titled)
  - Understanding Success Criterion 2.4.2 (Page Titled)

### Description

All HTML and XHTML documents, including those in individual frames in a frameset, have a `title` element in the `head` section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.

Note that the (mandatory) `title` element, which only appears once in a document, is different from the `title` attribute, which may be applied to almost every HTML and XHTML element.

### Examples

#### Example 1

This example defines a document's title.

Example Code:

    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>The World Wide Web Consortium</title>
       </head>
       <body>
          ...
       </body>
    </html>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 TITLE element

### Related Techniques

- G88: Providing descriptive titles for Web pages
- G127: Identifying a Web page's relationship to a larger collection of Web pages

### Tests

#### Procedure

1. Examine the source code of the HTML or XHTML document and check that a non-empty `title` element appears in the `head` section.

2. Check that the `title` element describes the document.

#### Expected Results

- Checks 1 and 2 are true.

## H27: Providing text and non-text alternatives for `object`

### Applicability

Documents that load media with the `object` element, when the media format is not an accessibility-supported content technology.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### Description

If `object` is used, provide a text alternative in the content of the element:

### Examples

#### Example 1

This example shows a text alternative for a Java applet using the `object` element.

Example Code:

    <object classid="java:Press.class" width="500" height="500">
      As temperature increases, the molecules in the balloon...
    </object>

#### Example 2

This example takes advantage of the fact the `object` elements may be nested to provide for alternative representations of information.

Example Code:

    <object classid="java:Press.class" width="500" height="500">
      <object data="Pressure.mpeg" type="video/mpeg">
        <object data="Pressure.gif" type="image/gif">
          As temperature increases, the molecules in the balloon...
        </object>
      </object>
    </object>

### Resources

Resources are for information purposes only, no endorsement implied.

HTML 4.01 OBJECT element

### Related Techniques

- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- H53: Using the body of the object element
- H46: Using noembed with embed

### Tests

No tests available for this technique.

## H28: Providing definitions for abbreviations by using the abbr and acronym elements

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.1.4 (Abbreviations)
  - How to Meet 3.1.4 (Abbreviations)
  - Understanding Success Criterion 3.1.4 (Abbreviations)

### User Agent and Assistive Technology Support Notes

- Assistive technologies provide different levels of support for speaking title attributes. Some do not include features that allow users to access information provided via the title attribute.

- Implementing this technique with the `title` attribute is only sufficient if the `title` attribute is accessibility supported. The content of the `title` attribute needs to be available to all keyboard users (not only those with text-to-speech software) for this attribute to be accessibility supported.

- JAWS 6.2 and higher and WindowEyes 5.0 and higher support the abbr and acronym elements. They can all be set to speak the title attribute when these elements are encountered, but this is not the default setting and is often not turned on by users.

- Many graphical user agents render text enclosed within an `abbr` or `acronym` element with a dotted line below or surrounding it. In addition, when the mouse hovers over the element, the expansion is displayed as a tool tip.

- In Internet Explorer 7 and below, items marked using the `abbr` element are not displayed with any additional formatting. For IE 6 and below, the expanded version does not display as a tooltip when the mouse hovers over the item.

- Within a given user agent or assistive technology, `abbr` and `acronym` elements are presented to users in the same way.

### Description

The objective of this technique is to provide expansions or definitions for abbreviations by using the `abbr` and `acronym` elements.

It is always appropriate to use the `abbr` element for any abbreviation, including acronyms and initialisms. When using HTML and XHTML, initialisms and acronyms may be marked up using the `acronym` element. XHTML 2.0 proposes eliminating the `acronym` element in favor of the more general `abbr` element.

### Examples

#### Example 1: Using abbr element to expand abbreviations.

Example Code:

    <p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p>
    <p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>

#### Example 2: Using abbr element to define abbreviations.

Example Code:

    <p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr>
    The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit
    brought by members of the National Writers Union against ......</p>

#### Example 3: Using the acronym element to expand an acronym

Example Code:

     <p>The use of <acronym title="Keep It Simple Stupid">KISS</acronym> became popular in ...</p>

#### Example 4: Using the acronym element to expand an initialism

Example Code:

     <p><acronym title="World Wide Web">WWW</acronym></p>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 ABBR element

- XHTML 2.0 abbr element

### Related Techniques

- G102: Providing the expansion or explanation of an abbreviation

### Tests

#### Procedure

1. Check that an expansion or definition is provided for each abbreviation via `abbr` or `acronym`.

#### Expected Results

- Check #1 is true.

## H30: Providing link text that describes the purpose of a link for anchor elements

### Applicability

HTML and XHTML documents that contain links, (<a href> elements)

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

### Description

The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the `a` element. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See H67: Using null alt text and no title attribute on img elements for images that AT should ignore (HTML) .) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.

### Examples

#### Example 1

Describing the purpose of a link in HMTL in the text content of the `a` element.

Example Code:

    <a href="routes.html">
      Current routes at Boulders Climbing Gym
    </a>

#### Example 2

Using the `alt` attribute for the `img` element to describe the purpose of a graphical link.

Example Code:

    <a href="routes.html">
       <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
    </a>

#### Example 3

Using an empty alt attribute when the anchor (`a`) element contains text that describes the purpose of the link in addition to the `img` element. Note that the link text will appear on the page next to the image.

Example Code:

    <a href="routes.html">
      <img src="topo.gif" alt="" />
      Current routes at Boulders Climbing Gym
    </a>

#### Example 4

A link contains an icon and text, and the site help refers to the icon. The `img` has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.

Example Code:

    <a href="foo.htm">
    <img src="house.gif" alt="icon"/>
    Home page
    </a>

#### Example 5

A link contains text and an icon, and the icon provides additional information about the target.

Example Code:

    <a href="WMFP.pdf">
    Woodend Music Festival Program
    <img src="pdficon.gif" alt="PDF format"/>
    </a>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 - how to specify alt text

### Related Techniques

- G91: Providing link text that describes the purpose of a link
- H2: Combining adjacent image and text links for the same resource
- H24: Providing text alternatives for the area elements of image maps
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore

### Tests

#### Procedure

For each link in the content that uses this technique:

1. Check that text or a text alternative for non-text content is included in the `a` element

2. If an `img` element is the only content of the `a` element, check that its text alternative describes the purpose of the link

3. If the `a` element contains one or more `img` element(s) and the text alternative of the `img` element(s) is empty, check that the text of the link describes the purpose of the link

4. If the `a` element only contains text, check that the text describes the purpose of the link

#### Expected Results

- The above checks are true.

## H32: Providing submit buttons

### Applicability

Content that includes form controls.

This technique relates to:

- Success Criterion 3.2.2 (On Input)
  - How to Meet 3.2.2 (On Input)
  - Understanding Success Criterion 3.2.2 (On Input)

### Description

The objective of this technique is to provide a mechanism that allows users to explicitly request changes of context. The intended use of a submit button is to generate an HTTP request that submits data entered in a form, so it is an appropriate control to use for causing a change of context.

### Examples

#### Example 1:

This is a basic example of a form with a submit button.

Example Code:

    <form action="http://www.example.com/cgi/subscribe/" method="post"><br />
     <p>Enter your e-mail address to subscribe to our mailing list.</p><br />
     <label for="address">Enter email address:</label><input type="text"
     id="address" name="address" />
     <input type="submit" value="Subscribe" /><br />
    </form>

#### Example 2:

The following example uses a server-side script (specified in the `action` attribute) that redirects the user to the requested page.

Example Code:

     <form action="http://www.example.com/cgi/redirect/" method="get"><br />
        <p>Navigate the site.</p><br />
        <select name="dest"><br />
          <option value="/index.html">Home</option/><br />
          <option value="/blog/index.html">My blog</option/><br />
          <option value="/tutorials/index.html">Tutorials</option/><br />
          <option value="/search.html">Search</option/><br />
        </select><br />
      <input type="submit" value="Go to Page" /><br />
      </form>

### Resources

Resources are for information purposes only, no endorsement implied.

- Navigational pulldown menus in HTML by Jukka Korpela discusses a few techniques that work or do not work.

### Related Techniques

- G80: Providing a submit button to initiate a change of context
- H36: Using alt attributes on images used as submit buttons
- H84: Using a button with a select element to perform an action

### Tests

#### Procedure

1. Find all forms in the content

2. For each form, check that it has a submit button (input type="submit", input type="image", or button type="submit")

#### Expected Results

- #2 is true

## H33: Supplementing link text with the title attribute

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

### User Agent and Assistive Technology Support Notes

- Current user agents and assistive technology provide no feedback to the user when links have `title` attribute content available.

- Some graphical user agents will display a tool tip when the mouse hovers above an anchor element containing a `title` attribute. However, current user agents do not provide access to `title` attribute content via the keyboard.

- The tool tip in some common user agents disappears after a short period of time (approximately 5 seconds). This can cause difficulty accessing `title` attribute content for those users who can use a mouse but have fine motor skill impairment, and may result in difficulties for users who need more time to read the tool tip.

- Current graphical user agents do not provide mechanisms to control the presentation of `title` attribute content. The user cannot resize the tool tip text or control the foreground and background colors. The placement and location of the tool tip cannot be controlled by users, causing some screen magnifier users to be unable to access meaningful portions of the `title` attribute content because the tool tip cannot be fully displayed within the viewport.

- Some user agents allow access to supplementary information through the context menu. For example, the keystroke combination Shift+F10 followed by P will display the `title` attribute content, along with other supplementary information in Mozilla/Firefox.

- The HTML 4.01 specification explains that the text of the `alt` attribute is to be displayed when the element cannot be rendered normally. Thus, visual User Agents will display the `alt` attribute text when images are not displayed. The `title` attribute is meant to provide additional information. User Agents generally will display the `title` attribute text when the mouse is placed over the element containing the `title` attribute. Internet Explorer will display the `alt` text on mouse-over if there is no `title` text. The Firefox and Opera browsers only display the `title` text on mouse-over and do not use the `alt` attribute text for this purpose. Thus, if you want the `alt` attribute text visible on mouse-over, also include the text using the `title` attribute.

- Assistive technologies provide different levels of support for speaking title attributes. Some do not include features that allow users to access information provided via the title attribute.

- JAWS 7.0 and above will speak the value of title attributes depending upon a JAWS setting. This setting can be changed temporarily or permanently within JAWS.

- WindowEyes 5.5 and above has a hot key, ins-E, that will speak additional information, including the title attribute, for the item with focus.

- Implementing this technique with the `title` attribute is only sufficient if the `title` attribute is accessibility supported. The content of the `title` attribute needs to be available to all keyboard users (not only those with text-to-speech software) for this attribute to be accessibility supported.

### Description

The objective of this technique is to demonstrate how to use a `title` attribute on an anchor element to provide additional text describing a link. The `title` attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the `title` attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the `title` attribute.

Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements (HTML) .

### Examples

#### Example 1: Clarifying the purpose of a link

Example Code:

    <a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
       title="Read more about failed elephant evacuation">
       Evacuation Crumbles Under Jumbo load
    </a>

#### Example 2: A link that opens in a new window

In HTML 4.01 the `target="_blank"` attribute can be used on an anchor element to indicate that the URI specified by the href attribute will be opened in a new window. This example shows using the `title` attribute of the anchor element to provide information that the link will be opened in a new window.

Example Code:

    <a href="http://example.com/subscribe.html"
         target="_blank"
         title="link opens in new window">
         Subscribe to email notifications about breaking news
    </a>

### Resources

No resources available for this technique.

### Related Techniques

- C7: Using CSS to hide a portion of the link text
- H30: Providing link text that describes the purpose of a link for anchor elements

### Tests

#### Procedure

Examine the source code for anchor elements.

1. For each anchor element that has a `title` attribute, check that the `title` attribute together with the link text describes the purpose of the link.

#### Expected Results

- Check #1 is true.

## H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.2 (Meaningful Sequence)
  - How to Meet 1.3.2 (Meaningful Sequence)
  - Understanding Success Criterion 1.3.2 (Meaningful Sequence)

### Description

The objective of this technique is to use Unicode right-to-left marks and left-to-right marks to override the HTML bidirectional algorithm when it produces undesirable results. This may be necessary, for instance, when placing neutral characters such as spaces or punctuation between different directional text runs. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.

Unicode right-to-left marks and left-to-right marks can be entered directly or by means of character entities or numeric character references, as shown here.

- left-to-right mark: &lrm; or &#x200e; (U+200E)

- right-to-left mark: &rlm; or &#x200f; (U+200F)

Due to the bidi algorithm, a source code editor may not display character entities or numeric character references as expected.

### Examples

#### Example 1

This example shows an Arabic phrase in the middle of an English sentence. The exclamation point is part of the Arabic phrase and should appear on its left. Because it is between an Arabic and Latin character and the overall paragraph direction is LTR, the bidirectional algorithm positions the exclamation mark to the right of the Arabic phrase.

The title is "مفتاح معايير الويب!" in Arabic.

Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):

the title is "HCTIWS SDRADNATS BEW!" in arabic.

Inserting a Unicode right-to-left mark in the code immediately after the exclamation mark positions it correctly when you view the displayed text (see below). You can use a character escape or the (invisible) control character to insert the right-to-left mark.

The title is "مفتاح معايير الويب!‏" in Arabic.

Visually-ordered ASCII version:

the title is "!HCTIWS SDRADNATS BEW" in arabic.

### Resources

Resources are for information purposes only, no endorsement implied.

- Authoring Techniques for XHTML & HTML Internationalization: Handling Bidirectional Text 1.0

- Mixing text direction inline

- What you need to know about the bidi algorithm and inline markup

- Problems with bidirectional source text

### Related Techniques

- H56: Using the dir attribute on an inline element to resolve problems with nested directional runs

### Tests

#### Procedure

1. Examine the source for places where text changes direction.

2. When text changes direction, check whether neutral characters such as spaces or punctuation occur adjacent to text that is rendered in the non-default direction.

3. When #2 is true and the HTML bidirectional algorithm would produce the wrong placement of the neutral characters, check whether the neutral characters are followed by Unicode right-to-left or left-to-right marks that cause neutral characters to be placed as part of the preceding characters.

#### Expected Results

- Check #3 is true.

## H35: Providing text alternatives on `applet` elements

### Applicability

HTML and XHTML Documents that load Java applets where `applet` is not deprecated.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### User Agent and Assistive Technology Support Notes

- This technique is not supported well by assistive technologies. The HTML specification explains that text alternatives for applets are to be displayed when the element cannot be rendered. Therefore, text alternatives that are included in the body of `applet` elements may not be available to users unless the user agent either does not support or has been configured not to render applets.

- IE 6 for Windows and Firefox 1.5 and Opera 9 on Windows treat alternative text for the applet element differently. IE will display the body text of the applet element and not the alt attribute. Firefox and Opera will display the alt attribute but not the body text.

### Description

Provide a text alternative for an applet by using the alt attribute to label an applet and providing the text alternative in the body of the applet element. In this technique, both mechanisms are required due to the varying support of the alt attribute and applet body text by user agents.

### Examples

#### Example 1: An applet to play the tic-tac-toe game.

Example Code:

    <applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
       tic-tac-toe game
    </applet>

### Related Techniques

- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

### Tests

#### Procedure

1. View the source code of the applet element

2. Check that the applet element contains an alt attribute with a text alternative for the applet

3. Check that the applet element contains a text alternative for the applet in the body of the applet element

#### Expected Results

- Checks #2 and #3 are true.

## H36: Using alt attributes on images used as submit buttons

### Applicability

Applies to content using image-based submit buttons.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### Description

For input elements of type 'image', the `alt` attribute of the `input` element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results.

The `input` element is used to create many kinds of form controls. Although the HTML and XHTML DTDs permits the `alt` attribute on all of these, it should be used only on image submit buttons. User agent support for this attribute on other types of form controls is not well defined, and other mechanisms are used to label these controls.

### Examples

#### Example 1

An `input` element with an `alt` attribute

Example Code:

    <form action="http://example.com/prog/text-read" method="post">
      <input type="image" name="submit" src="button.gif" alt="Submit" />
    </form>

### Resources

Resources are for information purposes only, no endorsement implied.

### Related Techniques

- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

### Tests

#### Procedure

1. For all input elements that have a type attribute value of "image", check for the presence of an alt attribute.

2. Check that the alt attribute indicates the button's function.

#### Expected Results

- #1 and #2 are true

## H37: Using `alt` attributes on `img` elements

### Applicability

Images used within HTML documents.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### Description

When using the `img` element, specify a short text alternative with the `alt` attribute. Note. The value of this attribute is referred to as "alt text".

When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

### Examples

#### Example 1

An image on a Website provides a link to a free newsletter. The image contains the text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text matches the text in the image.

Example Code:

    <img src="newsletter.gif" alt="Free newsletter.
       Get free recipes, news, and more. Learn more." />

#### Example 2

An image on a Web site depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is "The building's floor plan. Select a room for more information about the purpose or content of the room." The instruction to "select a room" indicates that the image is interactive.

### Resources

Resources are for information purposes only, no endorsement implied.

HTML 4.01 IMG element

HTML 4.01 alt attribute

### Related Techniques

- G82: Providing a text alternative that identifies the purpose of the non-text content
- H2: Combining adjacent image and text links for the same resource
- H24: Providing text alternatives for the area elements of image maps
- H30: Providing link text that describes the purpose of a link for anchor elements
- H45: Using longdesc

### Tests

#### Procedure

1. Examine each `img` element in the content

2. Check that each `img` element which conveys meaning contains an `alt` attribute.

3. If the image contains words that are important to understanding the content, the words are included in the text alternative.

#### Expected Results

Checks #2 and #3 are true.

## H39: Using caption elements to associate data table captions with data tables

### Applicability

HTML and XHTML data tables

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### Description

The objective of this technique is to programmatically associate captions for data tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.

The `caption` element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the `caption` element allows screen reading software to navigate directly to the caption for a table if one is present.

The `caption` element may be used whether or not the table includes a `summary` attribute. The `caption` element identifies the table whereas the `summary` attribute gives an overview of the purpose or explains how to navigate the table. If both are used, the `caption` should not duplicate information in the `summary`.

Although WCAG 2.0 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML and XHTML `table`elements and to conform to the coding practice of separating presentation from content. If a table is used for layout, the `caption` element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent" to the user. A `caption` would "break" this transparency by calling attention to the table.

### Examples

#### Example 1: An appointment calendar with a caption

Example Code:

    <table>
    <caption>Schedule for the week of March 6</caption>
    ...</table>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Table Captions: The CAPTION element

### Related Techniques

- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H63: Using the scope attribute to associate header cells and data cells in data tables
- H73: Using the summary attribute of the table element to give an overview of data tables

### Tests

#### Procedure

1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row.

   1. If “no," the table is a layout table.

   2. If “yes," the table is a data table.

2. If the table is a layout table, check that the table does not include a `caption` element.

3. If the table is a data table and it includes a `caption` element, check that the `caption` identifies the table

4. If both a `summary` attribute and a `caption` element are present for this data table, check that the `summary` does not duplicate the `caption`.

#### Expected Results

- For layout tables, #2 is true.

- For data tables, #3 and #4 are true.

## H40: Using definition lists

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.1.3 (Unusual Words)
  - How to Meet 3.1.3 (Unusual Words)
  - Understanding Success Criterion 3.1.3 (Unusual Words)

### Description

The objective of this technique is to provide the definitions of words or phrases by presenting them in a definition list. The list is marked up using the `dl` element. Within the list, each term is put in a separate `dt` element, and its definition goes in the `dd` element directly following it. The `title` attribute can be used to provide additional information about the definition list.

Using `dl`, `dt`, and `dd` ensures that relationships between terms and their definitions are preserved if the presentation format changes and that the list of terms and definitions is treated as a unit.

Definition lists are easiest to use when the definitions are put in alphabetical order. Definition lists are typically used in a glossary.

### Examples

#### Example 1

A list of definitions of nautical terms used on a Website about sailing.

Example Code:

    <dl title="Nautical terms">
      <dt>Knot</dt>
      <dd>
        <p>A <em>knot</em> is a unit of speed equaling 1
          nautical mile per hour (1.15 miles per hour or 1.852
          kilometers per hour).</p>
      </dd>
      <dt>Port</dt>
      <dd>
        <p><em>Port</em> is the nautical term (used on
          boats and ships) that refers to the left side
          of a ship, as perceived by a person facing towards
          the bow (the front of the vessel).</p>
      </dd>
      <dt>Starboard</dt>
      <dd>
        <p><em>Starboard</em> is the nautical term (used
          on boats and ships) that refers to the right
          side of a vessel, as perceived by a person
          facing towards the bow (the front of the vessel).</p>
      </dd>
    </dl>

### Resources

Resources are for information purposes only, no endorsement implied.

- Definition lists: the DL, DT, and DD elements

### Related Techniques

- G62: Providing a glossary

### Tests

#### Procedure

For any set of words and their definitions that have the appearance of a list:

1. Check that the list is contained within a `dl` element.

2. Check that each word defined in the list is contained within a `dt` element.

3. Check that the definition for each word appears in the `dd` element immediately following the word's `dt` element .

#### Expected Results

- All checks above are true.

## H42: Using h1-h6 to identify headings

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### Description

The objective of this technique is to use HTML and XHTML heading markup to convey the structure of the content.

Using headings merely to change the appearance of text does not convey the organization of the content, and may confuse users who use headings to perceive structure or rely on them for navigation. Conversely, while applying bold format, or even "class=heading", can result in the visual display of a heading, assistive technologies will not recognize such text as headings.

### Examples

#### Example 1: Headings in a 3-column layout

In this example, the main content of the page is in the middle column of a 3-column page. The title of the main content matches the title of the page, and is marked as `h1`, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with `h2`.

Example Code:

    <head>
     <title>Stock Market Up Today</title>
     </head>

     <body>

     <!-- left nav -->
     <div class="left-nav">
     <h2>Site Navigation</h2>
     <!-- content here -->
     </div>

     <!-- main contents -->
     <div class="main">
     <h1>Stock Market up today</h1>
     <!-- article text here -->
     </div>

     <!-- right panel -->
     <div class="left-nav">
     <h2>Related links</h2>
     <!-- content here -->
     </div>
     </body>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 H1-H6 elements

- Pick a Heading Eric Meyer

- Quick tips for accessible headings

### Related Techniques

- H69: Providing heading elements at the beginning of each section of content
- G141: Organizing a page using headings

### Tests

#### Procedure

1. Check that heading markup is used when content is a heading.

2. Check that heading markup is not used when content is not a heading.

#### Expected Results

- Checks #1 and #2 are true.

## H43: Using id and headers attributes to associate data cells with header cells in data tables

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### Description

The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a `headers` attribute to each data cell (`td` element). It also adds an `id` attribute to any cell used as a header for other cells. The `headers` attribute of a cell contains a list of the `id` attributes of the associated header cells. If there is more than one `id`, they are separated by spaces.

This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the `th` element alone or the `th` element with the `scope` attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.

This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.

### Examples

#### Example 1: A table with multiple rows of headers

Example Code:

    <table>
       <tr>
         <th rowspan="2" id="h">Homework</th>
         <th colspan="3" id="e">Exams</th>
         <th colspan="3" id="p">Projects</th>
       </tr>
       <tr>
         <th id="e1" headers="e">1</th>
         <th id="e2" headers="e">2</th>
         <th id="ef" headers="e">Final</th>
         <th id="p1" headers="p">1</th>
         <th id="p2" headers="p">2</th>
         <th id="pf" headers="p">Final</th>
       </tr>
       <tr>
        <td headers="h">15%</td>
        <td headers="e e1">15%</td>
        <td headers="e e2">15%</td>
        <td headers="e ef">20%</td>
        <td headers="p p1">10%</td>
        <td headers="p p2">10%</td>
        <td headers="p pf">15%</td>
       </tr>
      </table>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 header information with data cells

### Related Techniques

- H39: Using caption elements to associate data table captions with data tables
- H51: Using table markup to present tabular information
- H63: Using the scope attribute to associate header cells and data cells in data tables
- H73: Using the summary attribute of the table element to give an overview of data tables

### Tests

#### Procedure

1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If “no," the table is a layout table. If “yes," the table is a data table.

2. For data tables, check that any cell that is associated with more than one row and/or one column header contains a `headers` attribute that lists the `id` for all headers associated with that cell.

3. For data tables where any cell contains an `id` or `headers` attribute,

   1. Check that each `id` listed in the `headers` attribute of the data cell matches the `id` attribute of a cell that is used as a header element

   2. Check that the `headers` attribute of a data cell contains the `id` attribute of all headers associated with the data cell

   3. Check that all ids are unique (that is, no two elements in the page have the same id)

#### Expected Results

- If table is a layout table, no cells contain `headers` or `id` attributes

- If table is a data table and any cell contains an `id` attribute, checks #3.1, #3.2, and #3.3 are true.

- If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.

## H44: Using label elements to associate text labels with form controls

### Applicability

HTML and XHTML controls that use external labels

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

### User Agent and Assistive Technology Support Notes

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, `<label>First name <input type="text" name="firstname"></label>`).

- JAWS 7.10 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It reads the label for explicit and implicit labels for text fields in both virtual PC cursor and forms reading mode. In forms mode it does not read the label for implicit labels on checkboxes and radio fields.

- Window-Eyes 5.5 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It will always speak the label for an explicitly labelled form field. It does not speak the label for the implicitly labelled form control in browse on mode but will speak the implicit label when navigating from control to control in browse off mode.

User agents will display a tool tip when the mouse hovers above an `input` element containing a `title` attribute. Title attributes are exposed to assistive technology and are displayed as tooltips in many graphical browsers. Tooltips can't be opened via the keyboard, so this information may not be available to sighted keyboard users.

If no `label` is available, JAWS and Window-Eyes speak the `title` attribute when the form control receives focus

- JAWS 6.0 and later can be set to speak both `label` and `title` when the two items are different; however, very few users are aware of this setting.

- WindowEyes 5.5 has a hot key, ins-E, that will display additional information, including the title attribute, for the item with focus.

### Description

The objective of this technique is to use the `label` element to explicitly associate a form control with a label. A `label` is attached to a specific form control through the use of the `for` attribute. The value of the `for` attribute must be the same as the value of the `id` attribute of the form control.

The `id` attribute may have the same value as the `name` attribute, but both must be provided, and the `id` must be unique in the Web page.

This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the `label` element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the `label` element must be visible since it provides assistance to all users who need help understanding the purpose of the field.

Note that the `label` is positioned after `input` elements of `type="checkbox"` and `type="radio"`.

Note 1: Elements that use explicitly associated labels are:

- `input type="text"`

- `input type="checkbox"`

- `input type="radio"`

- `input type="file"`

- `input type="password"`

- `textarea`

- `select`

Note 2: The `label` element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).

- Submit and Reset buttons (`input type="submit"` or `input type="reset"`)

- Image buttons (`input type="image"`)

- Hidden input fields (`input type="hidden"`)

- Script buttons (`button` elements or `<input type="button">`)

### Examples

#### Example 1: A text input field

The text field in the example below has the explicit label of "First name:". The `label` element's `for` attribute matches the `id` attribute of the `input` element.

Example Code:

    <label for="firstname">First name:</label>
    <input type="text" name="firstname" id="firstname" />

#### Example 2: A checkbox

Example Code:

    <input type="checkbox" id="markuplang" name="computerskills" checked="checked">
    <label for="markuplang">HTML</label>

#### Example 3: A group of radio buttons

A small, related group of radio buttons with a clear description and labels for each individual element.

Note: To provide clear associations and instructions for a large set of related radio buttons H71: Providing a description for groups of form controls using fieldset and legend elements , should be considered.

Example Code:

     <h1>Donut Selection</h1>

    <p>Choose the type of donut(s) you would like then select
       the "purchase donuts" button.</p>

    <form action="http://example.com/donut" method="post">
    <p>
      <input type="radio" name="flavor" id="choc" value="chocolate" />
        <label for="choc">Chocolate</label><br/>
      <input type="radio" name="flavor" id="cream" value="cream"/>
        <label for="cream">Cream Filled</label><br/>
      <input type="radio" name="flavor" id="honey" value="honey"/>
        <label for="honey">Honey Glazed</label><br/>
      <input type="submit" value="Purchase Donuts"/>
    </p>
    </form>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 form labels

- Accessible Forms using WCAG 2.0

### Related Techniques

- G167: Using an adjacent button to label the purpose of a field
- H65: Using the title attribute to identify form controls when the label element cannot be used
- H71: Providing a description for groups of form controls using fieldset and legend elements

### Tests

#### Procedure

For all `input` elements of type `text`, `file` or `password`, for all `textareas` and for all `select` elements in the Web page:

1. Check that there is a `label` element that identifies the purpose of the control before the `input` element

2. Check that the `for` attribute of the `label` element matches the id of the `input` element

3. Check that the `label` element is visible.

For all `input` elements of type checkbox or radio in the Web page::

1. Check that there is a `label` element that identifies the purpose of the control after the `input` element

2. Check that the `for` attribute of the `label` element matches the `id` of the `input` element

3. Check that the `label` element is visible.

#### Expected Results

- Checks #1 and #2 are true. For Success Criterion 3.3.2, Check #3 is also true.

## H45: Using longdesc

### Applicability

HTML and XHTML documents that include images that cannot be described in a short text alternative.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### User Agent and Assistive Technology Support Notes

Some older assistive technologies do not support the `longdesc` attribute.

### Description

The objective of this technique is to provide information in a file designated by the `longdesc` attribute when a short text alternative does not adequately convey the function or information provided in the image. The `longdesc` attribute is a URI, the target of which contains a long description of the non-text content.

### Examples

#### Example 1

Example Code:

    <p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>

### Resources

Resources are for information purposes only, no endorsement implied.

- Too much accessibility - the rise and fall of the LONGDESC

### Related Techniques

- G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
- G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

### Tests

#### Procedure

1. Check that the `img` element has a longdesc attribute.

2. Check that the value of the `longdesc` attribute is a valid URI of an existing resource.

3. Check that the content at the target of that URI contains a long description describing the original non-text content associated with it.

#### Expected Results

- #1 through #3 are all true

## H46: Using `noembed` with `embed`

### Applicability

Documents that load plugins with the `embed` element.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 1.2.8 (Media Alternative (Prerecorded))
  - How to Meet 1.2.8 (Media Alternative (Prerecorded))
  - Understanding Success Criterion 1.2.8 (Media Alternative (Prerecorded))

### User Agent and Assistive Technology Support Notes

Note: Although `embed` is widely supported in user agents - it is not a valid part of HTML or XHTML.

### Description

The objective of this technique is to provide alternative content for the `embed` element in a `noembed` element. The `noembed` is rendered only if the `embed` is not supported. While it can be positioned anywhere on the page, it is a good idea to include it as a child element of `embed` so that it is clear to assistive technologies that a text alternative is associated with the `embed` element it describes.

### Examples

#### Example 1: noembed is provided inside an embed

Example Code:

    <embed src="../movies/history_of_rome.mov"
      height="60" width="144" autostart="false">
      <noembed>
        <a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
      </noembed>
    </embed>

#### Example 2: noembed is provided beside an embed

Example Code:

    <embed src="moviename.swf" width="100" height="80"
      pluginspage="http://example.com/shockwave/download/" />
    <noembed>
      <img alt="Still from Movie" src="moviename.gif"
        width="100" height="80" />
    </noembed>;

### Resources

No resources available for this technique.

### Related Techniques

(none currently listed)

### Tests

#### Procedure

1. Check if `embed` element has a child `noembed` element

2. Check if `embed` element has a `noembed` element that immediately follows it.

#### Expected Results

- #1 is true or #2 is true

## H48: Using ol, ul and dl for lists

### Applicability

HTML, XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### User Agent and Assistive Technology Support Notes

Assistive technologies include inconsistent support for various uses of the `type` attribute used to indicate numbering and bullet styles.

### Description

The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The `ol` element is used when the list is ordered and the `ul` element is used when the list is unordered. Definition lists (`dl`) are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.

When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using `<br>` elements to separate the list items.

Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.

### Examples

#### Example 1: A list showing steps in a sequence

This example uses an ordered list to show the sequence of steps in a process.

Example Code:

     <ol>
      <li>Mix eggs and milk in a bowl.</li>
      <li>Add salt and pepper.</li>
    </ol>

#### Example 2: A grocery list

This example shows an unordered list of items to buy at the store.

Example Code:

    <ul>
      <li>Milk</li>
      <li>Eggs</li>
      <li>Butter</li>
    </ul>

#### Example 3: A word and its definition

This example uses a definition list to group a definition with the term that is being defined.

Example Code:

    <dl>
      <dt>blink</dt>
      <dd>turn on and off between .5 and 3 times per second
      </dd>
    </dl>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Unordered lists (UL), ordered lists (OL), and list items (LI)

- HTML 4.01 Definition lists: the DL, DT, and DD elements

### Related Techniques

- H40: Using definition lists

### Tests

#### Procedure

1. Check that content that has the visual appearance of a list (with or without bullets) is marked as an unordered list.

2. Check that content that has the visual appearance of a numbered list is marked as an ordered list.

3. Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.

#### Expected Results

- All the checks above are true.

## H49: Using semantic markup to mark emphasized or special text

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### User Agent and Assistive Technology Support Notes

- Some semantic elements are not supported well by assistive technologies. Elements and attributes that are known to have limited support include `code`, `del`, `dfn`, `ins`, `kbd`, `s`, `sub`, `sup`, `tt`, and `q`. For these elements, authors are encouraged to consider whether they are using them in a way that would require users to be able to access the semantic meaning of the markup in order to understand the content and, where understanding the semantics is required, to provide this information in text.

- Most screen readers do not provide automatic notification about `em`, `strong`, `b`, or `i`.

- JAWS contains support for `blockquote` and `cite`. WindowEyes contains support for `blockquote`, `q` and `cite`.

- Firefox 1.0 (Windows) and higher, Opera 7.54 (Windows) and higher, Mozilla 1.7.3 (Windows) and higher automatically generate quotes around `q` elements, but Internet Explorer 6 for Windows does not.

Firefox 1.0 (Windows) and higher, Opera 7.54 (Windows) and higher, Mozilla 1.7.3 (Windows) and higher automatically generate quotes around q elements, but Internet Explorer 6 for Windows does not.

### Description

The objective of this technique is to demonstrate how semantic markup can be used to mark emphasized or special text so that it can be programmatically determined. Using semantic markup to mark emphasized or special text also provides structure to the document. User agents can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.

Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup.

### Examples

See rendered examples of semantic text.

#### Example 1

This example shows how to use the `em` and `strong` elements to emphasize text. The `em` and `strong` elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).

Example Code:

     ...What she <em>really</em> meant to say was, &quot;This is not ok,
     it is <strong>excellent</strong>&quot;!...

#### Example 2

This example shows using the `blockquote` element to mark up long quotations which may require paragraph breaks. It also demonstrates the use of the `cite` element to specify a reference.

Example Code:

    <p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
     <blockquote>
       <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
       hedges, and, guided by the sense of smell, would find the first violets and lilies.
       There, too, after a fit of temper, I went to find comfort and to hide my hot face
       in the cool leaves and grass.</p>
     </blockquote>

#### Example 3

Here is the use of the `q` element to mark up a shorter quotation. Quotes are provided around the `q` element, because many user agents do not support this element yet and therefore do not display it properly (see UA notes). CSS rules to suppress automatic generation of quotes are provided for those user agents that do support the `q` element, to prevent them from generating quotes automatically in addition to the quotes provided by the author, resulting in double-quoted content. In the future, when the `q` element is more broadly supported, the need to provide quotes and suppress browser-generated quotes will go away.

Example Code:

    q:before { content: ""; }
    q:after { content: ""; }

Example Code:

     <p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it,
    we can never do anything good in the world.</q>"</p>

#### Example 4

Superscripts and subscripts are created using the `sup` and `sub` elements.

Example Code:

     <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
    <p>The chemical notation for water is H<sub>2</sub>O.</p>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM

- HTML 4.01 Quotations: The BLOCKQUOTE and Q elements

- HTML 4.01 Subscripts and superscripts: the SUB and SUP elements

- Fixing Quotes in Internet Explorer

### Related Techniques

- G115: Using semantic elements to mark up structure

### Tests

#### Procedure

1. Examine the content for information that is conveyed through variations in presentation of text.

2. Check that appropriate semantic markup (such as `em, strong, cite, blockquote, quote, sub`, and `sup`) have been used to mark the text that conveys information through variations in text.

#### Expected Results

- Check #2 is true.

## H50: Using structural elements to group links

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)

### Description

The objective of this technique is to demonstrate how to group links into logical sets. When links are grouped into logical sets (for example, in a navigation bar or main menu that appears on every page in a site) they should be marked up as a unit. Navigation bars are usually the first thing someone encounters on a page. People who are sighted are often able to ignore navigation parts and start reading the content of the page. Someone using a screen reader must first listen to the text of each link in the navigation bar before reading the interesting content. There are several ways to mark up content so that a user with a screen reader can jump over the navigation bar and avoid reading all of the links.

Group links via one of the following mechanisms (in descending order of preference):

- `ul` or `ol`

- `map`

### Examples

#### Example 1: Using lists to group links

In this example the links are grouped using the `ul` and `li` elements.

Example Code:

    <a name="categories" id="categories"></a><h2>Product Categories</h2>
    <ul class="navigation">
        <li><p><a href="kitchen.html">Kitchen</a></p></li>
        <li><p><a href="bedbath.html">Bed & Bath</a></p></li>
        <li><p><a href="dining.html">Fine Dining</a></p></li>
        <li><p><a href="lighting.html">Lighting</a></p></li>
        <li><p><a href="storage.html">Storage</a><li><p>
    </ul>

CSS can be used to style the list elements, so this technique can be used with a variety of visual appearances.

Here is a style that removes the list bullets and the left padding that creates the indent and flows the individual list elements horizontally.

Example Code:

    ul.navigation {
      list-style: none;
      padding: 0;
    }
    ul.navigation li {
      display: inline;
    }

This style removes the list bullets and the left padding and displays the items in a floating block.

Example Code:

     ul.navigation {
     list-style: none;
     padding: 0;
    }
    ul.navigation li {
     display: block;
     float: left;
    }

#### Example 2: Using map to group links

In this example, the `map` element groups a set of links, the `title` attribute identifies it as a navigation bar.

Example Code:

     <map title="Navigation Bar">
      <p>
        [<a href="home.html">Home</a>]
        [<a href="search.html">Search</a>]
        [<a href="new.html">New and highlighted</a>]
        [<a href="sitemap.html">Site map</a>]
      </p>
     </map>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 lists

- HTML 4.01 MAP element

- HTML 4.01 title attribute

### Related Techniques

(none currently listed)

### Tests

#### Procedure

Examine the content for `anchor` elements which are to be grouped together .

1. Check that the anchor elements are grouped using list or `map` elements.

#### Expected Results

- Check #1 is true.

## H51: Using table markup to present tabular information

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### Description

The objective of this technique is to present tabular information in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

Using the `table` element with the child elements `tr`, `th`, and `td` makes these relationships perceivable. Techniques such as inserting tabs to create columns or using the `pre` element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.

### Examples

#### Example 1: A schedule marked up as a simple data table with column and row headers

This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the `th` element. This identifies the days of the week as column headers and the time intervals as row headers.

Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.

Example Code:

     <table>
      <tr>
        <td> </td>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
      </tr>
      <tr>
        <th>8:00-9:00</th>
        <td>Meet with Sam</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <th>9:00-10:00</th>
        <td> </td>
        <td> </td>
        <td>Doctor Williams</td>
        <td>Sam again</td>
        <td>Leave for San Antonio</td>
      </tr>
    </table>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Table Element

- HTML 4.01 Table rows: The TR element

- HTML 4.01 Table cells: The TH and TD elements

### Related Techniques

- H39: Using caption elements to associate data table captions with data tables
- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H63: Using the scope attribute to associate header cells and data cells in data tables

### Tests

#### Procedure

1. Check for the presence of tabular information.

2. For each occurrence of tabular information:

   1. Check that table markup with at least the elements `table`, `tr`, `th`, and `td` is used.

#### Expected Results

- All checks above are true.

## H53: Using the body of the `object` element

### Applicability

Documents that load media with the `object` element.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 1.2.3 (Audio Description or Media Alternative (Prerecorded))
  - How to Meet 1.2.3 (Audio Description or Media Alternative (Prerecorded))
  - Understanding Success Criterion 1.2.3 (Audio Description or Media Alternative (Prerecorded))
- Success Criterion 1.2.8 (Media Alternative (Prerecorded))
  - How to Meet 1.2.8 (Media Alternative (Prerecorded))
  - Understanding Success Criterion 1.2.8 (Media Alternative (Prerecorded))

### User Agent and Assistive Technology Support Notes

This technique is not supported well by assistive technologies and cross-browser support is irregular.

### Description

The objective of this technique is to provide a text alternative for content rendered using the object element. The body of the object element can be used to provide a complete text alternative for the object or may contain additional non-text content with text alternatives.

### Examples

#### Example 1: An object includes a long description that describes it

Example Code:

     <object classid="http://www.example.com/analogclock.py">
      <p>Here is some text that describes the object and its operation.</p>
    </object>

#### Example 2: An object includes non-text content with a text alternative

Example Code:

    <object classid="http://www.example.com/animatedlogo.py">
      <img src="staticlogo.gif" alt="Company Name" />
    </object>

#### Example 3: The image object has content that provides a brief description of the function of the image

Example Code:

    <object data="companylogo.gif" type="image/gif">
      <p>Company Name</p>
    </object>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 OBJECT element

- Object Paranoia

### Related Techniques

- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- H46: Using noembed with embed

### Tests

#### Procedure

1. Check that the body of each `object` element contains a text alternative for the object.

#### Expected Results

- #1 is true.

## H54: Using the `dfn` element to identify the defining instance of a word

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.1.3 (Unusual Words)
  - How to Meet 3.1.3 (Unusual Words)
  - Understanding Success Criterion 3.1.3 (Unusual Words)

### Description

The objective of this technique is to use the `dfn` to mark the use of a word or phrase where it is defined. The `dfn` element is used to indicate the defining instance of the enclosed term. In other words, it marks the occurrence of the term where the term is defined. Note that it encloses the term, not the definition. This technique would be used in combination with G112: Using inline definitions to provide the definition.

### Examples

#### Example 1

The following code snippet demonstrates the use of the `dfn` element.

Example Code:

    <p>The Web Content Accessibility Guidelines require that non-text content
    has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
    of characters that can be programmatically determined or where the sequence is
    not expressing something in human language; this includes ASCII Art (which is a
    pattern of characters), emoticons, leetspeak (which is character substitution), and
    images representing text .</p>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 DFN Element

### Related Techniques

- G112: Using inline definitions

### Tests

#### Procedure

1. Identify all words that are defined inline in the text, that is, where the definition occurs in a sentence near an occurrence of the word.

2. Check that each word that is defined inline is contained in a `dfn` element.

#### Expected Results

- Check #2 is true.

## H56: Using the `dir` attribute on an inline element to resolve problems with nested directional runs

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.2 (Meaningful Sequence)
  - How to Meet 1.3.2 (Meaningful Sequence)
  - Understanding Success Criterion 1.3.2 (Meaningful Sequence)

### Description

The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the `dir` attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the `dir` attribute on an enclosing `span` or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.

### Examples

#### Example 1

This example defines the text direction of a nested, mixed-direction phrase, in Hebrew and English, to be right-to-left. Because the whole quote is in Hebrew, and therefore runs right to left, the text "W3C" and the comma should appear to the left of (i.e., after) the Hebrew text, like this:

The title is "פעילות הבינאום, W3C" in Hebrew.

Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):

the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in hebrew.

The Unicode bidirection algorithm alone is insufficient to achieve the right result, and leaves the text 'W3C' on the right side of the quote:

The title is "פעילות הבינאום, W3C" in Hebrew.

Visually-ordered ASCII version:

the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.

The following markup will produce the expected result:

Example Code:

    <p>The title says "<span lang="he"
    dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p>

### Resources

Resources are for information purposes only, no endorsement implied.

- Inheritance of text direction information

- Authoring Techniques for XHTML & HTML Internationalization: Handling Bidirectional Text 1.0

### Related Techniques

- H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline

### Tests

#### Procedure

1. Examine the text direction of text in the document

2. If the text direction is right-to-left, check that for the ancestor element that has a `dir` attribute, the attribute has the value "rtl"

3. If the text direction is left-to-right, check that there is no ancestor element with a `dir` attribute, or that for the ancestor element that has a `dir` attribute, the attribute has the value "ltr"

#### Expected Results

- Checks #2 and #3 are true for all text.

## H57: Using language attributes on the html element

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.1.1 (Language of Page)
  - How to Meet 3.1.1 (Language of Page)
  - Understanding Success Criterion 3.1.1 (Language of Page)

### User Agent and Assistive Technology Support Notes

Additional subtags for region, script, variant or other aspects may lead to errors in language switching in older versions of some screenreaders.

JAWS 8.0 can be configured to change language automatically on the basis of the lang attribute. However, it only switches amongst major languages as indicated by the primary code. If a regional language variant is indicated with a language subcode, JAWS will use the default variant for which it is configured.

### Description

The objective of this technique is to identify the default language of a document by providing the `lang` and/or `xml:lang` attribute on the `html` element.

Identifying the language of the document is important for a number of reasons:

- It allows braille translation software to substitute control codes for accented characters, and insert control codes necessary to prevent erroneous creation of Grade 2 braille contractions.

- Speech synthesizers that support multiple languages will be able to orient and adapt to the pronunciation and syntax that are specific to the language of the page, speaking the text in the appropriate accent with proper pronunciation.

- Marking the language can benefit future developments in technology, for example users who are unable to translate between languages themselves will be able to use machines to translate unfamiliar languages.

- Marking the language can also assist user agents in providing definitions using a dictionary.

HTML 4.01 uses the `lang` attribute of the `html` element. XHTML served as text/html uses the `lang` attribute and the `xml:lang` attribute of the `html` element, in order to meet the requirements of XHTML and provide backward compatibility with HTML. XHTML served as application/xhtml+xml uses the `xml:lang` attribute of the `html` element. Both the `lang` and the `xml:lang` attributes can take only one value.

Note 1: HTML only offers the use of the `lang` attribute, while XHTML 1.0 (as a transitional measure) allows both attributes, and XHTML 1.1 allows only `xml:lang`.

Note 2: Allowed values for the lang and xml:lang attributes are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional subcodes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.

### Examples

#### Example 1

This example defines the content of an HTML document to be in the French language.

Example Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
      <title>document écrit en français</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
    	...document écrit en français...
    </body>
    </html>

#### Example 2

This example defines the content of an XHTML 1.0 document with content type of text/html to be in the French language. Both the `lang` and `xml:lang` attributes are specified in order to meet the requirements of XHTML and provide backward compatibility with HTML.

Example Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
      <title>document écrit en français</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
    ...document écrit en français...
    </body>
    </html>

#### Example 3

This example defines the content of an XHTML 1.1 document with content type of application/xhtml+xml to be in the French language. Only the `xml:lang` attribute is specified.

Example Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
      <title>document écrit en français</title>
    	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    </head>
    <body>
    	...document écrit en français...
    </body>
    </html>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 "lang" attribute

- BCP 47: Tags for the Identification of Languages

- Inheritance of language codes

- Declaring Language in XHTML and HTML

- Authoring Techniques for XHTML & HTML Internationalization: Specifying the language of content 1.0

- Language tags in HTML and XML

### Related Techniques

- H58: Using language attributes to identify changes in the human language

### Tests

#### Procedure

1. Examine the `html` element of the document.

2. Check that the `html` element has a `lang` and/or `xml:lang` attribute.

3. Check that the value of the `lang` attribute conforms to BCP 47: Tags for the Identification of Languages or its successor and reflects thae primary language used by the Web page.

#### Expected Results

- The above checks are all true.

## H58: Using language attributes to identify changes in the human language

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.1.2 (Language of Parts)
  - How to Meet 3.1.2 (Language of Parts)
  - Understanding Success Criterion 3.1.2 (Language of Parts)

### User Agent and Assistive Technology Support Notes

Additional subtags for region, script, variant or other aspects may lead to errors in language switching in older versions of some screenreaders.

JAWS 8.0 can be configured to change language automatically on the basis of the lang attribute. However, it only switches amongst major languages as indicated by the primary code. If a regional language variant is indicated with a language subcode, JAWS will use the default variant for which it is configured.

### Description

The objective of this technique is to clearly identify any changes in language on a page by using the `lang` or `xml:lang` attribute, as appropriate for the HTML or XHTML version you use.

HTML 4.01 uses the `lang` attribute on elements. XHTML served as text/html uses the `lang` attribute and the `xml:lang` attribute on elements, in order to meet the requirements of XHTML and provide backward compatibility with HTML. XHTML served as application/xhtml+xml uses the `xml:lang` attribute on elements.

Note: HTML only offers the use of the `lang` attribute, while XHTML 1.0 (as a transitional measure) allows both attributes, and XHTML 1.1 allows only `xml:lang`.

Allowed values for the lang and xml:lang attributes are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional subcodes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.

### Examples

#### Example 1

This example demonstrates the use of the `xml:lang` attribute defining a quote written in German. This snippet could be included by an XHTML 1.1 document where `lang` is not allowed.

Example Code:

    <blockquote xml:lang="de">
      <p>
        Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
        aber der Esel merkte, daß kein guter Wind wehte, lief fort
        und machte sich auf den Weg nach Bremen: dort, meinte er,
        könnte er ja Stadtmusikant werden.
      </p>
    </blockquote>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 lang attribute

- XML 1.0 xml:lang attribute

- Inheritance of language codes.

- BCP 47: Tags for the Identification of Languages .

- Language tags in HTML and XML

### Related Techniques

- H57: Using language attributes on the html element

### Tests

#### Procedure

For each element in the document:

1. Check that the human language of the content of the element is the same as the inherited language for the element as specified in HTML 4.01, Inheritance of language codes

For each `lang` attribute in the document:

1. Check that the value of the `lang` attribute conforms to BCP 47: Tags for the Identification of Languages or its successor

For each xml:lang attribute in the document:

1. Check that the value of the `xml:lang` attribute conforms to BCP 47: Tags for the Identification of Languages or its successor

#### Expected Results

- All checks above are true.

## H59: Using the link element and navigation tools

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.5 (Multiple Ways)
  - How to Meet 2.4.5 (Multiple Ways)
  - Understanding Success Criterion 2.4.5 (Multiple Ways)
- Success Criterion 2.4.8 (Location)
  - How to Meet 2.4.8 (Location)
  - Understanding Success Criterion 2.4.8 (Location)

### User Agent and Assistive Technology Support Notes

- The link element has inconsistent user agent and assistive technology support.

- Some user agents provide an optional navigation bar which will display the information specified in the link element. Current versions of the Mozilla and Opera browsers provide this functionality. IE 6.0 and Firefox 1.5 do not offer this feature but it may be available through extensions or add-ons.

  See The 'link'-Element in (X)HTML for more information on browser support for `link`.

### Description

The objective of this technique is to describe how the `link` element can provide metadata about the position of an HTML page within a set of Web pages or can assist in locating content with a set of Web pages. The value of the `rel` attributes indicates what type of relation is being described, and the `href` attribute provides a link to the document having that relation. Multiple `link` elements can provide multiple relationships. Several values of `rel` are useful:

- Start: Refers to the first document in a collection of documents.

- Next: Refers to the next document in a linear sequence of documents.

- Prev: Refers to the previous document in an ordered series of documents.

- Contents: Refers to a document serving as a table of contents.

- Index: Refers to a document providing an index for the current document.

### Examples

#### Example 1

A Web page for Chapter 2 of an on-line book might contain the following links within the `head` section.

Example Code:

    <link rel="Contents" href="Contents.html" title="Table of Contents"  />
    <link rel="Index" href="Index.html" title="Index" />
    <link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
    <link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 LINK element

- HTML 4.01 link types

- Link Toolbar extension for Firefox

- Use <link>s in your document from W3C's Quality Web Tips

- LINK - Document Relationship from Web Design Group

- The 'link'-Element in (X)HTML

### Related Techniques

- G1: Adding a link at the top of each page that goes directly to the main content area
- G63: Providing a site map
- G64: Providing a Table of Contents
- G123: Adding a link at the beginning of a block of repeated content to go to the end of the block

### Tests

#### Procedure

For a Web page that is within a sequence or collection of Web pages:

1. Check that all `link` elements pertaining to navigation occur in the `head` section of the document.

2. For each `link` element in the `head` section of the document which pertains to navigation, check that it contains at least:

   1. a `rel` attribute identifying the link type

   2. a valid `href` attribute to locate the appropriate resource

#### Expected Results

- All of the checks above are true.

## H60: Using the link element to link to a glossary

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.1.3 (Unusual Words)
  - How to Meet 3.1.3 (Unusual Words)
  - Understanding Success Criterion 3.1.3 (Unusual Words)
- Success Criterion 3.1.4 (Abbreviations)
  - How to Meet 3.1.4 (Abbreviations)
  - Understanding Success Criterion 3.1.4 (Abbreviations)

### User Agent and Assistive Technology Support Notes

Some user agents provide an optional navigation bar which will display the information specified in the `link` element. Current versions of the Mozilla and Opera browsers provide this functionality. IE 6.0 and Firefox 1.5 do not offer this feature but it may be available through extensions or add-ons. See The 'link'-Element in (X)HTML for more information on browser support for the `link` element.

### Description

The objective of this technique is to provide a mechanism for locating a glossary. When terms in the content are defined on a separate glossary page, the glossary is referenced using a `link` element in the `head` element of the document that uses the glossary. The `rel` attribute of the `link` element is set to "glossary", and the `href` attribute contains the URI of the glossary page. User agents can then assist users in accessing the glossary quickly and easily.

### Examples

#### Example 1: The WCAG 2.0 Glossary.

Example Code:

     <link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 LINK element

- HTML 4.01 link types

- Use <link>s in your document from W3C's Quality Web Tips

- LINK - Document Relationship from Web Design Group

### Related Techniques

(none currently listed)

### Tests

#### Procedure

For any set of words and their definitions that are meant to serve as a glossary:

1. Check that the `head` section of the Web page that contains words, phrases or abbreviations defined in a glossary contains a `link` element

2. Check that the `link` element has attribute `rel="glossary"`

3. Check that the `href` attribute of the `link` element refers to the glossary page.

#### Expected Results

- All checks above are true.

Note: The definition of abbreviation used in WCAG is : "shortened form of a word, phrase, or name where the original expansion has not been rejected by the organization that it refers to and where the abbreviation has not become part of the language."

## H62: Using the ruby element

### Applicability

XHTML 1.1

This technique relates to:

- Success Criterion 3.1.6 (Pronunciation)
  - How to Meet 3.1.6 (Pronunciation)
  - Understanding Success Criterion 3.1.6 (Pronunciation)

### User Agent and Assistive Technology Support Notes

Ruby markup includes the `rp` element as a fallback mechanism for user agents that do not support XHTML 1.1. Although ruby markup is only defined in XHTML 1.1, IE 5.0 and later supports the `ruby`, `rt`, and `rp` elements even if they are used in HTML 4.01 or XHTML 1.0.

### Description

The objective of this technique is to use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.

There are many languages in which a run of text may mean different things depending on how the text is pronounced. This is common in East Asian languages as well as Hebrew, Arabic, and other languages; it also occurs in English and other Western European languages.

Ruby Annotation allows the author to annotate a "base text," providing a guide to pronunciation and, in some cases, a definition as well. Ruby is commonly used for text in Japanese and other East Asian languages. Ruby Annotation is defined as a module for XHTML 1.1.

There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a run of text such as a complete word or phrase. This is known as the "base" text (`rb` element). The Ruby annotation that indicates how to pronounce the term (the `rt` element, or Ruby text) is shown in a smaller font. (The term "Ruby" is derived from a small font used for this purpose in printed texts.) The Ruby text is usually rendered above or immediately before the base text, that is, immediately above horizontal text or immediately to the right of vertical text. Sometimes Japanese uses Ruby to provide the meaning of text on the other side of the base text (visually) from the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user agents that do not support Ruby markup (that is, user agents that do not support XHTML 1.1).

Complex Ruby markup makes it possible to divide the base text into smaller units, each of which may be associated with a separate Ruby annotation. Complex Ruby markup does not support the fallback option.

Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can include diacritical marks that convey pronunciation. It is also uncommon in English and European languages.

Note: The primary reason for indicating pronunciation through Ruby or any other means is to make the content accessible to people with disabilities who could read and understand the language of the content if information about pronunciation were provided. It is not necessary to provide information about pronunciation for use by people who are not familiar with the language of the content.

### Examples

#### Example 1: Ruby markup providing pronunciation information for an initialism

This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the rb element), and the pronunciation information is shown by the Ruby text (the rt element). The Ruby parenthesis element `rp` is used for user agents that do not support Ruby annotations to indicate that the text in the `rt` element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)

Example Code:

    <p>When we talk about these guidelines, we often just call them
      <ruby>
        <rb>WCAG</rb>
        <rp>(</rp>
          <rt>Wuh-KAG</rt>
        <rp>)</rp>
      </ruby>.
    </p>

#### Example 2: Ruby annotation for Japanese

The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters(Kanji). the Ruby parenthesis element `rp` is used for user agents that do not support Ruby annotations to indicate that the text in the `rt` element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)

Example Code:

    <p>
      <ruby>
        <rb>慶應大学</rb>
        <rp>(</rp>
        <rt>けいおうだいがく</rt>
        <rp>)</rp>
      </ruby>
    </p>

### Resources

Resources are for information purposes only, no endorsement implied.

- Ruby Annotation

- IMS Guidelines for Topic-Specific Accessibility

- CSS 3 Ruby

- W3C I18N Techniques: Markup and text, "Using Ruby"

### Related Techniques

- G102: Providing the expansion or explanation of an abbreviation

### Tests

#### Procedure

For each run of text where a Ruby annotation is used to provide pronunciation information:

1. Check that a `rt` element contains pronunciation information for each run of text defined by the `rb` element.

2. If simple Ruby markup is used, check that the `rp` element is present to indicate to user agents that do not support Ruby annotations that the text in the rt element provides the pronunciation information. .

#### Expected Results

- Checks #1 and #2 are true.

## H63: Using the scope attribute to associate header cells and data cells in data tables

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### User Agent and Assistive Technology Support Notes

The `row` and `col` values of the `scope` attribute are currently supported to a large extent by most current versions of JAWS. However, there are still some problems and WindowEyes support for `scope` is inconsistent. The same is true for Japanese versions of these screen readers. Versions of JAWS prior to version 5 and older versions of WindowsEyes have inconsistent support for `scope`.

At the current time, those who want to ensure consistent support across Assistive Technologies for tables where the headers are not in the first row/column may want to use the technique for complex tables H43: Using id and headers attributes to associate data cells with header cells in data tables. For simple tables that have headers in the first column or row we recommend the use of the `th` and `td` elements.

### Description

The objective of this technique is to associate header cells with data cells using the `scope` attribute. The `scope` attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values `row`, `col`, `rowgroup`, and `colgroup` identify these possible scopes respectively.

For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables: :

- data cells marked up with `td` that also function as row header or column header

- header cells marked up with `td` instead of `th`. Sometimes, authors use this to avoid the display characteristics associated with `th` and also do not choose to use CSS to control the display for `th`.

Note: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope.

Note: For complex tables use ids and headers as in H43: Using id and headers attributes to associate data cells with header cells in data tables.

### Examples

#### Example 1: A simple schedule

In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row. The cells in the second column may then use `scope="row"`. The cells in the first row too are marked up with `td` and use `scope="col"`.

Example Code:

     <table border="1">
      <caption>Contact Information</caption>
      <tr>
        <td></td>
        <td scope="col">Name</td>
        <td scope="col">Phone#</td>
        <td scope="col">Fax#</td>
        <td scope="col">City</td>
      </tr><tr>
        <td>1.</td>
        <td scope="row">Joel Garner</td>
        <td>412-212-5421</td>
        <td>412-212-5400</td>
        <td>Pittsburgh</td>
      </tr><tr>
        <td>2.</td>
        <td scope="row">Clive Lloyd</td>
        <td>410-306-1420</td>
        <td>410-306-5400</td>
        <td>Baltimore</td>
      </tr><tr>
        <td>3.</td>
        <td scope="row">Gordon Greenidge</td>
        <td>281-564-6720</td>
        <td>281-511-6600</td>
        <td>Houston</td>
      </tr>
    </table>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Table Cells: scope attribute

- HTML 4.01 Table cells: The TH and TD elements

- Assistive technology reading tables

### Related Techniques

- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H51: Using table markup to present tabular information

### Tests

#### Procedure

For each data table:

1. Check that all `th` elements have a `scope` attribute.

2. Check that all `td` elements that act as headers for other elements have a `scope` attribute.

3. Check that all `scope` attributes have the value `row`, `col`, `rowgroup`, or `colgroup`.

#### Expected Results

- All checks above are true.

## H64: Using the title attribute of the frame and iframe elements

### Applicability

HTML and XHTML documents that use frames or iframes

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

### User Agent and Assistive Technology Support Notes

The use of the `longdesc` attribute on frame and iframe elements is not supported well by assistive technologies.

### Description

The objective of this technique is to demonstrate the use of the `title` attribute of the `frame` or `iframe` element to describe the contents of each frame. This provides a label for the frame so users can determine which frame to enter and explore in detail. It does not label the individual page (frame) or inline frame (iframe) in the frameset.

Note that the `title` attribute labels frames, and is different from the `title` element which labels documents. Both should be provided, since the first facilitates navigation among frames and the second clarifies the user's current location.

The `title` attribute is not interchangeable with the `name` attribute. The `title` labels the frame for users; the `name` labels it for scripting and window targeting. The `name` is not presented to the user, only the `title` is.

### Examples

#### Example 1

This example shows how to use the `title` attribute with `frame` to describe the frames containing the navigation bar and the document.

Example Code:

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>A simple frameset document</title>
      </head>
      <frameset cols="10%, 90%">
        <frame src="nav.html" title="Main menu" />
        <frame src="doc.html" title="Documents" />
        <noframes>
          <body>
            <a href="lib.html" title="Library link">Select to
            go to the electronic library</a>
          </body>
        </noframes>
      </frameset>
    </html>

#### Example 2

This example shows how to use the title attribute with `iframe` to describe the contents of an inline frame. The example also includes an alternative link to the page included by the iframe element for older browsers, which may not understand the `iframe`element.

Example Code:

     <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>A document using iframe</title>
      </head>
    ...
    <iframe src="banner-ad.html" id="testiframe"
      name="testiframe" title="Advertisement">
        <a href="banner-ad.html">Advertisement</a>
    </iframe>
    ...
    </html>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 FRAME element

- HTML 4.0.1 Inline frames: the IFRAME element

- Accessible Navigation, "Implementing Frame Titles"

### Tests

#### Procedure

1. Check each frame and iframe element in the HTML or XHTML source code for the presence of a title attribute.

2. Check that the title attribute contains text that identifies the frame.

#### Expected Results

- Checks #1 and #2 are true.

## H65: Using the title attribute to identify form controls when the label element cannot be used

### Applicability

HTML and XHTML form controls that are not identified using `value`, `alt`, or element content

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

### User Agent and Assistive Technology Support Notes

- User agents will display a tool tip when the mouse hovers above an `input` element containing a `title` attribute.

- If no `label` is available, JAWS and Window-Eyes speak the `title` attribute when the form control receives focus

  - JAWS 6.0 and later can be set to speak both `label` and `title` when the two items are different; however, very few users are aware of this setting.

  - WindowEyes 5.5 has a hot key, ins-E, that will display additional information, including the title attribute, for the item with focus.

### Description

The objective of this technique is to use the `title` attribute to label form controls when the visual design cannot accommodate the label (for example, if there is no text on the screen that can be identified as a label) or where it might be confusing to display a label. User agents, including assistive technology, can speak the `title` attribute.

### Examples

#### Example 1: A pulldown menu that limits the scope of a search

A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a visible label. The `title` attribute is used to identify the `select` menu. The `title` attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers.

Example Code:

    <label for="searchTerm">Search for:</label>
    <input id="searchTerm" type="text" size="30" value="" name="searchTerm">
    <select title="Search in" id="scope">
    …
    </select>

#### Example 2: Input fields for a phone number

A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.

Example Code:

    <fieldset><legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code"
    type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number"
    type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number"
    type="text" size="4" value="" >
    </fieldset>

#### Example 3: A Search Function

A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The `title` attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

Example Code:

    <input type="text" title="Type search term here" value="Type search term here"/> <input type="submit" value="Search"/>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 The title attribute

- Accessible Forms

- Accessible Forms using WCAG 2.0

### Related Techniques

- H44: Using label elements to associate text labels with form controls
- H71: Providing a description for groups of form controls using fieldset and legend elements

### Tests

#### Procedure

1. Identify each form control that is not associated with a `label` element

2. Check that the control has a `title` attribute

3. Check that the `title` attribute identifies the purpose of the control

#### Expected Results

- All checks above are true.

## H67: Using null alt text and no title attribute on img elements for images that AT should ignore

### Applicability

HTML and XHTML documents that load images.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### Description

The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.

If no title attribute is used, and the alt text is set to null (i.e. `alt=""`) it indicates to assistive technology that the image can be safely ignored.

Note: Although `alt=" "` is also valid, `alt=""` is recommended.

Note: Have a "null" ALT attribute is not the same as having no ALT attribute.

### Examples

#### Example 1

The following image is used to insert a decorative image on a Web page.

Example Code:

    <img src="squiggle.gif" width="20" height="20" alt="" />

### Resources

Resources are for information purposes only, no endorsement implied.

- 'Null alt text' in WebAIM's 'Creating Accessible Images' also shows how to do this in Dreamweaver.

### Related Techniques

(none currently listed)

### Tests

#### Procedure

For each image that should be ignored.

1. Check that `title` attribute is either absent or empty.

2. Check that `alt` attribute is present and empty or contains only whitespace (but not `&nbsp;`)

#### Expected Results

- #1 and #2 are true

## H69: Providing heading elements at the beginning of each section of content

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)

### User Agent and Assistive Technology Support Notes

JAWS and WindowEyes all provide navigation via headings and provide information about the level of the heading. The Opera browser provides a mechanism to navigate by headings. Additional plugins support navigation by headings in other user agents.

### Description

The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:

- to indicate start of main content

- to mark up section headings within the main content area

- to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation

- to markup images (containing text) which have the appearance of headings visually.

In some technologies, headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically.

Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly.

In technologies that support Cascading Style Sheets (CSS), styling can be used to change the way headings look or sound. It is even possible to style headings using CSS so that they are exposed to assistive technology but are hidden from view visually. However, showing the headings visually benefits a wider set of users, including those with some cognitive disabilities.

### Examples

#### Example 1

This example organizes the sections of a search page by marking each section heading using `h2` elements.

Example Code:

    <h1>Search Technical Periodicals</h1>
     <h2>Search</h2>
     <form action="search.php">
      <p><label for="searchInput">Enter search topic: </label>
      <input type="text" size="30" id="searchInput">
      <input type="submit" value="Go"></p>
     </form>
     <h2>Available Periodicals</h2>
     <div class="jlinks">
      <a href="pcoder.com">Professional Coder</a> |
      <a href="algo.com">Algorithms</a> |
      <a href="jse.com">Journal of Software Engineering</a>
     </div>
     <h2>Search Results</h2>
     ... search results are returned in this section ...

#### Example 2: Headings show the overall organization of the content

In this example, heading markup is used to make the navigation and main content sections perceivable.

Example Code:

    <!-- Logo, banner graphic, search form, etc.  -->
      <h2>Navigation</h2>
        <ul>
          <li><a href="about.htm">About us</a></li>
          <li><a href="contact.htm">Contact us</a></li>
           ...
        </ul>
      <h2>All about headings</h2>
       <!-- Text, images, other material making up the main content... -->

#### Example 3: Headings show the organization of material within the main content

Note that in HTML 4.01 and XHTML 1.x, heading elements only mark the beginning of sections; they do not contain them as element content.

Example Code:

     <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Cooking techniques</title>
      </head>
      <body>
        <h1>Cooking techniques</h1>
        <p>
          ... some text here ...
        </p>
        <h2>Cooking with oil</h2>
        <p>
            ... text of the section ...
        </p>
        <h2>Cooking with butter</h2>
        <p>
            ... text of the section ...
        </p>
      </body>
    </html>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 H1-H6 elements

- Pick a Heading Eric Meyer

- Quick tips for accessible headings

### Related Techniques

- H42: Using h1-h6 to identify headings

### Tests

#### Procedure

For all content which is divided into separate sections,

1. Check that each section starts with a heading.

#### Expected Results

- Check #1 is true.

## H70: Using frame elements to group blocks of repeated material

### Applicability

HTML and XHTML documents that use frames

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)

### Description

The objective of this technique is to demonstrate how framesets can be used to group blocks of repeated material. Since most user agents and assistive technology provide a way to navigate from frame to frame, using frames to organize elements can provide a mechanism for easily bypassing blocks of repeated content. If the site uses framesets, organize the blocks of content into separate frames. Make certain that the repeated blocks of content appear in the same frame within the frameset of each Web page. In addition, each frame element must have a title attribute to describe the content of the frame. When frames are properly titled, users can use frame navigation to easily navigate between blocks of content.

This technique is appropriate when framesets are already used to organize the content of the page; other techniques are preferred for pages that are not already using framesets, because many people using assistive technology have trouble with frames . An advisory technique about using noframes is available in Success Criterion 4.2.1.

### Examples

#### Example 1

The following example shows the use of two frames to organize content. The source of the first frame is the Web page, navigation.html, which contains the HTML for the navigation. This frame has a title attribute which identifies it as a navigation bar. The second frame contains the main content of the site as indicated by the source parameter of main.html and the title attribute, "Main News Content" which identifies its function.

Example Code:

    <frameset cols="20%, *">
      <frame src="navigation.html" name="navbar" title="Navigation Bar" />
      <frame src="main.html" name="maincontent" title="Main News Content" />
      <noframes>
        <p>View <a href="noframe.html">no frame version</a>.</p>
      </noframes>
    </frameset>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 The FRAMESET element

- HTML 4.01 The FRAME element

- Accessible Navigation

### Related Techniques

- H64: Using the title attribute of the frame and iframe elements

### Tests

#### Procedure

If the Web page uses frames to organize content:

1. Check if repeated blocks of content are organized into separate frames.

2. Check that the frames with repeated content appear in the same location within each frameset.

#### Expected Results

- Checks #1 and #2 are true.

## H71: Providing a description for groups of form controls using fieldset and legend elements

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)

### Description

The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.

Form controls can be grouped by enclosing them with the `fieldset` element. All controls within a given `fieldset` are then related. The first element inside the `fieldset` should be a `legend` element, which provides a label or instructions for the group. `Fieldsets` can be nested if desired, although this can lead to confusion if overdone.

Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. Because they are multiple controls, it is particularly important that they be grouped semantically so they can be more easily treated as a single control. Often, user agents will present the value of the `legend` before the label of each control, to remind users that they are part of the same group.

It can also be useful to group other sets of controls that are not as tightly related as sets of radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address".

Authors sometimes avoid using the `fieldset` element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the "border" property of the `fieldset` and the "position" property of the `legend`.

When a small group of related radio buttons includes clear instructions and distinct selections it may not be necessary to use fieldsets and legends; H44: Using label elements to associate text labels with form controls, may also be sufficient.

### Examples

#### Example 1: A multiple choice test

This example shows a test item with one question and five possible answers. Each answer is represented by a radio button (`input type="radio"`). The radio buttons are contained within a `fieldset`. The test question is tagged with the `legend` element.

Example Code:

    <fieldset>
      <legend>The play <cite>Hamlet</cite> was written by:</legend>
      <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
      <label for="shakesp">William Shakespeare</label><br />
      <input type="radio" id="kipling" name="hamlet" value="b">
      <label for="kipling">Rudyard Kipling</label><br />
      <input type="radio" id="gbshaw" name="hamlet" value="c">
      <label for="gbshaw">George Bernard Shaw</label><br />
      <input type="radio" id="hem" name="hamlet" value="d">
      <label for="hem">Ernest Hemingway</label><br />
      <input type="radio" id="dickens" name="hamlet" value="e">
      <label for="dickens">Charles Dickens</label>
    </fieldset>

#### Example 2: A set of checkboxes

The User Profile page for a Web site allows users to indicate their interests by selecting multiple checkboxes. Each checkbox (`input type="checkbox"`) has a `label`. The checkboxes are contained within a `fieldset`, and the `legend` element contains the prompt for the entire group of checkboxes.

Example Code:

    <fieldset>
      <legend>I am interested in the following (check all that apply):</legend>
      <input type="checkbox" id="photo" name="interests" value="ph">
      <label for="photo">Photography</label><br />
      <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
      <label for="watercol">Watercolor</label><br />
      <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
      <label for="acrylic">Acrylic</label>
      …
    </fieldset>

#### Example 3: Radio buttons submitting to the same named field

This example requests the user to choose a single philosopher. Note that each field has the same "`name`" attribute, indicating these radio buttons are related (they all submit the same field), and should be grouped as shown. Also note that while the "`name`" attributes are the same, the "`id`" attributes must be unique.

Example Code:

    <form action="http://example.com/vote" method="post">
      <fieldset>
        <legend>Your preferred philosopher</legend>
        <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
        <label for="philosopher_socrates">Socrates</label>
        <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
        <label for="philosopher_plato">Plato</label>
        <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
        <label for="philosopher_aristotle">Aristotle</label>
      </fieldset>
      </form>

Note: Groups of related checkboxes work in the same way, except the user is allowed to express more than one preference for the field.

#### Example 4: Logically related controls

In this example, form fields for residential and postal addresses are distinguished by the value of the `legend` in each `fieldset` grouping.

Example Code:

    <form action="http://example.com/adduser" method="post">
       <fieldset>
         <legend>Residential Address</legend>
         <label for="raddress">Address: </label>
         <input type="text" id="raddress" name="raddress" />
         <label for="rzip">Postal/Zip Code: </label>
         <input type="text" id="rzip" name="rzip" />
         ...more residential address information...
       </fieldset>
       <fieldset>
         <legend>Postal Address</legend>
         <label for="paddress">Address: </label>
         <input type="text" id="paddress" name="paddress" />
         <label for="pzip">Postal/Zip Code: </label>
         <input type="text" id="pzip" name="pzip" />
         ...more postal address information...
       </fieldset>
    </form>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Checkboxes

- Accessible Forms using WCAG 2.0

### Related Techniques

- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used

### Tests

#### Procedure

1. Check that groups of logically related input elements are contained within a fieldset element.

2. Check that any group of `input` elements of `type="radio"` or `type="checkbox"` with the same `name` attribute is contained within a `fieldset` element

3. Check that each `fieldset` has a `legend` element that includes a description of that group.

#### Expected Results

- All of the above checks are true.

## H73: Using the summary attribute of the table element to give an overview of data tables

### Applicability

HTML 4.01, XHTML 1.x

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### Description

The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The `summary` attribute of the `table` element makes this information available to people who use screen readers; the information is not displayed visually.

The `summary` is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The `summary` may also be helpful for simple data tables that contain many columns or rows of data.

The `summary` attribute may be used whether or not the table includes a `caption` element. If both are used, the `summary` should not duplicate the `caption`.

Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML `table` elements and to conform to the coding practice of separating presentation from content. However, if a layout table is used, then the `summary` attribute is not used or is null. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent" to the user. A `summary` would “break" this transparency by calling attention to the table. A null `summary` (`summary=""`) on layout tables is acceptable.

### Examples

#### Example 1: A data table with a summary but no caption

This example shows a bus schedule. The route number and direction are included in the `summary` along with information on how to use the schedule.

Example Code:

    <table summary="Schedule for Route 7 going downtown. Service begins
    at 4:00 AM and ends at midnight. Intersections are listed in the top row.
    Find the intersection closest to your starting point or destination, then read
    down that column to find out what time the bus leaves that intersection.">
      <tr>
        <th scope="col">State & First</th>
        <th scope="col">State & Sixth</th>
        <th scope="col">State & Fifteenth</th>
        <th scope="col">Fifteenth & Morrison</th>
      </tr>
        <td>4:00</td>
        <td>4:05</td>
        <td>4:11</td>
        <td>4:19</td>
      </tr>
      …
    </table>

#### Example 2: A data table with both a summary and a caption

In this example both a `summary` attribute and a `caption` element are used. The `caption` identifies the bus route. The `summary` helps users who are blind understand how to use the schedule. Screen readers read the `caption`, followed by the `summary`.

Example Code:

    <table summary="Intersections are listed in row 1.
    Find the intersection closest to your starting point
    or destination, then read down that column to find
    out what time the bus leaves that intersection.
    Service begins at 4:00 AM and ends at midnight.">
      <caption>Route 7 Downtown (Weekdays)</caption>
    …
    </table>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 summary attribute

### Related Techniques

- H39: Using caption elements to associate data table captions with data tables
- H51: Using table markup to present tabular information

### Tests

#### Procedure

1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row.

   1. If “no," the table is a layout table.

   2. If “yes," the table is a data table.

2. If the table is a layout table, check that the `summary` attribute is not present or `summary` attribute is null.

3. If the table is a data table and a `summary` is present, check that the `summary` attribute describes the table's organization or explains how to use the table

4. If both a `summary` attribute and a `caption` element are present for this data table, check that the `summary` does not duplicate the `caption`.

#### Expected Results

- For layout tables, #2 is true.

- For data tables, #3 and #4 are true.

## H74: Ensuring that opening and closing tags are used according to specification

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 4.1.1 (Parsing)
  - How to Meet 4.1.1 (Parsing)
  - Understanding Success Criterion 4.1.1 (Parsing)

### Description

The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content which involve having opening and closing tags that are not used according to specification. These errors can be avoided by using the HTML or XHTML mechanism to specify the technology and technology version, and making sure the Web page does not have these types of errors in it. There are several validators that the developer can use: validation reports generally mention these types of errors. This technique deals only with errors related to incorrectly formed opening and closing tags. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.

### Examples

#### Example 1: HTML

HTML pages include a document type declaration (sometimes referred to as `!DOCTYPE` statement). The developer can use offline or online validators (see Resources below) to check that all id attribute values are unique and that opening and closing tags are used according to the specification.

#### Example 2: XHTML

Like other other XML-based documents, XHTML documents reference a Document Type Definition (DTD) or other type of XML schema. The developer can use online or offline validators (including validation tools built into editors) to check that opening and closing tags are used according to the specification.

#### Example 3: Using test frameworks

When a Website generates HTML or XHTML dynamically instead of serving only static pages, a developer can use XHTMLUnit, XML Test Suite or a similar framework to test the generated XHTML code.

### Resources

Resources are for information purposes only, no endorsement implied.

- Do not forget to add a doctype by the W3C Quality Assurance Initiative explains what doctypes are and why you should use them.

- Recommended DTDs to use in your Web document by the W3C Quality Assurance Initiative is a list of commonly used declarations.

- How do I validate my code or check for possible errors? describes the tools in the free editor HTML-Kit for checking HTML, CSS and XML.

For other resources, see G134: Validating Web pages.

### Related Techniques

(none currently listed)

### Tests

#### Procedure

1. Check that there are closing tags for all elements with required closing tags.

2. Check that there are no closing tags for all elements where closing tags are forbidden.

3. Check that opening and closing tags for all elements are correctly nested.

#### Expected Results

Steps 1, 2, and 3 are true.

## H75: Ensuring that Web pages are well-formed

### Applicability

Any XML-based markup languages.

This technique relates to:

- Success Criterion 4.1.1 (Parsing)
  - How to Meet 4.1.1 (Parsing)
  - Understanding Success Criterion 4.1.1 (Parsing)

### Description

The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse contents. Well-formedness is checked by parsing the document with a conforming XML parserand checking if the validation report mentions well-formedness errors. Every conforming XML parser is required to check well-formedness and stop normal processing when a well-formedness error is found (a conforming XML parser does not need to support validation).

### Examples

#### Example 1:

XML files include a document type declaration, a xsi:schemaLocation attribute or other type of reference to a schema. The developer can use off-line or online validators, an XML editor or an IDE with XML support (see Resources below) to check well-formedness.

#### Example 2:

When XML files do not include a document type declaration, a xsi:schemaLocation attribute or a processing instruction referencing a schema even though there is a schema for them, the relevant schema is specified by a command line instruction, a user dialog or a configuration file, and the XML files are checked against the schema.

#### Example 3:

When XML files do not include a document type declaration, a xsi:schemaLocation attribute or a processing instruction referencing a schema even though there is a schema for them, the namespace is dereferenced to retrieve a schema document or resource directory (Resource Directory Description Language: RDDL), and the XML files are checked against the schema.

#### Example 4:

When a Website generates XML dynamically instead of serving only static documents, a developer can use XMLUnit, XML Test Suite or a similar framework to test the generated XML code.

### Resources

Resources are for information purposes only, no endorsement implied.

- Well-Formed XML Documents in Extensible Markup Language (XML) 1.0 (Third Edition), W3C Recommendation 04 February 2004.

- Well-Formed XML Documents in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.

- 4.3.2 Well-Formed Parsed Entities in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.

For other resources, see G134: Validating Web pages.

### Related Techniques

(none currently listed)

### Tests

#### Procedure

1. Load each file into a validating XML parser.

2. Check that there are no well-formedness errors.

#### Expected Results

Step 2 is true.

## H76: Using meta refresh to create an instant client-side redirect

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.2.5 (Change on Request)
  - How to Meet 3.2.5 (Change on Request)
  - Understanding Success Criterion 3.2.5 (Change on Request)

### Description

The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see SVR1: Implementing automatic redirects on the server side instead of on the client side (SERVER) ), but authors do not always have control over server-side technologies.

In HTML and XHTML, one can use the `meta` element with the value of the `http-equiv` attribute set to "Refresh" and the value of the `content` attribute set to "0" (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.

### Examples

#### Example 1

Example Code:

     <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>The Tudors</title>
        <meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
      </head>
      <body>
        <p>This page has moved to a <a href="http://thetudors.example.com/">
          theTudors.example.com</a>.</p>
      </body>
    </html>

### Resources

Resources are for information purposes only, no endorsement implied.

- See also F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh with a time-out.

### Related Techniques

- G110: Using an instant client-side redirect

### Tests

#### Procedure

1. Find all `meta` elements in the document.

2. For each meta element, check if it contains the attribute `http-equiv` with value "refresh" (case-insensitive) and the `content` attribute with a number greater than 0 followed by `;'URL=anyURL'` (where anyURL stands for the URI that should replace the current page).

#### Expected Results

Step 2 is false.

## H77: Identifying the purpose of a link using link text combined with its enclosing list item

### Applicability

All technologies that contain links.

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))

### Description

The objective of this technique is to identify the purpose of a link from the link and its list item context. The list item enclosing the link provides context for an otherwise unclear link when the link item is the nearest enclosing block-level ancestor element. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.

Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).

### Examples

#### Example 1

Example Code:

    <ul>
      <li>
        Check out the video report for last year's
        <a href="festival.htm">National Folk Festival</a>.
      </li>
      <li>
        <a href="listen.htm">Listen to the instruments</a>
      </li>
      <li>
        Guitar Man: George Golden talks about
        <a href="mkguitars.htm">making guitars</a>.
      </li>
    </ul>

#### Example 2: A list of video games for download

Example Code:

    <ul>
      <li>
        <a href="tomb_raider.htm">Tomb Raider: Legend</a>
        <a href="tomb_raider_images.htm">See Images</a>
        <a href="tomb_raider.mpeg">(Download Demo)</a>
      </li>
      <li>
        <a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
        <a href="fear_extraction_images.htm">See Images</a>
        <a href="fear_extraction.mpeg">(Download Demo)</a>
      </li>
      <li>
        <a href="call_of_duty.htm">Call of Duty 2</a>
        <a href="call_of_duty_images.htm">See Images</a>
        <a href="call_of_duty.mpeg">(Download Demo)</a>
      </li>
      <li>
        <a href="Warhammer 40K.htm">Warhammer 40K</a>
        <a href="warhammer_40k_images.htm">See Images</a>
        <a href="Warhammer_40k.mpeg">(Download Demo)</a>
      </li>
    </ul>

### Resources

No resources available for this technique.

### Related Techniques

- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
- G91: Providing link text that describes the purpose of a link
- H33: Supplementing link text with the title attribute
- H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- H80: Identifying the purpose of a link using link text combined with the preceding heading element
- H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
- C7: Using CSS to hide a portion of the link text

### Tests

#### Procedure

For each link in the content that uses this technique:

1. Check that the link is part of a list item.

2. Check that text of the link combined with the text of its enclosing list item describes the purpose of the link.

#### Expected Results

- The above checks are true.

## H78: Identifying the purpose of a link using link text combined with its enclosing paragraph

### Applicability

All technologies that contain links.

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))

### User Agent and Assistive Technology Support Notes

JAWS 5.0 and later includes the following keystrokes:

- alt+leftArrow: read previous sentence

- alt+rightArrow: read next sentence

- alt+NumPad 5: read current sentence

- Ctrl+NumPad5: read current paragraph

The "read current sentence" keystroke supports examples 1, 2, and 4 below. If alt+numPad5 is pressed when a link has focus, the sentence is read without changing the focus.

The "read current paragraph" keystroke supports Example 3 below. If Ctrl+NumPad 5 is pressed when the link has focus, the entire paragraph is read without changing the focus.

Window-Eyes 5.5 has hotkeys to read the current sentence and current paragraph; thus Window-Eyes 5.5 supports the examples listed below.

To surf the internet with WindowEyes you must be in browse mode. Current sentence and current paragraph hot keys do not work in browse mode in version 6.1.

The factory default settings for reading surrounding link context are as follows:

Desktop settings:

- Character = CTRL-NUMPAD-LEFT ARROW

- Word = CTRL-NUMPAD-RIGHT ARROW

- Line = CTRL-NUMPAD-CENTER

- Sentence = Not available in Browse mode

- (Next Sentence command is undefined by default on Desktop mode but the next line is the DOWN Arrow.)

- Next Paragraph = P

- Prior Paragraph = Shift P

- Current Paragraph = Not Available in Browse mode

Laptop

- Character = ALT-SHIFT-LESS THAN

- Word Prior = ALT-SHIFT-J

- Word = ALT-SHIFT-K

- Word Next = ALT-SHIFT-L

- Sentence Prior = ALT-SHIFT-7

- Sentence = unavailable in browse mode

- Sentence Next = unavailable in browse mode

- Paragraph = Undefined on Laptop by default

- Line Prior = ALT-SHIFT-U

- Line = ALT-SHIFT-I

- Line Next = ALT-SHIFT-O

The "speak parent element" command in Fire Vox (Ctrl+Shift+u) supports Example 3. This keystroke works without changing the focus. Fire Vox is a free screen reader designed specifically for Firefox 1.0 and later. It supports Windows, Macintosh, and Linux.

### Description

The objective of this technique is to identify the purpose of a link from the link in its paragraph context. The paragraph enclosing the link provides context for an otherwise unclear link when the paragraph is the nearest enclosing block-level ancestor element. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.

Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).

### Examples

#### Example 1

Announcements column on a Folk Festival Web page.

Example Code:

    <h3>The final 15</h3>
    <p>Coming soon to a town near you...the final 15 in the
    National Folk Festival lineup.
    <a href="final15.html">[Read more...]</a>
    </p>

    <h3>Folk artists get awards</h3>
    <p>Performers from the upcoming National Folk Festival receive
     National Heritage Fellowships.
     <a href="nheritage.html">[Read more...]</a>
    </p>
    …

### Resources

No resources available for this technique.

### Related Techniques

- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
- G91: Providing link text that describes the purpose of a link
- H33: Supplementing link text with the title attribute
- H77: Identifying the purpose of a link using link text combined with its enclosing list item
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- H80: Identifying the purpose of a link using link text combined with the preceding heading element
- H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
- C7: Using CSS to hide a portion of the link text

### Tests

#### Procedure

For each link in the content that uses this technique:

1. Check that the link is part of a paragraph.

2. Check that text of the link combined with the text of its enclosing paragraph describes the purpose of the link.

#### Expected Results

- The above checks are true.

## H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings

### Applicability

All technologies that contain links.

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))

### Description

The objective of this technique is to identify the purpose of a link from the link in its data table context. This context is the table cell enclosing the link and the cell's associated headings. The data table context provides the purpose for an otherwise unclear link when the table cell is the nearest enclosing block-level ancestor element. It lets a user distinguish this link from other links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is not sufficiently descriptive for people with disabilities, especially those with cognitive disabilities.

### Examples

#### Example 1: A table of rental car choices

Example Code:

     <table>
    <tr>
      <th></th>
      <th id="a1">Alamo</th>
      <th id="a2">Budget</th>
      <th id="a3">National</th>
      <th id="a4">Avis</th>
      <th id="a5">Hertz</th>
    </tr>
    <tr>
      <th id="b1">Economy cars</th>
      <td headers="a1 b1"><a href="econ_ala.htm">$67/day</a></td>
      <td headers="a2 b1"><a href="econ_bud.htm">$68/day</a></td>
      <td headers="a3 b1"><a href="econ_nat.htm">$72/day</a></td>
      <td headers="a4 b1"><a href="econ_av.htm">$74/day</a></td>
      <td headers="a5 b1"><a href="econ_hz.htm">$74/day</a></td>
    </tr>
    <tr>
      <th id="b2">Compact cars</th>
      <td headers="a1 b2"><a href="comp_ala.htm">$68/day</a></td>
      <td headers="a2 b2"><a href="comp_bud.htm">$69/day</a></td>
      <td headers="a3 b2"><a href="comp_nat.htm">$74/day</a></td>
      <td headers="a4 b2"><a href="comp_av.htm">$76/day</a></td>
      <td headers="a5 b2"><a href="comp_hz.htm">$76/day</a></td>
    </tr>
    <tr>
      <th id="b3">Mid-sized cars</th>
      <td headers="a1 b3"><a href="mid_ala.htm">$79/day</a></td>
      <td headers="a2 b3"><a href="mid_bud.htm">$80/day</a></td>
      <td headers="a3 b3"><a href="mid_nat.htm">$83/day</a></td>
      <td headers="a4 b3"><a href="mid_av.htm">$85/day</a></td>
      <td headers="a5 b3"><a href="mid_hz.htm">$85/day</a></td>
    </tr>
    <tr>
      <th id="b4">Full-sized cars</th>
      <td headers="a1 b4"><a href="full_ala.htm">$82/day</a></td>
      <td headers="a2 b4"><a href="full_bud.htm">$83/day</a></td>
      <td headers="a3 b4"><a href="full_nat.htm">$89/day</a></td>
      <td headers="a4 b4"><a href="full_av.htm">$91/day</a></td>
      <td headers="a5 b4"><a href="full_hz.htm">$91/day</a></td>
    </tr>
    </table>

### Resources

No resources available for this technique.

### Related Techniques

- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
- G91: Providing link text that describes the purpose of a link
- H33: Supplementing link text with the title attribute
- H77: Identifying the purpose of a link using link text combined with its enclosing list item
- H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
- H80: Identifying the purpose of a link using link text combined with the preceding heading element
- H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
- C7: Using CSS to hide a portion of the link text

### Tests

#### Procedure

For each link in the content that uses this technique:

1. Check that the link is in a table cell.

2. Check that text of the link combined with the text of the associated table heading describes the purpose of the link.

#### Expected Results

- The above checks are true.

## H80: Identifying the purpose of a link using link text combined with the preceding heading element

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))

### User Agent and Assistive Technology Support Notes

The command to take advantage of this technique in JAWS is "JAWS KEY + T".

### Description

The objective of this technique is to describe the purpose of a link from the context provided by its heading context. The preceding heading provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.

Note: Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

### Examples

#### Example 1: Blocks of information on hotels

The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

Example Code:

    <h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
      <ul class="horizontal">
        <li><a href="royal_palm_hotel_map.html">Map</a></li>
        <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
        <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
        <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
        <li><a href="royal_palm_hotel_book.html">Book now</a></li>
      </ul>

    <h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
      <ul class="horizontal">
        <li><a href="hotel_three_rivers_map.html">Map</a></li>
        <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
        <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
        <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
        <li><a href="hotel_three_rivers_book.html">Book now</a></li>
      </ul>

#### Example 2: A document provided in three formats

Example Code:

    <h2>Annual Report 2006-2007</h2>
    <p>
      <a href="annrep0607.html">(HTML)</a>&nbsp;
      <a href="annrep0607.pdf">(PDF)</a>&nbsp;
      <a href="annrep0607.rtf">(RTF)</a>
    </p>

#### Example 3: Newspaper Web site

Example Code:

    <h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
    <p>this week was a stellar week for the stock market as investing in gold rose 2%.
    <a href="Stockmarket_05052007.htm>More here</a></p>

### Resources

No resources available for this technique.

### Related Techniques

- G91: Providing link text that describes the purpose of a link
- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
- H33: Supplementing link text with the title attribute
- C7: Using CSS to hide a portion of the link text
- H77: Identifying the purpose of a link using link text combined with its enclosing list item
- H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

### Tests

#### Procedure

For each link in the content that uses this technique:

1. Find the heading element that precedes the link

2. Check that the text of the link combined with the text of that heading describes the purpose of the link.

#### Expected Results

- #2 is true.

## H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))

### User Agent and Assistive Technology Support Notes

Although the context information is programmatically associated with the link, assistive technology lacks commands for reading the parent list item without moving focus away from the link.

### Description

The objective of this technique is to describe the purpose of a link in a nested list from the context provided by the list item under which the list is nested. This list item provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.

Because current assistive technologies do not include commands to query information contextual information provided by parent list items, use of this technique requires users to navigate the list one item at a time. Therefore, this technique may not be appropriate for very long or deeply nested lists.

Note: Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

### Examples

#### Example 1: A document provided in three formats

Example Code:

    <ul>
    <li>Annual Report 2005-2006
      <ul>
      <li><a href="annrep0506.html">(HTML)</a></li>
      <li><a href="annrep0506.pdf">(PDF)</a></li>
      <li><a href="annrep0506.rtf">(RTF)</a></li>
      </ul>
    </li>
    <li>Annual Report 2006-2007
      <ul>
      <li><a href="annrep0607.html">(HTML)</a></li>
      <li><a href="annrep0607.pdf">(PDF)</a></li>
      <li><a href="annrep0607.rtf">(RTF)</a></li>
      </ul>
    </li>
    </ul>

#### Example 2: Blocks of information on hotels

The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

Example Code:

    <ul>
    <li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
      <ul class="horizontal">
        <li><a href="royal_palm_hotel_map.html">Map</a></li>
        <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
        <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
        <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
        <li><a href="royal_palm_hotel_book.html">Book now</a></li>
      </ul>
    </li>
    <li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
      <ul class="horizontal">
        <li><a href="hotel_three_rivers_map.html">Map</a></li>
        <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
        <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
        <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
        <li><a href="hotel_three_rivers_book.html">Book now</a></li>
      </ul>
    </li>
    </ul>

### Resources

No resources available for this technique.

### Related Techniques

- G91: Providing link text that describes the purpose of a link
- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
- H33: Supplementing link text with the title attribute
- C7: Using CSS to hide a portion of the link text
- H77: Identifying the purpose of a link using link text combined with its enclosing list item
- H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- H80: Identifying the purpose of a link using link text combined with the preceding heading element

### Tests

#### Procedure

For each link in the content that uses this technique:

1. Find the `ul` or ol element that contains the link

2. Check that this list element (`ul`, `ol`) is a descendant of an `li` element

3. Check that the text of the link combined with the text of that li element describes the purpose of the link.

#### Expected Results

- The above checks are true.

## H83: Using the target attribute to open a new window on user request and indicating this in link text

### Applicability

HTML 4.01 Transitional and XHTML 1.0 Transitional

This technique relates to:

- Success Criterion 3.2.5 (Change on Request)
  - How to Meet 3.2.5 (Change on Request)
  - Understanding Success Criterion 3.2.5 (Change on Request)

### Description

The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorientate or be missed completely by some users. In HTML 4.01 Transitional and XHTML 1.0 Transitional, the `target` attribute can be used to open a new window, instead of automatic pop-ups. (The `target` attribute is deleted from HTML 4.01 Strict and XHTML 1.0 Strict.) Note that not using the `target` allows the user to decide whether a new window should be opened or not. Use of the `target` attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.

### Examples

#### Example 1

The following example illustrates the use of the `target` attribute in a link that indicates it will open in a new window.

Example Code:

    <a href="help.html" target="_blank">Show Help (opens new window)</a>

### Related Techniques

- SCR24: Using progressive enhancement to open new windows on user request

### Tests

#### Procedure

1. Activate each link in the document to check if it opens a new window.

2. For each link that opens a new window, check that it uses the `target` attribute.

3. Check that the link text contains information indicating that the link will open in a new window.

#### Expected Results

- Checks #2 and #3 are true.

## H84: Using a button with a select element to perform an action

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.2.2 (On Input)
  - How to Meet 3.2.2 (On Input)
  - Understanding Success Criterion 3.2.2 (On Input)

### Description

The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the `select` element. The user may inspect the different values of the `select` element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.

This is particularly important for users who are choosing the value of the `select` element via the keyboard, since navigating through the options of the `select` element changes the value of the control.

### Examples

#### Example 1: A Calendar

A Web page lets the user choose any month of any year and display the calendar for that month. After the user has set the month and year, he displays the calendar by pressing the "Show" button. This example replies on client-side scripting to implement the action.

Example Code:

    <label for="month">Month:</label>
    <select name="month" id="month">
      <option value="1">January</option>
      <option value="2"> February</option>
      ...
      <option value="12">December</option>
    </select>
    <label for="year">Year:</label>
    <input type="text" name="year" id="year">
    <input type="button" value="Show" onclick = "...">

#### Example 2: Choosing an action

A `select` element contains a list of possible actions. The action is not performed until the user presses the "Do it" button.

Example Code:

    <form action="http://somesite.com/action" method="post">
      <label for="action">Options:</label>
      <select name="action" id="action">
        <option value="help">Help</option>
        <option value="reset">Reset</option>
        <option value="submit">Submit</option>
      </select>
      <button type="submit" name="submit" value="submit">Do It </button>
    </form>

### Resources

Resources are for information purposes only, no endorsement implied.

- Jukka Korpela: Navigational pulldown menus in HTML

### Related Techniques

- H32: Providing submit buttons
- G80: Providing a submit button to initiate a change of context

### Tests

#### Procedure

For each `select` element/button element combination:

1. Check that focus (including keyboard focus) on an option in the `select` element does not result in any actions

2. Check that selecting the button performs the action associated with the current `select` value

#### Expected Results

- All checks are true.

## H85: Using OPTGROUP to group OPTION elements inside a SELECT

### Applicability

HTML and XHTML pages that collect user input.

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

### User Agent and Assistive Technology Support Notes

The `optgroup` element is not widely supported by screen readers.

The `label` attribute for `option` and `optgroup` is supported inconsistently across user agents and is not widely supported by assistive technologies.

### Description

The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than simply delimiting the groups with "dummy" list entries. This allows user agents to collapse the options by group to support quicker skimming of the options, and to indicate in what group an option of interest is located. It also helps to visually break up long lists so that users can more easily locate the option(s) they are interested in.

In HTML, the `select` element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with `option` elements. To group options together, use the `optgroup` element, with the related `option` elements inside that element. Label the group with the "label" attribute so users will know what to expect inside the group.

The `optgroup` element should be directly inside the `select` element, and the `option` elements directly inside the `optgroup`. It is possible for a `select` element to contain both single `option` elements and `optgroup` groups, though authors should consider if this is in fact the design intent when using this. It is not possible to nest the `optgroup` element, so only one level of grouping can be done within a `select`.

### Examples

#### Example 1

The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.

Example Code:

    <form action="http://example.com/prog/someprog" method="post">
        <label for="food">What is your favorite food?</label>
        <select id="food" name="food">
          <optgroup label="Fruits">
            <option value="1">Apples</option>
            <option value="3">Bananas</option>
            <option value="4">Peaches</option>
            <option value="5">...</option>
          </optgroup>
          <optgroup label="Vegetables">
            <option value="2">Carrots</option>
            <option value="6">Cucumbers</option>
           <option value="7">...</option>
         </optgroup>
         <optgroup label="Baked Goods">
           <option value="8">Apple Pie</option>
           <option value="9">Chocolate Cake</option>
           <option value="10">...</option>
         </optgroup>
       </select>
    </form>

#### Example 2

The following example shows how a multi-select box can make use of the `optrgroup` element.

Example Code:

    <form action="http://example.com/prog/someprog" method="post">
        <label for="related_techniques"><strong>Related Techniques:</strong></label>
        <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
      <optgroup label="General Techniques">
        <option value="G1">G1: Adding a link at the top of each page ... </option>
        <option value="G4">G4: Allowing the content to be paused and restarted ... </option>
        <option value="G5">G5: Allowing users to complete an activity without any time... </option>
        <option value="G8">G8: Creating an extended audio description for the ... </option>
        <option value="G9">G9: Creating captions for live synchronized media... </option>
        <option value="G10">G10: Creating components using a technology that ... </option>
      </optgroup>
      <optgroup label="HTML Techniques">
        <option value="H2">H2: Combining adjacent image and text links for the same ... </option>
        <option value="H4">H4: Creating a logical tab order through links, form ... </option>
        <option value="H24">H24: Providing text alternatives for the area ...
        </option>
      </optgroup>
      <optgroup label="CSS Techniques">
        <option value="C6">C6: Positioning content based on structural markup... </option>
        <option value="C7">C7: Using CSS to hide a portion of the link text... </option>
      </optgroup>
      <optgroup label="SMIL Techniques">
        <option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
        <option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
        <option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
      </optgroup>
      <optgroup label="ARIA Techniques">
        <option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
        <option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
        <option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
        <option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form  ... </option>
      </optgroup>
      <optgroup label="Common Failures">
        <option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
        <option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
        <option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images  ... </option>
        <option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
      </optgroup>
    </select>
    </form>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML SELECT element

- HTML OPTGROUP element

- Creating Accessible Forms

- Accessible Forms using WCAG 2.0

### Tests

#### Procedure

1. Check the set of options within a selection list to see if there are groups of related options.

2. If there are groups of related options, they should be grouped with `optgroup`.

#### Expected Results

- Check #2 is true.

## H86: Providing text alternatives for ASCII art, emoticons, and leetspeak

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### User Agent and Assistive Technology Support Notes

- Assistive technologies provide different levels of support for speaking title attributes. Some do not include features that allow users to access information provided via the title attribute.

- Implementing this technique with the `title` attribute is only sufficient if the `title` attribute is accessibility supported. The content of the `title` attribute needs to be available to all keyboard users (not only those with text-to-speech software) for this attribute to be accessibility supported.

- JAWS 6.2 and higher and WindowEyes 5.0 and higher support the abbr and acronym elements. They can all be set to speak the title attribute when these elements are encountered, but this is not the default setting and is often not turned on by users.

- Many graphical user agents render text enclosed within an `abbr` or `acronym` element with a dotted line below or surrounding it. In addition, when the mouse hovers over the element, the expansion is displayed as a tool tip.

- In Internet Explorer 7 and below, items marked using the `abbr` element are not displayed with any additional formatting. For IE 6 and below, the expanded version does not display as a tooltip when the mouse hovers over the item.

- Within a given user agent or assistive technology, `abbr` and `acronym` elements are presented to users in the same way.

### Description

Before graphics became widely used on the internet, ASCII characters were often arranged to form pictures or graphs. Although ASCII art is not used frequently on the Web anymore, it must be remembered that, when it is used, it is very confusing to people who are blind and accessing the internet using screen readers. If it is used it should also have a text explanation of what the picture is. It is also suggested that there be a link to skip over the ASCII art (although this is not required).

Emoticons are very popular. They include ASCII characters that form facial expressions and other ways to communicate an emotion. They can be confusing for screen reader users. When possible it is better simply to use a word like "smile" instead of an emoticon. But if emoticons are used they should have a text alternative. In some contexts, blog and forum software for example, plug-ins are available that automatically convert ASCII characters used as emoticons into HTML images with text alternatives.

Leetspeak uses various combinations of ASCII characters to replace Latinate letters. Leet has become a part of Internet culture and slang. Leet is frequently used to beat text and spam filters. It is often incomprehensible to blind people using screen readers, and therefore requires a text alternative in order to conform to Success Criteria 1.1.1.

Note: Because support for this technique is limited, it is recommended that authors provide the text alternative in text.

### Examples

#### Example 1

The following shows three options for providing alternatives for an emoticon representing "fright," which is made out of an equal sign followed by the number eight, a hyphen and the number zero.

Example Code:

    =8-0 (fright)

    <abbr title="fright">=8-0</abbr>

    <img src="fright.gif" alt="fright"/>

#### Example 2

Here is ASCII art with an explanation of the picture preceding it. It includes a link to skip over the ASCII art. Skip ASCII example.

Example Code:

     Figure 1: ASCII art picture of a butterfly.
     <a href="#skipbutterfly">Skip ASCII image</a>

                                                                    LLLLLLLLLLL
                                                                __LLLLLLLLLLLLLL
                                                               LLLLLLLLLLLLLLLLL
                                                             _LLLLLLLLLLLLLLLLLL
                                                            LLLLLLLLLLLLLLLLLLLL
                                                          _LLLLLLLLLLLLLLLLLLLLL
                                                          LLLLLLLLLLLLLLLLLLLLLL
                                                  L     _LLLLLLLLLLLLLLLLLLLLLLL
                                                 LL     LLLLLL~~~LLLLLLLLLLLLLL
                                                _L    _LLLLL      LLLLLLLLLLLLL
                                                L~    LLL~        LLLLLLLLLLLLL
                                               LL   _LLL        _LL   LLLLLLLL
                                              LL    LL~         ~~     ~LLLLLL
                                              L   _LLL_LLLL___         _LLLLLL
                                             LL  LLLLLLLLLLLLLL      LLLLLLLL
                                             L  LLLLLLLLLLLLLLL        LLLLLL
                                            LL LLLLLLLLLLLLLLLL        LLLLL~
                      LLLLLLLL_______       L _LLLLLLLLLLLLLLLL     LLLLLLLL
                             ~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~       LLLLLL
                           ______________LLL  LLLLLLLLLLLLLL ______LLLLLLLLL_
                       LLLLLLLLLLLLLLLLLLLL  LLLLLLLL~~LLLLLLL~~~~~~   ~LLLLLL
                 ___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____       _LLLLLL_
              LLLLLLLLLLL~~   LLLLLLLLLLLLLLL   LLLLLLLLLLLLLLLLLL     ~~~LLLLL
          __LLLLLLLLLLL     _LLLLLLLLLLLLLLLLL_  LLLLLLLLLLLLLLLLLL_       LLLLL
         LLLLLLLLLLL~       LLLLLLLLLLLLLLLLLLL   ~L ~~LLLLLLLLLLLLL      LLLLLL
       _LLLLLLLLLLLL       LLLLLLLLLLLLLLLLLLLLL_  LL      LLLLLLLLL   LLLLLLLLL
      LLLLLLLLLLLLL        LLLLLLLLLLLLL~LLLLLL~L   LL       ~~~~~       ~LLLLLL
     LLLLLLLLLLLLLLL__L    LLLLLLLLLLLL_LLLLLLL LL_  LL_            _     LLLLLL
    LLLLLLLLLLLLLLLLL~     ~LLLLLLLL~~LLLLLLLL   ~L  ~LLLL          ~L   LLLLLL~
    LLLLLLLLLLLLLLLL               _LLLLLLLLLL    LL  LLLLLLL___     LLLLLLLLLL
    LLLLLLLLLLLLLLLL              LL~LLLLLLLL~     LL  LLLLLLLLLLLL   LLLLLLL~
    LLLLLLLLLLLLLLLL_  __L       _L  LLLLLLLL      LLL_ LLLLLLLLLLLLLLLLLLLLL
     LLLLLLLLLLLLLLLLLLLL        L~  LLLLLLLL      LLLLLLL~LLLLLLLLLLLLLLLL~
      LLLLLLLLLLLLLLLLLLLL___L_ LL   LLLLLLL       LLLL     LLLLLLLLLLLLLL
       ~~LLLLLLLLLLLLLLLLLLLLLLLL     LLLLL~      LLLLL        ~~~~~~~~~
               LLLLLLLLLLLLLLLLLL_ _   LLL       _LLLLL
                   ~~~~~~LLLLLLLLLL~             LLLLLL
                             LLLLL              _LLLLLL
                             LLLLL    L     L   LLLLLLL
                              LLLLL__LL    _L__LLLLLLLL
                              LLLLLLLLLL  LLLLLLLLLLLL
                               LLLLLLLLLLLLLLLLLLLLLL
                                ~LLLLLLLLLLLLLLLLL~~
                                   LLLLLLLLLLLLL
                                     ~~~~~~~~~
    <a name="skipbutterfly"></a>

#### Example 3

The following is Leetspeak for "Austin Rocks".

Example Code:

    <abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>

### Tests

#### Procedure

1. Open the page in a common browser.

2. Check to see that the content contains ASCII art, emoticons and/or leetspeak.

3. Check that there is a text alternative immediately before or after all ASCII art, emoticons and/or Leetspeak.

#### Expected Results

- Test procedure #3 is true.

## H87: Not interfering with the user agent's reflow of text as the viewing window is narrowed

### Applicability

Not interfering with the user agent's reflow of text as the viewing window is narrowed

This technique relates to:

- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

### Description

This technique helps avoid situations where horizontal scrolling may occur. Many people with cognitive disabilities and low vision users who do not use assistive technology have a great deal of trouble with blocks of text that require horizontal scrolling. It involves not interfering with the reflow of text if the window is narrowed. One of the best ways to do this to define widths of text block containers in percentages.

HTML and XHTML user agents automatically reflow text as the browser window is narrowed as long as the author does not specify widths using absolute measurements such as pixels or points.

### Examples

#### Example 1

A newspaper site includes articles with columns that adjust with the user agents window width. Users with cognitive disabilities can narrow the column to a width that makes it easier to read.

### Resources

Resources are for information purposes only, no endorsement implied.

- CSS Box Model

### Related Techniques

- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

### Tests

#### Procedure

1. Open the content that contains a block of text in a common browser.

2. Narrow the viewing window to 1/4 of the screen width.

3. Check to see that the content does not require horizontal scrolling to read a line of text.

#### Expected Results

- Check #3 is true.

## H88: Using HTML according to spec

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 4.1.1 (Parsing)
  - How to Meet 4.1.1 (Parsing)
  - Understanding Success Criterion 4.1.1 (Parsing)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

### Description

The objective of this technique is to use HTML and XHTML according to their respective specifications. Technology specifications define the meaning and proper handling of features of the technology. Using those features in the manner described by the specification ensures that user agents, including assistive technologies, will be able to present representations of the feature that are accurate to the author's intent and interoperable with each other.

At the time this technique was published, the appropriate versions of these technologies is HTML 4.01 and XHTML 1.0. HTML 4.01 is the latest mature version of HTML, which provides specific accessibility features and is widely supported by user agents. XHTML 1.0 provides the same features as HTML 4.01, except that it uses an XML structure, has a more strict syntax than the HTML structure. Later versions of these technologies are not mature and / or are not widely supported by user agents at this time.

There are a few broad aspects to using HTML and XHTML according to their specification.

1. Using only features that are defined in the specification HTML defines sets of elements, attributes, and attribute values that may be used on Web pages. These features have specific semantic meanings and are intended to be processed by user agents in particular ways. Sometimes, however, additional features come into common authoring practice. These are usually initially supported by only one user agent. When features not in the specification are used, many user agents may not support the feature for a while or ever. Furthermore, lacking standard specifications for the use of these features, different user agents may provide varying support. This impacts accessibility because assistive technologies, developed with fewer resources than mainstream user agents, may take a long time if ever to add useful support. Therefore, authors should avoid features not defined in HTML and XHTML to prevent unexpected accessibility problems.

2. Using features in the manner prescribed by the specification The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification.

3. Making sure the content can be parsed HTML and XHTML also define how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification.

### Resources

Resources are for information purposes only, no endorsement implied.

Refer to the resources section of G134: Validating Web pages.

### Related Techniques

- H74: Ensuring that opening and closing tags are used according to specification
- H75: Ensuring that Web pages are well-formed

### Tests

#### Procedure

For each HTML or XHTML page:

1. Check that the page uses only elements, attributes, and attribute values that are defined in the relevant specification.

2. Check that elements, attributes, and values are used in the manner prescribed by the relevant specification.

3. Check that the page can be parsed correctly, according to the rules of the relevant specification.

Note: Check #1 and #3 are most easily checked with page validation tools. Check #2 can be checked with the assistance of heuristic evaluation tools though manual judgment is usually required.

#### Expected Results

- Checks #1, #2, and #3 are true.

## H89: Using the title attribute to provide context-sensitive help

### Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 3.3.5 (Help)
  - How to Meet 3.3.5 (Help)
  - Understanding Success Criterion 3.3.5 (Help)

### User Agent and Assistive Technology Support Notes

- Some current assistive technology provide feedback to the user when form fields have title attribute content available.

- Some graphical user agents will display a tool tip when the mouse hovers above a form field containing a `title` attribute. However, current user agents do not provide access to the `title` attribute content via the keyboard.

- The tool tip in some common user agents disappears after a short period of time (approximately 5 seconds). This can cause difficulty accessing title attribute content for those users who can use a mouse but have fine motor skill impairment, and may result in difficulties for users who need more time to read the tool tip.

- It is difficult for most users to resize, adjust background colors, reposition or otherwise control the presentation of title attribute content in many current user agents.

- This technique can only be used when the element has an explicitly associated label. In the absence of a lable, the title will be used as the Name in the accessibility API of current user agents that support one. The help text described below makes a poor name.

### Description

The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a `title` attribute. The help may include format information or examples of input.

Note: Current user agents and assistive technologies do not always provide the information contained in the `title` attribute to users. Avoid using this technique in isolation until the `title` attribute has wide-spread support.

### Examples

#### Example 1

A mapping application provides a form consisting of a label "Address:", an input box and a submit button with value "Find map". The input box has a `title` attribute value with an example of the address format the user should enter.

Example Code:

    <label for="searchAddress">Address: </label>
    <input id="searchAddress" type="text" size="30" value="" name="searchAddress"
     title="Address example: 101 Collins St, Melbourne, Australia" />

#### Example 2

A form that allows users to pay their bill online requires the user to enter their account number. The input box associated with the "Account number" label has a `title` attribute providing information on locating the account number.

Example Code:

    <label for="accNum1">Account number: </label>
    <input id="accNum1" type="text" size="10" value="" title="Your account number
     can be found in the top right-hand corner of your bill." />

### Related Techniques

- H65: Using the title attribute to identify form controls when the label element cannot be used
- G71: Providing a help link on every Web page

### Tests

#### Procedure

1. Identify form controls that require text input.

2. Check that each form control has an explicitly associated label

3. Check that each form control has context-sensitive help provided in the `title` attribute.

#### Expected Results

- Checks #2 and #3 are true.

## H90: Indicating required form controls

### Applicability

HTML and XHTML controls that use external labels.

This technique relates to:

- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)

### User Agent and Assistive Technology Support Notes

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, `<label>First name <input type="text" name="firstname"></label>`).

- JAWS 7.10 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It reads the label for explicit and implicit labels for text fields in both virtual PC cursor and forms reading mode. In forms mode it does not read the label for implicit labels on checkboxes and radio fields.

- Window-Eyes 5.5 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It will always speak the label for an explicitly labelled form field. It does not speak the label for the implicitly labelled form control in browse on mode but will speak the implicit label when navigating from control to control in browse off mode.

User agents will display a tool tip when the mouse hovers above an `input` element containing a `title` attribute. Title attributes are exposed to assistive technology and are displayed as tooltips in many graphical browsers. Tooltips can't be opened via the keyboard, so this information may not be available to sighted keyboard users.

If no `label` is available, JAWS and Window-Eyes speak the `title` attribute when the form control receives focus

- JAWS 6.0 and later can be set to speak both `label` and `title` when the two items are different; however, very few users are aware of this setting.

- WindowEyes 5.5 has a hot key, ins-E, that will display additional information, including the title attribute, for the item with focus.

Some user agents (specifically the Window-Eyes screen reader) do not by default voice the asterisk character in form labels. There is a preference that Window-Eyes users can modify to adjust this behavior but many users should be expected not to have made this change.

### Description

The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the `label` element, or the `legend` for groups of controls associated via `fieldset`. If a symbol is used, the user is advised of its meaning before the first use.

### Examples

#### Example 1: Using text to indicate required state

The text field in the example below has the explicit label of "First name (required):". The `label` element's `for` attribute matches the `id` attribute of the `input` element and the `label` text indicates that the control is required.

Example Code:

    <label for="firstname">First name (required):</label>
    <input type="text" name="firstname" id="firstname" />

Note: Some authors abbreviate "required" to "req." but there is anecdotal evidence that suggests that this abbreviation is confusing.

#### Example 2: Using an asterisk to indicate required state

The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a span element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.

Example Code:

    CSS:
    .req {font-size: 150%}

    HTML:

    <p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
    <form action="http://www.test.com" method="post">
    <label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
    <input type="text" name="firstname" id="firstname" />

#### Example 3: Using an image to indicate required state

The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.

Example Code:

    <p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
    <form action="http://www.test.com" method="post">
    <label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
    <input type="text" name="firstname" id="firstname" />
    ...

#### Example 4: Indicating required state for groups of radio buttons or check box controls

Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the `legend` element instead of the `label` element.

Example Code:

    <fieldset>
    <legend>I am interested in the following (Required):</legend>
    <input type="checkbox" id="photo" name="interests" value="ph">
    <label for="photo">Photography</label></br>
    <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
    <label for="watercol">Watercolor</label></br>
    <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
    <label for="acrylic">Acrylic</label>
    …
    </fieldset>

### Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 form labels

### Related Techniques

- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used
- H71: Providing a description for groups of form controls using fieldset and legend elements

### Tests

#### Procedure

1. For each required form control, check that the required status is indicated in the form control's `label` or `legend`.

2. For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.

#### Expected Results

- All checks above are true.

## H91: Using HTML form controls and links

### Applicability

HTML form controls and links

This technique relates to:

- Success Criterion 2.1.1 (Keyboard)
  - How to Meet 2.1.1 (Keyboard)
  - Understanding Success Criterion 2.1.1 (Keyboard)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

### Description

The objective of this technique is to use standard HTML form controls and link elements to provide keyboard operation and assistive technology interoperability of interactive user interface elements.

User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.

In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the `button` element text or image '`alt`' attribute as the name. In the case of form controls, `label` elements or '`title`' attributes are used. The following table describes how the role, name, value, and state are determined for HTML link and form controls.

HTML element | Role | Name | Value | State
--- | --- | --- | --- | ---
<a> | link | 'title' attribute, text within <a> element or 'alt' attribute if image link. Concatenated if both text and image 'alt' attribute are provided | 'href' attribute |
<button> | push button | text inside <button> element or 'title' attribute |  |
<fieldset> | grouping | <legend> element |  |
<input type = "button", "submit", or "reset"> | push button | 'value' attribute |  |
<input type = "image"> | push button | 'alt' attribute or 'title' attribute |  |
<input type = "text"> | editable text | <label> element associated with it or 'title' attribute | 'value' attribute |
<input type = "password"> | editable text | <label> element associated with it or 'title' attribute |  |
<input type="checkbox"> | checkbox | <label> element associated with it or 'title' attribute |  | 'checked' attribute
<input type="radio"> | radio button | <label> element associated with it or 'title' attribute |  | 'checked' attribute
<select> | combobox, list, or dropdown list | <label> element associated with it or 'title' attribute | <option> element with 'selected' attribute set to "selected" |
<textarea> | editable text | <label> element associated with it or 'title' attribute | text within <textarea> element |

### Examples

#### Example 1: Links

User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" from the <a href>. Note that <a name> does not provide a role of "link". The value is the URI in the 'href' attribute.

##### Example 1a

In example 1a, the name is the text inside the link, in this case "Example Site".

Example Code:

    <a href="www.example.com">Example Site</a>

##### Example 1b

In example 1b of an image inside a link, the 'alt' attribute for the image provides the name. Some tools for viewing APIs, such as Microsoft Inspect Objects, will not surface this, but AT does.

Example Code:

    <a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>

##### Example 1c

In example 1c, the name will be concatenated from the different elements inside the link to read "Example Text"

Example Code:

    <a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>

#### Example 2: Buttons

There are several ways to create a button in HTML, and they all map to the "push button" role.

##### Example 2a

In example 2a, the text is contained in the `button` element, in this case "save", as the name. There is no value.

Example Code:

    <button>Save</button>

##### Example 2b

Example 2b uses the 'value' attribute, in this case "Save", "Submit", or "Reset" as the name.

Example Code:

    <input type="button" value="Save" />
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset" />

##### Example 2c

Example 2c uses the 'alt' attribute, in this case "save", as the name.

Example Code:

    <input type="image" src="save.gif" alt="save" />

##### Example 2d

In example 2d, there is no 'alt' attribute so the 'title' attribute, in this case "save", is used as the name.

Example Code:

    <input type="image" src="save.gif" title="save" />

##### Example 2e

Example 2e uses the 'alt' attribute of the input element, in this case "save", as the name. The title attribute is not used.

Example Code:

    <input type="image" src="save.gif" alt="save" title="save" />

#### Example 3:

##### Example 3a

In example 3a, the input field has a role of "editable text". The `label` element is associated to the `input` element via the 'for' attribute which references the 'id' attribute of the `inpu`> element. The name comes from the `label` element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".

Example Code:

    <label for="text_1">Type of fruit</label>
    <input id="text_1" type="text" value="bananas">

##### Example 3b

In example 3b, the input field has the same role and value as example 3a, but gets its name from the 'title' attribute.

Example Code:

    <input id="text_1" type="text" value="bananas" title="Type of fruit">

#### Example 4: Checkbox

Example 4 has a role of "checkbox", from the 'type' attribute of the `input` element. The `label` element is associated with the `input` element via the 'for' attribute which refers to the 'id' attribute of the `input` element. The name comes from the `label` element, in this case "cheese". Its state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user's interaction with the control.

Example Code:

    <label for="cb_1">Cheese</label>
    <input id="cb_1" type="checkbox" checked="checked">

#### Example 5: Radio Buttons

Example 5 has a role of "radio button" from the 'type' attribute on the `input` element. Its name comes from the `label` element. The state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user.

Example Code:

    <input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
    <input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
    <input type="radio" name="color" id="r3" /><label for="r3">Green</label>

#### Example 6:

##### Example 6a

Example 6a has a role of "Combobox" from the `select` element. Its name is "Numbers" from the `label` element. Forgetting to give a name to the select is a common error. The value is the `option` element that has the 'selected' attribute set to "selected". In this case, the default value is "Two".

Example Code:

    <label for="s1">Numbers</label>
    <select id="s1" size="1">
     <option>One</option>
     <option selected="selected">Two</option>
     <option>Three</option>
    </select>

##### Example 6b

Example 6b has the same name, role, and value as the above, but sets the name with the 'title' attribute on the `select` element. This technique can be used when a visible label is not desirable.

Example Code:

    <select id="s1" title="Numbers" size="1">
     <option>One</option>
     <option selected="selected">Two</option>
     <option>Three</option>
    </select>

#### Example 7: Textarea

##### Example 7a

Example 7a has a role of "editable text" from the `textarea` element. The name is "Type your speech here" from the `label` element. The value is the content inside the `textarea` element, in this case "Four score and seven years ago".

Example Code:

    <label for="ta_1">Type your speech here</label>
    <textarea id="ta_1" >Four score and seven years ago</textarea>

##### Example 7b

Example 7b has the same role, name, and value, but sets the name using the 'title' attribute.

Example Code:

    <textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>

#### Example 8:

##### Radio Fieldset

The radio fieldset in example 8 has a role of "grouping". The name comes from the `legend` element.

Example Code:

    <fieldset>
      <legend>Choose a Color:</legend>
         <input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
         <input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
         <input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
    </fieldset>

### Resources

Resources are for information purposes only, no endorsement implied.

- Accessible Forms using WCAG 2.0

- MSDN Accessible DHTML elements

- Mozilla Accessibility/AT-Windows-API

### Related Techniques

- H44: Using label elements to associate text labels with form controls

### Tests

#### Procedure

1. Inspect the HTML source code.

2. For each instance of links and form elements, check that the name, value, and state are specified as indicated in the table above.

#### Expected Results

- Check #2 is true.