Approach #2 - Using the aria-label attribute
HTML code snippet:
<input type="text" name="search" aria-label="search">
<br>
<button type="submit">Search</button>
In this example, the label tag is no longer needed as we are using the aria-label attribute to provide feedback to the screen reader user.
From an accessibility standpoint, the screen reader user receives information from the aria-label 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 in the information provided by both approaches?