eBay

Link

A hyperlink (or 'link') points to a resource (URL) or to a specific element within a document (URL fragment).

Links are commands followed by humans and machines (a spider or crawler for example).

The web wouldn't be much of a web without links. Let's treat them with the respect they deserve by ensuring we never do anything silly to break them!

Links also form the foundation of certain progressive enhancement patterns (tabs, lightboxes, etc). In such cases JavaScript over-rides, or augments, the default behaviour of the link.

Working Examples

You can take a look at the link in action on our examples site.

Best Practices

Link text must never be 'click here'.

Link text must always adequately communicate the destination.

Links that share the same link text must all go to the same URL.

HREF attribute must always contain a valid URL.

HREF attribute must never be 'javascript:'. Please read the JavaScript HREF anti-pattern for more information and examples.

Link text must not be ambiguous to users of assistive technology. Offscreen text is the recommended approach to address this. Please read the ambiguous label anti-pattern for more information and examples.

Link must warn user if it will open in a new window or tab. An icon with alternative text is the recommended approach. Please read the Open New Window anti-pattern for more information and examples.

Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

Keyboard

Link must activate with ENTER key (not SPACEBAR).

Link must not prevent default scrolling behaviour of SPACEBAR and ARROW keys.

Screen Reader

Link must announce with role of 'link'.

Link must invoke using virtual cursor command (e.g. VO+SPACE in Voiceover).

Link must announce 'new window or tab' behaviour before click.

Developer Guide

There are two types of link that need extra care and attention:

  1. Ambiguous Links
  2. Links that Open in a New Window or Tab

FAQ

Should I use offscreen text or aria-label?

If adding context to an ambiguous link, use offscreen text.

If link tag is empty (e.g. if it displays an icon), use aria-label.

However, Voiceover on iOS has problems with empty link tags. Thus, for now, we recommend always using offscreen text.

Further Reading

results matching ""

    No results matching ""