Technique H91:Using HTML form controls and links

About this Technique

This technique relates to:

2.1.1: Keyboard (Sufficient when used for ensuring keyboard control)
4.1.2: Name, Role, Value (Sufficient when used with G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes)

This technique applies to HTML form controls and links.

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; the aria-label or aria-labelledby properties; or the title attribute are used.

Examples

Example 1: Links

User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" because the a element has an href attribute. An a element without an href isn't a link. The link's value is the URI in the href attribute.

Link example A

In example A, the name is the text inside the link, in this case "Example Site".

<a href="https://example.com">Example Site</a>

Link example B

In example B of an image inside a link, the alt attribute for the image provides the name.

<a href="https://example.com"><img alt="Example" src="example-logo.gif"></a>

Link example C

In example C, 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.

<a href="https://example.com"><img alt="Example " src="example_logo.gif">Text</a>

Example 2: Buttons

There are several ways to create a button in HTML.

Buttons example A

In example A, the text contained in the button element, in this case "save", gives the button its name. There is no value.

<button type="button">Save</button>

Buttons example B

Example B uses the value attribute, in this case "Save", "Submit", or "Reset" as the name.

<input type="button" value="Save"> 
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Buttons example C

Example C uses the alt attribute, in this case "save", as the name.

<input alt="save" src="save.gif" type="image">

Buttons example D

Example D 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.

<input alt="save" src="save.gif" title="save the file" type="image">

Example 3: Text Input

Text Input example A

In example A, 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".

<label for="text-1">Type of fruit</label>
<input id="text-1" type="text" value="bananas">

Text Input example B

In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the aria-label property.

<input aria-label="Type of fruit" id="text-1" type="text">

Example 4: Checkbox

This example 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.

<label for="cb-1">Cheese</label> 
<input checked id="cb-1" type="checkbox">

Example 5: Radio Buttons

This example has a role of "radio button" from the type attribute on the input element. Its name comes from the label element. 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.

<input checked id="r1" name="color" type="radio"><label for="r1">Red</label>
<input id="r2" name="color" type="radio"><label for="r2">Blue</label>
<input id="r3" name="color" type="radio"><label for="r3">Green</label>

Example 6: Radio Fieldset

The radio fieldset has a role of "grouping". The name comes from the legend element.

<fieldset>
  <legend>Choose a Color:</legend>
  <div>
    <input id="red" name="color" type="radio" value="red">
    <label for="red">Red</label>
  </div>
  <div>
    <input id="blue" name="color" type="radio" value="blue">
    <label for="blue">Blue</label>
  </div>
  <div>
    <input id="green" name="color" type="radio" value="green">
    <label for="green">Green</label> 
</fieldset>

Example 7: Select Element

Select element example A

Example A 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. In this case, the default value is "Two".

<label for="s1">Numbers</label>
<select id="s1">
  <option>One</option>
  <option selected>Two</option>
  <option>Three</option>
</select>

Select Element example B

Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.

<select aria-label="Numbers" id="s1">
  <option>One</option>
  <option selected>Two</option>
  <option>Three</option>
</select>

Textarea

Textarea example A

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

<label for="ta-1">Type your speech here</label>
<textarea id="ta-1">Four score and seven years ago</textarea>

Textarea example B

Example B has the same role, the name is set using the title attribute, and the value is the empty string.

<textarea title="Type your speech here">Four score and seven years ago</textarea>

Related Resources

No endorsement implied.

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.