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)

Are title attributes also something to consider?
<input type="text" title="this is your input">

@grayghostvisuals Yes... (per the title attribute article) I'll add that in!

Also suggest bumping the contrast for low vision users with ::moz-placeholder, ::-webkit-input-placeholder, and :-ms-input-placeholder

Making notes.

• Got some passive aggressive feedback that TITLE is maybe not as useful and a hidden label is typically preferred: See whole conversation
• @ckundo, great idea. Looks like Steve Faulkner recommends #626262 for a 4.5:1 ratio.

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