How can I fix the "Non-descriptive link content" error when publishing my web page in Webflow with social media icons implemented as SVG images?
TL;DR
To fix the "Non-descriptive link content" error in Webflow when using SVG icons as social media links, follow these steps:
1. Ensure Each Link Has Descriptive Text
Screen readers need descriptive text for accessibility. Since your icons are images, add descriptive text using one of these methods:
A. Use aria-label on the Link Block:
- Select the Link Block wrapping the SVG icon.
- In the Element Settings panel, add a custom attribute:
- Name:
aria-label - Value: A descriptive name (e.g., "Follow us on Twitter").
B. Add a Visually Hidden Text Span:
- Inside the Link Block, add a Text Block with the name of the social network.
- Apply a class (e.g., “visually-hidden”) and set:
display: none;(or use CSSclip-pathtechniques for accessibility).
2. Check Alt Attributes (If Using Image Elements Instead of SVGs)
- If your logos are standard image elements (
<img>), ensure each has an appropriatealttag: - Example:
alt="Facebook logo"(thougharia-labelis a better approach).
3. Test Accessibility
Use a screen reader (e.g., VoiceOver, NVDA) or Webflow's built-in accessibility checker to verify that links are descriptive.
Summary: Fix the issue by adding aria-label attributes to link blocks containing SVG icons or by including hidden text within the link. This improves accessibility and eliminates the error.