Pixellucy

Links do not have a discernible name – WebFlow

—

by

Lucy Nguyen
in ,

In Webflow, “Links do not have a discernible name” usually means the link is missing textual or alternative text (for screen readers). Screen readers and accessibility tools rely on meaningful labels to describe what a link does.

Below are a few ways to fix this:

1. Ensure Each Link Has Visible Text

  1. Select the link in the Webflow Designer.
  2. In the Settings panel or Designer view, add or edit the text for that link, e.g., “Learn More” instead of “…”.
  3. Make sure the link text clearly indicates the link’s purpose.

Why: A link with descriptive text is immediately accessible to people using screen readers (e.g. “Contact Us” or “View Portfolio”). Links with only an icon or empty text can trigger this error.

2. Add an Aria-Label (if the link is icon-only)

If you’re using an icon or image (like a social media icon) for your link and you want the link to remain visually icon-only, give it an ARIA label. Here’s how:

  1. Select the link in the Designer.
  2. Go to the Element Settings (the gear icon in the right-hand panel).
  3. Scroll down to Custom Attributes.
  4. Click + Add field.
    • Name: aria-label
    • Value: A descriptive label, e.g. "Visit our Facebook page"
  5. Publish or preview to confirm.

Why: Screen readers will read the aria-label instead of the (missing) text, making your link “discernible” for users who rely on assistive technology.

3. Use a Title Attribute (Not as Good, But Acceptable as Fallback)

Occasionally, a title attribute can convey additional info to some screen readers. However, aria-label is more widely respected by accessibility tools. If needed:

  1. In the Settings panel or Designer view, find Custom Attributes.
  2. Add title as the Name, and type in a descriptive phrase for the Value.

Still, aria-label is preferred for purely decorative or icon-based links.

4. Check Your Symbols, Templates, and Reusable Elements

If the “undiscernible link” appears repeatedly, it might be a symbol (reusable component) in Webflow. Fixing it in the symbol can propagate the change throughout the site:

  1. Open the Symbols panel.
  2. Select the symbol containing the link.
  3. Edit the link’s text or add an aria-label.
  4. Save and update across your site.

5. Verify Accessibility

Once you’ve added text or ARIA labels:

  1. Publish your website.
  2. Re-run your accessibility checks (e.g., Lighthouse in Chrome DevTools or an external tool) to confirm the error is resolved.

Comments

Leave a Reply