Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on making my pages compliant to us section 508, and wcag 2.0 aaa. I've got a bunch of fields that have ghosting on them, like date text boxes.

they use the labelOver plugin that can be found here: http://remysharp.com/wp-content/uploads/2007/03/label_over_example.html

basically it has a label, that is visible when the box is empty and not focused, when you focus the box, it hides.

I also have a label for the actual label for the box IE: "start date"

This passes validation checks from the total validator tool, but wave finds that having 2 labels is not accessible.

so the question is: can screen readers and the like handle 2 labels now? or should i devise a way for it not to use a label?

share|improve this question
2  
I don't consider the guiding text (the "ghosting" text) to be a label at all, it's microcopy to guide input; are you saying validation or some guideline considers this to be a label? –  Ben Brocka Oct 20 '11 at 15:15
    
it's an html <label>, which as i understand the screen readers will read to you when the input has focus. –  Patricia Oct 20 '11 at 15:17
    
So it semantically is a label, I'm not sure how a screen reader would use it myself then. I've seen these put to very good use so I wouldn't hesitate to implement the actual idea, but if you have access to JAWS or another screen reader I'd certainly test and see how it operates with the "double lable" –  Ben Brocka Oct 20 '11 at 15:23
1  
If the label for the field is 'start date' what does the text inside the field say? I'm guessing the latter isn't really a label, but additional help text. FYI, HTML5 uses the 'placeholder' attribute for that...that may be the most semantic and accessible option. –  DA01 Oct 20 '11 at 16:50
3  
Patricia, try NVDA, it's free nvda-project.org –  Pam G Oct 21 '11 at 22:33
show 2 more comments

1 Answer

up vote 6 down vote accepted
+50

There are a couple accessibility concerns with this particular implementation.

First they're using negative positioning to hide this placeholder label; negative positioning like this removes text from the screen, but screen readers still read text formatted like this in general, resulting in different presentation for screen readers and screen viewers.

More importantly, it appears that common screen readers will not read more than one label associated with a form field; apparently JAWS in particular will read only the last label associated with the field. A little more reading on HTML Lables and accessibility is here as well.

It's important to note that the HTML 4 spec explicitly allows multiple labels:

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

JAWS and related screen readers only reading one label is incorrect behavior so it's not going to cause a validation error, it is valid. All the same a great deal of screen reader users will only hear one label, and worse some will hear the first label and some will hear the last label as noted on 456ereastreet.com:

Apple VoiceOver does not recognise more than one label element associated with a form control and reads only the label that comes first in the document’s source order. JAWS and Window-Eyes both do the opposite and read only the last label when an input field gains focus.

As a sidenote, HTML5 provides the placeholder attribute for input fields which meshes with accessibility and does not replace a label element, but you'll probably want a javascript fallback for users on browsers that do not support HTML5.

share|improve this answer
    
that you so much for the great answer Ben! looks like i'll have to make some changes. I think i will change it to using a span for the "dd/mm/yyyy" "label" and keep the regular label as a label. it'll invlove changing the plugin quite a bit, but that's ok. do you know if having a described-by attribute pointing to the span, along with the label would be a good idea? –  Patricia Oct 26 '11 at 19:55
    
I've never used aria-describedby myself so I'm not sure on that one –  Ben Brocka Oct 26 '11 at 20:01
1  
It's doubtful that JAWS support ARIA yet, as JAWS really sucks, but ARIA Is definitely the standard way going forward. –  DA01 Oct 26 '11 at 20:39
    
Yeah, as I probably should have mentioned, JAWS is horrible at keeping to standards, even established standards like HTML4 let alone HTML5. Unfortunately for accessibility you're mostly limited by JAWS if you want to reach the most people, but do use everything the W3C lets you use. –  Ben Brocka Oct 26 '11 at 20:55
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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