Placeholder text best practices for accessibility

Question

Given following markup as an example:

<label for="email">Email</label>
<input type="email" placeholder="[email protected]" 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 X X X X space X X X X 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">