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理解为分组标签，但是，再次，我不建议这样做。

如果您好奇这种黑客行为的工作原理，如果给元素赋予角色但没有给角色赋予标签（通过aria-label或aria-labelledby），则大多数浏览器将不会显示该元素的作用，因此屏幕阅读器不会读取它。

更新：

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

您可以在https://github.com/nvaccess/nvda/issues/7430#issuecomment-318984375

上查看更多详细信息

嵌入链接后，NVDA屏幕阅读器的阅读方向为两次

1 个答案: