Approach #3 - Using the aria-labelledby attribute
HTML code snippet:
<input type="text" name="search" aria-labelledby="searchbutton">
<br>
<button type="submit" id="searchbutton">Search</button>
In this example, as with approach #2, the label tag is no longer needed as we are using the aria-labelledby attribute to provide feedback to the screen reader user. The aria-labelledby attribute in the input tag references the button tag's id attribute to determine what information is announced by the screen reader.
From an accessibility standpoint, the screen reader user receives information from the aria-labelledbyem> attribute, allowing them to infer the purpose of the form control. The Search button remains in place to ensure 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. Did you notice a difference between the different approaches?