Form label and markup assessment
Part of the How to do a web accessibility assessment series #a11y
Playlist: • How to do a web accessibility assessment 101
In the application form, sighted users know which labels accompany the various form fields by their position. In the first six fields the label appears immediately above the form field, and in the set of possible majors the label appears immediately after each checkbox. Although these relationships may seem apparent to sighted users, they're not so obvious to screen reader users. HTML includes markup that enables form fields and their labels to be explicitly associated with one another. If this markup is not present, screen readers have to guess which labels are associated with each field, and they don't always guess correctly. For example, some screen readers incorrectly assume the label for each checkbox is the text that immediately proceeds it, rather than the text that follows it. Therefore, a screen reader user could check the Psychology checkbox, having been erroneously informed by their screen reader that they're checking the Physics checkbox. To explicitly associate "label"s with form fields, each label must be marked up with the HTML "label" element. The label element has a "for" attribute whose value matches the "id" attribute of the associated form field.
Also, when a form uses checkboxes, there are typically two pieces of critical information related to each checkbox: The label associated with that checkbox (e.g., Psychology) and the overall question or prompt (e.g., Desired major(s)). In order to explicitly communicate the relationships between all of this information, the entire set of checkboxes and labels, plus the overall question or prompt, should be wrapped in a "fieldset" element, and the question/prompt should be marked up as a "legend. The individual checkbox labels should be marked up using the "label" element as described above. With this accessible markup in place, screen readers can announce the overall question or prompt as the user enters the fieldset, or as he or she selects one of the checkboxes. This same markup applies to radio buttons.
Before example:
https://tinyurl.com/access-before
After example:
https://tinyurl.com/access-after
Link to the playlist:
• How to do a web accessibility assessment 101