2.4.6 Headings and labels
This document provides information about the following Acquia Optimize check:
Ensure that each form label clearly describes its associated input element. Labels must provide meaningful and clear descriptions of the input fields to which they are linked.
Descriptive labels enable all users, including those who rely on assistive technologies, to understand the purpose of each input field. Vague, missing, or unclear labels can lead to incomplete or incorrect submissions. For example, the Enter details label provides less guidance compared to the Enter your phone number label. This lack of clarity can frustrate users and cause errors, especially for individuals who use screen readers. Clear labels help everyone to complete forms accurately and efficiently, and provide a more accessible and user-friendly experience.
This check affects users who have:
Fatima is a 33-year-old woman from Morocco who lost her sight at the age of 12 due to a degenerative eye condition. She works as a radio presenter for a local station in Casablanca, focusing on social and cultural issues.
"The other day, I was trying to sign up for a community event online, and it was so frustrating. My screen reader kept saying things like 'edit box, field one' or 'edit box, field two.' I had no idea what they wanted; was 'field one' for my name, my email, or something else? I tried a few guesses, but every time, I got an error message. Eventually, I just gave up and called a friend to help me. Honestly, something as simple as putting proper labels like 'Name' or 'Email' would make such a big difference. I rely on technology to stay independent, but when forms are like this, it is like hitting a wall. Small details like this really matter to people like me."
This section provides some examples of the issue.
On a flight booking website, users are required to enter details on the payment page. Two input fields are labeled as "Code", with no further explanation. The fields can refer to: The CVV code on their credit card, a postal code for their billing address, or a promotional discount code for a special offer.
The inputs fields are inadequately labeled and do not clarify which code must be entered in the fields. Several user groups, including screen reader users who typically encounter input fields in a list format, might face challenges to understand how to fill out the fields correctly. As a result, the form might be submitted with errors.
On a flight booking website, users are required to enter details on the payment page. Each input field is clearly labeled to ensure that users understand what information is required. For example:
The input fields are clearly labeled and include additional contextual information. All users, including screen reader users who navigate input fields in a list format, can easily understand how to complete the form accurately. This eliminates confusion, ensures that the form can be submitted without errors, and improves accessibility and the overall user experience.
How to review it?
The Acquia Optimize platform highlights relevant input labels for review.
Evaluate the label to assess that it helps users understand what input is required in the field. Consider the clarity of the label and if any additional instructions are necessary for users to provide the correct input. For example, if a date needs to be entered in a specific format, is it clear what format is valid?
If the label is adequately descriptive, mark this issue as "reviewed".
For instructions, visit the user guide article:
How to review an accessibility issue.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Dec 18 2024 13:30:48 GMT+0000 (Coordinated Universal Time)