Links that open in new window
- Kim Collins (Unlicensed)
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