Components

Link

A link connects users to a different page or further information.

About the link

Links are used as navigational elements and can appear either on their own or inline with text. Too many links will clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly.

Usability guidance

  • Don’t rely on color. Site visitors should be able to distinguish links from normal text without relying on color alone. Include an underline or bottom border to clearly convey what text is linked.
  • Use unique, meaningful language. The text of the link should describe its purpose and help the user understand where the link will take them. Avoid generic link text (e.g., “click here,” “read more,” etc.), which can be confusing and repetitive, especially to screen readers. Also, don’t use the same link text for different URLS on a page.
  • Consider context when indicating external links. It’s not usually necessary to explain that a link will take users to a page on another site. If it will cause confusion to not indicate a link is external, specify where the link’s taking users within the content itself — either include the destination in directly in the content (for example, The CDC recommends against combining two disposable masks) or append the destination domain after the link in square brackets (for example, The latest recommendation is not to combine two disposable masks [CDC.gov]). If you include the destination in the link text, it will be read by screen readers.

    This method is preferable to using an external link icon, which is often interpreted as “share” or “open in a new tab.” We don’t recommend using it, unless it’s your agency’s preferred style.

  • Show file type and size. Tell users ahead of time if the link will trigger a file download, and show the size and format of that file (for example, Transforming the American Digital Experience [PDF; 1.2 MB]).
  • In-page links. If you’re using anchor links, clearly indicate that these links will scroll the user down on the same page by indicating where the user will go in the link text (e.g., jump to video resources) or including the anchor links under a descriptive title such as “In this article.”
  • Write out email and phone links. For mailto: and tel: links, be sure to write out email addresses and phone numbers so people can read them without having to click on them first (don’t hyperlink someone’s name with an email address or use the link text “email here”). Not all browsers will automatically display a clickable link when they detect an email address or phone number, so encode a link just in case. Include the country code in phone numbers in case the site visitor is international.

    Note: While displaying email addresses and phone numbers provides a better experience for users, it can increase things like spam for the recipient. Check with your IT security department on best practices for your agency.

    Here are some ways that could help mitigate the risk:

    • Use group emails so a specific individual’s email address isn’t compromised. This also means the email address can remain the same even as staff and organizational structures change.
    • Provide a contact form instead of showing email addresses when possible, to protect email addresses from harvesters and spam.
  • Use deep links. Send the user directly to the most topically relevant page instead of linking to a homepage or landing page and expecting them to find subpages.

Accessibility

  • Allow keyboard navigation of links. Users should be able to navigate between links by using the “Tab” key. They should also be able to activate a link when pressing ‘Enter’ on their keyboard. Users should be able to activate hover and focus states with both a mouse and a keyboard.
  • Set focus state on link target. When using smooth scrolling for in-page anchor links, make sure to set the focus state on the link target. Many third-party scripts fail to consider this behavior.

Using the link

Link settings

This component has no settings.

Link variants

Variant Description

usa-link--external

Display an external link icon after the link

Additional information

  • Policies for Federal Agency Public Websites and Digital Services (M-17-06)
  • Guidance for Agency Use of Third-Party Websites and Applications (M-10-23)
  • Package usage: @import usa-link
  • Requires: required, global