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 role="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

Variables

None for links