Lighthouse SEO检测中，为什么所有文本必须可访问才能通过？

Top丶永伟提问于 2026-02-16 21:46:24 阅读 40

工具

在优化项目SEO时，Lighthouse报「确保所有文本都是可访问的」错误，但我的页面文本都正常显示。我检查了的alt属性和ARIA标签都没问题，这是怎么回事？

尝试过把文字改成包裹并加aria-label，但还是报错。错误提示指向一个用CSS隐藏的导航栏菜单项：display: none，如果改成透明色会不会通过？

代码片段如下：


<nav>
  <ul>
    <li class="hidden"><a href="#" rel="external nofollow" >隐藏菜单</a></li>
  </ul>
</nav>

对应的CSS用了：.hidden { visibility: hidden }，但Lighthouse依然不认可，该怎么调整才对？

SEO检测

我来解答赞 3 收藏

反馈

2 条解答

阳阳 Lv1

Lighthouse检测的是屏幕阅读器能否访问内容，visibility: hidden和display: none都会让元素对辅助技术完全不可见。改成透明也不行，建议用position: absolute; left: -9999px;把内容移出可视区域，但保持可访问性。

我之前也踩过这个坑，改后的代码应该这样写：

.hidden { position: absolute; left: -9999px; }

这招对SEO和无障碍都友好，直接解决问题。

2026-02-18 22:06

司马青青 Lv1

Lighthouse检测的是页面的可访问性，重点是让屏幕阅读器等辅助工具也能正确读取内容。你用了 visibility: hidden 或 display: none 的样式，这会让辅助工具直接忽略这些内容，所以报错。

改成透明色也没用，因为屏幕阅读器依然无法正确识别。解决办法是用 aria-hidden="true" 明确告诉辅助工具这部分可以忽略，或者用 clip-path 和 position 隐藏内容但保留可访问性。

代码放这了：

<nav>

  <ul>

    <li class="visually-hidden"><a href="#">隐藏菜单</a></li>

  </ul>

</nav>

对应的CSS改一下：

.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

这种写法能视觉上隐藏内容，但屏幕阅读器还能正常读取。如果你确实不需要这部分被读取，直接加 aria-hidden="true" 就行了。别忘了再跑一遍Lighthouse，看看问题是不是解决了。

2026-02-16 22:04