H91: Using HTML form controls and links

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.

User Agent and Assistive Technology Support Notes

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 links 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

text inside <legend> element within fieldset 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

value is purposefully hidden

<input type="file">

editable text

<label> element associated with it or 'title' attribute

'value' 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>

list box

<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 1c

In example 1c, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.

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 clarifies how the user agent determines the name if the author specifies both the 'alt' and 'title' attributes of the input element. In this case, the user agent uses the 'alt' attribute ("Save") and ignores the 'title' attribute.

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 input> 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 3b

In example 3b, the input field has the same role as example 3a, but the value is the empty string and the field gets its name from the 'title' attribute.

Example Code:

<input id="text_1" type="text" 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 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 6:

Example 6a

Example 6a has a role of "list box" 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 present (with a value of "selected" in XHTML). In this case, the default value is "Two".

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

Related Techniques

Tests

Procedure

Inspect the HTML source code.

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.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.