Text

Links

Published on

Description

Links navigate the user to a new page or resource. Use <a href> for navigation — never <button> or <div>. Links styled as buttons should still be anchor elements.

Example

Open in new tab
View HTML markup 
  <p><a href="#">link</a> <a href="" aria-current="page">link (current page)</a> <a href="https://example.org" rel="noopener" target="_blank">link (external)<span class="visually-hidden">(opens in new tab)</span></a></p>
<p><a href="#" class="force active">link (active)</a> <a href="#" class="force focus">link (focus)</a> <a href="#" class="force hover">link (hover)</a> <a href="#" class="force visited">link (visited)</a></p>

Example (button)

Open in new tab
View HTML markup 
  <div class="group"><a href="#" class="button">verb</a> <a href="#" class="button force active">verb (active)</a> <a href="#" class="button force focus">verb (focus)</a> <a href="#" class="button force hover">verb (hover)</a> <a href="#" class="button"><svg class="icon" aria-hidden="true">
      <use href="/img/icons.svg#search"></use>
    </svg><span class="visually-hidden">Verb</span></a> <a href="#" class="button"><svg class="icon" aria-hidden="true">
      <use href="/img/icons.svg#search"></use>
    </svg><span>Verb</span></a></div>

Accessibility

  • Links must be underlined in body text. WCAG 1.4.1 requires visual distinction beyond color alone.
  • Links activate on Enter; buttons activate on Enter and Space. Using the wrong element breaks keyboard expectations.
  • Do not use aria-label on links — it is not translated by browser translation services and is ignored by read-aloud tools.
  • Do not wrap <figure> elements in links or split link text across multiple elements.
  • Use aria-current="page" on links matching the current page.

References

  • Buttons — for in-page actions
  • Tag — for category links

Variables

None for links