# Using HTML form controls and links

ID: H91

Technology: html

Type: Technique

## When to Use

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

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

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

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

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

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

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

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

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

## Related Techniques

- H44

## Resources

- HTML - Forms
- HTML - The `a` element
- MDN - The Input (Form Input) element
- MDN - The Anchor element
- HTML Accessibility API Mappings
- Accessible Name and Description Computation
- Core Accessibility API Mappings