Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Organizing Forms The Label Element

2 Answers

Tim Knight
Tim Knight
28,888 Points

Hi Bradley,

Placeholders are good for showing example content within a field, but unfortunately when you use it as a label you're confronted with some accessibility issues. Placeholders aren't read as labels from assistive technologies. Though perhaps there are some instances where you want to not have a label visible and instead use the placeholder. In those cases I'd suggest including a aria-label="Your Label" attribute within the input to specify the label text.

David Moorhead
David Moorhead
18,005 Points

Hi Tim,

Adding support for your excellent post above, I just read an article "Don’t Use The Placeholder Attribute" dated June, 2018, which more than suitably defines numerous aspects of acceptable, with not so acceptable, accessible designs.

Here's the summary of the article.

The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Let’s clarify why you need to stop using it.

It's probably the most comprehensive article I've read at Smashing Magazine. The subsequent comments (or debates) with regard to the author's points of view were not inappropriate, but generously contributed information for designers' conversations with other designers and, of course, clients.

David

Note: Web Content Accessibility Guidelines Success Criteria 2.4.6 and 3.3.2.