Critique: jQuery checkbox plugin accessibility

Accessibility
1

Hey all,

I just wrote a little jQuery plugin to create custom checkboxes/radio buttons.

The approach is simple. Wrap a label around the input tags, then hide the input and style the label, thus having a minimal impact on the rest of the markup and no need to write weird event handlers to check/uncheck as the browser will take care of checking the field because of the label’s implicit relationship with the .

There would be scenarios of course where people would already put their input inside of the label, so this plugin would create a nested label in those cases. I’m wondering if there are any adverse accessibility effects to having the labels nested like this.

e.g. starting out code (show both implicit and explicit label relationship methods):


<div class="field">
    <label for="cbx-1"><input type="checkbox" id="cbx-1" name="cbx-1" /> Apples</label>
</div>

<div class="field">
    <input type="checkbox" id="cbx-2" name="cbx-2" /> <label for="cbx-2">Oranges</label>
</div>

Would get transformed to:


<div class="field">
    <label for="cbx-1"><label class="checkable-field checkable-checkbox"><input type="checkbox" id="cbx-1" name="cbx-1"></label> Apples</label>
</div>

<div class="field">
    <label class="checkable-field checkable-checkbox"><input type="checkbox" id="cbx-2" name="cbx-2"></label> <label for="cbx-2">Oranges</label>
</div>

And if anyone has any other accessibility issues they see, fee free to bring them up as well :slight_smile:

GitHub: http://afterlight.github.com/checkable/
Demo: http://afterlight.com.au/demos/checkable/

Cheers (:

2

It might not be an accessibility issue now but it could become one in the future because the above html fails the w3c validator if using a HTML4 Strict doctype.

3

Hmm this is a good point, the only way this would be valid is as XHTML, neither HTML4 or HTML5 allow nested label elements it seems. Perhaps I need to add some voodoo after all.

4

The problems here, if any exist, should show up quickly in testing. The biggest potential problem that I can see at a quick glance over your snippets is the absence of support for multiple labels per input. Almost no aural AT, other than JAWS (11 and later) with IE, supports more than one label per input, so they may well fail with your nested labels. Given that it is invalid to nest labels and, above all, feels like a really bad idea, I have never felt the need to test such a thing, but you ought to check carefully for the multiple label issue and similar problems because labels have to be handled with some care. It is quite easy to find their content being omitted from an accessibility API or two if bad practices are followed.