What
Alternatively called dummy text or filler text, placeholder text is text that temporarily "holds a place" in a document for typesetting and layout.
Why
It helps preview fonts, spoof an e-mail spam filter, or reserve a specific place on a web page or other document for images, text, or another object.
How
Here are some ways to ensure placeholder text is accessible:
1. Avoid relying solely on placeholder text for instructions
- Always provide additional, visible instructions and labels alongside the form field. Placeholder text may disappear when users start typing, leaving them without guidance.
- Use <label> tags for form fields and associate them with the input using the for attribute. This ensures screen readers read the instructions properly.
2. Maintain sufficient contrast between placeholder text and background
- Use appropriate colour combinations that meet WCAG contrast guidelines (minimum ratio of 4.5:1 for normal text,3:1 for large text). Low contrast makes placeholder text difficult to read, especially for users with visual impairments.
3. Use concise and descriptive placeholder text
- Avoid generic terms like "Enter here" or "Required field." Clearly explain what information is expected in the field.
- Be consistent with the language used throughout your website.
4. Consider the behaviour of placeholder text
- Choose whether the placeholder text disappears or stays visible when the user starts typing. If it disappears, ensure the instructions are still available elsewhere.
- Some libraries offer "floating label" patterns where the label moves from above the field to inside it when filled, providing continuous guidance.
5. Test for accessibility using assistive technologies
- Utilise screen readers and keyboard navigation to evaluate how users with disabilities experience your form fields with placeholder text.
- Tools like WAVE and Lighthouse can offer automated accessibility checks, but user testing remains crucial.
