Reskinning checkboxes with CSS and Javascript

Question

I have created some simple Javascript to make a checkbox seem re-skinned that hides the checkbox and basically just pulls in a background image through CSS to show the checks/unchecks.

Is this HTML/CSS for hiding the checkbox accessible? I want to be as compliant as possible and am uncertain about the hiding and my label. Currently this is how it looks..

CSS:

    .checked:hover, .unchecked:hover
    {
        background-color: #242424;
    }
    .checked
    {
        background-image: url(check.bmp);
        color: #ffb500;
    }
    .unchecked
    {
        background-image: url(unchecked.bmp);
    }

HTML:

<label for="cbAll" class="checked" id="lblAll">
<input id="cbAll" type="checkbox"  name="cbAll" checked="checked"/>
ALL </label>

Answer 1

Take a look at http://lipidity.com/fancy-form/

You can see how they do it and incorporate it in your own implementation.

Answer 2

If you're worried about accessibility, I'd say that looking at others' (especially professionally written) code would be the best. jQuery UI is the one that immediately comes to mind. If you look at the code generated by jQuery UI's button widget, part of whose purpose is to serve as a checkbox replacement.

Original HTML:

<input type="checkbox" id="check" /><label for="check">Toggle</label>

Generated HTML:

<input type="checkbox" id="check" class="ui-helper-hidden-accessible" />
<label for="check" aria-pressed="false" class="[redacted]" role="button" aria-disabled="false">
    <span class="ui-button-text">Toggle</span>
</label>

Notice the conformation to the WAI-RIA specification, with the correct use of the role attribute to indicate the role taken on by the label element as a button (the original input element is hidden, and thus ignored by screenreaders). You should have a look at the specifications if you want to know how to build things like this in an accessible manner.