This document provides information about the following accessibility check:
Each label describes its associated input element.
What
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.
Why
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:
Visual impairments: Who use screen readers to navigate and understand forms with labels.
Cognitive impairments: Who benefit from clear and unambiguous labels that reduce confusion and help them to better understand the required inputs.
User story
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."
Examples
This section provides some examples of the issue.
Example: Inadequate labels on a travel booking website
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.
Example: Clear and descriptive labels on a travel booking website
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 field for the payment card security code is labeled “CVV (Card Security Code)”, with a tooltip that explains it: “The 3-digit code on the back of your card”.
The field for the billing address is labeled as “Billing Postal Code”.
The field for promotional offers is labeled as “Promo Code (Optional)”, with placeholder text that indicates: “Enter your discount code if applicable”.
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
How to review it?
The Web Governance 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".
This document provides information about the following accessibility check:
Each label describes its associated input element.
What
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.
Why
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:
Visual impairments: Who use screen readers to navigate and understand forms with labels.
Cognitive impairments: Who benefit from clear and unambiguous labels that reduce confusion and help them to better understand the required inputs.
User story
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."
Examples
This section provides some examples of the issue.
Example: Inadequate labels on a travel booking website
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.
Example: Clear and descriptive labels on a travel booking website
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 field for the payment card security code is labeled “CVV (Card Security Code)”, with a tooltip that explains it: “The 3-digit code on the back of your card”.
The field for the billing address is labeled as “Billing Postal Code”.
The field for promotional offers is labeled as “Promo Code (Optional)”, with placeholder text that indicates: “Enter your discount code if applicable”.
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
How to review it?
The Web Governance 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".
Web Governance