Placeholder attribute and Why it is not accessible

The placeholder attribute is newly introduced in HTML5. The placeholder attribute specifies a short hint that describes the expected value of an input. The hint can be a sample text or a format in which user can fill the field.

<input type=”text” placeholder=”Placeholder text” />

The placeholder attribute must be used along with the input type that have the following values.

• text
• search
• url
• tel
• email
• password

The placeholder text will be visible until the user focus on to the field. Once the user focus on to the field the placeholder text disappears. This feature makes the life of content authors easy. Earlier to the introduction of placeholder attribute content authors have to rely on JavaScript or any other scripting to get similar effect.

Note: For a longer hint or other advisory text, the title attribute is more appropriate.
The placeholder attribute should not be used as an alternative to a label.

The PlaceHolder Accessibility problems

Use of placeholder attribute cause accessibility problems if it is not used wisely. Following are the problems I commonly observe.

Using placeholder as alternate for label

The W3C HTML5 spec says “The placeholder attribute should not be used as an alternative to a label”. The spec does not say “must not”. This allows content authors to use placeholder text as labels.

When the placeholder is used as label this causes problem for many users. Following are to name a few.

• People who have low vision and use only keyboard to fill a form. Low vision users can identify only the content that has current keyboard focus. Placeholder text disappears as soon as the field receives keyboard focus and these set of users cannot read the text associated with it.
• People with short-term memory may forget what they are filling if they are distracted because of a phone call or while they are pulling the information from a hard copy or from any other window or source. Though they try concentrating on filling the form these distractions can happen in real time.
• Use of placeholder as alternate for label cause difficulty to glance at the form to check the correctness before submission. Since the placeholder disappears users cannot compare the entered text with the label.
• When the form submission is failed, it will be difficult for the users to identify the wrong field if the labels or instructions are not provided. As the label is substituted with placeholder the user entered text only will be displayed in the field. When clear error identification mechanism is provided this problem can be of low impact.
• Users often think that the placeholder text as real text and do not bother providing content in it. They may think the field is already filled and navigate to other empty fields. Some user’s feel that the placeholder text as default value and avoid filling them.

Email Address

Using placeholder for hints or instructions

When important instructions or hints to fill the field are provided as placeholders all the above problems hold good. Do not provide any important instructions only as placeholders. Make the placeholder text as simple as possible.

Color Contrast for placeholder text

The default color for the placeholder text is light grey. This color does not pass minimum color contrast on most of the browsers and will be problematic for low vision and color blind users.

Making Placeholder text accessible

• Do not provide placeholder as the sole way of providing labels or instructions.
• If placeholder is provided as a label or instruction ensure that it is visible even after the user inputs the valid content in it.
• Ensure the labels and important instructions are available even after the form validation in case of failed submission.
• Provide contrasting color as per 1.4.3 Minimum contrast checkpoint of WCAG 2.0.
• When lengthy content need to be provided as placeholder, choose alternate methods such as title or aria-labelledby.
• Ensure that the important instructions are available even when the user fills the data.
• Ensure that the screen reader announces the placeholder text in all browser combinations before and after filling the form. I have checked the usage of placeholder with JAWS 17 and NVDA 2015.4 on Windows with latest FireFox, Internet Explorer and Google Chrome. Bothe the screen readers announce the placeholder before and after filling the element. VoiceOver on IOS 9.2 is announcing the placeholder before filling the element but not after the data is filled.

Do you want to make a placeholder accessible? Read Accessible Solution for HTML5 placeholder