Form Labels
Problem
- Screen readers go into forms mode when they encounter form input fields. Unless form elements are grouped and have labels associated with them, the screen reader cannot tell the user what data needs to be entered.
WCAG Success Criteria
WCAG Sufficient 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
Testing Method
- Install the WAVE toolbar for Firefox
- Open Firefox
- On the WAVE toolbar, click on 'Errors, Features, and Alerts'
- This will perform a quick accessibility check of the page. Problems are highlighted in red. Things needing manual checking are shown as a question mark.
- Are there any red flags next to the form fields?
- Tip: Click on 'Reset Page' to remove the errors and alerts
- Tip: Try making changes to the code with Firebug and then retesting the page
Examples
Text Input Field - Example 1 - HTML
The text field in the example below has the explicit label of "First name:". The label
element's for
attribute matches the id
attribute of the input
element.
<label for="firstname">First name:</label>
<input type="text" id="firstname" />
Text Input Field - Example 2 - WAI-ARIA
The text field in the example below has the explicit label of "First name:". The label
element's id
attribute matches the arialabelledby
attribute of the input
element.
<label id="firstname">First name:</label>
<input type="text" aria-labelledby="firstname" />
Example 2: A checkbox
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
Example 3: A group of radio buttons
A small, related group of radio buttons with a clear description and labels for each individual element.
Note: To provide clear associations and instructions for a large set of related radio buttons H71: Providing a description for groups of form controls using fieldset and legend elements , should be considered.
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>
Practice Exercise
- Use the WAVE toolbar to check the form fields on this page