Should labels for form fields be coded as headings?

Question

Should labels for form fields be coded as headings?

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 Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.