Just announced: Level Access and eSSENTIAL Accessibility agree to merge! Read more.

Often, a developer may want to explicitly associate a screen label to a form field such as a checkbox but he or she may wish to hide the text off-screen so that it meets technical accessibility and aesthetic needs of an application; the yin and the yang of accessible development.

The value of explicitly labeling a form object is that it not only provides users of screen readers the ability to associate a screen label to the form control, it provides a larger “clickable” area for users that may have limited mobility. Instead of merely clicking a checkbox, the entire label may be “clicked” to place focus to or activate (change the state of) a form object.

When form elements are embedded in tables we test to determine the field’s label representation by:

  1. Determining if any LABEL element is associated with the form field
  2. Determining if any title attribute is associated with the field

The definition of an explicit label is one for which the for attribute of the LABEL element matches the id attribute of a corresponding form object.

For Example
<input id=”chx” type=”checkbox”> <label for=”chx”>Delete Breakfast</label>

When a form’s explicitly labeled screen text is hidden off-screen, the visual focus of that form field may no longer be present. This is true for Internet Explorer version 6, 7 and 8 in addition to FireFox v.3. If a developer hides or positions the explicit label visually off of the screen, low-vision users and sighted keyboard users may suffer from this non-intentional oversight.

Tab to the checkbox to delete lunch. Can you see the focus rectangle?
Delete? Meal Protein Carbohydrates Fat
Lunch 15g 30g 12g

How Can We Hide a Screen Label with CSS and Retain Visual Focus?

The solution is simple: an implicit-explicit label! If you are developing your web application and choose to hide an explicit label off of the screen, it is important that you envelop the explicitly associated LABEL element (remember the fantastic for attribute!) around both the form object and the label.

Can you see the focus around the Delete Breakfast Checkbox?
Delete? Meal Protein Carbohydrates Fat
Breakfast 10g 15g 9g
Lunch 15g 30g 12g

Notice that the ‘Delete Lunch’ check box is explicitly labeled by definition but the programmatic focus (a.k.a. the focus rectangle) cannot be seen visually like the ‘Delete Breakfast’ Checkbox. We would consider this a functional performance issue for users with low-vision and those with limited mobility. By explicitly and implicitly associating the form object when hiding the label, you can meet both the technical and functional requirements of Section 508 and any other accessibility standards.