时间戳

首页 > 解决方案 > 如何防止 NVDA 公布链接的全部内容？

html - 如何防止 NVDA 公布链接的全部内容？

问题描述

我有一段包含在链接中的代码，问题是当我关注带有NVDA链接内容的元素时，会一次性读取所有内容。

例如我有这个代码：

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

当我使用NVDAFirefox 链接链接时，屏幕阅读器会提到h2,span和p标签的所有内容，而无需按向下箭头键。

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

标签： htmlaccessibilityscreen-readersnvda

解决方案

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

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

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

推荐阅读