4.1.2 Name, Role, Value
This document gives information about the related Acquia Optimize checks:
Form field has non-empty accessible name.
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.
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.
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 navigate the page using speech recognition software.
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 does not work with dictation software. It becomes really painful for me when I work with the mouse because I strain my hand."
This section gives some examples of the issue.
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.
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.
The Acquia Optimize 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>Use the developer tools in your browser to inspect accessible names for HTML elements.
For instructions on how to review an accessibility issue and set it to Reviewed, see the user guide article:
Related accessibility conformance testing rules.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Mon Dec 02 2024 12:14:38 GMT+0000 (Coordinated Universal Time)