Techniques for WCAG 2.0

On this page:

-

# H90: Indicating required form controls

## Applicability

HTML and XHTML controls that use external labels.

This technique relates to:

- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)

## User Agent and Assistive Technology Support Notes

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, `<label>First name <input type="text" name="firstname"></label>`).

- JAWS 7.10 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It reads the label for explicit and implicit labels for text fields in both virtual PC cursor and forms reading mode. In forms mode it does not read the label for implicit labels on checkboxes and radio fields.

- Window-Eyes 5.5 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It will always speak the label for an explicitly labelled form field. It does not speak the label for the implicitly labelled form control in browse on mode but will speak the implicit label when navigating from control to control in browse off mode.

User agents will display a tool tip when the mouse hovers above an `input` element containing a `title` attribute. Title attributes are exposed to assistive technology and are displayed as tooltips in many graphical browsers. Tooltips can't be opened via the keyboard, so this information may not be available to sighted keyboard users.

If no `label` is available, JAWS and Window-Eyes speak the `title` attribute when the form control receives focus

- JAWS 6.0 and later can be set to speak both `label` and `title` when the two items are different; however, very few users are aware of this setting.

- WindowEyes 5.5 has a hot key, ins-E, that will display additional information, including the title attribute, for the item with focus.

Some user agents (specifically the Window-Eyes screen reader) do not by default voice the asterisk character in form labels. There is a preference that Window-Eyes users can modify to adjust this behavior but many users should be expected not to have made this change.

## Description

The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the `label` element, or the `legend` for groups of controls associated via `fieldset`. If a symbol is used, the user is advised of its meaning before the first use.

## Examples

### Example 1: Using text to indicate required state

The text field in the example below has the explicit label of "First name (required):". The `label` element's `for` attribute matches the `id` attribute of the `input` element and the `label` text indicates that the control is required.

Example Code:

    <label for="firstname">First name (required):</label>
    <input type="text" name="firstname" id="firstname" />

Note: Some authors abbreviate "required" to "req." but there is anecdotal evidence that suggests that this abbreviation is confusing.

### Example 2: Using an asterisk to indicate required state

The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a span element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.

Example Code:

    CSS:
    .req {font-size: 150%}

    HTML:

    <p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
    <form action="http://www.test.com" method="post">
    <label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
    <input type="text" name="firstname" id="firstname" />

### Example 3: Using an image to indicate required state

The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.

Example Code:

    <p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
    <form action="http://www.test.com" method="post">
    <label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
    <input type="text" name="firstname" id="firstname" />
    ...

### Example 4: Indicating required state for groups of radio buttons or check box controls

Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the `legend` element instead of the `label` element.

Example Code:

    <fieldset>
    <legend>I am interested in the following (Required):</legend>
    <input type="checkbox" id="photo" name="interests" value="ph">
    <label for="photo">Photography</label></br>
    <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
    <label for="watercol">Watercolor</label></br>
    <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
    <label for="acrylic">Acrylic</label>
    …
    </fieldset>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 form labels

## Related Techniques

- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used
- H71: Providing a description for groups of form controls using fieldset and legend elements

## Tests

### Procedure

1. For each required form control, check that the required status is indicated in the form control's `label` or `legend`.

2. For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.

### Expected Results

- All checks above are true.

- Top
- Contents
- Intro
- Previous: Technique H89
- Next: Technique H91