在 Web 开发中，我们需要考虑到不同用户群体的需求，其中包括视力障碍者和使用辅助技术的用户。为了让这些用户能够正常地使用我们的网站或应用程序，我们需要遵循无障碍设计原则。本文将介绍如何使用 aria-checked 属性实现无障碍复选框。
什么是 aria-checked 属性？
aria-checked 属性是 WAI-ARIA 规范中定义的一种属性，用于指示元素的选中状态。它可以被用于任何具有可选中状态的元素，比如复选框、单选框、开关按钮等。
aria-checked 属性有三种可能的取值：
- true：表示元素被选中。
- false：表示元素未被选中。
- mixed：表示元素处于混合状态，即部分选中。
在实现无障碍复选框时，我们需要考虑以下两个方面：
- 显示选中状态
- 支持键盘操作
显示选中状态
在默认情况下，复选框只是一个带有选中状态的方框，无法满足视力障碍者的需求。为了让屏幕阅读器能够正确地读出复选框的选中状态，我们需要使用 aria-checked 属性。
例如，我们可以使用以下 HTML 代码来创建一个无障碍复选框：
<label> <input type="checkbox" aria-checked="false"> 阅读完整的条款和条件 </label>
在上面的代码中，我们使用了 label 元素来关联复选框和文本。我们还将 aria-checked 属性设置为 false，表示复选框未被选中。
当用户点击复选框时，我们需要通过 JavaScript 来更新 aria-checked 属性的值，并在页面中反映出选中状态。例如，我们可以使用以下代码：
const checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('click', function() {
const isChecked = this.checked;
this.setAttribute('aria-checked', isChecked);
});在上面的代码中，我们监听复选框的点击事件，并将其选中状态赋值给 aria-checked 属性。
支持键盘操作
为了支持键盘操作，我们需要使用 tabindex 属性将复选框设置为可聚焦的元素，并监听键盘事件。
例如，我们可以使用以下代码来实现复选框的键盘操作：
-- -------------------- ---- -------
----- -------- - -------------------------------------------------
----------------- - --
------------------------------------ --------------- -
-- ----------- --- -------- -
----- --------- - -------------
--------------------------------- ------------
------------ - -----------
-----------------------
-
---在上面的代码中，我们将复选框的 tabindex 属性设置为 0，表示它是可聚焦的元素。我们还监听了键盘事件，并在用户按下空格键时切换复选框的选中状态。
总结
使用 aria-checked 属性可以帮助我们实现无障碍复选框，让视力障碍者和使用辅助技术的用户能够正常地使用我们的网站或应用程序。在实现无障碍设计时，我们还需要考虑到键盘操作、焦点管理等方面，以提供更好的用户体验。
完整示例代码如下：
-- -------------------- ---- -------
-------
------ --------------- -------------------- -------------
----------
--------
--------
----- -------- - -------------------------------------------------
---------------------------------- ---------- -
----- --------- - -------------
--------------------------------- -----------
---
------------------------------------ --------------- -
-- ----------- --- -------- -
----- --------- - -------------
--------------------------------- ------------
------------ - -----------
-----------------------
-
---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663f2736d3423812e4d60a9e