Accessibility Tips
Techniques for improving web site accessibility.
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
Example 1: A text input field
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.
Example Code:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />Example 2: A checkbox
Example Code:
<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.
Example Code:
<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
Help
For assistance please contact Andrew Normand, Web Accessibility Program Leader
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867