placeholder_not_a_label.md

Quick Tip: A placeholder is not a label

Form input placeholder attributes are helpful for providing tips to (sighted) users on the format of content required. Often times, due to design decisions, a placeholder is used to replace a more semantic label element. Unfortunately, accessible placeholder browser support isn't complete and placeholder often lack sufficient color contrast.

1. Redesign to include a proper label
2. Use aria-label or aria-labelledby to provide assistive text
3. Visually hide label elements (in an accessible manner)

While we're paying attention to our placeholder text, be sure to add better contrast to you placeholder text:

::moz-placeholder, 
::-webkit-input-placeholder, 
:-ms-input-placeholder {
  color: #626262; /* 4.5:1 contrast ratio on #FFFFFF */
}

Further reading

• HTML5 Accessibility Chops: the placeholder attribute from the Paciello Group (February 2011)

These placeholder css rules need to be defined separately as otherwise they are ignored by the browser - more info in this stack overflow thread (http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css).

I've added a quick gist here with rules separated and extra rule added for firefox <19 (I know some people won't care about this one)

https://gist.github.com/clarehyam/7483034

Anything I can do here to help get this out the door? @clarehyam is right about needing to separate it. If not, what happens is it reads from top to bottom so if the top selector isn't for the browser reading it, it will ignore the selectors after that rather than check through all of them until one applies.

This one is a work in progress. Here's what I have so far based off of what's was already started by @davatron5000.

https://gist.github.com/RachelRVasquez/9aed0ddda6eaf675fd15