如何使我的自定义复选框可访问？

Question

我正在尝试为我正在处理的网站实现更多的可访问性.我在按钮内有一个自定义复选框,后面是一个复选框列表.当我使用屏幕阅读器时,我希望屏幕阅读器在没有标记/标记复选框时告诉我.这适用于所有复选框,但我的按钮内的复选框除外.该按钮的目的是标记/取消标记列表中的所有其他复选框(这由JavaScript完成).一切正常,除了屏幕阅读器在我取消标记/标记时没有说什么.

这里的代码:

<button id="checkAll" class="btn btn-default checkAll checkAllInit" 
data-target="#everyCheckbox">
<span class="icon icm icm-checkbox_select" role="checkbox"></span>
<span class="text">Unmark all</span></button>

以下基本上是一个复选框列表,所有这些都可以通过键盘导航和屏幕阅读器来实现和理解.这只是按钮无法给出正确的反馈.

任何建议赞赏.

Answer 1

这不是有效的HTML.您可以使用https://validator.w3.org/nu/来检查您的代码.A <button>不能嵌套任何交互式组件.请参阅https://www.w3.org/TR/html53/sec-forms.html#the-button-element

内容模型:短语内容,但必须没有互动内容后代.

这会使屏幕阅读器混淆.您需要一个简单的按钮或一个简单的复选框.

如果你没有使用原生<input type='checkbox'>,那么你需要role='checkbox' 和 aria-checked.只需切换javascript aria-checked之间true和之间的值,false屏幕阅读器就会宣布更改.