0

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?

2

Short Answer

Use a label. HTML semantics are important for accessibility, SEO and User Experience.

Long Answer

The first reason for needing labels is for screen readers.

These are tools that people with vision impairments use in order to access your website.

Screen Readers are basically advanced text to speech, or text to braille software.

So why do labels matter if there is a heading above?

Screen readers users navigate pages in different ways.

Where you might look at the page and make associations they do not have that luxury, they are reliant on your HTML markup being correct.

For example they may navigate by headings, or they may loop through all the hyperlinks on a page or they may search for forms on the page (especially in the example you gave where the page title would hopefully indicate that the page is a login page).

The last example (forms mode) is why your labels are essential.

Without them they may find your login form by using shortcuts to find the form and would immediately be met with "input". They may skip right over your headings, instructions etc.

No further information would be presented to them!

Placeholders work in around 90% of browser and screen reader combinations but that also means they do not work in 10% of them.

For this reason a properly associated label (either by wrapping the input in a label or by using for="idOfInput") is essential for a great user experience.

Another reason to use a label.

Screen reader users and not the only people you need to consider. What about people with cognitive disabilities and anxiety disorders?

If someone has an anxiety disorder that means that they may fill in your form, then worry that they have filled the wrong field in because your placeholder text has disappeared so are then forced to delete what they entered to double check that they filled the right field in.

More Reasons to use a label

Auto complete is a great tool built into browsers. A lot of the time this relies on the label of the form field in order to work out what to enter.

Login forms tend to be more robust and not require this due to poor development practices where developers don't add labels.

For this reason browser vendors have put lots of effort into guessing whether a combination of fields on a page are login information.

For any other form, labels are the quickest way to ensure auto complete works as expected.

Any more reasons?

Yup, the Web Content Accessibility Guidelines (WCAG 2.1) is the international standard for accessibility on websites. Properly associated labels are a level A (the basics) requirement.

Without them you could end up being taken to court and find yourself at the receiving end of a lawsuit.

I am not sure what country you are from, but if it is the USA there were over 3200 cases of discrimination because of inaccessible websites last year. This year there will almost certainly be more.

If you are in the UK (like me) or Europe, then your website is covered under the Equality Act 2010, meaning that you would also be at risk of being sued for discrimination. The risk is lower here at the moment but the bad press from people complaining is not good.

Oh and don't forget people with disabilities also have money to spend and want to use your services too. Why not make it easy for them when some of your competition may not so they become a loyal customer?

Anything else?

Oh yeah, labels above form fields tend to improve conversions as they reduce cognitive load. It may only be about 1% but for the sake of 30 seconds adding a label, it is one of the quickest wins you can make.

For context if you ever become lucky enough to have a site that generates £1 million a year (around 1.1 million USD) then adding labels could add £10,000 (11,000 USD) in revenue for free.

Conclusion

Use. A. Label.

No seriously, use labels, it is one of the easiest ways to improve your site. If you really don't want to ruin your design with a label (which is a silly excuse but I see it that often I have come to accept it) then at least use a visually hidden label.

This means your label is still accessible to screen readers, but it will not be visible. This can be done with the visually hidden class.

HTML

<label for="input1" class="visually-hidden">Form Field Label</label>

<input id="input1"/>

CSS

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
| improve this answer | |
1

Graham Ritchie's answer makes perfect sense.

One more item, though: On a login form you are asking users to input information covered by WCAG 2.1 Success Criterion 1.3.5. In such a case a label is necessary, but not enough. You also need to provide an "autocomplete" attribute with the correct value for each input field. See: https://www.w3.org/TR/WCAG21/#input-purposes

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.