accessibilitypagespeed-insights

How to satisfy Accessibility in PageSpeed Insight with a link that contains both an image and text?

PageSpeed Insights keeps penalising me on Accessibiliy for having a button (anchor link) with an image and text. The anchor tag has an aria-label with the same value as the text inside the link.

Here's the 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>

I've tried the following solutions:

SOLUTION Accessibility penalty
Image has no alt-attribute [-9] Image elements do not have [alt] attributes (plus extra SEO penalty of [-8]
Image has alt-attribute [-7] Elements with visible text labels do not have matching accessible names.
Image has alt-attribute with value matching aria-label [-8] Elements with visible text labels do not have matching accessible names. AND Image elements have [alt] attributes that are redundant text.

I don't want to introduce hacks to fix the issue (e.g. add the image via css using a pseudo class, a background-image or a list-style-image) as I think this is a fairly normal use-case that should just be ok. But maybe I'm wrong? Is this a shortcoming of PageSpeed Insights or should I do this differently?

Solution

  • No need to repeat things and you already have the label in the link.

    So it should either say the image is a decorative and so no need for it to be labeled by setting alt="":

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

    Or give the image an alt label:

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