Skip to content

Instantly share code, notes, and snippets.

@davatron5000

davatron5000/placeholder_not_a_label.md

Last active December 16, 2015 12:08
Show Gist options
  • Save davatron5000/5431990 to your computer and use it in GitHub Desktop.
Save davatron5000/5431990 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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

@RachelRVasquez
Copy link

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.

@RachelRVasquez
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment