# Links do not have a discernible name: what it means and how to fix it **Audit ID:** `link-name` · **Category:** Accessibility > **Quick answer:** This audit fails when a link has no text a screen reader can announce, usually an icon-only link such as a cart or social icon. Fix it by adding an aria-label to the anchor, adding visually hidden text inside it, or giving an image inside the link real alt text. This Lighthouse audit fails when a link on the page has no text a screen reader can announce. The most common cause is an icon-only link: a magnifying glass, a cart, a social icon, a logo wrapped in an anchor. Sighted users see the icon. A screen reader reaches the link and says "link", or reads out the URL, which tells the user nothing about where it goes. ## TL;DR - **What:** One or more `` elements have no accessible name. - **Why it matters:** Screen readers announce these links as "link" or read the raw URL, so the user cannot tell what they do. - **Fix:** Give every link real text, or an `aria-label`, or visually hidden text. Never leave an anchor with only an icon inside it. ## What does the link-name audit check? Lighthouse runs the axe-core rule [`link-name`](https://dequeuniversity.com/rules/axe/4.12/link-name) against the rendered DOM. It computes the accessible name of each `` element that has an `href`, and fails the audit if that name is empty. The accessible name comes from the first of these that produces text: 1. `aria-labelledby` pointing at another element 2. `aria-label` on the anchor 3. The text content of the anchor, including `alt` text of any image inside it 4. `title` on the anchor If all four are empty, the link has no discernible name and the audit fails. The passing title reads "Links have a discernible name"; the failing one is "Links do not have a discernible name". ## Why do links without a discernible name matter? Screen reader users navigate by pulling up a list of every link on the page, out of context. That list is built entirely from accessible names. A nameless link shows up as "link", or as `https://example.com/cart?ref=header`, alongside a dozen others that look the same. It also affects: - **Voice control.** Users say "click Search" to activate a link. With no name there is nothing to say. - **WCAG conformance.** This is a failure of [SC 2.4.4 Link Purpose (In Context)](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html) at Level A, and it is one of the most common failures on the web. - **SEO, indirectly.** Search engines use anchor text as a relevance signal. An empty link passes none. ## How do I fix "links do not have a discernible name"? Pick whichever of these fits the markup. All four produce a valid accessible name. ```html ... Shopping cart Acme home Cart ``` The `sr-only` class, if your CSS framework does not already ship one: ```css .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } ``` Note the `aria-hidden="true"` on the icon in fixes 1 and 2. Without it, some screen readers announce the SVG's own title alongside your label, producing "Shopping cart, cart icon". Hide the decorative graphic and let the label speak. ## What are the most common causes on a real site? In a scan of 269 production storefronts, `link-name` failed on **67.3% of them**. The offenders were almost always the same handful of patterns: - **Social icons in the footer.** A row of anchors containing only an SVG each. - **The logo link.** `` with an empty `alt`, which is correct for a decorative image but leaves the link nameless. - **Icon buttons that are really links.** Search, cart, account, hamburger menu. - **Pagination.** Arrows rendered as `‹` and `›` characters, or as icons, with no label. - **"Read more" cards** where the whole card is an anchor wrapping an image with empty `alt` and the heading sits outside the link. - **Empty tracking anchors.** `` with no content at all. ## How do I fix this in React, Next.js, WordPress, or Shopify? ### React / Next.js Icon components usually spread props, so the label goes on the `Link`, not the icon: ```jsx // FAILS // FIXED