Navigation

Link

Available

The fundamental yet nuanced link. Explains why you should use the a element instead of a div with onclick.

What is a Link?

A link is a component for navigating to another page or location. On the web, <a href="..."> is the dedicated element for this purpose. Simply using it gives you navigation, keyboard support, context menus, and the ability to open in a new tab — all for free.

Why Does Accessibility Matter?

First and foremost, links and buttons serve different roles. Confusing them leads to a confusing experience for users.

	Link `<a href>`	Button `<button>`
Role	Navigate to another location	Perform an action in place
Activation key	`Enter` only	`Enter` and `Space`
URL	Yes (new tab / bookmark)	No

Using a "link-like <span>" leaves the following people behind:

Keyboard users. A <span> cannot receive focus via Tab, making it impossible to navigate to.
Screen reader users. It won't be announced as a "link" and won't appear in the links list.
Everyone. Right-click "Open in new tab" and bookmarking won't work because there is no href.

Live Demo (Recommended Implementation)

The link below follows APG/HTML best practices.Without using a mouse, try pressing Tab to focus it and Enter to follow it. Also verify that right-clicking shows "Open in new tab."

Native anchor element link

For details, see theARIA Authoring Practices Guide (opens in a new tab).

Try it: Tab to focus → Enter to navigate. Right-click shows 'Open in new tab.' Space does NOT navigate (which is the correct behavior for a link).

Tip

When a screen reader focuses this link, it announces something like "ARIA Authoring Practices Guide, link," including the "link" role. Many users browse by scanning a list of all links on the page, and using <a> ensures the link appears correctly in that list.

Keyboard Interaction

Key	Action	Priority
`Tab`	Move focus to the next / previous link	Required
`Enter`	Navigate to the link destination	Required

Note

Links are activated only with Enter; Space does not navigate (this is the correct behavior). When you use <a href>, this behavior is provided automatically without writing any code.

Required WAI-ARIA Roles and Properties

Target	Attribute / Role	Meaning
Link (recommended)	`<a href="...">`	The link role, focusability, and Enter activation are all automatic. ARIA is generally unnecessary.
Opens in a new tab	`target="_blank" + rel="noopener noreferrer"`	Opens in a new tab. rel prevents security issues. Indicate "new tab" in the link text.
Only when substituting with span, etc.	`role="link" + tabindex="0" + key handling`	Normally unnecessary. Using <a> requires no additional attributes, so avoid this approach.
Icon-only link	`aria-label="..."`	Provides a descriptive name for a link that has no visible text.

Implementation: Recommended Pattern (Good)

Good / Recommended

For navigation, use <a href>. That's all you need — everything is built in.

<!-- Use a link when navigating to another location -->
<a href="/about/">About Us</a>

<!-- When opening in a new tab, state the purpose and add rel -->
<a href="https://example.com/"
   target="_blank"
   rel="noopener noreferrer">
  Guidelines (opens in a new tab)
</a>

Note

Avoid ambiguous link text such as "Click here" or "Learn more." The link text alone should convey the destination (screen readers sometimes extract and list links out of context).

Anti-pattern (Bad)

The example below is a <span> with just an onclick handler, styled to look like a link.It works with a mouse, but is unreachable by keyboard, and right-click or new-tab functionality is missing.

A broken link built with span

For details, see theARIA Authoring Practices Guide.

Try it: Tab cannot reach it, and right-click 'Open in new tab' is unavailable. Screen readers do not recognize it as a 'link,' and it won't appear in the links list.

<!-- ❌ Anti-pattern: a span styled as a "link" using onclick -->
<span class="link" onclick="location.href='/about/'">
  About Us
</span>

Bad / Avoid

Problems with this implementation:

Cannot be focused with the keyboard — a span is not a Tab stop.
Not recognized as a link — it won't appear in the screen reader's links list.
No right-click / new tab / bookmark support — because there is no href.
Middle-click and ⌘+click for new tab also fail — all standard browser conveniences are lost.

Tip

Conversely, using a link for an in-place action is also incorrect. Choose by role, not appearance: navigation = <a href>, action = <button>.

Implementation Checklist

Navigation elements use <a href="...">
Link text alone makes the destination clear (avoid "click here")
Links that open in a new tab indicate this in the text and include rel="noopener noreferrer"
Icon-only links have an aria-label
Links are focusable with Tab and focus is visible
Actions use <button> instead of links

Source (English):Link Pattern — W3C APG(opens in a new tab)