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

它不是有效的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中,屏幕阅读器将宣布更改。

首先,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具有本机元素的地方使用自定义元素,那么您将为自己创建大量额外的工作。

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

<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