How to Fix Non-Descriptive Link Text in Webflow - Quick Fix

TL:DR

• Non-descriptive link text in Webflow makes it hard for users, especially those with screen readers, to understand a link's purpose.
• Fixing these links improves accessibility, usability, and SEO.
• To resolve, locate the link block, add a custom aria-label attribute with a descriptive value, and ensure any visible text or image alt text is also descriptive.
• Test for accessibility and publish your site to apply the changes.

‍

What is non-descriptive link text in Webflow?

Non-descriptive link text in Webflow refers to links that lack clear and contextual text, making it difficult for users, especially those using screen readers, to understand the link's destination or function.

‍

Why is it important to fix non-descriptive link text in Webflow?

• Accessibility: It ensures that users with assistive technologies, such as screen readers, can understand the purpose of the link and navigate your site effectively. The aria-label attribute can be used to provide a descriptive label for accessibility when the link's purpose isn't obvious.
• Usability: Descriptive link text enhances the overall user experience by providing clear context, allowing all users to anticipate where a link will take them.
• SEO: Clear and descriptive link text contributes to better search engine optimisation by helping search engines understand the content of your pages.

‍

Weblow has a built-in accessibility audit tool that alerts you when you have non-descriptive link text. Whenever you see this across a page, aim to fix it.

‍

How to resolve non-descriptive link text in Webflow?

To resolve the "non-descriptive link text" error in Webflow, especially when dealing with a link block that doesn't automatically resolve with text or an image with alt text, follow these detailed steps, including the use of aria-label for accessibility enhancement:

‍

1. Locate the Link Block: Identify the link block in your Webflow project that's causing the "non-descriptive link text" error. This error typically arises when the link lacks context or descriptive text, making it unclear for users, especially those using screen readers.

‍

2. Add Custom Attributes for Accessibility:
   
   1. Select the problematic link block in the Webflow Designer.
   2. Navigate to the Element Settings panel (the gear icon on the top right of the Designer interface).

3. Scroll down to the "Custom Attributes" section and click the "+ Add" button to create a new attribute.
4. In the "Name" field of the new attribute, type aria-label. This attribute is crucial for accessibility as it allows you to define a string that labels the current element. It's especially useful when the link's purpose isn't immediately apparent from its text or when the link block doesn't contain any text at all.
5. In the "Value" field, enter a descriptive label that clearly explains the link's destination or function, such as "Why You Should Not Use Webflow Templates" or "Meet Your Paddlers". This description should provide clear context to all users, including those using assistive technologies.

‍

3. Ensure Descriptive Link Text:
   
   1. If your link block includes text, ensure that the text is descriptive enough to convey the link's destination or action without needing additional context. This practice enhances usability and SEO.
   2. For link blocks containing an image without text, ensure the image has an appropriate alt attribute that describes its content or function in relation to the link. You can add or edit an image’s alt text in the Image Settings panel within Webflow.

‍

4. Test for Accessibility:
   
   1. After applying these changes, use Webflow’s Preview mode to test the link’s functionality and ensure the aria-label effectively provides the necessary context.
   2. Consider using accessibility testing tools or screen readers to verify that the aria-label correctly describes the link block’s purpose.

‍

5. Publish Your Site:
   
   1. Once you're satisfied with the updates and ensure all links are descriptive and accessible, publish your site to apply the changes live.

‍

By following these steps, you can effectively remove the "non-descriptive link text" error in Webflow, making your site more accessible and user-friendly, especially for users who rely on screen readers and other assistive technologies.

‍