Placeholders and Accessibility: Problems with the Placeholder Attribute

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 text 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 text 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 text successfully.

Avoid Placeholder Text

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 Text 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 Text Is Not a Visible Label

In recent years placeholder text is being used to provide visible labels for the form fields which is a bad practice. Placeholder text 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 Text

Instructions help users to submit form successfully but if the instructions are provided with a placeholder text 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 text.

Placeholder Text Used as Instruction

This example illustrates that using placeholder text as an instruction presents accessibility challenges. The code and preview are presented in a CodePen.

See the Pen Placeholder Text is used as Instruction (Fail WCAG) by Digital A11Y (@Digital-A11Y) on CodePen.

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.

Using aria-describedby to Provide Form Instructions

This example illustrates that utilizing aria-describedby is a more robust way to provide instructions in forms, as opposed to using placeholder text that disappears. The code and preview are presented in a CodePen.

See the Pen Using aria-describedby to Provide Form Instructions by Digital A11Y (@Digital-A11Y) on CodePen.

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

Floating Labels

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.

Floating Labels in Action

This example illustrates that when a user begins entering data into the input, the label floats above the input field. The code and preview are presented in a CodePen.

See the Pen Floating Labels/Placeholders for Input Fields by Lucas Bebber (@lbebber) on CodePen.

Implementing the floating label pattern across the entire product requires thorough research. Therefore, conducting A/B testing and gradually adapting this pattern makes more sense. Many UX professionals highlight that on mobile and small screens, there isn’t much space for visible labels. Hence, they often opt for the adaptation of floating labels.

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.

Related Reads

• Placeholder Accessibility
  A short guide on placeholders and the accessibility problems of using the placeholder attribute.
• Required Form Fields
  A short guide on how to mark required form controls using various methods.
• Creating Accessible Forms
  A short guide on designing and developing accessible forms using various techniques.
• Accessible Form Validation
  A short guide on error identification and how to ensure form errors are accessible.
• Accessible Forms Checklist
  If you are building forms for your next web or mobile project, here is a checklist for creating accessible forms.