Accessibility Errors in Google Lighthouse

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Links do not have a discernible name

Some links don't have any words, so they need alt text for bots and screen readers to know what they are for.

There are 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

Company logo

1. Go to Webflow designer

2. Click on the brand image link in the Nav Bar

Click on the brand image link in the Nav Bar

3. Click on Element Settings

Click on Element Settings

4. Click on Custom description

Click on Custom description

5. Add "Company Name - Home"

Add "Company Name - Home"

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

Social links also need Alt text. If you import an SVG or PNG file, add the Alt text as normal. For example Alt="Facebook".

Social media icons

Social link as SVG embed

1. Go to Webflow Designer

2. Select icon and Click on Element Settings

Select icon and Click on Element Settings

3. Click where you want to add the title attribute (between ><)

Click where you want to add the title attribute (between ><)

4. Paste "<title>Twitter icon></title>" into text area

The screen reader will announce this as a link (as the icon must be in a Link Block).

Paste "<title>Twitter icon></title>" into text area

5. Click on Save & Close

Click on Save & Close


Arrow icons

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.

Font Awesome

There's a great guide to adding Alt text with Font Awesome on their website.

Google Lighthouse says

Link text that is discernible, unique, and focusable improves the navigation experience for users of screen readers and other assistive technologies.