Can a heading be a substitute for labels?
Chrome's Lighthouse keeps on reporting "Form elements do not have associated labels", which web.dev gives more information on:
Labels ensure that form controls are announced properly by assistive technologies like screen readers. Assistive technology users rely on these labels to navigate forms. Mouse and touchscreen users also benefit from labels because the label text makes a larger click target.
However, I'm not convinced I need to make any changes for several forms because:
- There's text above the form that describes what needs to be filled in
- There's placeholders in the input itself (and some also have icons)
- The text boxes look to be the same vertical height as the buttons (and are wider). Some of them are multi-line text areas, which definitely are big enough of a target
- These unlabeled forms only have one text input, or are email/password logins so it's not difficult to keep track of what goes where
In addition, I think that it would be weird to wrap the preceding text in a label (and unexpected), not that it would work when the text refers to the both email/password fields.
Examples (brackets indicate a text box/area with placeholders, not to scale):
Sign in
Log in with your email and password:
[email..........]
[password...]
Post an update
[Write your update......
...................................
...................................]
In cases like these, do I need labels?