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.
Free Tools to Continue Learning
Accessible Web RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.