Should labels for form fields be coded as headings?
Question
Answer
Ideally, a text element should not be coded as both a <label>
and a heading, since the content introduced by the <label>
is inherently programmatically related. However, if you do have a form field <label>
coded as a heading, it is not a WCAG failure as long as the heading role is still properly communicated to the accessibility tree.
If there is no <label>
element for a particular form field, but a heading element functions as the visible label, then you should use the aria-labelledby
attribute to ensure the heading is programmatically related to the field it describes.
For a more in-depth look at building accessible forms, explore the "Forms: Labels, Cues, and Errors" course from Accessible Web Academy.