时间戳

首页 > 解决方案 > WCAG 和屏幕阅读器 - 标记 a

带着标签，而不是让标签读取两次

html - WCAG 和屏幕阅读器 - 标记 a
带着标签，而不是让标签读取两次

问题描述

我一直在将一些网站纳入 WCAG 2.1 AA 合规性。为了便于导航，我将页面内容分成相关的 <section> 标签，并提供了一个 <h> 标签，以允许屏幕阅读器在地标和标题中导航。然后我使用 <h> 作为 <section> 的标签，使用 aria-labelledby。问题是，至少在带有 NVDA 的 Chrome 中，当通过地标或标题导航时，它会读取两次标签。如果我从 <section> 中删除 aria-labelledby，它会跳过该部分。

我是否对我的标签过于热心，还是可以预料到一些冗余？我不想删除 <h> 标签（这些标签在视觉上是隐藏的，仅用于屏幕阅读器），因为也许有些人更喜欢浏览标题。

我可以将 <h> 移动到 <section> 的底部，然后 NVDA 只读取实际内容的第一行。这会有点工作，但我不喜欢这样构建 DOM。（此外，屏幕阅读器会在底部遇到标题，这令人困惑。）

有没有办法让标签只读取一次，当它是 <section> 中的第一条内容时，它的标签？

标签： htmlwai-ariawcag2.0

解决方案

所以你有这样的东西吗？

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

当我使用 NVDA（D键）通过地标导航时，Chrome和 Firefox 都会说“hello region, hello, heading level 2”

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

那很奇怪。

如果我在 Chrome 的 devtools 中检查可访问性树，则 <section> 显示：

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

所以这看起来是正确的。地标的可访问名称只是“hello”，这正是“可访问名称和描述计算 1.1 ”所说的。我不确定为什么还要阅读标题。

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

我没有 JAWS，但如果您可以访问它，也可以在那里尝试。

我会不管它。html 似乎是正确的。考虑到按地标和标题导航的优势，多一点的冗长可能是可以的。

推荐阅读