Labeling Links

Introduction

Links are an important part of web navigation, and how we design and label them affects the user experience. When using external links, it's especially important that users understand what happens when they click. This article covers how we should label links and which language and design principles we should follow. The goal is to create a more predictable and accessible user experience.

External links

External links take the user to another website or domain than the one they are currently on. When a user clicks an external link, they leave the original website and open content from another provider or service.

There has been inconsistency in how external links are marked across websites. Some use an icon to indicate an external link, while others add text or open the link in a new tab. This lack of consistency can create confusion for users, especially when they are not clearly informed about what happens when they click a link.

To create a predictable and good user experience, we should give users information about:

• The destination – where the link leads.
• Behavior – for example, whether the link opens in a new tab, or if it triggers a special action like a phone call or an email.

Text

Make sure the link text describes the purpose of the link. How you write the link text depends on the context. In running text, the link should be a natural part of the sentence and make sense even when read on its own. In a list or menu, the link can stand more freely, but it still needs to be clear and give the user a good idea of what to expect when clicking.

• Avoid using “go to” or “click here” in link text. It’s already obvious that it’s a link.
• Avoid using the word “link” in link text. Screen readers may then announce “link” multiple times.
• Don’t use only "Read more" as link text. Include context, for example: “Read more about the tax return at skatteetaten.no.”
• Keep link text as short as possible. Long underlined texts can be hard to read, especially when a link breaks across lines.
• Don’t use the link’s address (URL) as link text. It can be tedious for screen reader users to hear the full address read out character by character.
• Avoid having multiple links with the same link text on the same page. This makes it difficult for screen reader or braille display users when viewing the link list. The exception is if the links go to the same URL.

Link lists in screen readers

Screen readers allow users to navigate through a list of links. That’s why link text must make sense on its own, without additional context. Place the most important information early in the link text to clearly communicate its purpose.

Design and experience

Avoid links opening in new tabs

Links should not open in a new tab by default. This ensures a predictable experience and respects the user’s own browser settings. Many people use the back button if the link did not take them where they expected, which does not work if the link opened in a new tab. Some screen readers also do not inform users that the link will open in a new tab.

There are exceptions:

• If the system needs to log out the user when navigating to another site, and it's preferable to avoid logging out, the link should open in a new tab.
• When users are in the middle of a process and risk losing data by clicking a link. A new tab may be appropriate if the system cannot save the input.

If any of these exceptions apply, we avoid using an icon, and instead write it directly in the link text. For example: “Apply for support at nav.no (opens in new tab)”

Even if a link includes target="_blank", not all combinations of browsers and screen readers will inform the user that it opens in a new tab/window. Therefore, we recommend writing “opens in new tab” as part of the link text.

Appearance

The Norwegian Universal Design Authority provides information about required link appearance (uutilsynet.no). Users must be able to identify all links regardless of situation, ability, or device settings.

Avoid “external link” icon

There is an established icon that means “external link,” but it is often interpreted as “opens in new tab.” A small survey we conducted while writing this article showed that even experienced designers were unsure about the meaning of the icon commonly used to mark external links. Half thought it meant “opens in new tab,” while the rest thought it meant “external link.” This shows that the symbol is ambiguous and not reliable as the sole indicator of function.

Using the icon can mislead users, especially if the link does not actually open in a new tab. If the main purpose is to indicate that a link leads to an external site, it is more effective to communicate this in the link text instead of relying on an icon alone.

If the link texts become very long, or if link lists feel noisy due to repeated information about external links, it can be tempting to use icons instead to simplify the design. Before doing so, consider whether users really need this extra information. If it is part of a natural flow or similar context, the user may not perceive it as being taken out of context. In that case, the external link information may be unnecessary.

If you still use an icon, be aware that different users interpret it differently, as it is currently used for both external links and opening in a new tab.

If the icon contains meaningful information that is not present in the link text, this must be conveyed via the icon’s alt text.

Destination

It's not always necessary to explicitly label a link as external. Often this is clear from the context. For example, if the link text is “Flekkefjord kommune,” users will naturally expect it to lead to the municipality’s website. In such cases, extra labeling is unnecessary.

If the link points to specific content on the municipality’s site, such as parking information, the link can be "Parking in Flekkefjord kommune" or "Parking (flekkefjord.kommune.no)." The most important thing is that the user is not surprised by where the link takes them.

Links to files

Make it clear that the link points to a file:

• Indicate the file type
  • Include the file type in the link text
  • Don’t rely on an icon alone to show file type
• It's a good idea to include the file size in the link text, especially if the file is large. This gives the user better control, as they can decide whether it's a good time to download the file. For example, if they're on mobile data, have a poor internet connection, or limited storage space.

Files for download

If the link leads to a file that should be downloaded instead of opened in the browser, make sure to include the download attribute with a filename that indicates the file type, e.g. download="annual-report.pdf"

Relevant sources

• WCAG 2.1: 2.4.4 Link Purpose (In Context) (A)
• WCAG 2.1: 2.4.9 Link Purpose (Link Only) (AAA)
• WCAG 2.1: 3.2.5 Change on Request (AAA)
• The Norwegian Universal Design Authority: Link Guidelines (uutilsynet.no)
• Screen readers don’t inform users that links open in new tabs – Powermapper study

Rediger denne siden på Github (åpnes i ny fane)