What does this accessibility issue mean?
Accessibility issue summary: Website forms missing visible labels
The absence of a visible label in a website form is a problem for website accessibility. A visible label is crucial for providing context and instructions to users, particularly those who rely on screen readers or other assistive technologies. Labels enhance the understanding of form fields by associating descriptive text with the corresponding input elements.
To ensure website accessibility and WCAG compliance, it is essential to include visible labels for all form fields, providing a consistent and understandable experience for users across various abilities and needs. Properly labeled forms contribute to a more inclusive online environment, aligning with the core principles of accessibility advocated by WCAG.
Example HTML violation: Forms without visible labels (Accessibility Best Practice Violation)
<form>
<input id="email" title="Email address" type="email" />
</form>The above HTML violates the label-title-only accessibility rule because the input field relies solely on the title attribute for a label. However, using only the title attribute is not sufficient to provide a label that will be accessible to all users.
According to the WCAG guideline 2.4.6, fields must be labeled in a way that all users can understand. One of the most accessible ways to label a field is by using a label element. Therefore, the presented HTML needs to be corrected to comply with this accessibility rule.
How to fix "Forms without visible labels (Accessibility Best Practice Violation)" issue
<form>
<label for="email">Email Address:</label>
<input id="email" title="Email address" type="email" />
</form>In this revision, I simply added a label tag that contains the label text. The for attribute is used to associate it with the input field.
Please note that redundancy between label and title can be avoided by either omitting the title or making it the same as the label text.
Also, remember that label provides much more accessibility than the title attribute due its wide support by assistive technologies and it's visible to all users.
