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 apply the default body style (16 pixels with a line-height of 24 pixels) or larger to your stacked links.
If the links are the small variant (12 pixels) or have a custom type style applied, 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
