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 Accessibility Web Apps Forms

Oziel Perez
Oziel Perez
61,321 Points
Posted by Oziel Perez
Oziel Perez
61,321 Points

Accessibility and form input elements that have text labels inside them

I know some websites have the label text inside the input fields rather than above them or next to them. Example: an input tag of type="text" has the value="Full Name" and (using javascript, jquery, etc.) when someone clicks on the input field, the "Full Name" text disappears and displays whatever the user has typed out. I was just wondering, does the screen reader read those pieces of text as well? If not, how can I make that accessible? I'm assuming doing something like adding the label tags with their specific values and styling them with display:none and then just keeping the other placeholder text where it was, but I want to know if that's possible.

2 Answers

Matt Hall
Matt Hall
11,794 Points

That can be done using the placeholder attribute in the form element.

e.g.

<input type="text" name="fullname" id="fullname" placeholder="Full Name">

Placeholders are not a replacement for labels. Screen readers ignore the placeholder attribute so from both an accessibility and user experience point of view you should use them in conjunction with labels. I would suggest using the label to describe the field and the placeholder to offer an example.

e.g.

<label for="fullname">Full Name</label>
<input type="text" name="fullname" id="fullname" placeholder="e.g. John Smith">

Some more reading to help you:

http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/ https://www.pardot.com/faqs/forms/placeholders-and-labels/

Oziel Perez
Oziel Perez
61,321 Points
Oziel Perez
Oziel Perez
61,321 Points

Well although I already knew about the labels, I was going for something along the lines of not using labels (for design reasons), but then again if my design doesn't fit the labels, then I should probably reworking my form to accommodate for the labels. Thanks

Rick Gates
Rick Gates
11,061 Points
Rick Gates
Rick Gates
11,061 Points

Here is a really good resource for hiding text in HTML while keeping it accessible for screen readers. It's similar to Nick's off-screen example and gives an explanation of why other methods will not work with screen readers. Check it out: http://webaim.org/techniques/css/invisiblecontent/.