RE: placeholder text in input controls

Devarshi Pant wrote:
> 
> > Bart wrote:
> > Now some sites start to use placeholder text instead of visible labels
> > next
> > to the control. I don't see this technique in WCAG2.0. Do you consider
> > this
> > sufficient to comply with success criterium 3.3.2 labels or
> > instructions?
> > The placeholder text is visible in the control and disappears when the
> > field
> > receives focus. Keyboard users see the text until they actually need
> > it.
> > Title attributes are not displayed on keyboard focus, only on mouse
> > over.
> > JAWS11 reads the title and not the placeholder attribute.
> > Please advise whether the above example is ok or not.
> >  
> *****
> Bart - This example could satisfy SC 3.3.2, when we factor in the
> following:
> 1. The title attribute and the placeholder text should convey the same
> meaning, which in your case are fine. "What is your first name" and
> "First Name" are quite close.
> 2. Those screen reader users who have settings that favor the label
> will not get the title attribute information. Furthermore, since the
> placeholder information is unavailable too, the form will be hardly
> accessible. Therefore, you might want to caution your users about this
> behavior and probably state somewhere that settings should favor the
> title attribute - some users like their default settings - so tread
> carefully in this regard.
> 
> You may use off-screen labels if you want to avoid touching users'
> settings.

Hi All,

I've not fully tested this everywhere, but as we see developers continue
to transition to HTML5 they have the ability to add placeholder text to
their form inputs without relying on JavaScript by using the placeholder
attribute
(http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-pla
ceholder-attribute) the spec clearly reads: "The placeholder attribute
should not be used as an alternative to a label." But we all know that
many will conveniently or inadvertently miss that detail, so we need to do
a good job reminding developers about this problem.

While placing the <label> content off screen is a tried-and-true
technique, another way forward will be to use the aria-label attribute,
like this:
	
	<input type="text" name="email" placeholder="My Email Address"
aria-label="My Email Address">

This *should* work in all modern browser/screen-reader setups, but as
previously noted I've not done extensive testing so you mileage may vary.

JF

Received on Friday, 9 December 2011 20:38:18 UTC