如何通过包含图像和文本的链接满足 PageSpeed Insight 中的可访问性？

Question

PageSpeed Insights 不断在 Accessibiliy 上惩罚我，因为我有一个带有图像和文本的按钮（锚链接）。锚标记有一个

aria-label

，其值与链接内的文本相同。

这是 HTML：

<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] 属性（加上 [-8] 的额外 SEO 惩罚
图像具有 alt 属性	[-7] 具有可见文本标签的元素没有匹配的可访问名称。
图像具有 alt 属性，其值与 aria-label 匹配	[-8] 具有可见文本标签的元素没有匹配的可访问名称。 AND 图像元素具有作为冗余文本的 [alt] 属性。

我不想引入 hacks 来解决这个问题（例如，使用伪类、背景图像或列表样式图像通过 css 添加图像），因为我认为这是一个相当正常的用例，应该没事就好。但也许我错了？这是 PageSpeed Insights 的缺点还是我应该采取不同的做法？

Answer 1

无需重复，链接中已经有标签。

因此应该说该图像是装饰性的，因此不需要通过设置来标记它

alt=""

:

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

或者给图像加上

alt

标签：

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

Answer 2

巴里的回答解释了大部分内容，但为了完整性想添加这一点。他的回答让我进一步了解了

aria-label

以理解这个问题。

取自 mozilla 上的定义“aria-label 可用于标记元素的文本不可见的情况。”

因此，当锚标记之间有文本时，就不需要 aria 标签。以下 3 种可能的情况都将在辅助功能上获得满分：

图片链接

使用aria-label，图像标签具有alt属性

<a aria-label="Call us now" href="tel:45678">
    <img src="images/just-phone.png" width="40" height="40" alt=phone icon>
</a>

图片链接

没有aria-label，图像有alt属性

<a href="tel:45678">
    <img src="images/just-phone.png" width="40" height="40" alt="phone icon">
</a>

图片和文字链接

没有 aria-label，图像在锚标记之间具有 alt 属性和文本。

<a href="tel:45678">
    <img src="images/just-phone.png" width="40" height="40" alt="phone icon">
    Call us now
</a>