Question 283462 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Barry's answer explains most of it, but wanted to add this for completeness. His answer made me look into the aria-label a bit more to understand the issue.

    Taken from the definition on mozilla "aria-label can be used in cases where text that could label the element is not visible."

    So when there is text between the anchor tags, there's no need for an aria-label. Here are 3 possible situations that will all score full points on Accessibility:

    Link with image

    With aria-label, image tag has alt attribute

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

    Link with image

    Without aria-label, image has alt attribute

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

    Link with image and text

    Without aria-label, image has alt attribute and text between anchor tags.

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

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search