如何限制屏幕阅读器不读取特定文本？JAWS与ARIA场景处理

当然有办法搞定！你碰到的这个场景挺常见的——就是要让视觉显示和屏幕阅读器读取的内容分开，下面给你两种靠谱的解决方案，优先推荐第一种：

方法一：给内部span添加aria-hidden="true"（推荐） #

这是最语义化、最直接的处理方式。给你不想被JAWS读取的<span>加上aria-hidden="true"属性，就能明确告诉屏幕阅读器："这个元素的内容不用管它"，同时完全不影响视觉上的显示效果。

示例代码：

<div aria-label="Read this">
  <span aria-hidden="true">do not read this</span>
</div>

原理很简单：aria-hidden属性专门用来标记元素及其子内容对辅助技术（比如JAWS）不可见，完美匹配你只需要外层aria-label被读取的需求。

方法二：用CSS视觉隐藏内部文本（备选方案） #

如果因为某些限制没法用aria-hidden，也可以通过CSS把内部文本移出视口范围，让屏幕阅读器抓取不到它（不过这种方法原本是用来隐藏仅给屏幕阅读器看的内容，反过来用也能达到效果）：

先定义一个CSS类：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

然后把这个类应用到<span>上：

<div aria-label="Read this">
  <span class="visually-hidden">do not read this</span>
</div>

不过相比第一种方法，这种是从视觉层面做隐藏，而aria-hidden是直接针对辅助技术的语义化标记，所以优先选第一种更稳妥。

小提醒 #

要确保你的aria-label内容足够清晰准确哦，毕竟视觉用户看到的是内部文本，屏幕阅读器用户听到的是aria-label，如果两者差异很大，最好是业务场景确实需要这种设计，避免给不同用户造成认知混乱。

内容的提问来源于stack exchange，提问作者Rajasekar