Creating accessible forms, Labeling controls, Grouping controls

Creating accessible forms

Forms are commonly used to enable user interaction in Web sites and Web applications. For example for login, registering, commenting, and purchasing.

Since HTML5 provides functionalities to assist with accessibility, developers should make a concerted effort to mark up Web based forms. The following two guidelines are to give you a good start to make your forms accessible:

  1. For every form field, ensure that a descriptive label is provided and use the <label> element to identify each form control.
  2. For larger or complex forms, use the <fieldset> and <legend> elements to respectively group and associate related form controls.

We will give usage examples for each of these two basic guidelines in the following pages.

FURTHER READING

The WAI Web site hosts a Forms tutorial where you will find more guidelines to follow in order to make your forms truly accessible: Form Instructions, Validating Input, User Notifications, Multi-Page Forms, and Custom Controls.

Why is this important?

Forms can be visually and cognitively complex and difficult to use. Accessible forms are easier to use for everyone, including people with disabilities.

  • People with cognitive disabilities can better understand the form and how to complete it, as making forms accessible improves the layout structure, instructions, and feedback.
  • People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they need to complete.
  • People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.
  • People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.

Labeling controls

LABELS NEED TO DESCRIBE THE PURPOSE OF THE FORM CONTROL

When these labels are marked up correctly, people can interact with them using only the keyboard, using voice input, and using screen readers. Also, the label itself becomes clickable, which enables a person who has difficulty clicking on small radio buttons or checkboxes to click anywhere on the label text.

ASSOCIATING LABELS EXPLICITLY

Whenever possible, use the label element to explicitly associate text with form elements. The forattribute of the label must exactly match the id of the form control.

Example 1 (click on the label, not on the input field to see the effect)

First name:

Source code:

  1. <label for=“first_name”>Your First Name</label>
  2. <input id=“first_name” type=“text” name=“fname”/>

Alternative example 1

Note that you can also include the <input> element inside the <label>…</label> element, and also add a <span lang=”en”> for example, to indicate the language used in the label. Sometimes, nesting labels and inputs can also make CSS styling easier and produce better results with screen readers.

Source code (with <input> inside the <label>):

  1. <label for=“first_name”><span lang=en”>Your First Name</span>
  2. <input id=“first_name” type=“text” name=“fname”/>
  3. </label>

Example 2 (click on the label “Subscribe to newsletter” to see the effect)

First name:
Subscribe to newsletter

Source code:

  1. <label for=“firstname”>First name:</label>
  2. <input type=“text” name=“firstname” id=“firstname”><br>
  3. <label for=“subscribe”>Subscribe to newsletter</label>
  4. <input type=“checkbox” name=“subscribe” id=“subscribe”>

LABELING BUTTONS

The label of a <button> element is set inside the element and can include markup. This allows advanced accessibility hints to be included, such as marking up language change.

Example: <button>Mon <span lang=”fr”>bouton</span></button>, for a button with a label in French.

When using the <input> element to create buttons, the label is set in the value attribute of the element.

Example: <input type=”submit” value=”Please submit”>, that will be rendered as a button.

Source code for an example of “Submit” and “Cancel” buttons:

  1. <button type=“submit”>Submit</button>
  2. <button type=“button”>Cancel</button>
  3.  
  4. <input type=“submit” value=“Submit”>
  5. <input type=“button” value=“Cancel”>

These will produce the same results:

Lines 1 and 2 render as:
Submit Cancel

While lines 3 and 4 render as:

LABELING TEXT AREAS

Enter your address:

Source code:

  1. <label for=“address”>Enter your address:</label><br> <textareaid=“address” name=“addresstext”></textarea>

Grouping controls

Groupings of form controls, typically groups of related checkboxes and radio buttons, sometimes require a higher level description. Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify.

Grouping needs to be carried out visually and in the code, for example, by using the <fieldset> and <legend> elements to associate related form controls. The <fieldset> identifies the entire grouping and <legend> identifies the grouping’s descriptive text.

Example 1 – Radio buttons

In the example below, there are three radio buttons that allow the user to choose an output format. Radio button groups should always be grouped using <fieldset>.

Output format Text file

CSV file

HTML file
Source code:

  1. <fieldset>
  2. <legend>Output format</legend>
  3. type=“radio” name=“format” id=“txt” value=“txt” checked>
  4. for=“txt”>Text file

  • type=“radio” name=“format” id=“csv” value=“csv”>
  • for=“csv”>CSV file
  • […]
  • </fieldset>
  • Example 2 – Checkboxes

    In the example below, there are three checkboxes that are all part of an opt-in function for receiving different types of information.

    I want to receive

    The weekly newsletter
    Offers from the company
    Offers from associated companies

    Source code:

    1. <fieldset>
    2. <legend>I want to receive</legend>
    3. type=“checkbox” name=“newsletter” id=“check_1”>
    4. for=“check_1”>The weekly newsletter

  • […]
  • </fieldset>
  • WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. For example, a divelement can have role=group to indicate that the contained elements are members of a group.

    WAI-ARIA roles are very important in the accessibility world, and we invite you to see an example provided in the associated WAI tutorial. This article by Oscar Cao gives an Introduction to understanding WAI-ARIA 1.0 roles.