无障碍交互组件的核心要求
符合无障碍标准的交互式JavaScript组件，需要同时满足语义可识别、操作可访问、状态可感知三个基础条件。语义层面要让辅助技术能准确识别组件类型和用途，操作层面要支持键盘全功能操作，状态层面要实时向辅助技术同步组件的变化信息。
1. 基于语义化HTML构建基础结构
优先使用原生HTML元素是实现无障碍的基础，原生元素自带默认的语义和辅助技术支持，比自定义元素开发成本低很多。比如实现按钮功能优先用<button>标签，而不是用<div>绑定点击事件，前者默认支持键盘聚焦和回车、空格触发操作，后者需要额外手动实现这些逻辑。
如果必须自定义组件结构，需要给最外层容器添加对应的role属性，明确组件类型。比如自定义的下拉菜单容器可以添加role="combobox"，告知辅助技术这是一个组合框组件。
2. 正确使用WAI-ARIA属性补充语义
WAI-ARIA规范提供了额外的属性，用于补充原生HTML无法覆盖的无障碍信息，常见的属性可以分为三类：
- 角色属性（role）：定义组件的类型，比如role="dialog"表示模态框，role="tablist"表示标签页组
- 状态属性：描述组件的当前状态，比如aria-expanded表示展开状态，aria-disabled表示禁用状态
- 属性属性：建立组件元素之间的关联关系，比如aria-labelledby关联组件的标签元素，aria-controls关联组件控制的内容区域
常见WAI-ARIA属性使用场景示例
| 属性名称 | 适用场景 | 取值说明 |
|---|---|---|
| aria-expanded | 可展开/折叠的组件（如下拉菜单、折叠面板） | true表示展开，false表示折叠 |
| aria-selected | 可选中组件（如标签页、下拉选项） | true表示当前选中，false表示未选中 |
| aria-hidden | 不需要被辅助技术识别的元素（如装饰性图标） | true表示隐藏，false表示可见 |
3. 实现完整的键盘交互支持
所有可交互的组件都需要支持键盘操作，遵循对应组件类型的通用键盘交互规范。比如：
- 按钮组件支持Tab聚焦，回车、空格触发点击
- 下拉菜单聚焦后，上下方向键切换选项，回车选中，Esc关闭菜单
- 模态框打开后，焦点要锁定在模态框内部，Tab键循环聚焦内部可交互元素，Esc键关闭模态框
下面以自定义下拉菜单为例，展示完整的无障碍实现代码：
// 自定义无障碍下拉菜单实现
class AccessibleDropdown {
constructor(container) {
this.container = container;
this.trigger = container.querySelector('.dropdown-trigger');
this.menu = container.querySelector('.dropdown-menu');
this.options = container.querySelectorAll('.dropdown-option');
this.selectedIndex = -1;
this.isOpen = false;
this.init();
}
init() {
// 设置基础ARIA属性
this.container.setAttribute('role', 'combobox');
this.container.setAttribute('aria-haspopup', 'listbox');
this.container.setAttribute('aria-expanded', 'false');
this.menu.setAttribute('role', 'listbox');
this.menu.setAttribute('aria-hidden', 'true');
this.options.forEach((option, index) => {
option.setAttribute('role', 'option');
option.setAttribute('aria-selected', 'false');
option.setAttribute('tabindex', '-1');
option.dataset.index = index;
});
// 绑定事件
this.trigger.addEventListener('click', () => this.toggleMenu());
this.trigger.addEventListener('keydown', (e) => this.handleTriggerKeydown(e));
this.menu.addEventListener('keydown', (e) => this.handleMenuKeydown(e));
// 点击外部关闭菜单
document.addEventListener('click', (e) => {
if (!this.container.contains(e.target)) {
this.closeMenu();
}
});
}
toggleMenu() {
this.isOpen ? this.closeMenu() : this.openMenu();
}
openMenu() {
this.isOpen = true;
this.menu.setAttribute('aria-hidden', 'false');
this.container.setAttribute('aria-expanded', 'true');
this.menu.querySelector('.dropdown-option').focus();
}
closeMenu() {
this.isOpen = false;
this.menu.setAttribute('aria-hidden', 'true');
this.container.setAttribute('aria-expanded', 'false');
this.trigger.focus();
}
handleTriggerKeydown(e) {
switch(e.key) {
case 'Enter':
case ' ':
e.preventDefault();
this.toggleMenu();
break;
case 'ArrowDown':
e.preventDefault();
if (!this.isOpen) this.openMenu();
break;
}
}
handleMenuKeydown(e) {
switch(e.key) {
case 'ArrowDown':
e.preventDefault();
this.moveFocus(1);
break;
case 'ArrowUp':
e.preventDefault();
this.moveFocus(-1);
break;
case 'Enter':
e.preventDefault();
this.selectOption();
break;
case 'Escape':
e.preventDefault();
this.closeMenu();
break;
}
}
moveFocus(step) {
let newIndex = this.selectedIndex + step;
if (newIndex < 0) newIndex = this.options.length - 1;
if (newIndex >= this.options.length) newIndex = 0;
this.options[newIndex].focus();
this.selectedIndex = newIndex;
}
selectOption() {
if (this.selectedIndex === -1) return;
const selectedOption = this.options[this.selectedIndex];
this.trigger.textContent = selectedOption.textContent;
this.options.forEach(opt => opt.setAttribute('aria-selected', 'false'));
selectedOption.setAttribute('aria-selected', 'true');
this.closeMenu();
}
}
// 初始化所有下拉菜单
document.querySelectorAll('.dropdown-container').forEach(container => {
new AccessibleDropdown(container);
});
对应的HTML结构需要配合JavaScript代码使用，结构如下：
<div class="dropdown-container">
<button class="dropdown-trigger">请选择选项</button>
<ul class="dropdown-menu">
<li class="dropdown-option">选项一</li>
<li class="dropdown-option">选项二</li>
<li class="dropdown-option">选项三</li>
</ul>
</div>
4. 常见开发误区规避
开发无障碍组件时，要避免以下几个常见问题：
- 不要给已经具备语义的原生元素重复添加role属性，比如给
<button>添加role="button"，属于冗余操作 - 不要滥用aria-hidden属性，隐藏了内容的元素如果用户需要操作，不能设置该属性
- 组件状态变化时要同步更新ARIA属性，比如下拉菜单展开时，必须同步更新aria-expanded的值为true
- 自定义组件的可聚焦元素要设置正确的tabindex，避免焦点顺序混乱
编写符合无障碍标准的交互式JavaScript组件，核心是从用户使用的全场景出发，兼顾不同能力用户的使用需求。不需要追求一次实现所有规范，可以先从基础的语义化和键盘支持做起，逐步补充ARIA属性和状态同步逻辑，最终让组件满足WCAG 2.1等通用无障碍标准的要求。
JavaScript无障碍标准交互式组件WAI-ARIA修改时间：2026-06-20 11:12:39