# 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! ### Working Examples You can take a look at the link in action on our [examples site](http://ebay.github.io/mindpatterns/navigation/link/). ### 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 [JavaScript HREF anti-pattern](https://ebay.gitbook.io/mindpatterns/antipatterns/javascript-href) 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 [Ambiguous Label](https://ebay.gitbook.io/mindpatterns/techniques/ambiguous-label) 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 [Open New Window anti-pattern](https://ebay.gitbook.io/mindpatterns/antipatterns/open-new-window) 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: 1. [Ambiguous Links](https://ebay.gitbook.io/mindpatterns/techniques/ambiguous-label) 2. [Links that Open in a New Window or Tab](https://ebay.gitbook.io/mindpatterns/antipatterns/open-new-window) ### 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 adding context to an ambiguous link, use [offscreen text](https://ebay.gitbook.io/mindpatterns/techniques/offscreen-text). 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 * *