A guide to best practice for creating accessible and usable links.
Link text should be descriptive and unique to the page
Ensure all linked text is highly descriptive, strongly indicative of the topic that will be found on the linked page, and succinct.
Avoid "click here" in your link text. User experiences are varied and not everyone "clicks" with a mouse. Instead, users might tap, use voice activation, eye-tracking, or keyboard navigation.
Remember, also, that space and colour on a page are not experienced the same way by users. Don't reference a link somewhere else on the page, such as "select the red button" or "use the link to the right."
Ensure link text is unique on page; where the same link text is used, it should link to same URL.
Bad link text: Learn more
Bad link text: To learn more about the history of Queen’s University, click here
Bad link text: Click the red button to the right
Good link text: Learn more about the history of Queen’s University
Best link text: History of Queen's University
Link colour and style
- Reserve the use of blue text for links.
- Reserve the use of the underline style for links (i.e. don't underline any content that isn't a link!)
Article – Nielsen Norman Group: Guidelines for Visualizing Links
Link target: do not force a link to open in a new window
Ensure all links open in same window. Do not add the attribute target="_blank" to force the link to open a new browser window.
Use of target="_blank" can result in too many browser windows being open at once, causing clutter, confusion.
Also, when a link opens in a new window, the "back" button is not enabled, so once a user moves to this new page they cannot easily return to the previous page.
Remember that users experience web content in different ways. We do not want to prevent a user from controlling their own browser, keyboard, and mouse options and preferences. Users can already use a right click on the mouse to open a link in a new tab or window; you don't need to decide this for them.
Article – Nielsen Norman Group: Opening Links in New Browser Windows and Tabs
W3C Working Group Notes – Opening new windows and tabs from a link only when necessary; Giving users advanced warning when opening a new window
Don't links headings
Don't link a heading and then provide context for the link below that link. Instead, provide some introductory or "teaser" content to introduce a topic and then link the user to more information with meaningful link text
Betty's butter
Betty Botter bought some butter, but she said, "The butter’s bitter. If I put it in my batter, it will make my batter bitter.
Betty's butter
Betty Botter bought some butter, but she said, "The butter’s bitter.
Learn more about Betty's butter
Lists of links
- Write meaningful headings for lists of links: When grouping links together in navigation, avoid non-specific headings such as "Important links" or "Useful links" or "Quick links." Instead, find a heading title that provides context for the links.
- Where you have more than 8 or 10 links, group the links under themes, or organize them chronologically or alphabetically. Where you have a very long list of links to offer, consider using accordion containers to keep your pages clean and easy to skim.
- Indicate when you are linking to an external site: When linking your reader to a page off your site, it is sometimes helpful to let the reader to know that you are sending them off your site. i.e., "Learn more about xyz on the Queen's Gazette website"