代码之家 › 专栏 › 技术社区 › yuggmeister

如何使自定义复选框可访问?

screen-readers accessibility checkbox button html

yuggmeister · 技术社区 · 6 年前

我正在尝试对我正在开发的网站实现更多的可访问性。我在按钮中有一个自定义复选框,后面是一系列复选框。当我使用屏幕阅读器时,我希望屏幕阅读器在复选框未标记/标记时告诉我。这适用于所有复选框,除了我按钮内的复选框。该按钮用于标记/取消标记列表中的所有其他复选框(这是通过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>

下面基本上是一个复选框列表,所有这些复选框都可以通过键盘导航和屏幕阅读器访问和理解。只是按钮不能提供正确的反馈。

感谢您的任何建议。

3 回复 | 直到 6 年前

slugolicious 6 年前

它不是有效的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 .只需切换 aria已检查 之间 true 和 false 在javascript中,屏幕阅读器将宣布更改。

Tsundoku 6 年前

首先,a 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" 要确保键盘用户可以访问复选框,
角色='复选框' 为了使屏幕阅读器能够了解他们所处理的元素类型,
aria已检查 (值为true或false)以使屏幕阅读器能够了解复选框的状态,
aria-labelledby 到 associate a "label" with the checkbox .

如您所见,如果您在HTML具有本机元素的地方使用自定义元素,那么您将为自己创建大量额外的工作。

Akash Kakkar 5 年前

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

<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