使用 CSS 和 Javascript 重新设置复选框答案

【问题标题】：Reskinning checkboxes with CSS and Javascript使用 CSS 和 Javascript 重新设置复选框
【发布时间】：2010-09-04 01:58:13
【问题描述】：

我创建了一些简单的 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>

【问题讨论】：

将标题编辑为复选框而不是文本框
谢谢马克。一定是隔开了，哈哈。
哦，顺便说一句，如果input 在label 内，您可以跳过for 和id 属性。

标签： html css checkbox accessibility

【解决方案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元素作为按钮所扮演的角色（原来的input元素被隐藏，因此被忽略由屏幕阅读器）。如果您想知道如何以可访问的方式构建这样的东西，您应该查看规范。

【讨论】：

@Boltclock: jQuery UI 给元素添加了很多class es，这些在这里都无关紧要，所以我删除了它们以保持滚动条很小。但是，嘿，如果您想重新添加 ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only，我很乐意提供帮助
@Yi Jiang：不，我发现你对[redacted]的使用非常有趣：P
谢谢蒋毅。这是一个结构良好的响应，我很欣赏 WAI-RIA 规范的链接。这将帮助我处理我可能构建的其他 AJAX 之类的东西。我去看看。

【解决方案2】：

看看http://lipidity.com/fancy-form/

您可以看到他们是如何做到的，并将其整合到您自己的实现中。

【讨论】：

所以可以像我一样使用标签，并且在处理可访问性时只需将输入元素隐藏在屏幕之外就可以了吗？感谢您的快速回复。
只要你处理不同的状态，比如 :hover :focus 等，这样用户就可以通过键盘或鼠标来浏览并知道哪个元素有焦点。