Anatomy of Accessible Forms: The Accessibility Of Placeholder

This is a series of four articles that discusses all aspects off creating accessible forms:

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:

• Text
• Search
• url
• tel
• email
• password

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 Attribute 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.

Placeholder Text CSS Code

::-moz-placeholder {
color: #333;
opacity: 1;
}

::-webkit-input-placeholder {
color: #333;
}

Placeholder Attribute Is Not a Visible Label

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 not be provided using a placeholder attribute.

Example Code ( Instruction Using Placeholder Attribute)

<label for=”password1”>Password</label>
<input type=”text” id=”password1” placeholder=”Password should be 8 characters with one number, one special character”>
 

Preview (Placeholder Attribute disappears when the text field focus)

Password

Password should be 8 characters with 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.

Example Code ( Form Instruction using aria-describedby)

<label for=”password”>Password</label>
<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>
 

Preview ( Form Instructions Association Using aria-describedby)

Password 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 Ponder

 
We welcome your opinions, comments & questions.