Building Accessible Web Forms - Styling "label" tags for greater accessibility
(Page 4 of 5 )
Since <label> elements are common HTML tags, we are able to apply styles to them, as we usually do with other HTML elements. A nice approach is to style <label> elements, applying some bold fonts to make the label text stand out from the other text in the form, such as:
label {
font: bold 12px "Arial", Helvetica, sans-serif;
color: #000;
}
With this set of rules, all of the label text will be displayed using a bolded font. As we've seen above, a <label> tag not only makes it easier for screen readers to identify the input, it's also gives the user a larger area to click on. This is particularly useful when used with radio buttons and checkboxes.
If we have defined the text associated with the label element, the clickable area will be extended not only to the form control, but it will enclose the text as well. Most software applications have been implementing this as the standard for many years, if we think it that way:
For years, software applications have applied the concept of making the text associated with checkboxes completely clickable, as shown in the above image.
The same functionality can be achieved using the <label> tag in online forms, as we clearly see in the example below:
The whole area, including the form control and the related text, is clickable when we're utilizing the <label> element. What's more, we can boost this technique, visually indicating to visitors that the entire section can be clicked, taking advantage of this extra functionality. With some CSS rules, we might suggest to visitors this condition:
label {
font: bold 12px "Arial", Helvetica, sans-serif;
color: #000;
cursor: hand;
}
When the user passes the mouse over the whole <label> area, the cursor will change its pointer, indicating that the entire section is clickable, and the text will set the focus to the form control. However, there is a drawback to this approach, since the "cursor" property is not fully supported by most browsers. With the pros and cons inherent in this approach, it's up to you to decide what is more important for your website.
At this point, we have demonstrated how useful <label> elements can be when they're used in online forms. Now, let's move away slightly from general accessibility and go deeper into the field of usability. Let's present some general guidelines for making forms more usable.
Next: Adding usability to forms >>
More HTML Articles
More By Alejandro Gervasio
