526 - Forms - Associating labels implicitly

Associating labels implicitly

In this example, it is assumed that the form elements below were developed by a code or script generator. As such, you may not know the actual id attribute for the form control. To address this issue, the text labels and form controls are grouped under a label tag.

Generally, the explicit approach is better supported by assistive technology applications than this method. You may, however, need to text a few different screen reading applications to see if there is any noticeable difference. I tested the method below using both the NVDA (2019.3.1) and Windows Narrator (Windows 10)screen reading applications.

See the example below:

First name:
Subscribe to newsletter

HTML code snippet:


                            <label>
                                First name:
                                <input type="text" name="firstname">
                            </label>
                                
                            <br>
                            
                            <label>
                                <input type="checkbox" name="subscribe">
                                <input type="text" name="subscribe">
                                Subscribe to newsletter
                            </label>

Screen Reader Testing Activity:

Using NVDA, press the down arrow key to move through the table. Did you notice a difference between what information was provided using the explicit method vs. the implicit method?