Invisible Form Labels
- Christina Lutz-Hatfield
Visual Example
Overview
In some cases form controls don't need visible text labels.
For example, a text input adjacent to a Search button makes its purpose clear to sighted users.
An additional visual text label would be redundant.
Screen reader users typically navigate forms by using the “TAB” key on the keyboard. Then navigate from one form control to the next.
When the form control or label receives keyboard focus, the invisible label will still be announced by the screen reader.
In this scenario, one of the following three techniques could be used:
Only one of these techniques should be implemented.
Technique One - Hidden Label and Markup
Hide the <label> element for sighted users by using CSS. The label will not appear visually, but screen readers will still announce it.
Markup Example 1
<label class="hiddenlabel" for="search">Search</label>
<input type="text" id="search">
<button>Search</button>CSS - Example 1
.hiddenlabel {
display: none;
}Markup Example 2
<form id="sfgov-search-form" class="sfgov-search-form">
<label for="edit-search-input">Search</label>
<input type="text" id="edit-search-input">
<button>Search</button>
</form>CSS - Example 2
Technique Two - Title Attribute and Markup
Apply a “title” attribute to the <input> field. If a form field has a title attribute but no <label>, screen readers will treat the title as a label.
This approach is generally less reliable as some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element.
The information of the title attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.
Technique Three - ARIA Label and Markup
The “aria-label” attribute can also be used for screen reader users.