Breadcrumb
  1. Home
  2. Design System
  3. Components
  4. Link

Link

A link connects users to a different page or website.

Where it goes: On text inside other components

Use: Direct a user to a different page or a different location on the same page

Accessibility notes

Use descriptive, meaningful text so that screen reader users (and all users) will know where the link will take them.

Never leave a URL un-hyperlinked unless a platform doesn’t allow for hyperlinking (Twitter, Instagram). It’s also important for Section 508 compliance. People who use screen readers don’t want to listen to a web address read aloud.

For the same reasons, avoid:

  • Follow this link
  • Click here
  • Read more

These terms don’t tell a reader what they’ll get if they select the link.

Amount of Links

Be careful not to use too many links. They can distract users. When a webpage contains multiple links to the same item, the link label must be the same. Conversely, when linking to different items, the link labels must be different.

Downloadable Files

When linking to a file, the content management system (CMS) will automatically add the file type and size (ex: PDF – 65 KB) after the link text.

This doesn’t work if the URL doesn’t contain “pdf,” so you would need to add the file type and size manually.

Files names should:

  • Not have any special characters, spaces, or extra periods
  • Use only lower-case letters
  • Be fewer than 30 characters
  • Use dashes to separate words (not underscores)

Convert PowerPoint (PPT) files to PDF, except for those meant to be templates.

Linking format for images, video, and audio files

Use the same linking format as for downloadable files. Don’t use an image as a stand-alone link. Instead, use explanatory text as the link.

When linking to a third-party video site (such as YouTube), include the title and length of video.

Linking to external webpages

Use the title of the page, followed by the name of the source organization.

If the title of an external webpage is not in title case, apply title case for the link anyway.

Links to external websites will automatically have an arrow icon added at the end of the link.

Linking to email addresses and phone numbers

Spell out the email address as the link text or use the word email next to the name: john.smith@hrsa.gov or email John Smith.

For phone numbers, use tel to make the phone number a callable link: HRSA’s press office can be reached at 301-443-3376.

Example

This is a text link on a light background.

This is a visited link.

This is a link that goes to an external website.

This is a text link on a dark background.

This is an alternate external text link on a dark background.

Date Last Reviewed: