Techniques for WCAG 2.0

On this page:

-

# 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.

- Top
- Contents
- Intro
- Previous: Technique H90
- Next: Technique C6