【发布时间】：2019-04-19 16:34:38
【问题描述】：
我有一些看起来或多或少像这样的代码（例如缩减）：
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 或者因为它有交互元素）。这是一个网络组件，我无法控制里面的内容。
我们有屏幕阅读器用户和低视力用户，他们都使用键盘进行导航，对于后者，我们希望帮助确定他们在哪个部分（在具有多个部分/卡片的页面中），而不会对屏幕阅读器用户。
当该部分被突出显示时，我希望它只是图形化的（带有大纲），但我不希望屏幕阅读器阅读它的内容，因为如果里面有任何交互式/可聚焦的内容，它会读两遍，不要重复。
例如：使用 ChromeVox 或 VoiceOver 之类的屏幕阅读器，当按下 tab 时，第一部分将被勾勒出来，听起来像这样：
[Section] 第 1 节。该节将突出显示，但不会进入，因为里面没有任何东西有 tabindex。我根本不希望它被阅读。
再次点击标签，第二部分将被勾勒出来，听起来像：
[Section] Section 2. 这个section会被高亮显示，里面有一个带有tabindex的元素。我不想阅读该部分，但我想在焦点集中时阅读可聚焦的元素。例如：本段有tabindex。应该在专注时阅读。
第三次点击 tab 将激活该部分中的最后一个段落（它有一个tabindex），屏幕阅读器会说：
例如：这个段落有tabindex。应该在专注时阅读。
这种情况并不理想，因为我们正在重复内容（请记住，上面的代码是一个示例，实际上不止于此）。当一个部分获得焦点时，它会被完整地阅读；当里面的内容获得焦点时，它会被再次读取。最后一句话被读了两次：当该部分处于活动状态时和它本身处于活动状态时。
我希望得到以下行为：
- 按tab，第一部分高亮显示。没有读取任何内容。
- 按tab，第二部分高亮显示。没有读取任何内容。
- 按 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>我尝试使用aria-hidden="false" 将该部分的全部内容包装到div 中，但似乎父级的aria-hidden="true" 取代了它。
有没有办法实现我想要的？
【问题讨论】：
标签： html accessibility wai-aria screen-readers