Placeholder text appears within a form field, providing users with instructions that may help them complete the field. It disappears when the user begins typing.
At one point, placeholder text was considered essential for accessibility. That’s no longer the case: By using HTML5 and WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications), developers can provide form fields with accurate labels and instructions that work well with assistive technologies (AT).
Here’s what to know about placeholder text — and how to avoid common accessibility issues when building your web forms.
Placeholder text can be useful, but it isn’t always accessible
The Web Content Accessibility Guidelines (WCAG) are the widely accepted standards for digital accessibility. WCAG 2.1 Success Criterion (SC) 3.3.2, “Labels or Instructions,” provides basic guidance for building accessible forms:
Labels or instructions are provided when content requires user input.
Generally, the best practice for fulfilling this criterion is to use the HTML <label> element, which may also help content meet the requirements of WCAG 2.1 SC 1.3.1, “Info and Relationships,” and WCAG 2.1 SC 4.1.2, “Name, Role, Value.”
You can use placeholder text to support your form’s labels and instructions, but don’t use it as a replacement for accurate labels. Placeholders may be less intuitive for your users for several reasons:
-
Screen readers may not read placeholder text. Screen reader output can vary significantly depending on the user’s web browser and other factors, so to accommodate screen reader users, you should always include a static label.
-
Placeholder text usually disappears when the user enters information. If the user has a memory limitation or neurocognitive condition, this can be frustrating.
-
Placeholder text usually has a lower color contrast than other text. It may be difficult to read on smaller screens, or if the user has color vision deficiency (also called color blindness) or another vision disability.
This isn’t to say that you shouldn’t use placeholder text — placeholders can support accessibility and improve form completions. However, you should also include static labels for every form field.
If possible, you should also ensure that every user has consistent access to the information in the placeholder attribute. To address “disappearing" text, you might present the field’s label as a placeholder, then use CSS (Cascading Style Sheets) to move the label outside of the form field when the user begins typing.
Related: Why Form Labels and Instructions Are Important for Digital Accessibility
When used properly, placeholder text can support accessibility
To see an example of placeholder text, scroll to the end of this page. Our blogs end with a form that encourages readers to receive a free accessibility analysis; the form field asks for the reader’s website, and “www.yourwebsite.com" appears as placeholder text.
This helps our users by showing the expected format of the data. However, we don’t rely on placeholder text alone — the field also uses the HTML <input type=”url"> to define the field, which will be relayed to screen readers and other AT.
In the text surrounding the field, we present simple instructions for the user: Receive an industry analysis of your website.
Placeholder text isn’t essential for accessibility, but it does help more people understand how to complete your forms. If you follow the other best practices of form accessibility, you’ll provide every user with a seamless experience — which may lead to more form completions.
Here are some other quick tips for building better forms:
-
Many screen readers switch to a “forms mode" when interacting with <form> elements. Provide instructions for completing the form before the form begins.
-
Wherever possible, use basic HTML labels to identify form controls.
-
If you cannot use HTML, you may use WAI-ARIA to define form labels. However, test your WAI-ARIA markup carefully and follow the World Wide Web Consortium (W3C)’s guide to labeling controls.
-
Keep instructions simple. If a certain field requires data in a specific format, provide an example of that format.
If you need guidance with specific accessibility issues, we’re here to help. Send us a message to connect with an expert.
