JavaScript 是实现动态无障碍体验的关键工具，需通过正确操作 DOM 和 ARIA 属性来弥补 HTML 语义缺失或动态交互导致的可访问性断层，核心是语义优先、JS 补位，同步状态、管理焦点、发送通知，并避免滥用 ARIA 或覆盖原生语义。
JavaScript 本身不直接提供无障碍（Accessibility）能力，但它是实现动态无障碍体验的关键工具——关键在于用 JS 正确操作 DOM 和 ARIA 属性，让屏幕阅读器能感知状态变化、焦点流动和组件语义。
核心原则：语义优先，JS 补位
无障碍不是靠 JS “加功能”，而是补足 HTML 语义缺失或动态交互带来的可访问性断层。比如原生 role：定义元素的“身份”。仅当原生 HTML 标签无法准确表达语义时才用（如菜单用 aria-label / aria-labelledby：为无文本内容或文本不明确的控件提供可读名称。例如图标按钮： 立即学习“Java免费学习笔记（深入）”； aria-hidden：告诉辅助技术“忽略此元素及其子树”。常用于装饰性图标、加载动画、重复内容。注意： aria-expanded / aria-selected / aria-checked：反映控件的实时状态。JS 必须在用户交互后同步更新。例如折叠面板点击后： aria-controls / aria-describedby / aria-labelledby：建立元素间的关联关系。例如下拉菜单按钮应有 • 管理焦点：模态框打开时，用 • 同步状态：所有通过 JS 改变的 UI 状态（展开/收起、选中/取消、加载中/完成），必须同步更新对应 ARIA 属性，不能只改样式或类名。 • 发送通知：动态内容更新（如搜索结果加载、表单验证失败），用 • 不要覆盖原生语义：比如给 • 避免 • 测试真机：用 NVDA（Windows）+ Firefox、VoiceOver（macOS/iOS）、TalkBack（Android）实际操作，比依赖 Lighthouse 更可靠。 基本上就这些。无障碍不是堆砌 ARIA，而是理解用户如何“听”和“导航”页面，再用 JS 精准传达意图。写 JS 时多问一句：“如果我看不见，这个操作还能被理解吗？”——答案往往就是该加什么 ARIA、怎么用 JS 更新它。 自带角色、键盘行为和焦点管理；而用 必须掌握的 ARIA 属性（按使用频率排序）
role="menu"，对话框用 role="dialog"）。避免滥用，优先选语义化标签（, , 等）。；或用其他元素 ID 关联：aria-labelledby="title-desc"。aria-hidden="true" 的元素内所有焦点able 子元素（如 , ）将无法被键盘聚焦——若需隐藏视觉但保留可访问性，改用 clip-path: inset(50%) + overflow: hidden 等 CSS 技巧。el.setAttribute('aria-expanded', 'true')；复选框切换时同步 aria-checked 值（"true" / "false" / "mixed"）。aria-controls="menu-id"，指向其控制的菜单容器；错误提示可用 aria-describedby="error-id" 关联到输入框。JS 实现无障碍的三个关键动作
focus() 将焦点移入；关闭时恢复到触发点；Tab 键在模态框内循环（捕获 keydown 判断 Tab，手动跳转首尾焦点）。aria-live="polite" 或 "assertive" 区域包裹，并在 JS 中修改其文本内容，屏幕阅读器会自动朗读（无需 focus）。避坑提醒
加 role="button" 是冗余且可能破坏兼容性。aria-* 与原生属性冲突：如 ，应以原生 checked 属性为准，ARIA 仅作补充说明（如自定义 checkbox 组件）。
