eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Working Examples
  • Best Practices
  • Interaction Design
  • Developer Guide
  • ARIA Reference
  • FAQ
  • Further Reading
  1. Navigation

Link

We use links to navigate between URLs.

PreviousFake TabsNextPagination

Last updated 4 months ago

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!

Working Examples

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

Best Practices

Link text must not be "click here".

Link text must 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 for more information and examples.

For links with labels that are not unique to the page (e.g. 'Add to Cart', 'Edit' or 'Delete', see the technique.

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 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 announce state of "current" if the HREF matches the current window URL.

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

Link must announce "new window or tab" behaviour.

Developer Guide

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

ARIA Reference

  • aria-current: used to indicate that this link represents the current page (aria-current="page").

FAQ

Should I use offscreen text or aria-label?

If link tag is empty (e.g. if it displays an icon and has no inner text), use aria-label. However, Voiceover on iOS has problems with empty link tags. Thus, for now, we recommend always using offscreen text.

If the link contains an image with embedded text, the image must have alt text.

Further Reading

If adding context to an ambiguous link, use .

examples site
JavaScript HREF anti-pattern
Ambiguous Label
Open New Window anti-pattern
Ambiguous Links
Links that Open in a New Window or Tab
offscreen text
http://webaim.org/techniques/hypertext/hypertext_links
https://www.scottohara.me/blog/2021/05/28/disabled-links.html