JavaScript需补足HTML语义缺失、响应交互并尊重辅助技术偏好：为动态内容设aria-live，管理焦点与键盘导航，适配减少动画等系统偏好，用JS增强而非替代语义化HTML结构。
JavaScript本身不会自动提升可访问性，关键在于如何用它补足HTML语义缺失、响应用户交互需求，并尊重用户的辅助技术偏好。
确保动态内容对屏幕阅读器可见
当用JS更新页面内容（比如加载新列表、显示提示框），屏幕阅读器默认不会主动朗读这些变化。需要主动通知：
- 给实时更新的容器添加aria-live="polite"（如搜索结果区），内容变化时会自然播报
- 弹窗出现时，用document.getElementById("modal").setAttribute("aria-hidden", "false")并立即将焦点移到模态框首个可聚焦元素（如标题或关闭按钮）
- 操作成功后，避免只靠颜色或图标提示，用aria-live区域插入“已保存”文本，让屏幕阅读器捕获
不破坏键盘导航与焦点管理
很多JS交互（如下拉菜单、标签页）容易让键盘用户“迷路”或无法退出：
- 所有可交互元素必须能用Tab进入，Enter/Space触发，Esc关闭（如打开的菜单）
- 自定义组件（如手写的轮播图）要手动实现tabindex="0"和focus()逻辑，确保焦点不丢失
- 模态框开启时，用focus trap限制Tab键只在内部循环，关闭后把焦点还原到触发按钮
尊重用户的辅助技术设置
别用JS覆盖系统级可访问性偏好：
- 检测window.matchMedia("(prefers-reduced-motion)").matches，若为true，跳过或简化CSS动画和JS过渡效果
- 避免用pointer-events: none或visibility: hidden隐藏重要内容——它们仍可能被屏幕阅读器读出；改用aria-hidden="true"配合视觉隐藏类
- 不要禁用右键、复制或缩放（user-select: none或touch-action: manipulation需谨慎）
用JS补全语义，而不是替代HTML结构
优先写语义化HTML，再用JS增强。例如：
- 下拉菜单应基于或带role="combobox"的组合控件，而非纯div + click事件
- 手风琴组件每个标题用并配aria-expanded和aria-controls
- 数据表格排序时，用aria-sort动态更新列头状态（"ascending"/"descending"）
基本上就这些。核心是：JS不是可访问性的起点，而是已有语义基础之上的“补丁”和“桥梁”。不复杂但容易忽略。
