JAWS屏幕阅读器上下键导航异常：跳转元素、操作后回滚至父区域顶部

我之前在做可访问性项目时也碰到过JAWS这种奇葩的导航问题，毕竟JAWS对虚拟光标模式的处理和NVDA、VoiceOver确实有不少差异。结合你的描述——上下键导航跳过元素、操作后跳回父区域顶部但Tab正常，大概率是ARIA属性误用、语义化缺失或者焦点逻辑没适配JAWS导致的，给你几个具体的排查和修复方向：

1. 检查ARIA Live区域的配置 #

JAWS对live region（实时区域）的敏感度比其他阅读器高很多，如果你的页面里用了aria-live="assertive"或者强制设置aria-atomic="true"，很容易触发JAWS强制跳转到区域顶部的行为。

• 错误示例：

<div aria-live="assertive" aria-atomic="true">
  <!-- 动态更新的内容 -->
</div>

• 修正建议：换成aria-live="polite"，并且只在需要刷新整个区域内容时才用aria-atomic="true"，不要默认给所有live区域加这个属性：

<div aria-live="polite">
  <!-- 动态更新的内容 -->
</div>

2. 确保元素语义化与ARIA角色正确 #

JAWS的虚拟光标模式（上下键导航）依赖原生HTML语义或者正确的ARIA角色来识别可读取元素。如果你用了非语义化的div/span模拟按钮、列表这类组件，JAWS可能会直接跳过它们：

• 不要这么写：

<div onclick="handleClick()" tabindex="0">自定义按钮</div>

• 换成原生元素或添加正确ARIA：

<!-- 优先用原生按钮 -->
<button onclick="handleClick()">自定义按钮</button>

<!-- 必须用div时添加ARIA角色 -->
<div onclick="handleClick()" tabindex="0" role="button" aria-label="自定义按钮">
  自定义按钮
</div>

另外，tabindex="-1"的元素在虚拟光标模式下也可能被JAWS跳过，除非你主动让它获得焦点。

3. 调整焦点管理逻辑 #

操作后跳回父区域顶部，大概率是代码里有强制设置焦点到父元素的逻辑（比如parentEl.focus()），但JAWS在虚拟光标模式下对焦点的响应和Tab导航模式不同。你可以：

• 移除不必要的强制焦点跳转，让JAWS的虚拟光标自然停留；
• 如果必须跳转，配合scrollIntoView()确保虚拟光标能定位到目标：

const targetEl = document.getElementById('operation-result');
// 先让元素获得焦点（如果需要）
targetEl.focus();
// 滚动到元素位置，确保JAWS能捕捉到
targetEl.scrollIntoView({ block: 'nearest', behavior: 'auto' });

还可以针对JAWS做特殊处理，检测用户代理后调整逻辑：

const isJAWS = navigator.userAgent.includes('JAWS');
if (isJAWS) {
  // 操作完成后，让虚拟光标停留在结果元素
  const resultEl = document.getElementById('result');
  resultEl.setAttribute('aria-hidden', 'false');
  resultEl.scrollIntoView();
}

4. 检查元素的隐藏属性设置 #

JAWS对aria-hidden="true"、display: none、visibility: hidden的处理和其他阅读器有差异，比如如果父元素加了aria-hidden="true"但子元素需要被读取，JAWS可能会直接跳过整个父区域。确保所有需要被JAWS读取的元素都没有被错误隐藏，同时不要给可交互元素设置aria-hidden="true"。

额外小技巧 #

如果以上方法都没解决，可以试试在JAWS里开启虚拟光标跟踪焦点选项：按Insert + F7打开元素列表，进入设置里找到相关选项开启，有些时候是阅读器的默认设置导致的行为不一致。

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