Das Umgestalten von Kontrollkästchen mit CSS und Javascript

Question

Ich habe einige einfache Javascript erstellt, um ein Kontrollkästchen neu zu gestalten, das das Kontrollkästchen ausblendet und im Grunde nur ein Hintergrundbild über CSS einzieht, um die Ankreuzungen anzuzeigen.

Ist dieses HTML/CSS für das Ausblenden des Kontrollkästchens zugänglich? Ich möchte so konform wie möglich sein und bin unsicher über das Ausblenden und mein Label. Derzeit sieht es so aus...

CSS:

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

HTML:

ALLE

Answer 1

Wenn Sie sich Gedanken über die Zugänglichkeit machen, würde ich sagen, dass es am besten ist, sich den (besonders professionell geschriebenen) Code anderer anzusehen. jQuery UI ist das, was mir sofort einfällt. Wenn Sie sich den Code des von jQuery UI generierten Schaltflächen-Widgets ansehen, das teilweise dazu dient, als Ersatz für ein Kontrollkästchen zu dienen.

Original HTML:

Umschalten

Generiertes HTML:

    Umschalten

Beachten Sie die Einhaltung der WAI-RIA-Spezifikation, mit der korrekten Verwendung des Rolle-Attributs, um die Funktion des label-Elements als Schaltfläche anzuzeigen (das originale input-Element ist ausgeblendet und wird daher von Screenreadern ignoriert). Sie sollten sich die Spezifikationen ansehen, wenn Sie wissen möchten, wie man Dinge wie diese auf barrierefreie Weise erstellt.

Answer 2

Schauen Sie sich http://lipidity.com/fancy-form/ an

Sie können sehen, wie sie es machen und es in Ihre eigene Implementierung integrieren.