axe-core "link-name" links must have discernible text in CI

By Kaveh Alemi·Latchkey

axe-core rule link-name found an <a> element with no accessible text. WCAG 2.4.4 and 4.1.2 require links to have a name that describes their destination or purpose.

What this error means

axe reports "link-name: Links must have discernible text" for an anchor whose content is an image without alt, an icon, or is empty.

link-name: Links must have discernible text (serious)
  Fix any of the following:
    Element does not have inner text that is visible to screen readers
    aria-label attribute does not exist or is empty
    Element has no title attribute
  <a href="/profile"><svg>...</svg></a>

Common causes

An icon or image link has no text alternative

The anchor wraps only an SVG or an image with no alt, so there is no readable link text.

The link text is empty or whitespace only

A link rendered with no children, or only non-breaking spaces, exposes no name to assistive technology.

How to fix it

Add an aria-label or visible link text

1. Give the anchor an aria-label describing where it goes.
2. For image links, add descriptive alt text on the image instead.
3. Re-run axe to confirm the link has a name.

<a href="/profile" aria-label="View your profile">
  <svg aria-hidden="true">...</svg>
</a>

Prefer descriptive text over "click here"

Meaningful link text helps both screen readers and the anchor-is-valid lint rule; avoid generic phrasing.

How to prevent it

• Ensure every link exposes a name, especially icon and image links.
• Use descriptive alt text for images inside anchors.
• Catch empty and ambiguous links with axe and jsx-a11y.

Frequently asked questions

Related guides

References

• GitHub Actions documentation