Documentation/Links need href

Links need href

ZMD010

ZemDomu reports an <a> element with a missing or blank href. Use a non-empty destination for navigation, or use a <button> when the control performs an action instead of navigating.

What this rule catches

  • Supported anchor elements with no href attribute.
  • Static href values that are empty or contain only whitespace.

What static analysis cannot prove

  • Static analysis cannot prove that a non-empty URL resolves, is safe, or leads to the destination promised by the link text.
  • Dynamic href values may require rendered interaction testing when their final value is unavailable in source.

Standards classification and detection confidence

Classification
advisory — The rule enforces a clear source convention: use anchors for navigation and buttons for actions.
Detection confidence
high — A missing or blank static href is deterministic. Static analysis cannot infer every router abstraction or event-driven navigation contract.

Applicable WCAG 2.2 criteria

No direct WCAG 2.2 success criterion.

WCAG 2.2 does not require every a element to have href. When an anchor operates as a link, keyboard behavior and link purpose criteria become applicable.

Normative means the rule checks a machine-testable part of a cited standards requirement. Advisory means it enforces a documented authoring convention or supporting technique. Neither classification makes a ZemDomu result proof of WCAG conformance.

Examples

✅ Good

<a href="/learn-more">Learn more</a>

❌ Bad

<a>Learn more</a>

React and Vue notes

React/TSX
For client-side routing components, verify the rendered output and navigation behavior when the source does not expose a native <a href> directly.
Vue
For router-link and other navigation components, verify the rendered anchor and destination when the source does not expose a native <a href> directly.

Quick summary

When: An anchor tag lacks an href or it is blank

Warning: <a> tag missing non-empty href attribute

Solution: Add a valid href value

Why it matters

Accessibility: Anchors without href are skipped in focus navigation and not announced as links.

SEO: Search engines only index <a> elements with href, so missing href undermines discoverability.

Rule details

In brief

  • Goal: Ensure anchor elements are recognized as links by browsers and assistive technologies.
  • What to do: Add a valid URL or fragment value to each <a> via the href attribute.
  • Why: Without href, anchors lack focusability and are not announced as links.

Intent

Prevent misusing <a> tags as non-link elements, maintaining both accessibility and semantic correctness.

Benefits

  • Keyboard accessibility: anchors with href are included in tab order.
  • Screen-reader clarity: links announce their presence and destination via href.
  • Usability: users expect clickable text to navigate to resources.

Techniques

  • WCAG G203: Ensure <a> elements have an href attribute per WCAG 2.4.4.
  • axe-core rule: href-no-hash: Disallow anchors without valid URIs or URL fragments.

HTML Semantics

The href attribute on <a> defines the hypertext link; without it, the element does not represent a hyperlink.

References

Tips & edge cases

  • Avoid using <a> without href; if you need a button, use <button> instead.
  • Validate your code with axe or pa11y to catch missing href values automatically.

See also

Related guides

Last verified: