答案是编写无障碍JavaScript交互需确保键盘可访问、合理管理焦点、正确使用ARIA属性，并避免破坏屏幕阅读器体验，例如通过监听keydown事件支持键盘操作，模态框打开时转移并限制焦点，动态内容更新时利用aria-live通知用户，优先使用语义化HTML标签，配合自动化工具与手动测试保障可访问性。
编写符合无障碍（A11y）标准的 JavaScript 交互代码，核心在于确保所有用户——包括使用屏幕阅读器、键盘导航或辅助技术的人——都能正常访问和操作页面功能。以下是一些关键实践。
确保键盘可访问性
很多用户不使用鼠标，而是通过键盘（如 Tab、Enter、空格键、方向键）来操作页面。JavaScript 交互必须支持键盘操作。
- 使用原生可聚焦元素（如 button、a、input），它们默认支持键盘事件
- 若使用 div 或 span 触发操作，需添加 tabindex="0" 使其可聚焦
- 监听 keydown 事件处理 Enter 和空格键，而非仅 click 事件
- 避免屏蔽 Tab 键行为，确保焦点在逻辑顺序中移动
// 正确做法
customButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
customButton.click(); // 触发逻辑
}
});
管理焦点与动态内容
JavaScript 改变 DOM 时（如弹窗、提示、加载新内容），需主动管理焦点，帮助用户感知变化。
- 模态框打开后，将焦点移至框内第一个可聚焦元素
- 限制焦点在模态框内循环（使用 Tab 和 Shift+Tab）
- 关闭模态框后，将焦点返回到触发它的元素
- 动态插入的重要信息（如错误提示）应通过 aria-live 区域通知屏幕阅读器
// HTML
<div aria-live="polite" class="sr-only"></div>
// JS
document.querySelector('[aria-live]').textContent = '用户名已存在，请更换';
正确使用 ARIA 属性
ARIA（Accessible Rich Internet Applications）补足 HTML 语义的不足，但不能替代正确的标签。
立即学习“Java免费学习笔记（深入）”；
- 用 role 定义组件类型（如 role="dialog"、role="alert"）
- 用 aria-expanded 表示折叠菜单的展开状态
- 用 aria-controls 关联控制目标
- 用 aria-hidden 隐藏装饰性或重复内容
- 避免滥用 ARIA，优先使用语义化 HTML 标签
避免破坏屏幕阅读器体验
不当的 DOM 操作会让屏幕阅读器用户迷失上下文。
- 不要频繁或静默地修改页面内容
- 异步加载内容后，主动通知用户（通过 aria-live）
- 避免自动跳转焦点到非预期位置
- 提供“跳转到内容”链接，提升导航效率
- 测试代码在 NVDA、VoiceOver 等主流读屏软件下的表现
基本上就这些。关键是把无障碍当成开发流程的一部分，而不是事后补救。配合自动化工具（如 axe、Lighthouse）和手动键盘测试，能显著提升交互可访问性。
