如何修复Lighthouse「Links do not have a discernible name」报错

报错原因 #

Lighthouse 抛出Links do not have a discernible name报错，本质是屏幕阅读器等辅助技术无法正确识别链接的用途，虽然你的代码已经加了aria-label和SVG内部的<title>标签，但存在属性优先级、SVG识别规则的问题，导致辅助技术没有读取到有效的链接名称。

解决方案 #

按优先级从高到低选择以下任意一种即可：

• 最优方案：关联内部可见文本
  你的链接内部已经存在可见的标题文本，直接通过aria-labelledby属性关联即可，符合无障碍规范的最优实践，辅助技术读取的内容和用户可见内容完全一致，不会出现信息差：
  1. 给链接内部的h2标签添加自定义id：

  <h2 id="furniture-service-title" class="kt-blocks-info-box-title">نقل وتخزين الأثاث</h2>
  

  2. 修改a标签的无障碍属性，将aria-label替换为aria-labelledby指向上述id：

  <a class="kt-blocks-info-box-link-wrap info-box-link kt-blocks-info-box-media-align-top kt-info-halign-center" 
    href="https://albaytalraqy.com/%d8%b4%d8%b1%d9%83%d8%a9-%d9%86%d9%82%d9%84-%d8%a7%d8%ab%d8%a7%d8%ab/" 
    aria-labelledby="furniture-service-title">
  

• 方案二：补全SVG的无障碍属性
  如果你需要保留SVG作为链接的主要识别标识，给SVG标签添加role="img"属性，让屏幕阅读器能正确识别SVG内部的<title>标签作为链接名称：

  <svg role="img" style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="50" width="50" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  

• 方案三：可视化后台配置（适用Kadence区块）
  你用的是WordPress的Kadence信息框区块，不需要手动修改代码：在后台编辑对应页面时，选中该信息框区块，在右侧设置面板找到「链接」分类下的「无障碍文本」输入框，填入你要设置的链接描述，保存后区块会自动生成符合规范的属性，直接解决报错。

验证方法 #

修改完成后，在Chrome浏览器按F12打开开发者工具，选中对应的a标签，切换到「无障碍」面板，查看「名称」字段是否已经显示你设置的链接文本，确认存在后重新运行Lighthouse检测即可消除报错。

内容的提问来源于stack exchange，提问作者Mahmoud Abd Ell Fattah