-1

For H44, complying with Success Criteria (1.1.1, 1.3.1, 3.3.2 and 4.1.2) requires me to add 'label's for input textboxes. However, when the textbox's label text is within the textbox itself as a placeholder, how can we meeting these criteria?

https://www.w3.org/TR/WCAG20-TECHS/H44.html

For example, if you scroll to the footer/bottom of https://www.goorin.com/ , you'll see a textbox for subscribing to their email newsletter, and there is the placeholder text within the textbox "Enter your email address". This IS the label text. I can't add an actual visible label without altering the design of the page/footer to have label text outside of the textbox? Even if I make the label hidden via CSS, it will not comply with 3.3.2.

Nick Rolando
  • 25,879
  • 13
  • 79
  • 119

1 Answers1

3

Using the placeholder attribute for a label is specifically pointed out in the html spec as a bad thing to do. See the warning under the placeholder spec. Many screen readers will not read the placeholder. Its use is supposed to give a clue as to the format of the data you need to enter into the field, not the label of the field.

WCAG 3.3.2 says a label is typically needed but if the context of the <input> gives a clue as to what the label should be, then a visible label may not be needed, but you still need a hidden label for the screen reader.

slugolicious
  • 15,824
  • 2
  • 29
  • 43