html - 使用 CSS 和 Javascript 重新设计复选框外观

Question

我创建了一些简单的 Javascript 来使复选框看起来重新换肤，隐藏了复选框，基本上只是通过 CSS 拉入背景图像来显示选中/取消选中。

此用于隐藏复选框的 HTML/CSS 是否可访问？我想尽可能地顺从，并且对隐藏和我的标签不确定。目前这就是它的样子..

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

如果您担心可访问性，我会说查看其他人(尤其是专业编写的)代码将是最好的。 jQuery UI是我立即想到的那个。如果您查看 jQuery UI 按钮小部件生成的代码，您会发现其部分目的是用作复选框替代品。

原始 HTML:

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

生成的 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>

注意 WAI-RIA specification 的构造，正确使用 role 属性来指示 label 元素作为按钮所承担的 Angular 色(原来的 input 元素被隐藏，因此被屏幕阅读器忽略)。如果您想知道如何以可访问的方式构建这样的东西，您应该查看规范。