Technique H91:Using HTML form controls and links

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

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

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

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.

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

<button>Save</button>
                    

Example 2b

Example 2b 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" />   
                    

Example 2c

Example 2c uses the 'alt' attribute, in this case "save", as the name.

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

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

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

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

<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 as example 3a, but the value is the empty string and the field gets its name from the 'title' attribute.

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

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

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

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

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

<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, the name is set using the 'title' attribute, and the value is the empty string.

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

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