可访问性API是浏览器将DOM和ARIA映射为屏幕阅读器可理解语义的底层桥梁，其生效依赖正确DOM结构、及时状态同步、真实行为匹配及跨平台真实测试。
可访问性API不是“加个ARIA就行”
可访问性API（如Windows UIA、macOS AX API、Linux AT-SPI）本身不直接暴露给前端开发者，但它们是浏览器将DOM和ARIA状态翻译成屏幕阅读器能理解的语义桥梁。你写的role、aria-live、aria-expanded等属性，最终要靠浏览器正确映射到这些底层API才能生效。这意味着：哪怕HTML验证全绿、DevTools里ARIA属性看着都对，如果DOM结构混乱或状态更新不及时，API层就可能传错信息。
常见错误现象包括：屏幕阅读器读不出弹窗标题、折叠菜单展开后不播报“已展开”、动态加载列表后新项无法被聚焦。这些问题往往不是代码漏写ARIA，而是没触发浏览器向可访问性API同步变更。
- 确保所有动态内容更新后调用
aria-live区域更新，而不是仅靠DOM插入 - 避免在
display: none或visibility: hidden元素上设置aria-hidden="false"——这类元素根本不会被可访问性API采集 - 使用
document.activeElement配合focus()管理焦点时，必须等浏览器完成渲染后再执行，否则API可能仍指向旧节点
role和aria-*属性必须匹配真实行为
role不是装饰品，它会强制覆盖原生语义并改变可访问性API暴露的控件类型。比如给div加role="button"，屏幕阅读器就会把它当按钮读，但若没处理Enter/Space键盘事件，键盘用户就卡住——这比不用ARIA更危险。
使用场景决定属性组合：
立即学习“前端免费学习笔记（深入）”；
- 自定义下拉：需
role="combobox"+aria-haspopup="listbox"+aria-expanded+aria-controls指向选项容器 - 树形控件：父
role="tree"，子项用role="treeitem"，展开状态用aria-expanded，选中态用aria-selected - 模态框：根容器
role="dialog"+aria-modal="true"+aria-labelledby指向标题，且必须拦截Tab键循环
参数差异很关键：aria-disabled="true"和disabled属性效果不同——前者只影响可访问性API播报，后者才真正禁用交互；两者常需同时设置。
可访问性API依赖DOM生命周期，不是JS执行完就立刻可用
浏览器向可访问性API提交变更有延迟，尤其在批量DOM操作或动画帧中。例如用innerHTML替换整个列表后立即设aria-live="polite"，可能因渲染未完成而丢失播报。
性能与兼容性影响明显：
- Chrome 120+ 和 Safari 17+ 对
aria-live更新更及时，但Firefox仍存在100–300ms滞后 - 在React/Vue中，不要在
useEffect或mounted钩子刚结束时读取aria-*值——此时API映射可能尚未建立 - 避免高频触发
aria-valuenow更新（如拖拽滑块），改用aria-valuetext提供语义化描述，减少API通信压力
实操建议：用requestIdleCallback或setTimeout(..., 0)把ARIA状态更新延后到渲染空闲期，再配合aria-live区域刷新。
测试可访问性API不能只靠DevTools模拟
Chrome DevTools的“Accessibility”面板只显示当前DOM的ARIA快照，不反映API实际暴露给辅助技术的内容。真正验证得用真实屏幕阅读器+真实交互路径。
容易踩的坑：
- 在VoiceOver中按
Ctrl+Option+U打开Rotor菜单，检查是否出现“表单控件”“链接”等分类——如果自定义组件没正确声明role，就不会归类进去 - NVDA的
F键（焦点模式）和B键（浏览模式）行为不同，同一段代码在两种模式下播报可能完全不一样 - 部分国产读屏软件（如争渡、点明）对
aria-current支持弱，需额外用aria-label补全上下文
复杂点在于：可访问性API的表现高度依赖操作系统版本、屏幕阅读器版本、浏览器版本三者组合。一个在macOS Sonoma + VoiceOver 15.0下正常的功能，在Windows 11 + NVDA 2024.1里可能完全静音——这种差异没法靠单一工具覆盖。
