8 ms·

Just a small accessibility thing: having inputs with placeholder text is great, but screenreaders have not caught up with the times and you should still use a c

Just a small accessibility thing: having inputs with placeholder text is great, but screenreaders have not caught up with the times and you should still use a corresponding <label> tag.

rjzzleep 13y ago
i never even thought of that angle. thanks!
alternize 13y ago
also, for internet explorers, placeholder support is pretty bad - IE10 only: http://caniuse.com/input-placeholder http://caniuse.com/input-placeholder
- brokenparser 13y ago
  So MSIE supports placeholders. How is that "bad"?
  - ceejayoz 13y ago
    IE 7-9 are still far more prevalent than IE 10. Most IE users will be in a variant without support.
    - projct 13y ago
      IE10 is being rolled out via auto update to IE[89] users on windows 7 if they are on automatic updates, so that'll help some, FYI. http://technet.microsoft.com/en-us/ie/jj898508.aspx http://technet.microsoft.com/en-us/ie/jj898508.aspx
ceejayoz 13y ago
It's not about them having "not caught up with the times", it's using placeholder to replace label being a violation of the intent of the attribute. http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute http://www.w3.org/TR/html5/forms.html#the-placeholder-attrib... "The placeholder attribute should not be used as an alternative to a label."
- flyosity 13y ago
  Even worse! Thanks for the clarification.
- scott_karana 13y ago
  Agreed. If people insist on "styling" with placeholders as labels, they should at least include <labels> that are hidden visually but accessible by screenreaders.
psychometry 13y ago
It also results in ugly rendering issues with browsers that save previously submitted form data, overlaying it on top of the placeholder text or replacing it even if it's the wrong data for that field type.
- ricardobeat 13y ago
  placeholder is a native attribute. If you are doing it via javascript for older browsers, your code should handle that case.
  - dasil003 13y ago
    You're misunderstanding the issue. The issue is that the placeholder text disappears once you start typing into it. The usability assumption is that once you start typing in a value you no longer need the placeholder, but that is a bad assumption, particularly if a mistake is made as the gp is alluding to.
    - ricardobeat 13y ago
      No, I'm not. I was responding to the parent about "ugly rendering issues".
Cryode 13y ago
Also, just as a general user experience thing, not having labels can be detrimental if the field's purpose is forgotten or unknown. Having a placeholder is fine if there is no value in the field, but if I submit a long form after filling it out, only to be shown an error, what if I don't remember what that particular field was for?
jgalt212 13y ago
Has anyone done any studies on what % of web users use/need screensreaders? Supporting such technologies can be quite cumbersome. Also, is screenreader support mandated or addressed under the Americans With Disabilities Act?

Just a small accessibility thing: having inputs with placeholder text is great, but screenreaders have not caught up with the times and you should still use a corresponding <label> tag.

rjzzleep 13y ago

i never even thought of that angle. thanks!

alternize 13y ago

also, for internet explorers, placeholder support is pretty bad - IE10 only: http://caniuse.com/input-placeholder http://caniuse.com/input-placeholder

brokenparser 13y ago
So MSIE supports placeholders. How is that "bad"?
- ceejayoz 13y ago
  IE 7-9 are still far more prevalent than IE 10. Most IE users will be in a variant without support.
  - projct 13y ago
    IE10 is being rolled out via auto update to IE[89] users on windows 7 if they are on automatic updates, so that'll help some, FYI. http://technet.microsoft.com/en-us/ie/jj898508.aspx http://technet.microsoft.com/en-us/ie/jj898508.aspx

ceejayoz 13y ago

It's not about them having "not caught up with the times", it's using placeholder to replace label being a violation of the intent of the attribute. http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute http://www.w3.org/TR/html5/forms.html#the-placeholder-attrib... "The placeholder attribute should not be used as an alternative to a label."

flyosity 13y ago
Even worse! Thanks for the clarification.
scott_karana 13y ago
Agreed. If people insist on "styling" with placeholders as labels, they should at least include <labels> that are hidden visually but accessible by screenreaders.

psychometry 13y ago

It also results in ugly rendering issues with browsers that save previously submitted form data, overlaying it on top of the placeholder text or replacing it even if it's the wrong data for that field type.

ricardobeat 13y ago
placeholder is a native attribute. If you are doing it via javascript for older browsers, your code should handle that case.
- dasil003 13y ago
  You're misunderstanding the issue. The issue is that the placeholder text disappears once you start typing into it. The usability assumption is that once you start typing in a value you no longer need the placeholder, but that is a bad assumption, particularly if a mistake is made as the gp is alluding to.
  - ricardobeat 13y ago
    No, I'm not. I was responding to the parent about "ugly rendering issues".

Cryode 13y ago

Also, just as a general user experience thing, not having labels can be detrimental if the field's purpose is forgotten or unknown. Having a placeholder is fine if there is no value in the field, but if I submit a long form after filling it out, only to be shown an error, what if I don't remember what that particular field was for?

jgalt212 13y ago

Has anyone done any studies on what % of web users use/need screensreaders? Supporting such technologies can be quite cumbersome. Also, is screenreader support mandated or addressed under the Americans With Disabilities Act?