SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)

    Critique: jQuery checkbox plugin accessibility

    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):
    HTML Code:
    <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:
    HTML Code:
    <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

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

    Cheers
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  2. #2
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    Would get transformed to:
    HTML Code:
    <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>
    And if anyone has any other accessibility issues they see, fee free to bring them up as well
    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. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kennard View Post
    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.
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •