如何防止NVDA宣读链接的全部内容？

Question

我有一段包含在链接中的代码，问题是当我用NVDA聚焦到该元素时，链接的内容会一次性读完。

例如，我有以下代码：

   <a href="example.html" title="description link">
     <h2>Heading H2</h2>
     <span>More Text</span>
     <p>More text</p>
   </a>

当我使用 NVDA 和 Firefox 焦点链接时，屏幕阅读器会不用按下向下箭头键就提及所有 h2、span 和 p 标签的内容。

理想情况下，当聚焦于链接时只需读取链接标题，而当按下向下箭头键时，其余内容将被朗读。

- Jessy Tylor

---

这是我基于你的标记期望的行为：当屏幕阅读器聚焦于交互元素（例如 <a>）时，它会将其内容作为该元素的“标签”（或“可访问名称”）进行宣读。你所需求的行为更适用于非交互式内容（所谓的“浏览模式”）。你真的需要把所有内容都放在链接里吗？<a> 的“链接”语义将覆盖内部元素的标题和段落语义，因此 h2 和 p 标记是多余的！实际使用场景是什么？ - brennanyoung

我不明白为什么你认为这是个问题。NVDA用户可以使用Ctrl停止屏幕阅读器的阅读，或使用Shift暂停它。但如果某些内容过长或者对人们不感兴趣，他们很可能会直接跳到下一个内容，这将打断阅读器的阅读并开始读取下一个内容。 - selfthinker

非常感谢您的回答，最终我更改了HTML（一篇文章的链接）并添加了JavaScript的onClick函数，现在语义上更有意义。 - Jessy Tylor

Answer 1

最初的回答 @brennanyoung是正确的。屏幕阅读器将读取锚点标记内的任何内容。

如果您希望h2 span和p仍然可以像链接一样可点击，但在NVDA用户将焦点放在上面时不会被读取，您可以使用CSS扩展可点击区域以包括下面的文本。不过您可能需要在锚点标记中加入一些内容。如果提供更多上下文，我可以提供更好的示例，但这里是想法。

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 250px;  
    position: absolute;
    left: -25px;
    top: -25px;
} 

- Taylor N