前言
前端开发不仅仅是选择合适的技术和框架，还需要考虑到每个用户的体验，尤其是对于那些对语音输入和视觉识别依赖度高的用户。随着网站和应用的不断发展，越来越多的人将使用无障碍技术来访问网页。为了帮助这些人，我们需要编写特殊的 HTML、CSS 和 JavaScript 代码，使他们可以更方便地访问和使用我们的网站和应用。
本文将介绍如何将 Aria 标准融入 Custom Elements 中，使其在可访问性方面具有更强的兼容性和易用性。
什么是 Custom Elements？
Custom Elements 是 Web Component 规范的一部分，它允许您创建可重复使用、自定义的 HTML 标记。相对于传统的 HTML 元素，Custom Elements 允许前端开发人员创建自己的定制元素，如通知、警告框等。
Custom Elements 提供以下优点：
- 更好的可组合性：Custom Elements 为 Web 组件提供更好的组合方式。这使得您能够更好地拆分复杂的用户界面和在某些情况下重用它们。
- 更好的封装性：Custom Elements 可以使开发人员更轻松地实现封装。Custom Elements 的元素封装了特定的功能，不必公开博弈式的函数和属性。
- 更好的数据封装：Custom Elements 定义了一个元素的接口，该接口是元素与其使用者的接口。这使得开发人员可以更好地定义如何访问数据并提供方法来报告其状态。
但是，Custom Elements 在可访问性方面的问题需要进行进一步改进，以便能够更轻松地实现特定的行为，如键盘非组合操作和语义元素。在本文中，我们将重点介绍如何将 Aria 标准融入 Custom Elements 中，使其在可访问性方面具有更强的兼容性和易用性。
什么是 Aria？
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一个技术规范，它使 Web 内容和 Web 应用程序能够更好地适应和满足残障用户的需求。 WAI-ARIA 提供了一套语义化和浏览器可识别的属性，使残障用户能够使用辅助工具访问 Web 内容。
WAI-ARIA 包括两个部分：
- 角色：WAI-ARIA 角色为用户界面组件提供可访问性的信息。角色可能包括按钮、文本输入框、标签等。
- 属性：WAI-ARIA 属性为角色提供更多的具体信息，以便辅助技术可以更好地掌握 Web 内容的结构、交互和状态。属性可能包括 aria-label、aria-describedby、aria-disabled 等。
通过将 Aria 标准融入 Custom Elements 中，我们可以更好地为所有 Web 用户提供可访问性的信息，使其能够更轻松地使用我们的网站和应用程序。
如何将 Aria 标准融入 Custom Elements 中？
在 Custom Elements 中使用 Aria，我们需要考虑以下几个方面：
使用正确的角色
正确的角色是定义 Custom Element 的第一步。无论您创建的元素的用途是什么，都应该选择一个与该用途相对应的角色。例如，如果您创建了一个警告框元素，那么您应该使用 role="alert" 属性。
以下是一些常用的 WAI-ARIA 角色：
role="button"：表示给出操作的按钮。这将使辅助技术知道该元素可键盘导航。role="checkbox"：表示复选框。这将使辅助技术知道该元素的当前状态或状态更改事件。role="grid"：表示表格或网格。这将使辅助技术知道该元素的结构。role="menu"：表示简单的菜单。role="presentation"与aria-hidden="true"：通常与不带语义的 HTML 元素结合使用，该元素被称为 presentation role，即元素没有重要的角色。结合使用aria-hidden="true"可以防止辅助技术将该元素的内容视为重要内容。
使用适当的角色有助于构建无障碍的 Custom Elements。
<my-alert-box role="alert"> Please enter your credentials. </my-alert-box>
使用正确的属性
您的 Custom Elements 应该与 WAI-ARIA 属性一起使用，以便使残障用户了解元素的状态和交互。
我们可以采用以下两种方法来添加 WAI-ARIA 属性：
- 直接在元素上添加属性。例如：
<my-alert-box role="alert" aria-labelledby="alertTitle alertDesc"></my-alert-box>。 - 通过 JavaScript 动态添加属性。例如：
alertBox.setAttribute('data-testid', 'alertBox')。
以下是一些常用的 WAI-ARIA 属性：
aria-label：表示元素的文本标签。aria-labelledby：表示元素的标题，可以是当前页面中的标记 HTML 元素 ID 或相应元素的 ID 或 HTML 元素的 ID。aria-disabled：表示下拉菜单当前是否不可用。aria-haspopup：表示下拉菜单是否可用于显示其他组件（例如带有子下拉菜单的“导航菜单”）。
以下是一个使用 WAI-ARIA 属性的示例：
<my-alert-box role="alert" aria-labelledby="alertTitle alertContent"></my-alert-box>
<script>
var alertBox = document.querySelector('my-alert-box');
alertBox.setAttribute('aria-label', 'Alert');
alertBox.setAttribute('aria-labelledby', 'alertTitle alertContent');
</script>使用 JavaScript 事件
当用户与元素进行交互时，我们需要使用 JavaScript 事件来提供可访问性。以下是一些常用的事件：
keydown：当键盘按下时发生。click：当鼠标按键或触摸屏触摸时发生。focus和blur：当元素获得或失去焦点时触发。
例如，下面的代码片段将使用 click 事件设置 Custom Element 的状态：
-- -------------------- ---- ------- ---------- ------------- ------------------------- -------- --- -------- - ------------------------------------ ---------------------------------- --------------- - ----------------------- --- ------ - --------------------------------------- --- -------- -------------------------------------- --------- --- ---------
结论
在这篇文章中，我们介绍了如何将 Aria 标准融入 Custom Elements 中，以便为残障用户提供更好的可访问性。了解 WAI-ARIA 角色和属性、正确使用 JavaScript 事件、和组合好的 Custom Elements 都可以帮助您为无障碍用户提供良好的体验。始终牢记，为所有 Web 用户编写可访问的代码是让我们的网站和应用程序可靠、可用和可重复使用的关键。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671215daad1e889fe20295ee