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

Question

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?

Answer 1

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>

Answer 2

Barry Pollard's answer at the top is correct, here's my summary of the valuable input from both Barry and tdy (and to fix my earlier incorrect summary). Hopefully this is useful to anybody.

1. "aria-label can be used in cases where text that could label the element is not visible." (source: mozilla)

2. The first rule of ARIA is not to use it if you don't have to. (source: w3.org)

3. The ALT attribute is a required part of the IMG tag. An IMG tag without it is invalid HTML (source: mozilla). An empty ALT-attribute will prevent screen readers from reading out the image URL.

Only use aria-labels and values inside the image's ALT-attribute if it really benefits the accessibility of the content. Often ALT-attributes on UI icons for example will just worsen the experience on a screenreader. A good tip is to run the page through a screenreader to hear it yourself.

Here are 3 possible situations that will all score full points on Accessibility:

Link with image but no visible text

With aria-label, image tag has empty ALT- attribute

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

Link with image but no visible text

Without aria-label, with text in ALT-attribute

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

Link with image and text

No aria-label, empty ALT-attribute has text between anchor tags

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

Thanks Barry Pollard and tdy for your excellent help!