Approaches to hiding form labels
As mentioned previously, the approaches highlighted in this section were adapted from WAI-ARIA's Web Accessibility Tutorials Complex Images web page. We will cover three approaches for hiding form labels on a web page. They are as follows:
Approach #1 - Hiding the label element
HTML code snippet:
<label for="search" class="visuallyhidden">Search</label>
<input type="text" name="search" id="search">
<br>
<button type="submit">Search</button>
In this example, the text label "Search" (which shows up to the left of the edit box in the label tag) is visually hidden using the CSS class visuallyhidden.
From an accessibility standpoint, the screen reader user can still read the text label, allowing them to infer the purpose of the form control. The Search button also ensures that visual users could easily infer the purpose of the form control.
Screen Reader Testing Activity:
Using NVDA, press the down arrow key to move through the table. What information was announced by the screen reader?