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

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