Although there is no specific WCAG rule regarding external links (links which lead to pages on sites other than the one the user is currently present on) and how they should be handled, one can argue that they are covered under SC 2.4.4:Link Purpose (In Context). Equalize Digital’s excellent Accessibility Checker for WordPress flags errors on external links which don’t announce as “opens in new tab”, “or opens in new window”. The reason being that leaving the current window might be unexpected or confusing for the user, and as such, you should warn them. There are two aspects to this:
- A visual indicator (for sighted users)
- An audible warning (for screen reader users)
Visual Indicator
A visual warning can be achieved by using an icon. The generally accepted and recognized one is an arrow pointing up and to the right, inside a square (as seen after some links in this post). You can use a background image, or an icon font, along with a CSS :after selector. Here is the code we use on this site for the latter:
main a[target="_blank"]:after {
font:normal normal normal 12px/1 FontAwesome;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
content: "\f08e";
display: inline-block;
vertical-align: middle;
color:#333;
margin-left:.25em;
}An Audible Alert
There are several ways to accomplish this. The one we recommend is to use an aria-label attribute on the link, and add “opens in new tab” (or window) to it. We’ve created a jQuery snippet which automates this process:
// Find links which open in new tabs and add a warning
$('body a[target="_blank"]:not([aria-label])').each(function (i, el) {
$(el).attr("aria-label", el.textContent + " - opens in new tab");
});What that does is search through your page, find any link with the target “_blank” which doesn’t already have an aria-label attribute, and create one using the link text plus the alert. The end result looks like this:
<a href="https://duckduckgo.com/" target="_blank" aria-label="DuckDuckGo - opens in new tab">
DuckDuckGo
</a>Note: if you have links in your site which open in new tabs AND already have an aria-label, you will have to manually add the alert. The reason behind this is there are times when you may want to use different text for the aria-label, particularly when it comes to links with text like “Read More”.
Happy Coding.