Anchor (<a>)

When To Use

Anchors or often called links serve to establish a link to a webpage, file, email address, location within the same page, or any other destination that can be identified by a URL. ¹

Rules

The link text should indicate where the link goes. Don‘t use an unspecific link text like "click here" or "here". ²
- What you can do, is adding a link to a part of sentence as long as the link text makes sense without the surrounding sentence like so. See examples. ¹
- It is acceptable to link a complete sentence, although it is best to avoid doing so for longer sentences. ²
Whenever a link directs the user to a new tab/window or to a resource that is not in HTML format, such as a PDF file, it is important to clearly indicate this. See examples below for two possible ways. ¹
In cases where the design of a webpage does not permit the use of descriptive link text, it is recommended to use ARIA attributes such as aria-describedby, aria-label, and aria-labelledby to generate descriptive link text. ²
- It should be noted that assistive technology regards an ARIA description as supplementary to the link text, whereas an ARIA label is considered to replace the link text. Therefore, links that have ARIA labels may result in a suboptimal experience for users of speech recognition software. ²
It is not recommended to utilize Anchor elements as simulated buttons, such as by assigning their href attribute to # or javascript:void(0) in order to prevent the page from reloading, and subsequently listening for their click events. ²
Here are some recommendations as to when to use a button or a link:
- Use a Link when:
  - the it takes you to another page or resource (document to download, mail address,... ). ³
  - you need no JavaScript. ³
- Use a Button when:
  - it changes something on the current page, like opening a section of a page. ³
  - you need JavaScript to implement the functionality. This is not always true but a good heuristic. For example buttons in forms don‘t require JavaScript. ³
As a general guideline, it is advisable for content editors to refrain from using images as links. ²
Webpages should not display multiple links to the same destination in close proximity to one another. This can sometimes occur when an image link and a "more" text link are positioned next to each other. In such cases, it is important to ensure that these two links are treated as a single link. ²
Links on a webpage can be styled using various colors. However, relying solely on color to distinguish links is insufficient for ensuring accessibility. As a general guideline, webpages should incorporate non-color elements to indicate the presence of links. ²
- One effective way to provide a non-color indication of links is to underline them (not solely on hover, but at all times). ²
- Or by adding an Icon to the link. ²
- There are some designers who may prefer not to use a non-color indicator for links that is only visible upon hover. While the Web Content Accessibility Guidelines (WCAG) do allow for this, the requirements for doing so are very strict. ²
You can use aria-current to mark a link as currently active. Set the active link for example to "page", "step" or "true", depending on your use-case. ⁴

Examples

A link as part of a sentence: ¹

<p>Learn more <a href="/html-articles">about HTML elements</a>.</p>

A link that opens a new tab. The link text explicitly states this: ¹

<a target="_blank" href="https://unconditional-gaming.com/">
  Unconditional Gaming
</a>

A link that opens a new tab. It includes an icon with an alt text that states this: ¹

<a target="_blank" href="[https://unconditional-gaming.com/](https://unconditional-gaming.com/)">
  Unconditional Gaming 
  <img alt="(opens in new tab)" src="newtab.svg" />
</a>

Sources

MDN: <a>: The Anchor element by Mozilla contributors is licensed under CC-BY-SA 2.5
MDN: aria-current by Mozilla contributors is licensed under CC-BY-SA 2.5

Created at: 10.03.2023, Last updated at: 11.06.2023