Links

Links are an important part of any website. They allow users to navigate to other pages or resources. The following examples demonstrate the difference from a properly built link and non-accessible alternatives and how they affect the user experience.

Span with on click event

Behavior
  • Needs JavaScript to work
  • Clickable with a mouse, finger or pointer device
Example: Home Page

Span with on click event and tab index

Behavior
  • Needs JavaScript to work
  • Clickable with a mouse, finger or pointer device
  • Has a visible focus indicator
Example: Home Page

Span with on click event, tab index and keyboard click handler

Behavior
  • Needs JavaScript to work
  • Clickable with a mouse, finger or pointer device
  • Has a visible focus indicator
  • Can be activated using the Enter key, but requires a manual keyboard handler
Example: Home Page

Span with on click event, tab index, keyboard click handler and "link" role

Behavior
  • Needs JavaScript to work
  • Clickable with a mouse, finger or pointer device
  • Has a visible focus indicator
  • Can be activated using the Enter key, but requires a manual keyboard handler
  • Is identified as a link by screen readers
Example: Home Page

Button with "link" role

Behavior
  • Needs JavaScript to work
  • Clickable with a mouse, finger or pointer device
  • Has a visible focus indicator by default
  • Can be activated using the Enter or Space (not default for links) keys without a manual keyboard handler
  • Is identified as a link by screen readers
Example:

Proper link

Behavior
  • Does not need JavaScript to work
  • Clickable with a mouse, finger or pointer device
  • Has a visible focus indicator by default
  • Can be activated using the Enter key without the need for a manual keyboard handler
  • Is identified as a link by screen readers
  • Enables certain browsers to display the target URL
  • Enables the contextual menu on right click with features like opening in a new window or tab
Example: Home Page