WCAG 和屏幕阅读器 - 用 <h> 标签标记 <section>，并且标签不会被读取两次

Question

我一直在使一些站点符合 WCAG 2.1 AA 合规性。为了方便导航，我将页面内容分成相关的

标签，还提供了一个 标签，以允许屏幕阅读器通过地标和 headers 进行导航。然后我使用 作为

的标签，使用 aria-labelledby。问题是，至少在 NVDA 的 Chrome 中，当按地标或 header 导航时，它会读出标签两次。如果我从

中删除 aria-labelledby，它会跳过该部分。

我是不是对我的标签过于热心了，还是应该有一些冗余？我不想删除 标签（它们在视觉上是隐藏的，仅供屏幕阅读器使用），因为可能有些人更喜欢浏览 headers.

我可以将 移动到

的底部，然后 NVDA 只读取实际内容的第一行。那会有点工作，但我不喜欢那样构建 DOM 。 （再加上屏幕阅读器会在底部遇到 header，这令人困惑。）

有没有办法让标签只被读取一次，当它是

中的第一个内容时它正在标记？

所以你有这样的东西？

<section aria-labelledby="h2id">
  <h2 id="h2id">hello</h2>
  <!-- other stuff -->
</section>

当我使用 NVDA（D 键按地标导航时，both Chrome 和 Firefox 会说 "hello region, hello, heading level 2"

同样，如果我按标题（H 键）导航，我会听到同样的声音。

真奇怪。

如果我检查 Chrome 的开发工具中的可访问性树，

显示：

Name: "hello"
  aria-labelledby: "hello"
  aria-label: Not specified
  title: Not specified
Role: region
Labeled by: 

看起来是正确的。地标的可访问名称只是 "hello"，这正是“Accessible Name and Description Computation 1.1”所说的。我不确定为什么标题也被阅读了。

iOS 上的 VoiceOver 也存在同样的问题。当我通过地标或航向（通过转子）导航时，区域和航向都会被读取。

我没有 JAWS，但如果您可以访问它，也可以尝试一下。

我会不理会它。 html 似乎是正确的。考虑到按地标和标题导航的优势，稍微冗长一点可能没问题。

Answer 1

所以你有这样的东西？

<section aria-labelledby="h2id">
  <h2 id="h2id">hello</h2>
  <!-- other stuff -->
</section>

当我使用 NVDA（D 键按地标导航时，both Chrome 和 Firefox 会说 "hello region, hello, heading level 2"

同样，如果我按标题（H 键）导航，我会听到同样的声音。

真奇怪。

如果我检查 Chrome 的开发工具中的可访问性树，

显示：

Name: "hello"
  aria-labelledby: "hello"
  aria-label: Not specified
  title: Not specified
Role: region
Labeled by: 

看起来是正确的。地标的可访问名称只是 "hello"，这正是“Accessible Name and Description Computation 1.1”所说的。我不确定为什么标题也被阅读了。

iOS 上的 VoiceOver 也存在同样的问题。当我通过地标或航向（通过转子）导航时，区域和航向都会被读取。

我没有 JAWS，但如果您可以访问它，也可以尝试一下。

我会不理会它。 html 似乎是正确的。考虑到按地标和标题导航的优势，稍微冗长一点可能没问题。