使屏幕阅读器忽略一个部分，但阅读其可聚焦内容

Question

我有一些看起来或多或少像这样的代码（例如减少）：

html {
  background: #eee;
}

section {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 1em;
  padding: 1em;
}

[tabindex]:focus {
  outline: 1px dashed blue;
}

<section tabindex="0">
  <h1>
    Section 1
  </h1>
  <p>
    This section will be highlighted but it won't go inside as 
    nothing inside has tabindex. I don't want it to be read at all.
  </p>
</section>

<section tabindex="0">
  <h1>
    Section 2
  </h1>
  <p>
    This section will be highlighted and there is an element inside with 
    tabindex. I don't want the section to be read, but I want to read
    the focusable elements when they are focused.
  </p>
  <p tabindex="0">
    For example: this paragraph has tabindex. It should be read when focused.
  </p>
</section>

当他们获得焦点时，有不同的部分突出显示，因为他们有tabindex。这个亮点可以轻松识别用户在任何特定时刻的部分。

在每个部分中都可以有任何内容：文本，HTML代码，可聚焦内容（要么因为它有tabindex，要么因为它有交互元素）。这是一个Web组件，我无法控制内部的内容。

我们有屏幕阅读器用户和低视力用户，他们都使用键盘进行导航，对于后者，我们希望帮助识别他们在哪个部分（在具有多个部分/卡的页面内）而不会对屏幕阅读器用户产生负面影响。

当该部分突出显示时，我希望它只是图形化（带有轮廓）但我不希望屏幕阅读器读取其内容，因为如果内部有任何交互/可聚焦的竞争，它将被读取两次并且不想重复。

例如：使用ChromeVox或VoiceOver等屏幕阅读器时，按下标签时，第一部分将被勾勒出来，它听起来像这样：

[部分]第1节。此部分将突出显示但不会进入内部，因为内部没有tabindex。我根本不希望它被阅读。

再次点击标签，第二部分将被勾勒出来，它听起来像：

[Section]第2节。此部分将突出显示，并且tabindex内部有一个元素。我不希望阅读该部分，但我想在聚焦时阅读可聚焦元素。例如：此段有tabindex。聚焦时应该阅读。

第三次点击标签将激活该部分内的最后一段（它有一个tabindex），屏幕阅读器会说：

例如：此段有tabindex。聚焦时应该阅读。

这种情况并不理想，因为我们正在重复内容（请记住上面的代码是一个例子，实际上不仅仅是这样）。当一个部分获得焦点时，它被完全读出;当内部内容获得焦点时，再次读取。最后一句被读了两次：当该部分处于活动状态时以及它本身处于活动状态时。

我想要得到以下行为：

1. 按Tab键，第一部分突出显示。什么都没读。
2. 按Tab键，第二部分突出显示。什么都没读。
3. 按Tab键，最后一段突出显示并读取。

---

我尝试通过不同的方法来实现这种行为：

• 使用role="presentation"：所以角色语义不会映射到辅助功能API而且它不会被读取...问题是role="presentation" doesn't apply on focusable elements（与tabindex的元素一样）。
• 使用role="none"：它是role="presentation"的同义词，所以它以同样的方式失败。
• 使用aria-label=""：它忽略了空的aria-label并仍然读取该部分的全部内容。
• 使用aria-hidden="true"：这样一来，该部分被忽略，其内容不被读取......但它的可聚焦内容也被忽略，当它获得焦点时不被读取 - 这就是我想要的：

html {
  background: #eee;
}

section {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 1em;
  padding: 1em;
}

[tabindex]:focus {
  outline: 1px dashed blue;
}

<section tabindex="0" aria-hidden="true">
  <h1>
    Section 1
  </h1>
  <p>
    This section will be highlighted but it won't go inside as 
    nothing inside has tabindex. I don't want it to be read at all.
  </p>
</section>

<section tabindex="0" aria-hidden="true">
  <h1>
    Section 2
  </h1>
  <p>
    This section will be highlighted and there is an element inside with 
    tabindex. I don't want the section to be read, but I want to read
    the focusable elements when they are focused.
  </p>
  <p tabindex="0">
    For example: this paragraph has tabindex. It should be read when focused.
  </p>
</section>

我尝试用div将该部分的全部内容包装成aria-hidden="false"，但似乎父母的aria-hidden="true"取代它。

有没有办法实现我想要的？

Answer 1

简短的回答：停止在任何地方添加tabindex。屏幕阅读器用户使用阅读键进行导航，所以没有必要做任何你正在努力使事情变得可聚焦的事情......

Answer 2

屏幕阅读器用户不需要tabindex使用键盘在文本中导航。

只有交互式元素（按钮，链接，表单元素......）可能有tabindex。如果您使用本机交互元素（tabindex a[href]，button，...），您不必添加input，仅用于自定义控件（<div role="button" tabindex="0">click here</div>）。

可聚焦元素不应位于另一个可聚焦元素内。

屏幕阅读器主要有two navigation mode：浏览/阅读模式（通常使用箭头键）和焦点/表格模式（使用tab键）。屏幕阅读器用户永远不会使用tab密钥来阅读非交互式文本。

您也不需要为当前读取的文本添加大纲，因为屏幕阅读器会在浏览模式下自动执行此操作。