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)

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