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/检查代码。 <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值，屏幕阅读器就会宣布更改。

Answer 2

首先，button element不能包含任何"interactive content"，即没有其他表单控件，audio元素，video元素等。

理想情况下，您应该使用原生HTML元素，即form元素来包围复选框和按钮，以及input元素及其type set to checkbox。您还需要associate labels with the checkboxes。使用这些原生元素，您不需要WAI-ARIA属性，例如role='checkbox'和aria-checked;这些WAI-ARIA属性实际上是多余的（参见例如文章On HTML belts and ARIA braces 。）

如果您有充分的理由使用span，CSS和JavaScript组合创建自定义复选框，则需要额外的标记才能访问这些复选框：

tabindex="O"确保键盘用户可以访问该复选框
role='checkbox'使屏幕阅读器能够确定他们正在处理的元素类型，
aria-checked（值为true或false）使屏幕阅读器能够找出复选框的状态，
aria-labelledby至associate a "label" with the checkbox。

如您所见，如果您使用HTML具有原生元素的自定义元素，您可以为自己创建大量额外工作。

Answer 3

请参阅此代码，以更好地理解如何编写可访问的复选框。请定义如下复选框：

<h1>Show checkboxes:</h1>

<form action="/action_page.php">
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
  <input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>
By using this method the checkboxes will be properly accessible by default and also, screen reader will announce the state.
If there are custom checkboxes which are to be made accessible, then please refer:
https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074

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

3 个答案: