Accessible Form Placeholder Text

February 20th, 2017 by zoltan · 3 Comments

Placeholder text is used quite a bit in modern HTML5 forms. It is not meant to replace form labels, but is intended to be a hint about the format of what the form field data should take. What follows is an example of placeholder text in action. Note how browsers usually colour the placeholder text a little lighter than the text input by the user:

While checking the accessibility issues on a recent project, I noticed that placeholder text is sometimes indistinguishable with form field values when using certain screen reader/browser combinations. Here is a video capture of this issue in Safari using the VoiceOver screen reader that comes with OSX:

As you can see in this video, it is not obvious that the text in the first form field is actually placeholder text. VoiceOver is not the only screen reader to have issues with placeholder text (more about this later). In order to fix this problem, I created a script that removes the placeholder text when the input field gains focus:

View a live version of the placeholder fix in action

This has been tested on JAWS and NVDA using Firefox, Chrome, IE, and Edge, as well as VoiceOver on Safari and Chrome. There are a few browser specific quirks I worked around, which are commented on in detail in the source of the a11yPlaceholders.js script. Here’s what you need to do in order to use this script in your own project:

Include the a11yPlaceholders.js script in your project.
Add the a11y-fix-placeholder class to your <body> tag.
Add this is CSS in one of your stylesheets. This is to fix a bug with Safari which doesn’t update the placeholders correctly onblur (this class will be added to the element onblur to force a redraw):
```
.placeholder-removed {
	opacity: 0.999;
}
```

What I Discovered When Coming Up With This Solution

I did try to style placeholder text to disappear on focus using just CSS. Unfortunately, this doesn’t fix the problem. I assume that this is because screen readers check to see if the placeholder attribute is actually in the markup, not whether the placeholder is visible.
Even thought the video shows that this problem occurs in Safari/VoiceOver, it does appear in other screen reader/browser combinations, including Edge with NVDA. Ironically, IE with NVDA doesn’t have this issue (who would think IE would be the better browser in this case?)

Are There Other Accessibility Issues With Placeholder Text?

In short, yes. Here are a few:

The Nielsen Norman Group points out that placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors.
Luke McGrath of Wuhcag.com also mentions a few more issues with placeholder text in that users with cognitive disabilities can be under extra pressure if placeholder text disappears as they may struggle with memory and recall.

I personally am not a huge fan of placeholder text, and avoid them whenever possible (the simplest solutions are the ones easiest to implement). Any form field hints should be marked up using aria-labelledby instead. However, if for some reason you really need to use placeholder text, this script is a good tool to have in your back pocket.

Tags: accessibility · Forms · Uncategorized · a11y, accessibility, assistive technology, keyboard accessibility, keyboard tabbing, NVDA, placeholder, screen reader, VoiceOver

3 responses so far

1 a11y Sherpa // Feb 21, 2017 at 6:17 pm

Some good thoughts here, and I like that you qualify the use of placeholders a bit (but maybe put that at the top?). Placeholder attributes also have a default colour that fails contrast ratio requirements under WCAG:

https://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/

Cheers!
2 zoltan // Feb 22, 2017 at 10:01 pm
@a11ySherpa: Thanks for the link to this great article! The default contrast something I have run into recently (shame on me for forgetting to mention it here). In the example of the fix that I give in this article, I have accounted for this with the following CSS:
```
::-webkit-input-placeholder {
	color: #777;
	opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
	color: #777;
	opacity: 1;
}

::-moz-placeholder {  /* Firefox 19+ */
	color: #777;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #777;
	opacity: 1;
}
```
(This was borrowed from this great research wiki from the W3C). My work-in-progress git repo of accessibility examples (creatively called a11y-examples) is where I have the source for this and other a11y solutions I have (and will) come up with, and will hopefully be of use to other developers.

Thanks for the feedback!
3 a11y Sherpa // Feb 23, 2017 at 4:32 pm

Awesome! The default contrast is one of the things a lot of people miss since they are often focused on making the text available to screen readers. The “disapearing on focus” issue being another.

Looking forward to more!

Give Feedback

Don't be shy! Give feedback and join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.

An orange star denotes a required field.