This document gives information about the related Monsido checks:
Form field has non-empty accessible name
What
Form fields, including text input fields, checkboxes, and radio buttons, need to have an accessible name defined within the HTML code of the web page. The assigned accessible name should clearly indicate the purpose of the field for assistive software such as screen readers.
Why
Accessible names for form fields helps people who use assistive software to understand what information they are supposed to enter into the field. When a form field lacks a descriptive accessible name, affected users may be unsure of what information to enter. This results in their inability to complete the form.
Affected Users
This check affects the following users who have:
Sight-impairments; Who access the site contents with a screen reader or screen magnification software.
Motion-impairments; Who navigates the page using speech recognition software.
User Story
Sandra is 38 years old. At the age of 16, her life took an unexpected turn during a sports accident on the basketball court. While attempting a daring dunk, she landed in an awkward manner, resulting in a spinal cord injury. Unfortunately, this event left her paralyzed from the waist down.
"Even though I still have some movement in my right hand, it is painful to use it, and I prefer to use my voice to dictate to the computer when I go online. It is truly frustrating when I have to fill out a lengthy form, such as my tax return, and the form doesn't work with dictation software. It becomes really painful for me when I work with the mouse because I strain my hand."
Examples
This section gives some examples of the issue.
Example 1
In this example, all of the input fields for an email subscription form are given a proper accessible name. The screenshot shows how screen reader software displays a list of input fields to the user, including their names and types. This allows the user to easily understand and fill out the form.
Example 2
In this example, none of the input fields for an email subscription form are provided with accessible names. The screenshot shows how screen reader software fails to display any meaningful information about what to enter in the input fields. As a result, users with visual impairments or those that rely on screen readers find it difficult to understand and interact with the form.
How
How to fix it
The Monsido platform will flag form fields that are missing an accessible name. You can fix the issue by editing your HTML code to give the field a descriptive accessible name.
There are several ways to add accessible names to input elements. Here are some examples of how you can do it.
The <label> element is associated with the input field and uses the for attribute and a matching id value. This not only sets an accessible name for the input but also allows users to click on the label text to focus the associated input field. Whenever possible, this method is recommended.
<label for="email">E-mail:</label>
<input type="text" id="email" name="mail" />
The aria-labelledby attribute can be used to set the accessible name by referring to an element that should give a name to the input.
<span id="label1">Email:</span>
<input type="text" aria-labelledby="label1">
The aria-label attribute can be directly added to the input field. The value provided in aria-label serves as the accessible name for the input field. Use this approach when you do not have a visible text label for the input field.
<input type="text" aria-label="Email" />
The aria-label can also be used to set an accessible name for icon buttons.
<button type="button" aria-label="Send email">
<img src="send-email-icon.png" alt=""/>
</button>
Tip:
Use the developer tools in your browser to inspect accessible names for HTML elements.
Additional Resources
For instructions on how to review an accessibility issue and set it to Reviewed, see the user guide article:
WCAG Success Criteria
ACT Rules
Related accessibility conformance testing rules.
Other Resources