How to fix link name on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Audit all <a> elements in your component library. Any link containing only an icon, SVG, or image with no visible text must receive an aria-label prop/attribute.
2. For React: <a href='/cart' aria-label='View shopping cart'><CartIcon aria-hidden='true' /></a>
3. For icon components (SVG), always pass aria-hidden='true' on the SVG when the parent link already has an aria-label, to avoid double-announcements.
4. For image links, ensure the <img> has a descriptive alt attribute; if the link also needs a separate label, use aria-label on the <a> and set alt='' on the image to avoid duplication.
5. Add a linting rule (eslint-plugin-jsx-a11y rule: anchor-has-content + anchor-is-valid) to your CI pipeline to catch regressions automatically.
6. Run axe-core or Playwright accessibility audit as part of your automated test suite.

What is link name?

Every clickable link on a webpage must have a meaningful text label that screen readers can announce to blind or low-vision users. A "link-name" failure means a link exists on your page but has no readable text — it might be an icon-only button (like a shopping cart or social media icon), an image link with no alt text, or an empty `<a>` tag. The WCAG 2.4.4 criterion ("Link Purpose") requires that the purpose of each link can be determined from the link text alone, or from its immediate surrounding context. Without a name, a screen reader will announce something useless like "link" or read out the raw URL instead of telling the user where the link goes or what it does.

Accessibility failures like this expose your store to legal risk under laws such as the ADA (US), AODA (Canada), EAA (EU), and Equality Act (UK) — lawsuits targeting e-commerce sites for WCAG non-compliance have increased sharply year over year. Beyond legal risk, approximately 7–8 million screen reader users in the US alone cannot navigate or purchase from a store with unnamed links, directly costing you sales. Google's crawlers also use link anchor text as a ranking signal, so unnamed links pass zero topical relevance to the pages they point to, weakening your internal linking SEO. Fixing this is typically a quick-win code change that immediately improves both accessibility compliance and search engine crawlability.

See the complete Link name guide for every platform and the full background.