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 的屏幕阅读器但不使用 Internet Explorer 时，我听到两次“示例标题”。我使用 NVDA 还是 JAWS 都没关系。是浏览器导致了问题。

firefox 和 chrome 都将<figcaption> 视为group 角色。这是该元素的有效角色，如 html spec for figcaption 中所述，但如果 html 规范没有说明默认角色应该是什么，通常浏览器应该不选择默认角色。例如，<section> 元素表示the default role is region，但它可以被分配几种其他类型的角色。如果 html 开发人员没有分配任何其他角色，那么应该使用默认的region 角色。

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

现在，如果这一切都说得通，那 firefox 和 chrome 正在（错误地）为您选择组角色，当您使用 tab 键导航到组时，组名称首先公布然后接下来宣布你登陆的任何元素。

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

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

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

最终结果是您不必做任何事情来解决此问题。您的代码是正确的，这是浏览器中的错误。但是，如果您想解决这个问题，您可以给<figcaption> 指定group 的特定角色，而不 给它一个aria-label。这可以防止您的 figcaption 被视为分组标签，但我再次不建议这样做。

如果你好奇这个 hack 为何有效，如果你给一个元素一个角色但没有给这个角色一个标签（通过aria-label 或aria-labelledby），那么大多数浏览器不会显示该元素的角色所以屏幕阅读器不会阅读它。

更新：

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

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