Associating labels explicitly
In this example, the label element is used to associate the label text with the adjacent form control. The for attribute for the label element and the id attribute for the form control must be an exact match.
This approach is supported by most web browsers and assistive technology applications.
See the example below:
HTML code snippet:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<br>
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter:>
Screen Reader Testing Activity:
Using NVDA, press the down arrow key to move through the table. Did you note the information provided to the end user?