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:

The color usually does not meet the minimum contrast ratio
and when a user focuses on the field, the placeholder text goes away.

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.

First Name

Last Name

Address

Phone

Birthday

Password

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.