WAVE "Empty link"

What’s actually happening

A screen reader hits the anchor and says "link" — that's it. No destination, sometimes just the raw href read out character by character. WAVE flags the <a> because nothing inside it reaches the accessibility tree: an icon font, an inline SVG with no label, an empty span used as a JS click target. Sighted users see a recognizable glyph; a screen reader user pulling up the links list gets a stack of identical "link, link, link" with no way to tell them apart. Keyboard users tabbing through hit a focus stop that announces nothing.

Common causes

• Icon-only links where the icon is an icon-font <i> or inline <svg> with no accompanying text and no label.
• Image links whose <img> has no alt, so the anchor wraps something but holds no text node.
• An anchor holding only a CSS ::before glyph or whitespace — neither counts as an accessible name.
• An empty <a> used purely as a JavaScript hook (a card overlay, a tracking pixel link) that was never given a name.
• Link text hidden with display:none or visibility:hidden, which strips it from the accessibility tree along with the visual layout.

How to fix it

1. Put real text in the link when the layout allowsThe cleanest fix and the one that helps everyone: write text inside the anchor. <a href="/cart">View cart</a>. If the design is genuinely icon-only, keep the text and clip it with an sr-only class (position:absolute; clip-path) rather than display:none, which would hide it from screen readers too.
2. Give icon-only links an aria-labelFor a glyph with no room for text: <a href="/cart" aria-label="View cart"><svg aria-hidden="true">…</svg></a>. The aria-label becomes the accessible name; aria-hidden="true" on the icon stops it being announced on top. Describe the destination, not the shape — "View cart", not "shopping cart icon".
3. Add alt to the inner image on image linksIf the anchor wraps an <img>, that alt becomes the link's name: <a href="/"><img src="logo.svg" alt="Home"></a>. Describe where it goes, not what the picture looks like. This clears Empty link and the image-alt rule in one change.
4. Don't ship empty anchors as JS hooksAn <a> with no href and no text used only to catch clicks is both an accessibility bug and a focus trap. Either make it a real <button> with a label, or if it's an overlay link give it an aria-label naming the target. A link that goes nowhere and says nothing has no business in the tab order.
5. Re-scan and listen to the linkRe-run WAVE; the Empty link error should drop. Then tab to the link with a screen reader on and confirm it announces your text, not "link" or a URL. Pull up the rotor/links list and check it reads as a sane index of destinations.