When to open links in a new tab

Consider carefully before setting a link to open in a new tab.


This document was produced in cooperation by DoIT Communications and the Center for User Experience.


In order to comply with the standards specified in the UW-Madison accessibility policy, we consider our design decisions with accessibility in mind.

Setting a link to open in a new window or tab changes the way-finding or navigation of the web browsing experience for users and can have disorienting effects for users with disabilities. Some users are unable to perceive the change and may not understand that they can’t use the “back” button on their browser to return to previous content.

Good accessibility practices discourage opening in a new window or tab unless the source page of the link includes a reference, interaction, or resource the users must use in order to complete a task on the newly opened tab or window. Consider the decision of whether to open a link in a new tab or window based on user needs.

Examples

Consider opening a link in a new tab or window when doing so meets user needs as in the following cases:

  • The link is on a page in which we embed playable media. In this case we want to avoid taking them away from the current page, to avoid interrupting playback
  • Users might lose work in the current page if clicking a link takes them to a new page, for example, when completing a web form or following step-by-step technical documentation. (In which case a warning message modal is also encouraged to notify the user of how to save their data.)
  • There is a checklist or instructions the user must reference in order to complete a task on the new tab or window.

Include warnings

When you do set a link to open a new tab or page, please add a warning such as ”opens in new tab” following the link text. Where visible warnings aren't appropriate, you can add invisible ones with a simple HTML edit. Use the aria label attribute to add to your links custom link text that will only be read by devices like screen readers. 

Note: the aria label attribute overrides the link text entirely, so be sure that your aria labels contain both meaningful link text AND a warning, e.g., aria-label="Google search - link opens in a new tab."

Following is the HTML for a link to Google search with an aria label attribute:

<a aria-label="Google search - link opens in a new tab" href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google search</a>

Sources

  • https://www.w3.org/TR/WCAG20-TECHS/G201.html 
  • https://kb.wisc.edu/59343 
  • https://www.section508.gov/create/applicability-conformance 
  • https://knowbility.org/blog/2019/links-opening-new-windows-no-warning/ 
  • https://css-tricks.com/use-target_blank/




Keywords:href target attribute accessibility WCAG2 Section 508 usability user centered design links new tab page   Doc ID:104461
Owner:ERIK G.Group:DoIT Communications KB
Created:2020-07-29 12:11 CSTUpdated:2020-09-14 06:43 CST
Sites:Campus IT Accessibility & Usability, DoIT Communications KB, DoIT Help Desk
Feedback:  0   0