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 Averitt
proposed in making the placeholder attribute accessible. Following are the problems I have explained in my previous article.
- Placeholder cannot be used as alternate for label as it is not always visible.
- Do not provide placeholder for important hint or instruction.
- Placeholder text in general will have poor color contrast.
Making HTML5 placeholder accessible
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: 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.
Look at the Sample two implementation.
Thank you CB Averitt for a wonderful solution to make web a better place for everyone.