Placeholder Research
This page gathers resources on form placeholders.
10 Reasons Why Placeholders are Problematic
10 Reasons Why Placeholders are Problematic by Adam Silver
...It pretty much comes down to the fact that the valuable information put in placeholders is not always available. And what is worse, is when they are used as a replacement for labels...
3.3.2 Labels or Instructions
3.3.2 Labels or Instructions by Rakesh Paladugula
...Titles, aria-label or placeholders cannot be considered as alternates to labels unless they are supplemented with a visual alternate of label...
Accessible Solution for HTML5 Placeholders
Accessible Solution for HTML5 Placeholders by Rakesh Paladugula
To make the placeholders accessible, CB Averitt has proposed two solutions to the problem. I have explained both the solutions below and provided a sample implementation.
Solution 1: HTML5 Placeholder Itself to fix the problem. In this solution, the placeholder text is as usual in the field until user focus on to it. Once the user brings focus on to the field that have placeholder text, the text disappears from the original place and appears as a bubble that sits on the top right hand area. The bubble text is available there even after the user fill in the field. So the placeholder text is always visible to the user either as a original placeholder or as a bubble. On the other hand the contrast of the text is raised to a level that pass the WCAG 2.0 minimum contrast requirement. Look at the solution one sample.
Solution 2: Programmatic label that appears like a placeholder: In this method the programmatic label is visually displayed as a placeholder. When user fills in the field or selects option from the dropdown the label appears like a bubble. Placeholder is not used in this method. In all the cases the label is displayed either as a placeholder or as a bubble on the right top. The label is also associated with the field using for and id attributes. Look at the Sample two implementation.
Avoid use of placeholder values
Avoid use of placeholder values by SSB BART Group, Best Practices
A
placeholderattribute should not be used as an alternative to a label. The placeholder is a short hint intended to aid the user with data entry so it should not be identical to the label element. The placeholder may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description -- it acts similar to fallback content.
Color Contrast Tests for System Color FieldText with Opacity:0.54
Color Contrast Tests for System Color FieldText with Opacity:0.54 - Steve Faulkner
All text/background combinations have a default contrast ratio that passes the minimum threshold of 4.5:1 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Contrast (Minimum): Understanding SC 1.4.3
Contrast (Minimum): Understanding SC 1.4.3 by WCAG WG
Note 3: The minimum contrast success criterion (1.4.3) applies to text in the page, and placeholder text is text in the page. If used, placeholder text needs to provide sufficient contrast.
Creating Accessible Forms
Creating Accessible Forms - WebAIM
Important...
- Placeholder text (e.g.,
<input type="text" placeholder="Search WebAIM">) is not a suitable label and should never be used in place of the above techniques.
Does Placeholder Text AND aria-describedby Work on a Form Field
Does Placeholder Text AND aria-describedby Work on a Form Field by David MacDonald
...at the present time I cannot advise authors to rely on BOTH
aria-describedbyANDplaceholdertext for screen reader users on Windows. Aria-describedby wins, placeholder text is usually lost to blind users in this case...
Don't Put Hints Inside Text Boxes in Web Forms
Don't Put Hints Inside Text Boxes in Web Forms by Caroline Jarrett
...The short version of my advice: Don't do it! Hint text is rarely effective as a way of helping users, but instead becomes a default input...
Placeholder Attribute
HTML 5.1 Placeholder Attribute by HTML Working Group
Warning: Use of the
placeholderattribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control's label is shown at all times, the short hint given in theplaceholderattribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control...
HTML5 Accessibility Chops: The placeholder Attribute
HTML5 Accessibility Chops: The placeholder Attribute by Steve Faulkner
If you choose to use the
placeholderattribute be aware its support across browsers is incomplete and its styling support is still experimental. Apply a style to the placeholder attribute text that has a contrast ratio of at least 4.5:1.
HTML5 Placeholder Contrast
HTML5 Placeholder Contrast (Demo) by Paul J Adam
Default Placeholder Contrast...
Simple CSS3 Placeholder Pseudo-element Enhanced Contrast...
CSS3 RGBA Placeholder Pseudo-element Enhanced Contrast & Text Styles...
Is use of the placeholder attribute not a good practice to make a compliant form?
Is use of the placeholder attribute not a good practice to make a compliant form? I have a requirement where I need to design the page without labels on the text boxes. - SSB BART Group
//MR: The
placeholderattribute should be avoided. Some solutions include placing a visual label above the form field within the textbox as soon as focus is placed on the form field and theplaceholderdisappears. Another possible solution is to provide an icon which depicts theplaceholder, again displayed within the textbox when theplaceholderdisappears...//MR: SSB suggests avoiding using placeholder text as the only way to communicate the label for a form field. The disadvantages of using only the placeholder are outlined below:
- Placeholder text does not have sufficient color contrast
- Placeholder text disappears when a text box receives focus
- Users may think that the text field is populated and may skip the text field
Always provide an explicitly associated text label for a text field.
Floated Labels Still Suck
Floated Labels Still Suck by Dennis Lembree
...Please don't use 'floated labels' or 'labels as placeholders' technique; it can break the user experience for a large variety of reasons. Use the label element and
placeholderattribute as intended. Use CSS to ensureplaceholdertext has adequate color contrast.
Mobile Form Usability: Never Use Inline Labels
Mobile Form Usability: Never Use Inline Labels - Jamie Appleseed
Labels placed inside the form field (aka 'inline labels') are widespread in mobile apps and sites - almost to the point of being a best (mal)practice. Yet in every usability test we've conducted inline labels have suffered from major usability problems...
Patterns for User Interface Adaptations Towards Runtime Adaptations for Improving the Usability of Web Forms for Elderly Users
Patterns for User Interface Adaptations Towards Runtime Adaptations for Improving the Usability of Web Forms for Elderly Users by Gottfried Zimmermann, Annkristin Stratmann, David Reeb, and Tobias Glaser
Help texts for web forms can be presented to the user in various ways. Some websites display hints and help texts openly, others on the press of a button. Recently, some websites have provided hints as "placeholders" in input fields, but unfortunately a placeholder text disappears as soon as the user sets the focus in the field. On the other hand, hints and help texts may clutter the screen and distract the user (see Sect. 2 ). In our fourth pattern, we implemented two versions of help text display for input fields. In version A, the help text appears below the input field when the user clicks on a button with a question mark ('?'). The button is placed to the right of the input field.
The help text disappears again when the user leaves the input field. In version B, the help text is shown automatically when the user sets focus to the input field, and disappears when the user leaves the input field (see Fig. 4 ).
Most users did not notice the help texts, neither for version A nor for version B. When asked for feedback, they deemed the input for name and address fields as trivial and not requiring any hints beyond the label. However, they appreciated help for more complex input fields such as the expiration date of the credit card. Here, they wished a permanent display of help text that would not disappear when moving away from the input field (as opposed to both versions implemented in our prototype), e.g. in the form of a long label.
Placeholder
Placeholder by Rakesh Paladugula
...The
placeholderattribute should not be used as an alternative to a label...
Placeholder Attribute Is Not A Label!
Placeholder Attribute Is Not A Label! by Dennis E. Lembree
Just so we're all clear on this, the HTML5
placeholderattribute in a text input is not a replacement for the label element. Period. Theplaceholdershould only be used as a brief example of the text to be entered. Besides inconsistent support for screen readers, using aplaceholderas an input label can create usability problems and issues for those with cognitive impairments...
Placeholder text
Placeholder text - Editors: Eric Eggert, Shadi Abou-Zahra. Contributors: The Web Content Accessibility Guidelines Working Group (WCAG WG ) the Education and Outreach Working Group (EOWG)
If the placeholder text contains instructional information or examples, having it disappear can make it more difficult for users to check their responses prior to submitting the form. While placeholder text provides important guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels. Moreover, at the time of writing this tutorial, placeholder text is not broadly supported across assistive technologies and not displayed in older web browsers.
Note: Section Hidden labels of this tutorial describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus.
At the time of writing this tutorial, web browsers usually display the placeholder text in a color that does not meet the minimum contrast requirement of WCAG 2.0. This means they are hard to see for many people. Web browsers use a combination of color and opacity to achieve this effect. In most web browsers the color of the placeholder can be styled using proprietary CSS selectors. The following code snippet sets the color to a light gray, which has just enough contrast to meet the contrast requirement, assuming the background of the element is white.
Code snippet:
- -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;
}
Placeholder Text - Clever, or Too Clever?
Placeholder Text - Clever, or Too Clever? by Sarah E Bourne
HTML5 allows you to have "placeholder" text - text in a form field to give hints about what you should put there. There are a number of ways to use it incorrectly and poorly...
Placeholders are not Substitutes for Labels
Placeholders are not Substitutes for Labels by Pardot
Labels are captions which inform visitors what information a particular form field is asking for. Placeholders are bits of example content or hints which provide visitors with visual cues to aid in form completion. Labels appear outside of their respective form field, while placeholders appear inside of their respective form field and disappear when visitors click or tab into the field...
Placeholders in Form Fields Are Harmful
Placeholders in Form Fields Are Harmful by Katie Sherwin
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. It also poses additional burdens for users with visual and cognitive impairments.
The HTML5 placeholder attribute is not a substitute for the label element
The HTML5 placeholder attribute is not a substitute for the label element by Roger Johansson
...Since any text in the
placeholderattribute is only available to the user when the field is empty, once you've started entering something (or if a value is prefilled by the server), the hint is gone. Want to go back and change something? Better remember what the placeholder-faked label said before you started typing, unless you want to clear the field to see the label again. And, as I mentioned before, in some browsers just putting focus on the field is enough for the placeholder text to go away. Not knowing what you're supposed to enter into a field is...not so good,
Using the HTML5 Placeholder Attribute
Using the HTML5 Placeholder Attribute by Leonie Watson
HTML5 has changed the way we build websites and online applications. It introduces lots of new features, many of which make inclusive design much more achievable...
What Happens When Placeholder Text Doesn't Get Replaced
What Happens When Placeholder Text Doesn't Get Replaced by Rian van der Merwe
One of the many things I do that proves that I need to get out more is collect examples of placeholder text that ends up in a final interface. But I've also noticed that the issue happens more and more in the offline world as well...
WCAG Issue #100: H65 Technique is Invalid and Abused to Allow Disappearing Placeholders Over Visible Labels
WCAG Issue #100: H65 Technique is Invalid and Abused to Allow Disappearing Placeholders Over Visible Labels by Paul J. Adams
I'm seeing many people use this technique as a normative type document to meet the labels and instructions SC that requires visible labels. They are applying it to incorrect situations like many text inputs in a shipping address fieldset with placeholders and no visible labels. I could see how it applies in the 4 specific situations listed in H65 but beyond that it should not be valid. This technique causes many developers and designers to say well WCAG allows a title on H65 so all we need is a title or some other visually hidden label. This is a major problem for mobile were everyone loves placeholders over labels. http://pauljadam.com/demos/wcagh65invalid.html Thank you for any help in fixing the issue or correcting me on it if I'm crazy and visually hidden labels are really allowed on whatever text inputs you want.
Related Reference: H65: Using the title attribute to identify form controls when the label element cannot be used