javascript - NVDA 屏幕阅读器在嵌入链接时阅读标题两次

Question

我在 NVDA 屏幕阅读器中遇到问题。它正在阅读标题两次。以下是 HTML 结构。

<article>
  <figure>
    <div id="placeholder">
      <a id="thumbnail" href="" aria-hidden="true" tabindex="-1" class="focused">
        <img src="/static-files/img.png" width="700" height="400" alt="">
      </a>
    </div>
    <figcaption>
      <h3 class="h6">
        <a href="/stories/sample.html"> Example Title </a>
      </h3>
      <small>
        September 24, 1999
      </small>
    </figcaption>
  </figure>
</article>

• 此外，屏幕阅读器在聚焦时多次读取可点击在链接上。

  如果有人能提出解决方案，那将是一个很大的帮助。我是辅助功能的初学者。

提前致谢:)

Answer 1

问题不在于 NVDA，而在于浏览器。您使用的是哪种浏览器？当使用带有 firefox 和 chrome 的屏幕阅读器时，我听到了两次“Example Title”，但没有使用 Internet Explorer。我使用 NVDA 还是 JAWS 都没关系。是浏览器导致了问题。

firefox 和 chrome 都在处理 <figcaption>作为group Angular 色。如 html spec for figcaption 中所述，这是此元素的有效 Angular 色但通常情况下，如果 html 规范没有说明默认 Angular 色应该是什么，浏览器应该不选择默认 Angular 色。例如，<section>元素说 the default role is region 但它可以分配其他几种类型的 Angular 色。如果 html 开发人员没有分配其他 Angular 色，则然后默认 region应该使用 Angular 色。

<figcaption> ，另一方面，不是否有默认 Angular 色，浏览器不应选择 group为你。 <figcaption> 是有道理的应该是一个组 Angular 色，所以也许 html 规范应该更改为这样说，但在那之前，浏览器选择默认 Angular 色是不正确的。

现在，如果一切都有意义的话，firefox 和 chrome 正在(错误地)为您选择一个组 Angular 色，当您使用 tab 键导航到一个组时，组名首先被宣布然后接下来宣布您登陆的任何元素。

在这种情况下，组名是 <figcaption> 中包含的所有文本。 .这意味着链接文本“示例标题”以及日期“1999 年 9 月 24 日”。然后您的焦点移动到的元素是标题中包含的链接，因此链接文本(正确)被宣布为“示例标题”。所以总而言之，我听到“Example Title September 24, 1999 grouping , Example Title, link, heading level 3 ”。

也就是说，您会听到两件事，组名和获得焦点的元素。

如果您使用屏幕阅读器 DOM 导航键(向上/向下键)进行导航，那么您不会听到您的链接文本两次。您分别导航到每个元素。

最终结果是您不必做任何事情来解决这个问题。您的代码是正确的，它是浏览器中的错误。然而，如果你想破解这个问题，你可以给 <figcaption> group的具体作用并且不给它一个aria-label .这可以防止您的 figcaption 被解读为分组标签，但同样，我不建议您这样做。

如果你很好奇为什么这个 hack 会起作用，如果你给元素一个 Angular 色但没有给 Angular 色一个标签(通过 aria-label 或 aria-labelledby )，那么大多数浏览器将不会显示该元素的 Angular 色所以屏幕阅读器不会阅读它。

更新:

我忘了评论“可点击”的问题。这就是 NVDA 让您知道当点击未被正常处理时，元素或其父元素或祖先树上的某个元素 具有点击处理程序。例如，如果您有一个 <div>或 <h2>或 <p>或其他一些具有 onClick 处理程序的非交互元素，这些通常不是交互元素，因此 NVDA 让您知道您可以选择该元素。

您可以在 https://github.com/nvaccess/nvda/issues/7430#issuecomment-318984375 上查看更多详细信息