Accessibility Score Google Lighthouse

I just registered and I’d like to introduce myself: My name is Peter.

I’m currently involved in building websites and naturally aiming to achieve scores between 95 and 100% on Google Lighthouse Report. Unfortunately, I’m encountering an issue with accessibility stating “Links do not have a discernible name”. It seems to be related to the icons that redirect to emails. Can anyone help me with how to fix this? Or do you think I should just delete the links or icons completely :D? I hope this is the right category for this query. If anyone is interested in taking a look, here is a link to the website: https://webdesign-duesseldorf.net/
Please don´t be too harsh as this is my first site. But feedback about the design is also welcome :slight_smile:

Thank you very much.

Welcome to this forum Peter…

If you click on ‘Links do not have a descernible name’, it shows that you have one failing element:

If you then click on the html shown, the element becomes hightlighted on the web page (you may need to scroll down).

It is Alex’s LinkedIn SVG image button which has no ‘alt’ attribute describing the purpose of the link for screen readers.

5 Likes

Hi Archibald, thanks for the answer. Do you know how to change the setting? (especially in breakdance?) I guess I have to add custom code.

According to this Breakdance documentation, you can have custom alternative (‘alt’) text for images:

I do not know if you can add ‘alt’ text to an SVG image in Breakdance.

Note the ‘alt’ text attribute should be added to the <svg> element’s tag, not to the <a> anchor element. A ‘title’ attribute could be added to the <a> element.

For Lighthouse’s accessibility score, you should add ‘alt’ text to all your many <img> elements.

There is more information here, including if an image is just decorative:

See also ’ Stand-alone icon image that has a function’:
https://www.w3.org/WAI/tutorials/images/functional/#example-4-stand-alone-icon-image-that-has-a-function

1 Like

thank you :).

1 Like