如何通过JavaScript检测TalkBack、VoiceOver等无障碍工具是否开启？

可以通过JavaScript实现检测，不同平台有不同的可行方案：

• Android TalkBack 检测
  Chrome系浏览器（包括Android WebView）支持navigator.screenReaderEnabled属性，这是一个布尔值，能直接返回是否有屏幕阅读器处于活跃状态：

  const isTalkBackActive = navigator.screenReaderEnabled || false;
  

  也可以监听accessibilitychange事件，实时捕捉屏幕阅读器的状态变化：

  document.addEventListener('accessibilitychange', () => {
    const isActive = navigator.screenReaderEnabled;
    // 在这里处理状态变更逻辑
  });
  

• iOS VoiceOver 检测
  iOS WebView基于Safari内核，目前没有直接的API能返回VoiceOver的运行状态，但可以通过两种间接方式判断：

  1. 监听异常focus事件：VoiceOver操作时会频繁触发元素的focus事件，哪怕是原本不可聚焦的元素（比如未设置tabindex的<div>），可以通过统计短时间内的focus触发频率辅助判断。
  2. 利用prefers-reduced-motion媒体查询：大部分开启VoiceOver的用户会同时开启系统的「减少动画」选项，通过这个媒体查询可以间接推断，但存在一定误差：

  const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
  const hasReducedMotion = mediaQuery.matches;
  // 结合其他逻辑进一步判断VoiceOver状态
  

注意事项 #

• 这些方法并非100%精准，尤其是iOS的间接方案，建议结合业务场景使用，不要过度依赖检测结果。
• 检测的核心目的应该是优化无障碍体验，而非限制功能，即便检测不到屏幕阅读器，也要保证页面的无障碍可用性。

内容的提问来源于stack exchange，提问作者miro ring