Link

Link text

Links should be used for navigation. Therefore, link text should indicate what opens when users select it, so make it specific. When possible, match the link text to the title of the page that opens.

Avoid generic language like Learn more or More information. If link text is generic, users can run into problems:

• Users don't know what the link text means, so they have to select it to find out.
• Screen reader users who navigate a page by tabbing between links will not get a sense of what's on the page or where the links go.

Punctuation

Write standalone links without ending punctuation, even when they're full sentences.

Placement

When possible, avoid mid-sentence links. They can distract users and slow down users who scan because they have to stop and read the text on either side of the link. Try to place links at the end of a sentence.

Localization

Try to make the link text a full sentence. This might require some rewriting, but it will help translation teams get the link text right in other languages.

Requirements

Users should be able to:

• Use a link to navigate to another page or skip to content within the page.
• Identify the purpose of the link from its text alone.
• Identify where the link will navigate to.

Interactions

Mouse interactions

• Users should be able to right click on a link to open up an options menu.
• Users should be able to click and drag a link.

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the link.
• Enter. Activates the link and moves focus to the top of a new page, or to a location within the same page.

Design considerations

• Links should be distinguishable from other text on the page using a visual cue other than color.
• Underlining is a good way to identify links, as it offers additional visual cues and is common across the web.
• All links that open in a new tab should have clear text letting the user know it opens a new tab.
• Opening new tabs can be disruptive and disorienting for some users.
• Use meaningful link text that accurately describes the purpose of the link.
• Avoid repetitive use of the same link text or ambiguous link text.

Development considerations

• Make sure that all links have a href, otherwise they will be announced as static text to screen reader users.
• Where links have icons, make sure the icons are hidden from screen reader users.