Two stories:
- Jason Grigsby finds Chipotle’s online ordering form makes use of an input-masking technique that chops up a credit card expiration year making it invalid and thus denying the order. If
pattern="\d\d" maxlength="2"was used instead (native browser feature), the browser is smart enough to do the right thing and not deny the order. Scratchpad math, based on published data, makes that worth $4.4 million dollars. - Adrian Roselli recalls an all-too-common form accessibility fail of missing a
for/idattribute onlabels andinputs results in an unusable experience and a scratchpad math loss of $18 million dollars to campaigns.
The label/input attribution thing really gets me. I feel like that’s an extremely basic bit of HTML knowledge that benefits both accessibility and general UX. It’s part of every HTML curriculum I’ve ever seen, and regularly pointed at as something you need to get right. And never a week goes by I don’t find some production website not doing it.
We can do this everyone!
<label for="name">Name:</label>
<input id="name" name="name" type="text">
<!-- or -->
<label>
Name:
<input name="name" type="text">
</label>
OK but if you prefer to use placeholder instead of label?
Make sure to have a “visuallyhidden” label then. Placeholders aren’t 508 compliant. :D
You don’t replace label with placeholder the same way you don’t replace a car with an elevator. They do different things.
Placeholder SUGGESTS what to enter in, and label INSTRUCTS you what this field represents. Placeholders go away once you start typing in (making them useless for people who have trouble remembering instructions (i.e. most of your customers)) and aren’t read by accessibility technology.
You should always have a label as well. Some mobile browsers do not display placeholder text, and if someone’s browser attempts to prefill inputs with the incorrect information, the user will need to clear the input to see the placeholder.
You should never use placeholder instead of label. Placeholder is intended as additional information for the user, not as a replacement for label.
Placeholder text is not used instead of a label; it’s used in addition to a label. They have different purposes: labels describe what goes in the field, while placeholder text gives a hint, e.g. the expected formatting for a date field. It is incredibly important for accessibility reasons not to choose implementation based solely on visual appearance but to use the semantic elements provided by the HTML standard. Labels are read by screen readers; placeholder text generally is not, leaving blind and low-vision users unclear on what field they’re filling out if there’s no label. It’s also bad UX for sighted users — as soon as you start filling in a field the placeholder text disappears. Without a visible label, everyone suffers. If the aesthetics of unlabeled fields are extremely important to a designer, there are techniques to initially show the label over the field, then move it outside the field once the field receives focus. You lose the use of placeholder text for hints, but you’ve already made that trade-off if you’re using placeholder text instead of labels.
In general, there’s a reason for semantic HTML elements. Time spent researching and understanding them is rarely wasted.
Placeholder is not a label.
If you use placeholder instead of label thats potentially a few million lost. Placeholder is completely ignored by screen readers. You have to have a label to identify to the user what the field is otherwise “text input box, text input box ”
Great article
If you don’t want to use <label> for visual design reasons, you can still use “arial-label”, “aria-labelledby”, or even “title” to assign an accessible name to a form element. (Note, however, that using “placeholder” as a “label” is an anti-pattern, and should be avoided.)
Don’t.
Do not use the placeholder attribute instead of a element. Their purposes are different: the attribute describes the role of the form element; that is, it indicates what kind of information is expected, the placeholder attribute is a hint about the format the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
https://developer.mozilla.org/pl/docs/Web/HTML/Element/Input
A placeholder is not a label. It’s more suggestive/example text. If the design doesn’t call for a visible input I’d be showing a label only to screen readers with CSS.
Don’t do that! It’s shown to be bad UX and poor accessibility. (https://www.nngroup.com/articles/form-design-placeholders/)
Then just add a class to your label like .sr-only (screen reader only) and make it hidden
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
This way it’s accessible but showing only placeholder in the input field.
a placeholder should be used as an example for the value to be entered in the input field, not the label per se.
in that case, you could make the input field a bit more accessible by hiding the label and using the «for/id» attributes.
The placeholder attribute is not a substitute for a label element. If you prefer the visual of a placeholder you can style your label to look like one, but you need a label element for basic accessibility.
Placeholders are good too, but they don’t serve the same purpose as a label.
Placeholder text is bad practice to replace a label. For example you have placeholder=”First name”. The moment the input is not empty but for example filled by chrome autocomplete the user don’t know whats needed in that field. Or if the user puts in a wrong value and the form returns an error he first needs to clear the field to know if its a name, email, address field.
Placeholder=”Example: John doe” with a label (name) is better from a UX point of view.
<label for="name" aria-label="Name"></label><input id="name" name="name" type="text" placeholder="Name">In general however, if you want placeholders instead of labels, you should be using floating labels
Don’t rely on just placeholder. Screenreaders won’t convey that placeholder the same way as a
label. You should at least have alabel[for]and you could use a only-visible-to-screenreader sort of glass (like bootstrap’ssr-only) on the label.AFAIK placeholder should never be used as a replacement for label. Once the user applies focus to the field, the placeholder may be lost in some browsers and they’re now confused what the form expects from them.
Why not both? Using a label is better for accessibility, a placeholder is better because of the :placeholder-shown pseudo element. Combining the two, you can show a label when the placeholder is not shown (i.e. the input has been filled). Using this all the time, quick example to give an idea of the possibilities: https://codepen.io/Steynno/pen/abogMGL
You shouldn’t.
If you prefer to use a placeholder instead of a label, you still need to have a label as an accessibility case, or at the very least use the ARIA label attribute to tell screenreaders what the input is for.
Additionally, there are tons of codepen’s that show accessible placeholders that use the labels instead (and also are visible once you start typing).
Placeholders are not a replacement for labels at all.
You just have to hide label for users (and show it to screen-readers with a clip-like trick) and place your text also in placeholders.