Mastering Form Controls: The Art of Labeling ?????
TL;DR: Label your form stuff right. Use <label> tags lots, hide if needed, and link things up when you can't see 'em. Even buttons need names! Get it right, and forms become super easy for everyone. Know more about the Constellation Design System by Pega.
Picture yourself strolling through a busy city with no street signs or landmarks to show you the way.
Every turn becomes a confusing maze, leaving you feeling lost and annoyed. That's how it can feel navigating the web without clear labels on form controls. Like street signs guiding you through a city, labels light up the path in online forms, making it easy for everyone to find their way around.
In this tutorial, we'll demystify the art of labeling controls in forms, making your web creations more accessible and user-friendly than ever before.
Overview
Labels are crucial for guiding users through forms, whether it's a text field, checkbox, or dropdown menu. They give users the context needed to understand each control. But how can we make sure labels are not just there but also properly connected to their controls? From explicit labeling with <label> elements to implicit association when needed, we'll cover it all. Let's dive in! ??♂?
Explicit Labeling
The gold standard of labeling is explicit association using the <label> element. By linking the label's for attribute to the control's id, we create a seamless connection that benefits both sighted and visually impaired users. It's like a virtual handshake between the label and the control, ensuring everyone knows who's who.
<!-- Label for a textbox -->
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<!-- Label for a checkbox -->
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
Hiding Label Text: Out of Sight, Not Out of Mind
Sometimes, we need to hide label text without sacrificing accessibility. CSS techniques and ARIA attributes help keep labels present for screen readers while maintaining a sleek appearance.
When it comes to hiding labels, there are multiple techniques, let's explore:
<!-- css class "visuallyhidden" for moving label out of viewport, technically visible, but practically hidden -->
<label for="search" class="visuallyhidden">Search: </label>
<input type="text" name="search" id="search">
<button type="submit">Search</button>
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>
<input type="text" name="search" aria-labelledby="searchbutton">
<button id="searchbutton" type="submit">Search</button>
NOTE: Using title attribute is not recommended even though it shows the browser's default tooltip for visual users - it is not well supported by screen readers as a replacement of label.
领英推荐
Implicit Labeling: When Labels Speak Louder
When explicit association isn't feasible, implicit labeling steps in, with labels acting as containers for both text and controls.
<label>
First name:
<input type="text" name="firstname">
</label>
<label>
<input type="checkbox" name="subscribe">
Subscribe to newsletter
</label>
Buttons Matter Too: The Labeling Continuum
Don't overlook button labels! Whether using <button> or <input> elements, clear labeling is crucial for ensuring accessibility.
With buttons, the label resides within the element itself, ensuring clarity and accessibility for all. When button are specified using <input> the value attribute serves the purpose of visible label.
<button type="submit">Submit</button>
<button type="button">Cancel</button>
<input type="submit" value="Submit">
<input type="button" value="Cancel">
Prescribed Design:
The Constellation Design System by Pega is well-versed in these details. It simplifies form control design, offering built-in accessibility features for effortless user experience.
Below is an example of Label React component from Constellation Design System by Pega. If for any reason you need to visually hide a Label, you should use the labelHidden prop. This will ensure the Label is still read by screen readers.
<Label labelHidden={false}>Label</Label>
Visual Positioning: Where Labels Call Home
Where labels go matters. Whether above, next to, or inside fields, label placement affects user experience and accessibility.
Forms are all about interaction, and labels play a vital role in guiding users. Let's ensure our forms not only function well but are also easy for everyone to use.
?? Happy labeling!
References
Pega's Constellation Design System
Related WCAG resources