16

I'm Making a form with multiple inputs where I need to give lable of form element inside input itself and I'm using like this

An example

enter image description here

<form class="TTWForm">
<input type="email" name="email" required="required" placeholder="Email Address">     
</form>

And above code is Valid in W3C validator for HTML5.

Does Label not require in HTML 5?

If I'm using HTML5 Placeholder to show label inside input is that ok?

Does label still required along with placeholder to make it screen reader compatible?

1
  • 1
    AppleGrew and steveax answers are both very good. To be complete, another problem with the placeholder attribute is that, for keyboard users, its displayed value will disappear after jumping from the last link, as soon as the input gets the focus. Without a label, they'll stare at a blank input and will have to guess what they're being asked for.
    – FelipeAls
    Feb 6, 2012 at 20:29

3 Answers 3

11

HTML validators will not check accessibility. Valid HTML can still be inaccessible or less than optimal. Labels are still important and HTML5 placeholder is not a replacement for them. See H44: Using label elements to associate text labels with form controls in the WCAG 2 Techniques. If your layout requires that the label not be visible to sighted users, you can always include the label but move it offscreen with negative margins/text-indent.

Update:

Some test result on placeholder and a discussion on the W3 Public HTML mailing list about using placeholder without label.

1
  • Thanks. This answer clearly should marked as correct.
    – dschu
    Oct 20, 2016 at 10:20
3

Placeholder is no replacement for Label so I guess for screen reader this should be present or at least set the title attribute. Ref

For cross browser compatibility you need to use javascript. Checkout http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html for that.

0

In essence it depends on what the goal of your pages is :

Placeholders in Form Fields Are Harmful

i would prefer 'can be harmful' ... say i'm creating an audiovisual-experience like a game that works in a browser, the use of labels would be detrimental to the layout and people with visual impairment (or others) might not be able to enjoy the game anyway. Downplaying the game to a point where anyone with any impairment can enjoy it would require me to have a team that consists of at least one person with one impairment of each type to make sure everyone can have the right experience. Most of it would be cut out in most places to adapt and the whole experience would change so.

I think this is something that comes at your own discretion depending on what you want to achieve , but this certainly answers my question on the matter

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.