5

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?

Improve this question
7
  • 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, 2011 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, 2011 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, 2011 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, 2011 at 16:50
  • 3
    Patricia, try NVDA, it's free nvda-project.org
    – Pam G
    Oct 21, 2011 at 22:33

1 Answer 1

Reset to default
7
+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.

Improve this answer
4
  • 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, 2011 at 19:55
  • I've never used aria-describedby myself so I'm not sure on that one
    – Ben Brocka
    Oct 26, 2011 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, 2011 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, 2011 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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