在前端开发中，UI 组件起着至关重要的作用。然而，构建可访问的 UI 组件并不是一项容易的任务。为了实现可访问性，开发者需要遵循一系列的规则和标准，以确保组件能够被所有用户访问和使用。
在本文中，我们将介绍如何使用自定义元素构建可访问的 UI 组件。我们将从基本概念开始，逐步深入，直到最终构建一个可访问的组件。
什么是自定义元素？
自定义元素是一种 HTML 元素，它们的行为和样式可以被开发者自由定义。自定义元素的定义使用 customElements.define() 方法，如下所示：
class MyElement extends HTMLElement {
constructor() {
super();
// 初始化代码
}
}
customElements.define('my-element', MyElement);在这个例子中，我们定义了一个名为 my-element 的自定义元素，并将其绑定到 MyElement 类。在定义时，我们需要继承 HTMLElement 类，以确保我们的自定义元素具有标准元素的所有功能。
构建可访问的自定义元素
要构建可访问的自定义元素，我们需要遵循一些规则和标准。下面是一些重要的规则：
1. 使用语义化 HTML
语义化 HTML 是构建可访问组件的基础。我们需要使用正确的 HTML 元素和属性来描述组件的结构和功能。例如，使用 <button> 元素来创建按钮，使用 aria-label 属性来描述按钮的用途。
2. 提供键盘支持
键盘支持是可访问性的重要组成部分。我们需要确保组件可以通过键盘访问和操作。例如，使用 keydown 事件来监听键盘操作，并响应相应的操作。
3. 提供可访问性标记
可访问性标记是组件可访问性的关键。我们需要使用 aria-* 属性来描述组件的状态和功能。例如，使用 aria-expanded 属性来描述下拉菜单的展开状态。
4. 提供文档和示例
文档和示例是组件的重要部分。我们需要提供清晰的文档和示例，以帮助用户了解组件的用法和功能。
示例：可访问的下拉菜单组件
为了演示如何构建可访问的自定义元素，我们将构建一个简单的下拉菜单组件。该组件包含一个按钮和一个下拉菜单，用户可以通过按钮展开或关闭下拉菜单。
1. HTML 结构
我们首先需要定义组件的 HTML 结构。下面是我们的下拉菜单组件的 HTML 结构：
<my-dropdown>
<button aria-haspopup="true" aria-expanded="false">下拉菜单</button>
<ul aria-hidden="true">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
</ul>
</my-dropdown>我们使用了语义化 HTML 元素来描述组件的结构和功能。按钮使用了 <button> 元素，下拉菜单使用了 <ul> 和 <li> 元素。
我们还使用了 aria-* 属性来描述组件的状态和功能。按钮使用了 aria-haspopup 属性来描述它具有下拉菜单的功能，使用 aria-expanded 属性来描述它的展开状态。下拉菜单使用了 aria-hidden 属性来描述它是否可见。
2. CSS 样式
我们使用 CSS 来定义组件的样式。下面是我们的下拉菜单组件的 CSS 样式：
-- -------------------- ---- ------- ----------- - --------- --------- -------- ------------- - ----------- -- - --------- --------- ---- ----- ----- -- ------- -- -------- -- ----------- ----- ----------------- ----- ----------- - --- --- ------- -- -- ----- -------- -- - ----------- -- -- - ------- -- -------- -- - ----------- -- -- - - -------- ------ -------- --- ----- ---------------- ----- ------ ----- - ----------- -- -- ------- - ----------------- -------- - ----------------- -- - ------------ ------ -
我们使用了 position 属性来定义组件和下拉菜单的位置。我们使用了 z-index 属性来控制下拉菜单的层级。
我们还使用了 aria-hidden 属性来描述下拉菜单是否可见。我们使用了 [open] 选择器来选择展开状态的组件，并将 aria-hidden 属性设置为 false，以显示下拉菜单。
3. JavaScript 代码
最后，我们需要使用 JavaScript 代码来实现组件的功能。下面是我们的下拉菜单组件的 JavaScript 代码：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-- ------------
----------- - -----------------------------
--------- - -------------------------
-- ---------
----------------------------------------- --------
----------------------------------------- ---------
-- ---------
------------------------------------- -- -- -
-- -----------
----- -------- - ----------------------------------------- --- -------
----------------------------------------- -------------------
------------------------------------- ------------------
---
-- ------
-------------------------------- ------- -- -
-- ---------- --- --------- -
-- ------
----------------------------------------- ---------
------------------------------------- --------
-
---
-
-
------------------------------------ ------------我们首先获取组件的按钮和下拉菜单，并设置按钮的初始属性。我们还监听了按钮的点击事件，并在事件处理程序中切换下拉菜单的展开状态。
我们还监听了键盘事件，并在事件处理程序中响应 Escape 键，以关闭下拉菜单。
结论
在本文中，我们介绍了如何使用自定义元素构建可访问的 UI 组件。我们从基本概念开始，逐步深入，最终构建了一个可访问的下拉菜单组件。
通过遵循一些规则和标准，我们可以确保组件具有良好的可访问性，并能够被所有用户访问和使用。希望这篇文章能够帮助你构建更好的 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67442a66f3dd653032a59ef1