Placeholder text best practices for accessibility

Question

Given following markup as an example:

 <label for="email">Email</label> <input type="email" placeholder="foo@bar.baz" id="email" /> <label for="cc">Credit card</label> <input type="input" placeholder="XXXX XXXX XXXX XXXX" id="cc" /> 

Will screen reader read something like "Email field, foo at bar dot com", "Credit card XXXX space XXXX space ..."? If yes, I guess that is not the best user experience and it is better to avoid using placeholders this way. Are there guidelines or examples of how to give user a short hint intended to aid the user with data entry in an easy to understand format that works for all users?

Answer 1

Screen readers such as JAWS and NVDA do not read placeholder text, it's a visual addition only.

However, if you're providing important information visually (such as format for data entry) there is no reason you shouldn't be conveying this information to screen reader users as well. A good way to do this is with a screen reader only bit of text. Create a class using CSS which hides the text visually (off screen), and pop it into a span where you'd like it to be read out.

I've used the example of a Date of Birth below, as the format for entering a date can widely vary. Things like credit card numbers and email addresses are pretty standard and probably don't require hints.

 .sr-only { position: absolute; left: -99999px; height: 1px; width: 1px; overflow: hidden; } 

 <label for="DOB"> DOB <span class="sr-only">Enter date in the format DD/MM/YYYY</span> </label> <input type="text" placeholder="DD/MM/YYYY" id="DOB"> 

Answer 2

The placeholder text has to be seen as a purely decorative element. It may not be read by screenreaders.

In your examples, that's perfectly ok. Screenreader users perfectly know the format of an e-mail address, and do not want to ear "ex ex ex ex. ex ex ex ex. ex ex ex ex. ex ex ex ex." instead of "enter your credit card number" (note that grouping four by four is impossible when your card number has 13 digits.)

If you really have to give a hint, you have to insert it in the label:

More information on the W3C Webpage:

• Placeholder Research
• G89: Providing expected data format and example

Answer 3

Formatting hints are good for all users, whether visually impaired or not. Having an example below the field and associated with the field using aria-describedby is how I usually do it.

<label for="email">Email</label>
<input type="email" id="email" aria-describedby="format"/>
<span id='format'>Format: foo@bar.baz</span>