如何防止 NVDA 公布链接的全部内容？答案

【问题标题】：How to prevent NVDA from announcing the whole content of a link?如何防止 NVDA 公布链接的全部内容？
【发布时间】：2019-08-09 08:19:28
【问题描述】：

我有一段代码包含在链接中，问题是当我使用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 标签的所有内容，而无需按下箭头键。

理想情况下，当您关注链接时，只需阅读链接的标题，当您按下向下箭头键时，会阅读其余内容

【问题讨论】：

鉴于您的标记，这是我所期望的行为：当屏幕阅读器专注于交互式元素（例如 <a>）时，它会将内容宣布为“标签”（或“可访问的名称”） ) 对于该元素。您要求的行为更多是针对非交互式内容（所谓的“浏览模式”）。你真的想要/需要链接中的所有内容吗？ <a> 的“链接”语义将覆盖内部元素的标题和段落语义，因此 h2 和 p 标记是多余的！实际用例是什么？
我不明白你为什么认为这是个问题。 NVDA 用户可以使用 Ctrl 停止屏幕阅读器阅读或使用 Shift 暂停它。但是，如果某些内容太长且对人们不感兴趣，他们很可能只是导航到下一个内容，这会打断读者阅读下一个内容。
非常感谢您最后的回答我更改了 html（文章的链接）并使用 javascript 添加了 onClick 函数，现在语义上更有意义了。

【解决方案1】：

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

如果您希望 h2 span 和 p 仍可点击，就好像它是一个链接一样，但在 NVDA 用户将焦点放在它上时无法读取，您可以使用 CSS 扩展可点击区域以包含下面的文本。不过，您可能需要在锚标签中添加一些东西。有了更多的上下文，我可以提供一个更好的例子，但是here's the idea

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

【讨论】：