如何让div元素在JAWS中通过箭头键导航（禁用Tab键）

要实现你的需求，核心是给容器div添加合适的ARIA角色，让JAWS能通过箭头键（浏览模式下的虚拟光标）识别并导航到它，同时不加入Tab键的焦点顺序。具体修改如下：

步骤1：添加合适的角色 #

给className="container"的div添加role="region"（或者role="group"，根据场景选择）：

• role="region"属于地标角色，适合页面中独立的内容区块，JAWS会将其识别为可导航的区域节点，且不会加入Tab焦点顺序。
• role="group"用于将相关元素分组，同样不会进入Tab顺序，适合内容组的场景。

你的代码修改后如下：

const label1 = 'First label';
const label2 = 'Second label';
const prefix = 'Prefix';
const suffix = 'Suffix';

const screenReaderText = `${prefix} ${label1} ${suffix} ${label2}`;

return (
  <>
    <h1>Heading</h1>
    <div className="container" role="region" aria-label={screenReaderText}>
      <div aria-hidden="true">{label1}</div>
      <div aria-hidden="true">{label2}</div>
    </div>
    <footer>Footer</footer>
  </>
);

为什么这样可行？ #

1. 箭头键导航支持：JAWS的浏览模式（虚拟光标）会自动识别带有region或group角色的元素，通过上下箭头可以直接导航到该容器。
2. Tab键排除：这两个角色默认不会加入Tab焦点顺序，完全符合你“不能通过Tab键导航”的要求。
3. 正确播报内容：内部div的aria-hidden="true"会屏蔽它们的内容，容器的aria-label会被JAWS完整播报，实现你需要的组合文本提示。
4. 导航流程符合预期：浏览时会按h1 -> 容器div（播报组合文本） -> footer的顺序流转。

额外说明 #

• 如果你不需要地标级别的识别（比如不想出现在JAWS的地标快速导航列表里），可以用role="group"替代role="region"，效果一致，只是语义上更偏向“内容分组”而非“页面区域”。
• 确保容器div是块级元素（默认div就是），这样JAWS的虚拟光标能正确捕捉到它的边界。

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