How to fix non-descriptive link content

Hi guys,

I’ve seen the message about non-descriptive link content in the Audit Panel, and I’ve tried various ways to resolve it, but the right method isn’t working.

Essentially, the links come from a CMS Collection and are dynamic since they form the basis of my navbar items. Therefore, it’s not feasible to assign a unique Aria Label to each one (this solution seemed to work—the audit panel stopped sending me notifications, but it’s not correct).

So, I used a value property linked to my category data, obtaining the name from there to describe what the link does (as you can see in the image below). However, to my surprise, it’s still not working. The audit panel continues to flag this issue as if it’s not recognizing the solution that Webflow provides without requiring code.

Has anyone had a similar situation? Could you share how you resolved it? Should I just ignore the Audit Panel and move on, or keep trying to solve it?

Cheers!

image


Here is my public share link: LINK
(how to access public share link)

I got the same problem here. I searched for solutions but did’t get one. Does anyone can help? Thanks a lot!

Fixing non-descriptive link content in a Webflow website involves ensuring that the anchor text (the clickable text of a hyperlink) accurately describes the destination of the link. This is essential for accessibility, SEO, and user experience. Here’s how you can fix non-descriptive link content in your Webflow website:

  1. **Identify Non-Descriptive Links:**First, you need to identify all the non-descriptive links on your website. Look for links that use generic terms like “click here,” “read more,” or “learn more” instead of descriptive text that tells users and search engines about the link’s destination.
  2. **Update Anchor Text:**Once you’ve identified the non-descriptive links, update the anchor text to make it more descriptive. The anchor text should provide a clear and concise description of the linked page or content.
  • For example, instead of using “click here to learn more,” you can use “learn more about our services.”
  • Instead of “read more,” use “read more about our latest products.”
  1. **Use Webflow’s Link Settings:**In Webflow, when you add or edit a link, you can specify the link text directly within the link settings.
  • Select the link element on your page.
  • In the settings panel on the right side, you’ll see the “Link Settings.”
  • Update the “Link Text” field with the new descriptive anchor text.
  1. **Check External Links:**If you have external links on your website, ensure that they also use descriptive anchor text. Avoid linking to URLs directly; instead, use relevant keywords or phrases as anchor text.
  2. **Test the Links:**After updating the anchor text, make sure to test all the links on your website to ensure they are working correctly and directing users to the intended destinations.
  3. **Consider Accessibility:**Always keep accessibility in mind when updating link content. Descriptive anchor text not only benefits SEO but also improves the accessibility of your website for users with disabilities who rely on screen readers.
  4. **Review and Publish:**Once you’ve updated all the non-descriptive links, review your website to ensure consistency and accuracy in anchor text. After reviewing, publish the changes to make them live on your Webflow website.

By following these steps, you can fix non-descriptive link content in your Webflow website, improving the user experience, SEO, and accessibility of your site.

Please check this tutorial from webflow, it might help.

Hi,

The point is not how to make it, but how to make it works. When I set Aria-label using variable values, the Webflow Audit Panel don’t recognize it as solved and still asking me to solve it.

If I put a hard text on that, which means no relevant information for users, since it is a variable information, the Webflow Panel Audit show it as solved.

I don’t know if I made myself clear, but the image above represents very well what I’m trying to explaing here.

Regards!

Hi,

I already saw this article. for images it is fine. For links variables are not working yet. Don’t know why. Did you get the answer?

I have’t got a solution yet. I think it’s about technique issue from webflow, it might be more complicated for the dynamic content. I used screen reader and it can recognized the alt text when I assigned the alt text as “product name” from CMS collection.

For my case, i was looking for a solution…and reading through this post. I realized instead of using a Link Block with a Text inside, i went ahead and used a “Text Link” instead. My case it was a text link so it was redundant to have a Link Block with the text inside.

This cleared up the error.

Quick update: Still having the issue with Link Blocks and let’s say an image inside… although the image has ALT text define, still not recognizing it.

I have the same issue. I’m using link blocks to hold a CMS collection so that the entire element is clickable.

I can fix the non-descriptive link issue by making it a DIV and using a link item within the DIV block, but it’s not as user freindly as clicking the whole block.

Weirdly, I get the non-descriptive link error on some lists, but not others and they are all built in exactly the same way.

So my guess is that it’s OK to dismiss the error?

Maybe Webflow needs to add some sort of Alt-text element to link-blocks?

It’s a bit annoying.