DEV Community

Discussion on: I was shocked 😱 that placeholder text on an <input> (instead of a <label>) might TECHNICALLY PASS WCAG⁉ Do you agree?

Collapse
 
alohci profile image
Nicholas Stimpson

I think you're dismissing 3.3.2 incorrectly. It says that the label needs to be provided, it just doesn't require that it be marked up correctly, because that requirement is elsewhere. And a placeholder cannot provide a label because it is unavailable once the user starts entering data into the field.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

It doesn't actually state a label must be provided though, it states labels or instructions.

There is no real definition of an instruction so a placeholder could do.

Also when it points you to 1.3.1 that only wants a label to be programatically determinable (which we established a placeholder is).

It also doesn't state a label must always be visible.

I know I am being pedantic and silly but I still find it amazing that I can even argue the point in the first place!

And if we go down this route focusing on 3.3.2 as the centre of our argument then

<p>First Name</p>
<input type="text" placeholder="First Name">
Enter fullscreen mode Exit fullscreen mode

could pass all criteria (I would have to have a think about it as info and relationships might now make the above a fail), and that is nearly as bad!