Link

What to do

• Clearly identify external links. The external link icon (icon-new-tab) is a good way to communicate that a link is external.
• Use unique, meaningful link text. Link text should explain the link’s purpose and help the user understand the link’s destination. Vague and repetitive text like “click here” or “read more” is unhelpful to those using screen-reading software. Screen-reading software collects all page links into a single list, and users typically start with that list. When they do so, they will not be able to tell the difference between links with similar wording.
• Simplify link placement in body text. A link requires mental effort, which affects readability. Reduce the number of links in a single sentence to simplify its message. Consider placing links at the beginning or end of sentences to improve readability.
• Link directly to the most relevant page. Avoid links to pages that require further user action to locate the intended information.
• Indicate nonpublic links that require authentication. This includes links behind a login or other authentication like a paywall.
  • Example: We’ve documented our research in the raw research notes (requires login).
• If you use an external link indicator, use it consistently for all external text links. If your project uses an external link indicator (like an icon), use that indicator for all text links across your site. If users learn to associate an external link with the indicator, they will also appropriately expect that text links without an indicator are not external links. Icon- or image-only links like social share buttons or logos do not need the same treatment as text links.
• Use rel="noreferrer" property on external links. Setting noreferrer on links prevents the browser from leaking information about the original web address.
• Indicate file type and size for links to non-HTML content. Whenever possible, create HTML pages instead of linking to files like PDFs. If you do link to a file, tell users ahead of time if the link may trigger a file download, and show the size and format of that file.
  • We recommend including this information at the end of the link. We recommend using the file type rather than a product name. 
  • Example:
    • GSA published a report, Transforming the American Digital Experience (PDF)
• Identify jump links in body text. Jump links (or in-page links) send the user to another part of the same page. This behavior can be unexpected in body text links. In these cases, use the link text like “jump to”, “above” or “below” to tell users that the destination is elsewhere on the same page. 
• Encode email and phone links. Some browsers don’t automatically display a clickable link for email addresses or phone numbers, so encode email and phone links with mailto: and tel:. Be sure to include the country code in phone numbers to support international users.
  • Examples:
    • <a href="mailto:program-team@agency.gov">program-team@agency.gov</a>
    • <a href="tel:1-800-555-1234">1-800-555-1234</a>

What not to do

• Don’t rely on only color to distinguish links. Site visitors should be able to distinguish text links from surrounding text. In most cases, include an underline or bottom border on text links, in addition to a consistent link color. Text links not distinguished with an underline need a contrast level of at least 3:1 with their surrounding text (the same as AA Large, or a USWDS magic number of 40) and should show an underline on hover.
• Don’t block external links with disruptive notifications. Allow users to follow external links without taking a separate action to acknowledge leaving your site. Roadblock notices, such as modals and dialog boxes, result in a poor user experience. Instead, communicate about a link’s destination through descriptive link text and external link indicators. 
• Don’t use generic link text. Vague text like “click here” and “read more” is confusing and repetitive, especially to people using screen readers. Link text should describe the destination and explain where users will go if they follow the link.
  • Don’t use the same link text for different URLs on the same page. Differentiate between links by using unique text for each.

Accessibility guidance 

• Allow keyboard navigation of links. Users should be able to navigate between links by using the “Tab” key. They should be able to activate a link by pressing the “Enter” key.
• Link hover state should be visible on focus. Users should be able to activate hover and focus states with both a mouse and a keyboard.

Links should be underlined. Exceptions to this are links that are in a navigation menu, record titles in a display card, or items in a filter menu. In these situations, the style is reversed and the item is underlined upon hover.

Links should always show a state change when hover (text underline) or focus (box outline) is active.

Default Text Link - THIS SECTION NEEDS DESIGN HELP

This is a link
<a href="#">This is a link</a>

If the background is white/light then the proper color is default: uva-blue-alt-dark.

If used on dark backgrounds, then use class="link-light" on the link tag:

Browse our ebook collections.

<a href="#" class="light-link">ebook collections</a>

In both scenarios, it is important that the contrast ratio meets WCAG 2.2 AA or even AAA compliance.