SiteLint documentation and guidelines

Label visually hidden only

Description

The concept of “label-visually-hidden-only” involves creating labels for form elements that are hidden visually but still accessible to screen readers. This technique is crucial for maintaining accessibility while keeping the visual design clean and uncluttered. Labels provide context for form controls, ensuring that all users, including those using assistive technologies, understand the purpose of each input.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need these hidden labels to understand the purpose of form controls.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear labels that help them understand what information is required in each form field.
  • Motor impairments: users with motor impairments who navigate using keyboards or assistive devices rely on clear and descriptive labels to interact with form controls efficiently.

Why it matters

Hiding labels visually but keeping them accessible to screen readers ensures that the form remains user-friendly and accessible without compromising the design. This practice helps maintain a balance between aesthetics and accessibility, ensuring that all users can interact with the form effectively.

Coding problems and solutions

Common coding problems

  • Labels completely hidden: using display: none or visibility: hidden to hide labels, which makes them inaccessible to screen readers.
  • Inconsistent labeling: not providing consistent hidden labels for all form controls, leading to confusion.
  • Improper implementation: incorrectly implementing the visually hidden technique, making labels either partially visible or inaccessible.

How to fix it

Use proper techniques to visually hide labels

Ensure labels are hidden visually but accessible to screen readers using appropriate CSS techniques.

Incorrect example
<label for="username" style="display: none;">Username:</label>
<input type="text" id="username" name="username">
Correct example
<label for="username" class="visually-hidden">Username:</label>
<input type="text" id="username" name="username">

CSS for visually hidden labels

Apply CSS to hide labels visually but keep them accessible.

Correct example
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Ensure consistent application

Apply the visually hidden technique consistently across all form controls to maintain accessibility.

Incorrect example
<form>
    <label for="email" class="visually-hidden">Email:</label>
    <input type="email" id="email" name="email">
    
    <label for="password" style="display: none;">Password:</label>
    <input type="password" id="password" name="password">
</form>
Correct example
<form>
    <label for="email" class="visually-hidden">Email:</label>
    <input type="email" id="email" name="email">
    
    <label for="password" class="visually-hidden">Password:</label>
    <input type="password" id="password" name="password">
</form>

Known limitations

  • Style maintenance: maintaining the CSS styles for visually hidden elements can be challenging, especially in large projects.
  • Testing across devices: ensure the visually hidden technique works across different devices and screen readers.
  • Design and usability: balance between a clean design and the need for visible labels where appropriate to enhance usability.

Resources