Links that open in new window

Link text should always indicate to the user:

• where the link will go
• whether the link will open in a new window or tab (i.e. has target="_blank")

Terminology

Target:

The target attribute identifies where the linked url will open. 

If no target attribute is supplied for a link, it will open in the same window by default. 

If the link should open in a new window or tab, the value of the target attribute should be "_blank", e.g.

<a href="http://google.ca" target="_blank">Google</a> 

External link:

A link to another website (i.e. any link not on toronto.ca), e.g.

<a href="http://google.ca">Google</a>

Note that although this link is external, it does not specify a target, so it will open in the current window.

Techniques

Inform users of the behaviour of links that open in a new window by adding an external link icon, with screen-reader only text indicating the link will open in a new window.

E.g.:

<a href="http://url.com/" target="_blank" class="link-new-tab">Link text<span class="sr-only"> Opens in a new window</span></a>

* Note the space before the "Opens in a new window" text, indicating to screen readers to pause between the words "text" and "Opens".

<a href="http://url.com/" target="_blank">Link text<img src="external-link-icon" alt="opens in a new window"></a>

Resources

WCAG Technique G201: Giving users advanced warning when opening a new window

Related WCAG Criteria

WCAG 3.2.2 On Input