Accessible Solution for HTML5 placeholders

In the earlier article Placeholder attribute and Why it is not accessible, I have discussed the accessibility problems in making placeholder as a label. Problems need to be solved, barriers need to be broken.

In this article I will explain you two wonderful techniques CB AverittExternal Website proposed in making the placeholder attribute accessible. Following are the problems I have explained in my previous article.

  1. Placeholder cannot be used as alternate for label as it is not always visible.
  2. Do not provide placeholder for important hint or instruction.
  3. Placeholder text in general will have poor color contrast.

Making HTML5 placeholder accessible

To make the placeholders accessible, CB AverittExternal Website 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.

Screenshot showing the placeholder as bubble with the content filled for first name and last name fields

Look at the solution one sample.

Solution 2: Programatic 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.

Screenshot of label element as placeholder with the fieldsfilled

Look at the Sample two implementation.

Thank you CB AverittExternal Website for a wonderful solution to make web a better place for everyone.

6 Comments to "Accessible Solution for HTML5 placeholders"

  1. Bhaskarjyoti Hazarika's Gravatar Bhaskarjyoti Hazarika
    March 12, 2016 - 7:17 pm | Permalink

    Hi Rakesh. Great stuff!
    Do we still have a solution for the scenario where a placeholder attribute is used for important helper text? For e.g., an input field where “Card Number” is a visible label (associated using label and for) and “15 to 16 digits” is the placeholder text. How do we retrofit it?

  2. March 17, 2016 - 6:01 pm | Permalink

    The Google URL Builder is a weird form example, where Google used a div for what looks like placeholder text, and changed the look of inputs, so that I kept clicking on the subtext, thinking that’s where the input was

  3. March 17, 2016 - 9:53 pm | Permalink

    This may be a good compromise between access folks and naive designers. But I have one big question, if the label still remain visible on the page (as it should), and takes up some vertical space (as expected), why not just leave it there in the first place by default (with no transition)? This would end up like the traditional format which would then allow the use of *real* placeholders.

Comments are closed.