Links do not have a discernible name
83% of the Webflow sites I surveyed had this error, making it the most common error.
Some links don't have any words, so they need alt text for bots and screen readers to know what they are for.
I found 3 typical uses of images as links in Webflow sites
- company logo link to the home page
- social links to Facebook or LinkedIn
- arrow icons to move through a slideshow or back to the top of the page
When you use the company logo as a link to the home page in the Navigation bar the ALt text will typically be
"Company Name - Home"
Social links also need Alt text. If you import an SVG or PNG file, add the Alt text as normal. For example Alt="Facebook".
There's a great guide to adding Alt text with Font Awesome on their website.
Here's an example of an arrow icon to take people back to the top of the page.
There's no Alt text so a screen reader can't tell what the link is for. In this case the image has been uploaded to Webflow, so the normal Alt text would work fine. If you use something like Font Awesome, you can use the icon accessibility information from their website
Here's the HTML code for this example, showing the link (to the #top of the page), the image (img scr) and the Alt text (alt="").
<a href="#top" class="button-circle bg-primary-1 w-inline-block"><img src="https://global-uploads.webflow.com/5eb12140e436565b6dadf0a9/5eb12141b3c195d52d58fe47_icon-chevron-up.svg" alt=""></a>
Google Lighthouse says
Link text that is discernible, unique, and focusable improves the navigation experience for users of screen readers and other assistive technologies.