Icon/link Accessibility errors in google page speed

[oriol]

See this site: https://staging-logoglo-newsite.kinsta.cloud/

Google page speed is saying:

" Links do not have a discernible name

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users."

The icons that are erroring are in the footer, and have this html:

div.x-row > div.x-row-inner > div.x-col > a.x-anchor
<a class="x-anchor x-anchor-button has-graphic e15159-e5 mbp3-9 mbp3-a mbp3-b" tabindex="0" href="https://www.facebook.com/logoglo.graphic.design/" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">

Is there a fix for this that doesn’t involve using images as buttons? I still want to use the icons, as they are site wide etc…is there a way to add what’s need to the icons?

Thanks.

[christian]

Hey @oriol,

It looks like Google wants you to have text in your link. Try enabling the Text option in the button and inserting some meaningful text. If you don’t want the text to show up, set the Font Size to 0 or use custom CSS to hide it. If you need custom CSS guidance, check out our One support.

You can also input what attributes Google needs in the Custom Attributes option. What those attributes are, we can’t guide you as the work required is a bit involved.

[oriol]

That did the trick, thanks!

[tristup]

Hi Oriol,

Glad that we are able to help you.

Thanks