Testing Placeholder Method

First Solution

For someone who would like to use a placeholder for a visual label to meet WCAG 3.3.2, I propose this solution as an option. The issues with using a placeholder to meet 3.3.2 are:

My solution changes the color of the placeholder to meet color contrast ratios. It also, moves the placeholder to a "bubble" that is located at the top right hand area of the input field. This happens on focus of the input field. The placeholder text is always visible. Either positioned as an expected placeholder or in the bubble.

A programmatically associated label must still be in place to meet WCAG 1.3.1. This solution uses the for/ID method with the label element clipped.

August 5, 2015 - Added password type to first solution.

Second Solution

This solution takes the programmatic label and visually makes it appear as a placeholder. Using the for/ID method programmatically associates this label. When the input element receives focus, the label is moved to the bubble. On blur, if there are characters in the input field, the bubble remains in place, if not, it goes back to appearing as a placeholder. The label is always visually on the screen, either appearing as a placeholder or in the bubble. There is no placeholder attribute anywhere.

August 3, 2015 - I've added a select element. The first option is the visual label. When another option is selected, the bubble is visually present. When the first option is visible, the bubble gets clipped. As others, the label element is programatically associated with the select element using the for/ID method.

Created by CB Averitt

Here are some others from around the web