无法修改Read more文本时如何解决Lighthouse提示链接无描述文本问题

方法1：添加aria-label属性 #

直接在<a>标签上添加aria-label属性填入描述性内容，可见的「Read more」文本完全不受影响，示例如下：

<a href="link 1" aria-label="阅读更多关于项目A的内容">Read more</a>
<a href="link 2" aria-label="阅读更多关于项目B的内容">Read more</a>
<a href="link 3" aria-label="阅读更多关于项目C的内容">Read more</a>

aria-label的内容会被屏幕阅读器、搜索引擎爬虫以及Lighthouse识别，替代默认的「Read more」作为链接描述。

方法2：插入视觉隐藏的描述文本 #

如果担心旧设备对aria-label的兼容性问题，可以添加一段仅辅助技术可识别、普通用户看不到的隐藏文本，步骤如下：

1. 先在全局CSS中加入无障碍视觉隐藏类：

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

2. 在链接内插入带该类的描述文本：

<a href="link 1">Read more <span class="visually-hidden">关于项目A的内容</span></a>
<a href="link 2">Read more <span class="visually-hidden">关于项目B的内容</span></a>
<a href="link 3">Read more <span class="visually-hidden">关于项目C的内容</span></a>

该方案兼容性最好，适配所有支持CSS的设备。

方法3：关联已有内容（aria-labelledby） #

如果每个项目已经有独立的标题，可以用aria-labelledby直接关联已有的标题文本，不需要重复写描述：

<div class="project-item">
  <h3 id="project-1-title">项目A的标题</h3>
  <p>项目A的简介内容...</p>
  <a href="link 1" aria-labelledby="project-1-title more-tip">Read more</a>
</div>
<div class="project-item">
  <h3 id="project-2-title">项目B的标题</h3>
  <p>项目B的简介内容...</p>
  <a href="link 2" aria-labelledby="project-2-title more-tip">Read more</a>
</div>
<!-- 全局共用的补充描述 -->
<span id="more-tip" class="visually-hidden">的更多内容</span>

这种方案复用了页面已有内容，维护成本最低。

以上三种方案都不需要修改可见的「Read more」文本，均可解决Lighthouse的提示问题，同时符合Web无障碍规范。

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