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

Question

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

标签，并提供了标签，以允许屏幕阅读器同时浏览地标和标题。然后，我使用aria-labelledby将用作

的标签。问题是，至少在具有NVDA的Chrome中，当通过地标或标题导航时，它会两次读取标签。如果我从

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

我是不是对标签过于热衷，还是需要一些冗余？我不想删除标记（这些标记在视觉上是隐藏的，仅供屏幕阅读器使用），因为某些人可能更喜欢通过标题导航。

我可以将移到

的底部，然后NVDA会读取实际内容的第一行。那样的工作，但是我不喜欢像这样构造DOM。 （此外，屏幕阅读器还会在底部遇到标题，这很令人困惑。）

是否有一种方法可以使标签仅读取一次，当它是

中的第一条内容时，即为标签？

Answer 1

所以你有这样的东西吗？

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

当我使用NVDA（ D 键）在地标上导航时，两者 Chrome和Firefox都将显示“您好，您好，标题为2级”

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

这很奇怪。

如果我在Chrome的devtools中检查了可访问性树，则

显示：

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似乎是正确的。考虑到通过地标和标题导航的优势，可以稍微多一点冗长。