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:
- For every form field, ensure that a descriptive label is provided and use the
<label>element to identify each form control.
- For larger or complex forms, use the
<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.
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.
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)
- <label for=“first_name”>Your First Name</label>
- <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>):
- <label for=“first_name”><span lang=en”>Your First Name</span>
- <input id=“first_name” type=“text” name=“fname”/>
Example 2 (click on the label “Subscribe to newsletter” to see the effect)
- <label for=“firstname”>First name:</label>
- <input type=“text” name=“firstname” id=“firstname”><br>
- <label for=“subscribe”>Subscribe to newsletter</label>
- <input type=“checkbox” name=“subscribe” id=“subscribe”>
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:
- <button type=“submit”>Submit</button>
- <button type=“button”>Cancel</button>
- <input type=“submit” value=“Submit”>
- <input type=“button” value=“Cancel”>
These will produce the same results:
Lines 1 and 2 render as:
While lines 3 and 4 render as:
LABELING TEXT AREAS
Enter your address:
- <label for=“address”>Enter your address:</label><br> <textareaid=“address” name=“addresstext”></textarea>
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.
ASSOCIATING RELATED CONTROLS WITH
Grouping needs to be carried out visually and in the code, for example, by using the
<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
Output format Text file
- <legend>Output format</legend>
- type=“radio” name=“format” id=“txt” value=“txt” checked>
- for=“txt”>Text file
- type=“radio” name=“format” id=“csv” value=“csv”>
- for=“csv”>CSV file
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.
- <legend>I want to receive</legend>
- type=“checkbox” name=“newsletter” id=“check_1”>
- for=“check_1”>The weekly newsletter
ASSOCIATING RELATED CONTROLS WITH WAI-ARIA
WAI-ARIA provides a grouping role that functions similarly to
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.