Links

Tell users where they're going

Use descriptive link text. Rather than pasting in a "naked" URL or linking the phrase click here, for instance, name the item you're linking to. Imagine you're only hearing the linked text: does it accurately describe what you're linking to?

(Psst... If you'd like the handy arrow next to a link, ask the web team.)

Why use descriptive link text? It's more accessible for all our users:

• Users with screen readers may be tabbing through all the links on the page as a way to navigate quickly. Hearing "click here, click here, click here" is not descriptive or helpful.
• We aim to make our website easy to navigate and understand for all users, including stressed, distracted, or neurodivergent users. Good linking practice makes our website better. 

Reserve buttons for actions

Button text should be a short yet descriptive verbal phrase. A button action is more than opening or reading something — think requesting, contacting, and searching. If it's not an action, it should be a link, not a button.

Style links for accessibility (for developers)

• All links must have a state change of some kind on hover/focus (we recommend not overriding the default browser behavior for focusing on links).
  • For links that are buttons or icons, this state change may be purely color.
  • For all other links, this state change must not be purely color.
• The state change for text links will be handled based on the context of the link. 
  • All text links must be red (#cc0000), with some exceptions for text against dark or colored background.
  • Text links that are in paragraphs should be underlined, with a state change of losing the underline.
  • Text links that are standalone should be not underlined, with a state change of gaining an underline. This includes lists of items, headings, menu options, and search result titles.

Resources:

• Creating valid and accessible links (A11y Project)
• Demo: what a user with a screen reader hears (YouTube)

Next: Word List (style guide)