Accessibility Labels
Why
Labels are critical for blind users, user with low vision, users with mobility disabilities and users with memory loss. Missing labels will make a form inaccessible for many users.
What
Visual labels are text near a form control that describe what information belongs in a given form field or a group of fields. Each label must be programmatically associated with the form control or group of controls. Labels are not necessarily the <label> element.
How
You will learn how to use <label>, aria-label and <legend>.
The <label>
The <label> tag defines a label for several elements, like <input>, <select> and <textarea>.
In this example from Vodafone, we have one <select> and one <input type="email">, each with a describing <label>:
<label for="customerType">Who are you buying for today?</label>
<select name="customerType" id="customerType">
Notice the use of the <label> element in the example above.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button or checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
Required fields
Form labels often contain a "*" or the word "required" to indicate that the field is required. Both of these methods are fine. However, it is recommended to add the required and aria-required="true" to the form control if you use an asterisk (*):
<label for="email">Your email address <span class="mandatory">*</span></label>
<input id="email" name="email" required aria-required="true" placeholder="Email" required="">
The aria-label
Fields without visual labels still needs a label. If you can not use a <label>, one option is to use a aria-label.
This search field has a placeholder, but no label. A placeholder is not a valid accessible name. You can not rely on it as a substitute. An easy solution here is to add aria-label="Enter search term":
<input placeholder="Enter search term" aria-label="Enter search term">
The <legend>
Groups of form controls, like checkboxes and radio buttons often require a higher level of "label" in addition to the <label>. This high level "label" is made with <fieldset> and <legend>.
This registration form has three form controls to provide the date of birth. Visually it makes sense that both day, month and year is related to "Your date of birth". This relation is not obvious for a screen reader user. We can not use <label> here. The labels are Day, Month and Year. The solution is to add a <fieldset> and a <legend>:
<fieldset>
<legend>Your date of birth</legend>
<label for="dobDay">Day</label>
<select id="dobDay">…</select>
<label for="dobMonth">Month</label>
<select id="dobMonth">…</select>
<label for="dobYear">Year</label>
<input id="dobYear" type="text" placeholder="YYYY">
</fieldset>
Want to make efficient forms? Learn about autocomplete.
