# Use placeholder attributes

DevFeed: [Use placeholder attributes](<https://devfeed.tech/articles/use-placeholder-attributes-9409.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/placeholder-input-elements/>)

Author: Rachel R. Vasquez

Published: 2016-01-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Forms](<https://devfeed.tech/topics/forms.md>), [aria](<https://devfeed.tech/topics/aria.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Firefox](<https://devfeed.tech/topics/firefox.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [examples](<https://devfeed.tech/tags/examples.md>), [forms](<https://devfeed.tech/tags/forms.md>), [how-to](<https://devfeed.tech/tags/how-to.md>)

## AI overview

This article explains how to use placeholder attributes accessibly in form inputs. It recommends keeping visible or assistive labels, using placeholders only as supplemental hints, and checking placeholder text for sufficient color contrast across browsers.

## Source excerpt

Don't replace a label with a placeholder attribute. If labels are visually hidden, confirm that placeholders have sufficient contrast. Form input placeholder attributes are helpful for providing hints to (sighted) users in forms. 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 placeholders often lack sufficient color contrast by default. Now, there's nothing wrong with using placeholders - they can still be used. However, they should be used in addition to a label, not as a replacement. What happens when we don't use a label for an input element, is a screen reader will get to that field, but won't have any information for the user on what the input element is for. So the screen reader user doesn't know what information to fill out. Also, a placeholder disappears when the input element is in focus, and can be an issue for people with memory impairments. Make your forms accessible by using one of the following methods (in order of preference): Redesign to include a proper visible label Use aria-label or aria-labelledby to provide assistive text Visually hide label elements (in an accessible manner) While we're paying attention to our placeholder text, let's review how to add better contrast: ::-webkit-input-placeholder { color: #626262; } ::-moz-placeholder { color: #626262; } :-moz-placeholder { /* Older versions of Firefox */ color: #626262; } :-ms-input-placeholder { color: #626262; } The above CSS assumes that the background for the form controls are #fff. If we test #fff and #626262 in a color contrast tool like Tanaguru Contrast-Finder, the results will approve these colors for valid contrast. You can use your own color for this, but be sure to read about how conformance levels work, and use a color contrast tool to confirm. In the above CSS, each selector for placeholder text needs to be seperate in their own declaration blocks. The re