Label Title Only
Minor - WCAG LEVEL AAA
The accessibility issue arises when form elements, such as input fields or buttons, do not have visible labels. Instead, they may rely on hidden labels, title attributes, or ARIA attributes like aria-describedby. This can create confusion for users as they may not receive adequate context about the purpose of the form elements.
Visible labels are crucial for users with disabilities, especially those who are blind or have low vision. Screen readers announce visible labels, allowing users to understand what information is required. Without these labels, users may struggle to fill out forms correctly, leading to frustration and potential errors. Additionally, visible labels benefit all users by providing clear guidance on what is expected in each form field.
How to Fix:
Identify Form Elements: Review your form elements to identify any that lack visible labels.
Add Visible Labels: For each form element, add a
<label>element that clearly describes its purpose. Ensure the label is associated with the input using theforattribute that matches the input'sid.Avoid Relying on Hidden Labels: While hidden labels can be useful in some contexts, they should not be the sole means of labeling a form element. Ensure that every form element has a visible label.
Best Practices:
Use descriptive labels that clearly indicate the expected input (e.g., "Email Address" instead of just "Email").
Place labels close to their corresponding input fields to enhance usability.
Consider using placeholder text in addition to labels, but do not rely on it as a substitute for a visible label.
Common Mistakes:
Using
titleattributes oraria-describedbyas the only means of labeling, which does not provide the necessary visual context.Forgetting to associate labels with their respective form elements, which can lead to confusion for users navigating with assistive technologies.