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>

示例中的辅助功能失败是多方面的：

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

role

请注意，您可以完美地使用标准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产生明显的差异而不依赖于单独使用颜色。

Answer 2

根据@Adam的答案，他链接到资源2.2 Second rule of ARIA use，这给了我一个很好的提示，如何解决我的问题。

而不是这样做

<label for="agree" role="button">Click here</label>

正确的方法是

<label for="agree"><span role="button">Click here</span></label>

由于我无法使用<button>（这会与勾选复选框的标签冲突），我使用role="button"的范围。

Answer 3

仅使用CSS和HTML我可能会建议以下解决方案：

<label for='checkbox'>
     <span style='cursor:pointer;border:1px solid red; background:yellow;padding:5px;border-radius:5px;'>Click</span>
</label>
<input id='checkbox' type='checkbox' />

所以你不需要按钮。您可以自定义范围。

检查小提琴https://jsfiddle.net/an0tcLmc/

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

3 个答案: