Javascript 嵌入链接时，NVDA屏幕阅读器读取标题两次

我在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>

一九九九年九月二十四日

• 此外，屏幕阅读器在聚焦时可多次读取clickable 在链接上
  如果有人能想出解决办法，那将是一个很大的帮助。我是无障碍领域的初学者

---

提前感谢：）

问题不在于NVDA，而在于浏览器。您使用的是哪种浏览器？当我在firefox和chrome上使用屏幕阅读器，而不是在internet explorer上使用屏幕阅读器时，我会听到两次“示例标题”。不管我用的是NVDA还是JAWS。导致问题的是浏览器

firefox和chrome都将

视为一个角色。如中所述，这是该元素的有效角色，但如果html规范没有说明默认角色应该是什么，则浏览器通常应选择默认角色。例如，

元素表示，但可以为其分配其他几种类型的角色。如果html开发人员未分配任何其他角色，则应使用默认的

区域

角色

另一方面，

没有默认角色，浏览器不应该为您选择

组。
应该是一个组角色，这是有道理的，因此html规范可能应该更改为这样说，但在此之前，浏览器选择默认角色是不正确的

现在，如果所有这些都有意义的话，firefox和chrome（错误地）为您选择了一个组角色，当您使用tab键导航到一个组时，首先会宣布组名，然后再宣布您登录的任何元素

在本例中，组名是
中包含的所有文本。这意味着链接文本“示例标题”以及日期“1999年9月24日”。然后，您的焦点转移到的元素是标题中包含的链接，因此链接文本（正确地）被宣布为“示例标题”。总之，我听到了“
示例标题1999年9月24日分组”
，
示例标题，链接，标题级别3
”

也就是说，您会听到两件事被宣布，组名和接收焦点的元素

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

最终的结果是，您不必做任何事情来修复此问题。您的代码是正确的，这是浏览器中的一个错误。但是，如果您想绕过这个问题，您可以给
一个
组的特定角色，而不给它一个
aria标签。这会阻止您的figcaption被解读为分组标签，但我再次建议您不要这样做

如果你想知道为什么这种方法会奏效，如果你给一个元素一个角色，但不给这个角色一个标签（通过
aria-label
或
aria-labelledby
），那么大多数浏览器将不会显示该元素的角色，这样屏幕阅读器就不会读取它

更新：

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

您可以看到有关
的更多详细信息，所以您的意思是说，
示例标题
被读取了两次？是的。“示例标题链接”按“示例标题链接标题级别3”分组，如下所示。感谢您的回复。我找到了窃听器的原因。除此之外，我还观察到了下面的错误，当我关注一些链接时，屏幕阅读器会在关注一个链接时多次读取clickable。啊，我忘记了“clickable”问题。我刚刚更新了我的答案。