Web Accessibility Criteria - Input Field Labels

• Introduction
• Best Practices
• Examples
• How to Test for Input Field Labels
• WCAG 2.1 and References 

 Introduction

Labels are used to provide necessary information to the user to ensure that the component’s purpose is clear. The use of labels to provide guidance on how to fill out the form will ensure that screen reader users are also provided with the required instructions. When the screen reader enters the form area the assistive technology may ignore all elements within the form except for the form labels, fields and legends. Therefore, it is important that each form field has an associated label to provide these instructions to the screen reader user.

 

 Best Practice

It is recommended to always use HTML native form fields and labels whenever possible such as the <input>, <label> and <button> elements. The labels associated with the input elements are spoken by the screen readers when the fields receive focus and users with impaired motor skills will have a larger target area as they can click on the label to gain focus on the input field or button.

The labels should provide a clear and concise description to provide a clear purpose of the component. To be clear the label can contain instructions for the type of input needed or describe the formatting that is required for the input to be accepted when submitting the form. By describing the format then the user can avoid potential input errors before submitting. The labels can also be used to include a text or symbol which indicates that the field is required.

Using Labels with Form Fields

The <label> element should explicitly associate a form field with a label. The label is attached to the specific form element by using the “for” attribute on the label and the “id” attribute on the form element. The “id” and “name” attributes must both be provided to the form field. The id and the name value can be identical, but the “id” attribute must be unique to each form field.

When using input elements of “type” checkbox and radio the label element should always be placed after the <input> element.

Label elements should be associate with the following form elements:

• Input type = "text"
• Input type = "checkbox"
• Input type = "radio
• Input type = "file
• Input type = "password"
• Textarea
• Select

For some form controls the description is provided though different attributes and do not require an associate label element. Submit and reset buttons use the “value” attribute, image buttons use the “alt” attribute

• Input type = "submit"
• Input type = "reset"
• Input type = "image"

ARIA

ARIA techniques should be used as a last resort. Please refer to the ARIA techniques web page for more information on ARIA.

 Examples

Example 1: Date input field with formatting requirements

Below is an example of a form field with the associated label describing the information needed to be inputted in the text box.

Date (dd-mm-yyyy)

Example Code:

<label for="date">Date (dd-mm-yyyy)</label>

<input type="text" name="date" id="date" />

 

Example 2: Using labels with radio buttons

Session Selection

Select the session you wish to enroll in.

Fall
Winter
Spring
Summer

<input type="radio" name="semester" id="fall" value="fall" />
<label for="fall">Fall</label>

<input type="radio" name="semester" id="winter" value="winter"/>
<label for="winter">Winter</label>

<input type="radio" name="semester" id="spring" value="spring"/>
<label for="spring">Spring</label>

<input type="radio" name="semester" id="summer" value="summer"/>
<label for="summer">Summer</label>

 

Back To Top 

 How to Test

Testing for form accessibility requires a variety assessment including form field validation, navigation, user interaction and submission in order to meet form accessibility standards. For a list of all items that must be considered, refer to the Best Practices for Accessible Forms page.

Automated Testing Tools

WebAIM WAVE Toolbar

1. Activate the WAVE toolbar and navigate to the “Details” panel. In that panel
2. Navigate to the “Features” section
3. Review all form fields that are present in the webpage.

 Back To Top