html - 如何防止 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 标签而不按向下箭头键。

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

Answer 1

@brennanyoung 是正确的。 anchor 标签内的任何内容都将被屏幕阅读器读取。

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

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