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
- Identify affected links, especially those with SVG social media icons, and add descriptive titles using the Element Settings panel.
- Use ARIA labels for accessibility, ensuring alternative text or link text provides context.
- Test changes to confirm improved link descriptions, checking with accessibility tools.
The "Non-descriptive link content" error occurs when links do not have meaningful descriptions, which can impact SEO and accessibility. Here's how to fix it in Webflow:
1. Identify Affected Links
- Inspect the specific links flagged during the page evaluation.
- Ensure these links contain SVG images for social media icons.
2. Add Descriptive Titles
- Select each link block that includes a social media icon.
- Go to the Element Settings panel (the gear icon on the right).
- Enter a descriptive title that reflects the purpose of the link (e.g., "Facebook Profile" or "Follow us on Instagram").
3. Use Aria-Labels for Accessibility
- Click the "Settings" icon on the link element.
- In the Accessibility (ARIA) label option, add specific descriptive text like "Visit our Twitter page."
4. Update Link Text for Enhanced Clarity
- Ensure the accompanying text or alternative text of the SVG icon provides context for the link.
- If no text exists, *consider adding small text next to the icon that describes its purpose (e.g., "FB" for Facebook, "IG" for Instagram).
5. Test the Descriptions
- Preview the web page to ensure the changes are applied correctly.
- Check the page accessibility tools to confirm the descriptions now meet requirements.
Summary
Fixing the "Non-descriptive link content" error involves adding descriptive titles and ARIA labels to social media icon links in Webflow. This enhances accessibility and ensures links are both meaningful and informative.