Links without a name on Next.js
What this is
3 links have no text. Screen reader users hear just "link" and cannot tell where it goes; keyboard users see an empty focus box.
Who it affects
- Screen reader users
- Keyboard users
- People with cognitive disabilities
Standards
How to fix it
- Give the link visible text that describes its destination.
- For icon-only links add `aria-label="…"` or visually hidden text inside the link.
- Make sure the name says where the link goes, e.g. "Shopping cart" not "icon".
Example
Before
<a href="/cart"><svg aria-hidden="true"></svg></a>After
<a href="/cart" aria-label="TODO: describe where this link goes"><svg aria-hidden="true"></svg></a>Replace the TODO with the link destination, e.g. "Facebook page".
On Next.js
Update the `<Link>`/`<a>` children or add `aria-label`. Icon-only links need visually hidden text or `aria-label`.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.