Link

The link component is used for navigation or as a trigger for downloads and menus. It provides useful information and increases references to the content. Links should always match the text size in your experience. Note that links with icons should be a minimum of 16 pixels. Be sure to match links and their accompanying icons in size as well. For example, if featuring a link with a 24-pixel font size, the icon should also be 24 pixels. Link font size should support full-screen magnification and is best supported by using responsive sizing (rem).

Inline links are placed in body copy and are used to indicate reference material, whether it opens a new tab, downloads a file, or acts as a trigger for tooltips or popovers. They are underlined and include an icon when the link opens a new window or downloads a document.

Standalone links are used for navigation and may feature an icon, but are not underlined except in a hover and focus states. Typically, standalone links are used for a navigation menu or within a list of links. If placed by itself, the link should feature an icon to help users anticipate which action it will trigger.

Links have the option to place an icon on the right or left side of the component. Icons are responsible to anticipate the action it will trigger and useful for accessibility purposes. In this situation, icons are used to indicate users they are navigating to another page, opening a new tab, or downloading a file.

Links change their color indicating different states: rest, hover, pressed, visited, or focus. These states are based on the user interaction with the link. Users can navigate through links either with mouse of keyboard. If using the keyboard control, the focus state will be highlighted. Pressing tab will move the focus to the next link, while shift + tab will move the focus to the previous link on the page. Hitting enter will press the link you are focusing on.

Do not mix the usage of links and buttons
Follow the guidance above regarding when to use each. Remember links are for navigating, not triggering actions. Misuse causes problems for keyboard and screen reader users who interact with these elements differently and will be confused if they hear them announced by the wrong role.

Make sure all links are unique and descriptive
Don’t use the word “link” in the text, since screen readers will announce it as a link anyway. Each link should accurately describe its purpose. While different links should have unique text, links to the same destination used across pages are an exception and should always use the same link text if possible.
WCAG 2.1: 2.4.4 Link Purpose (In context), 3.2.4 Consistent Identification

Standalone links that open a new window should give advance notice
This can be achieved via text, such as “(opens in a new window)”, or by using DDS’ dds__pop-up-arrow-corner icon, placed at the end of the link text and given an equivalent alt attribute for screen reader users. Example: alt=“opens in a new window.”
Exception: A page consisting of a list of external links. In this case, a clear heading designating it as a page of links should be sufficient to minimize cognitive confusion for users, avoiding the need for additional labeling.

Vertically-stacked (listed) links should have a line height of 24 pixels or greater
This guideline creates a minimum distance between touch targets for anyone who experiences difficulties with fine motor control. The simplest and easiest way to meet this guideline is to use the default body style (16 pixels with a line-height of 24 pixels) or larger.

If the links are the small variant (12 pixels) or use a custom type style, ensure they have a minimum 24 pixel line-height. While inline links are exempt from this requirement, styling them with 16 pixel default body or greater is still recommended.
WCAG 2.1: 2.5.8 Target Size (Minimum)

Images of text in links should be avoided; use actual text instead
Screen readers can’t read text that’s embedded in an image, so images containing text should not be used unless deemed absolutely necessary and supported with equivalent accessible text.
Exception: Logos are considered exempt (but still require an accessible text alternative).
WCAG 2.1: 1.4.5 Images of Text

All links within regular body text should use the inline (underlined) link style
This ensures that all sighted users can adequately distinguish the link from the text, regardless of their ability to see color.
WCAG 2.1 1.4.1: Use of Color

Link text
Link text should describe the page or experience the user is being navigated toward.
Do: Link the descriptive phrase or the place users will land.
Don’t: Replace link text with a URL.
Don’t: Use the phrases “click here” or “learn more”.
Don’t: Use the same link text in the same document to target different pages.

Word length
Link length is less important than linking a good description. Be concise while accurately describing the referenced page (or document).

Capitalization
For standalone links, use sentence case. Only capitalize the first letter of every word for proper nouns, document titles, or product names.
Do: Start gaming
Don’t: START GAMING

For inline links, use sentence case.
Do: Visit our homepage to start gaming.
Don’t: Visit Our Homepage to start gaming.

Writing links
Do: If a link opens a PDF, another window, or other forms of media, warnings don’t need to be written in the text link and can be illustrated with an icon.
Do: If a link downloads a file, write link text that indicates this action, as well as the file type.
Don’t: Link preceding articles (a, an, the) when linking text.
Don’t: Underline text that’s not a link.

Link punctuation
If a link comes at the end of a sentence or before a comma, don’t include the punctuation mark in the link.

Front load important keywords at the beginning of the link text.
Example: Shop Latitude laptops