Link

Links are plain text with visual cues that indicate interactivity. It is a primary means by which users click to move within or around different sites. Using links on a page enables users jump to other parts of the website or a different website for related, supplemental information.

On calgary.ca and related websites, there are typically 2 types of links; internal and external. Internal links are links that take the user to another page on calgary.ca while external links are links that lead users to pages on another website. Additionally, calgary.ca and related websites sometimes contain digital documents & media files such as PDF, Word or Powerpoint files.

Consider the following when designing links:

• colour and underline the links to suggest clickability (can be omitted when used in navigation menus)
• provide visual feedback for different states of the links:
  • default/unvisited
  • visited
  • hover

Set clear expectations with links:

• clearly explain where the link will take users to
• link text must be understandable outside of the page context

Allow links to open in a new window for the following situations:

• when link interrupts user's current task flow
• when link opens other format documents, such as a PDF

Where possible links should open in the same tab because: 

• More windows or tabs increase the clutter of the user’s information space and require more effort to manage.
• New windows or tabs can cause disorientation, with users often not realizing that a new window or tab has opened. This problem is exacerbated on mobile, where the old window is never visible.
• Less-technical users struggle to manage multiple windows and tabs, especially on mobile. (On tablets, where users can have both multiple windows and tabs for the browser, it’s even more confusing.)
• New windows or tabs prevent the use of the Back button for returning to the previous page and force the user to spend effort to find their way back to the previous content.
• New windows or tabs are not inclusive for blind or low-vision users — especially when they open outside of the area that’s magnified.

Open links in a new tab when: 

• The page contains context-sensitive information that will significantly disrupt a multi-step workflow such as help instructions, filling in and submitting a form
• The user is logged into a secured area of the site and the link leads to an unsecured portion of the site
• The user is logged into a secured area of the site and the link would terminate the user's logon. This allows users access such resources while keeping their login active in the original tab
• Users need to compare information or refer back to the site while browsing

Accessibility considerations: 

• Ensure that users who rely on screen readers and keyboard navigation can easily understand and control how links behave
• Use default same-tab behaviour unless there is a clear reason to open in a new tab.
• Inform users when a link opens in a new tab or window. Add visible text (e.g., “Opens in a new tab”) or use icon indicating external link () with alternative text to announce it for screen readers
• Ensure screen readers announce links correctly. Use clear link text that describes the destination and purpose.
• Keep navigation simple. Users should easily return to the previous page without getting lost.
• Maintain focus for keyboard users. Ensure focus moves correctly when opening a new tab.