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

3. Click on Element Settings

4. Click on Custom description

5. 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 link as SVG embed

1. Go to Webflow Designer

2. Select icon and Click on Element Settings

3. 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).

5. 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.

‍