Documentation/Links need accessible names

Links need accessible names

ZMD007

Ensure every <a> element has a non-empty accessible name that conveys its purpose and destination.

✅ Good

<a href="/privacy">Read our Privacy Policy</a>
<a href="/settings" aria-label="Settings"><svg aria-hidden="true"></svg></a>
<a href="/home"><img src="/logo.svg" alt="ZemDomu home"></a>

❌ Bad

<a href="/privacy"></a>
<a href="/settings"><svg></svg></a>

When: An <a> has no accessible name (no text, no aria-label/aria-labelledby, and no labeled content like img alt)

Warning: Link missing accessible name

Solution: Provide visible text or an accessible name via aria-label/aria-labelledby or labeled content (e.g., img alt)

Why it matters

Accessibility: Links without accessible names are announced without context, preventing screen-reader users from understanding link purpose :contentReference[oaicite:12]{index=12}.

SEO: Non-descriptive links offer little keyword context to search crawlers, reducing link value :contentReference[oaicite:13]{index=13}.

In brief

  • Goal: Make link destinations clear from each link's accessible name.
  • What to do: Provide visible text, aria-label/aria-labelledby, or labeled content (like img alt) for each <a>; avoid empty anchors or vague phrases.
  • Why: Users rely on link names to decide whether to follow them; empty or unlabeled links provide no context.

Intent

Prevent ambiguous or unnamed anchors so that assistive technologies can accurately convey link purpose, including icon-only links.

Benefits

  • Screen-reader users can list and activate links based on meaningful names :contentReference[oaicite:8]{index=8}.
  • Keyboard-only users understand where each link leads without surrounding context :contentReference[oaicite:9]{index=9}.
  • Search engines index link names as part of page relevance signals, boosting SEO :contentReference[oaicite:10]{index=10}.

Techniques

  • H30: Use <a> text that clearly describes its target per WCAG 2.4.4.
  • G203: Ensure the link's accessible name provides enough context to stand on its own.

HTML Semantics

The anchor's accessible name comes from its text content or from aria-label/aria-labelledby and labeled descendants like img alt; it must describe the hyperlink's function or target :contentReference[oaicite:11]{index=11}.

References

Tips & edge cases

  • Avoid vague texts like “click here” or “learn more”; instead, describe the destination :contentReference[oaicite:14]{index=14}.
  • Use unique link names for different links—even if they point to the same URL—to reduce confusion :contentReference[oaicite:15]{index=15}.
  • For icon-only links, prefer visually hidden text or aria-labelledby to visible text elsewhere; use aria-label if there is no other option :contentReference[oaicite:16]{index=16}.

See also