Oh! I am alright! No, wait! I forget things very easily. What do they call that? Short term memory loss?
The other day, I was filling an online exam registration form. They asked me to write my office address, home address, work phone and home phone. I filled all the details, alright. But when I wanted to verify whether I filled in all the details in the right fields, I got confounded to the core. Alas! How do I verify which field is for what? The text “Office address” or the texts for any other fields disappeared. What do I do now? Do I re-enter the data in to the form again to make sure I am correct? Seems that is the only way. But this is ridiculous. It looks like a guy sitting at the door step pulling the lock to check whether the house is locked.
Well, when I start typing into the form fields, the text labels (or something of that sort) or instructions disappear. This is what I have come to understand finally. But what or who could be the culprit to cause this confusion? You are right! I hear you all say “placeholder!”
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types:
Placeholder is introduced in HTML5 & since then it has become a rather important attribute that is being used widely. Developers & designers always want to use placeholder in lengthy forms as it is more appealing than a visible label; it occupies less space on the screen and renders the design for smaller screens much easier.
In the blog post today we will see why using a placeholder is not great from the accessibility stand & what needs to be done to use a placeholder attribute successfully.
Avoid Placeholder Attribute
According to the research conducted by nielsen, it is not a great user experience to have placeholder in the form field. Users tend to think that form fields are already pre-populated with data & they will try to submit the form which results in failure. Now apply this to people with disabilities! People with cognitive impairments might think that form fields are pre-populated & then will submit the form. They might not understand that placeholder is a hint that enables user to successfully enter he data into the form fields.
Placeholder Fails Color Contrast
The default color of a placeholder in a form field is light grey which doesn’t pass the WCAG SC 1.4.3. According to WCAG SC 1.4.3 the color contrast must be at 4.5:1 & different browsers render placeholder differently. For the placeholder to pass successful color contrast requirements proper CSS must be used.
Sample CSS Code For Placeholder
Placeholder Is Not a Replacement For Visible Labels
In recent years placeholder is being used to provide visible labels for the form fields which is a bad practice. Placeholders disappear once the user inputs the data into the form controls & user will not have any idea of what the form field is all about. This is true for most people with short term memory, people with cognitive challenges & this practice also affects people with low vision. Visible labels must remain always on the screen which enables the users to successfully submit the forms because user knows what to enter in each form field.
Don’t Provide Instructions Using a Placeholder Attribute
Instructions help users to submit form successfully but if the instructions are provided with a placeholder attribute then user might not be able to use that instruction effectively. As placeholders disappear once the user starts filling in the form field users might miss on critical information. For example, password instructions should nott be provided using a placeholder attribute
<input type=”text” id=”password1” placeholder=”Password should be 8 characters witth one number, one special character”>
In the above example we can see that password needs a special character, a number & must be 8 characters long. This can become more complicated if more variations are added to the instruction.
Always provide instructions in the form of text that are visible to the user & associate the instructions to the form controls using aria-describedby method.
<input type=”text” id=”password” placeholder=”enter password” aria-describedby=”password-hint”>
<span id=”password-hint”>Password should be 8characters long with a number & a special character</span>
Password should be 8characters long with a number & a special character
In the above example we can see that password hint stays all the time while the data is being input into the form control.
Not all screen readers & browsers support placeholder attribute. If it is not spoken out then users with visual disability might miss on the information.
Users will not be able to verify if they entered the right data into the form controls if placeholder is used as visible label. During validation it is a huge cognitive burden on all users including people with disabilities.
We are seeing a growing trend where the placeholder is being used as visible labels but here these placeholders instead of disappearing when data is entered they float above, below or to the side of the form control. These are called floating labels & this is a widely adapted practice. While there are mixed opinions from various design & accessibility practitioners about these floating labels we advise to test them with their users & then take a call. For more information on the floating label subject go through the following articles
- Floating labels are problematic
- Are Float Labels Really That Problematic After All?
- Floated Labels Still Suck
In our opinion, it is the best user experience for every one if placeholder is used as it is intended in the HTML specification. It should be used for short hints & nothing more than that.
Points To Remember
- Avoid Placeholders if possible
- Make sure that placeholder color contrast meets WCAG requirement of 4.5:1
- Don’t provide critical instructions with a placeholder attribute.
- Provide instructions below the form control & associate them using aria-describedby to the form control.
- It is not recommended but if there is no choice other than to use a placeholder as replacement for visible label then use one of the floating label methods.
We welcome your opinions, comments & questions.