html - 可访问的自定义样式复选框

Question

我正在使用标签元素来创建自定义样式的复选框。本质上，我将它用作按钮，以便稍后使用 :checked 选择器执行一些样式设置。我没有将值提交给表单。

<input type="checkbox" id="agree" style="display:none" />
.......
<!-- few more divs here -->
.......
<label for="agree" role="button">Click here</label>
<div>This div will be styled if the checkbox is ticked</div>

我的问题是，从可访问性的角度来看，这是否正确？有没有更语义化的方式来做到这一点？ (只有css一定要提)

我需要一个自定义样式的复选框。

我认为正确的语义方式是使用 <button> , 但它不能用作标签，也不会勾选复选框..

Answer 1

执行此操作的标准方法是利用 aria-checked 和 role=checkbox 属性，但这需要 Javascript:

<label for="agree">Click here</label>
<div id="agree" role="checkbox" aria-checked="true" tabindex="0">
       This div will be styled if the checkbox is ticked</div>

您的示例中的可访问性失败是多方面的:

• 标签指的是一个不可访问的输入，它将阻止辅助技术查看相关元素
• 无法使用键盘操作该元素
• 您在语义元素上使用了 role 属性 "Do not change native semantics, unless you really have to."

请注意，您可以完美地使用标准的 checkbox 元素并在其上应用一些 css 而无需完全隐藏它。

<label>
    <input type="checkbox" id="agree" value="1" />
    <div>I agree with the above elements</div>
</label>

-----
/* the input would be hidden but still focusable */
#agree {width: 0px; margin-left: 2px; overflow: hidden;}

/* when focusing the element, we will outline the text to make the focus visible */
#agree:focus + div {outline: dotted 2px blue}

/* default when unticked */
#agree + div {background-image: url("ko.png") no-repeat; border: solid transparent 2px;}

/* default when ticked */
#agree:checked + div {background-image: url("ok.png") no-repeat; border: solid green 2px;}

这要求您的 CSS 产生明显的差异，而不是仅仅依赖于颜色的使用。