I am using the Starter portfolio template provided by Webflow -
This is the read-only link to my portfolio - Webflow - maggieTA503
https://maggieta503.webflow.io - Published site link
The template comes with three links with background images on the home page. Each image goes to a project in my portfolio. The built-in auditor in Webflow says that the link is non-descriptive but the link is connected to an image and I’m not sure the best way to add alt text so that if someone is looking at the site with a screen reader they can know what is appearing on the page.
According to here → Alternate text for background images, alt text accessibility
One way would be to use a span tag and put the alt text there but I’m not sure if this is the best way or if I should just redesign that project section so that is not needed at all.
The solution is simple. If you have images that are not decorative then use the image element and include an alt tag.
This image is decorative but it also has a link on it so I can not just go into the Assets tab, find the image, and add an alt tag. Because the audit states that the link element does not have any content (as was shown in the first screenshot). What I am concerned about is if someone views my site they may not be able to easily find the link if they are using a screen reader or other assistive technologies.
According to this Alternate text for background images - Considerations and techniques there are two ways to handle this situation
Either use an empty tag in the
and add the aria-label attribute or put an empty after the
with the aria-label and role of the image.
I’m wondering if I should try either of these, how to implement it in Webflow because I couldn’t use the Editor till I published the site, or if I should modify the template so that the audit doesn’t show non-descriptive link content.
Figured this out on my own. If there is anyone who runs into this situation try viewing the following tutorial from Webflow: