如何解决PageSpeed Insights中含图片与文本链接的无障碍合规问题？

问题背景 #

你使用包含图片和文本的锚链接做按钮，给<a>标签添加了和文本内容一致的aria-label，但PageSpeed Insights始终在无障碍性上扣分。尝试了几种图片alt属性的设置方式，均未解决问题，且不想用CSS背景图这类hack手段。

原代码如下：

<style>
    a {
        display: inline-block;
        padding: 20px;
        background-color: #000;
        color:#fff;
    }
</style>

<a aria-label="Call us now" href="tel:123456">
    <img src="images/phone.png" width="20" height="20">
    Call us now
</a>

尝试的方案及扣分情况：

• 图片无alt属性：[-9] 图片元素未设置alt属性（额外SEO扣分为[-8]）
• 图片添加alt属性：[-7] 带有可见文本标签的元素未匹配无障碍名称
• 图片添加与aria-label值一致的alt属性：[-8] 带有可见文本标签的元素未匹配无障碍名称 且 图片元素的alt属性存在冗余文本

正确解决方案 #

问题根源在于你额外添加的aria-label——当链接本身已有清晰的可见文本时，重复设置aria-label会导致屏幕阅读器读取内容与可见文本冲突，触发PageSpeed的无障碍检测规则。

正确的HTML写法：

<style>
    a {
        display: inline-block;
        padding: 20px;
        background-color: #000;
        color:#fff;
    }
</style>

<a href="tel:123456">
    <img src="images/phone.png" width="20" height="20" alt="">
    Call us now
</a>

关键说明 #

1. 移除多余的aria-label：链接内的可见文本“Call us now”本身就是清晰的无障碍标签，额外设置aria-label会让屏幕阅读器重复读取相同内容，同时触发“可见文本与无障碍名称不匹配”的检测错误。
2. 给图片设置空alt属性：这里的电话图标属于装饰性元素，并非核心内容，设置alt=""可以告诉屏幕阅读器忽略该图片，既避免冗余读取，又解决“图片未设alt”的扣分问题。

为什么之前的方案都失效？ #

• 无alt属性：违反图片必须配备alt的无障碍规范，直接扣分
• 图片加非空alt：链接的无障碍名称会变成“[图片alt内容] + [aria-label内容]”，与可见文本“Call us now”不一致，触发规则扣分
• 图片alt与aria-label一致：无障碍名称会变成“Call us nowCall us now”，既和可见文本不匹配，又存在冗余内容，双重扣分

总结 #

这并非PageSpeed Insights的缺陷，而是对无障碍规范的理解偏差。装饰性图标用空alt，有明确可见文本的链接无需额外添加aria-label，既符合无障碍标准，能通过PageSpeed检测，也完全不需要使用hack手段。

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