Accessible hidden labels

The problem

In some cases, it may not be desirable to display a text label associated with a form control. An example might be a site-wide search form that is positioned within the site header.

Even if a text label is not displayed, some sort of label should be available for screen readers.

Test criteria

Is some sort of label announced when the form control recieves focus - even when the text label is not displayed on-screen?

Test cases

Example 1: No label

<div class="input">
  <input class="input__control" type="text">
</div>

Example 2: Hidden off-screen

<div class="input">
  <label class="hidden" for="example02">Example 2</label>
  <input class="input__control" type="text" id="example02">
</div>

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

Example 3: Using the `title` attribute

<div class="input">
  <input class="input__control" type="text" title="Example 3">
</div>

Example 4: Using the `aria-label` attribute

<div class="input">
  <input class="input__control" type="text" aria-label="Example 4">
</div>

Test results

Environment	Example1	Example2	Example3	Example4
Win/Edge/NVDA	Fail	Pass	Pass	Pass
Win/Chrome/NVDA	Fail	Pass	Pass	Pass
Win/Firefox/NVDA	Fail	Pass	Pass	Pass
Win/Edge/JAWS	TBD	TBD	TBD	TBD
Win/Chrome/JAWS	TBD	TBD	TBD	TBD
Win/Firefox/JAWS	TBD	TBD	TBD	TBD
OSX/Chrome/Voiceover	Fail	Pass	Pass	Pass
OSX/Firefox/Voiceover	N/A	N/A	N/A	N/A
OSX/Safari/Voiceover	Fail	Pass	Pass	Pass

Recommendations

Some sort of label should always be programmatically associated with its form control - even if hidden off-screen.

While the title and aria-label attribute methods are well supported across Assistive Technologies, Example 2: Hidden off-screen is the recommended solution as it is the most robust option.