Accessibility: Just don't open links in new tabs

Without fail, in my accessibility testing with blind users, links which open in new tabs (or windows, but that's less common these days) are a problem.

Often, there's no notification in the link that it will open in a new tab, as is required by WCAG Success Criterion 3.2.2 On Input. Other times, it's there but presented in an inaccessible way, such as the <title> attribute on the link. (Titles are a subject for a different post, but in short, don't use them, except on iframes).

However, I've consistently seen these links be a problem, even when the user is given a warning. Usually, this warning comes at the end of the link text. Blind users frequently listen only to enough of a link to determine whether it's what they're looking for, and follow it before their screen reader can read the "opens in a new tab" text. Or they mentally process the unique part of the link text and just don't notice the new tab warning, even if their screen reader speaks it.

So why are links that open in new tabs a problem? Blind users cannot see what has happened. Browsers don't give any notification to assistive technology that they've opened a new tab.

I've seen blind users in tests navigating for quite a long time through new tabs, not even realizing they're on a different site. Eventually they may realize that this isn't where they want to be, or I as the test supervisor have to tell them. Then, they struggle to navigate back to the previous page. They try to use the back button, but it doesn't work and they can't figure out why.

This is also a problem for low-vision users, as the browser tabs are often outside of the area of the screen they are currently viewing with magnifier software, so they can't see that a new one has opened.

So why do website owners open links in new windows? Because of the unfortunate, often-debunked idea, which has been hanging around since the internet began, that doing so somehow keeps people on their website. This idea hardly merits yet another debunking, but it still persists, despite being refuted since at least 1999.

Opening links in new tabs is useless in terms of helping blind and low-vision users understand that they've gone to a different website in any case. It just makes it harder for them to get back to yours.

So my recommendation is: just don't open links in new tabs. Even if they go to "other websites". (There are exceptions, which I'll cover shortly).

At WCAG level A, as previously mentioned, prior notification of links which open in new tabs is sufficient to satisfy Success Criterion 3.2.2 On Input.

Not opening links in new tabs unless necessary is an AAA requirement, covered under Success Criterion 3.2.5 Change on Request and described in Technique G200: Opening new windows and tabs from a link only when necessary.

Most websites are not required, and don't need, to meet WCAG level AAA. However, there are some AAA success criteria which are simple enough that I think all websites should strive to include them, and this is one of them.

All you have to do to meet it is not do something, namely program links to open in new windows. Links don't do that by default, it must be done deliberately by adding target="blank". If you already have links which open in new tabs, some simple remediation would be required to remove that attribute.

This doesn't degrade but improve the user experience. Users who want to open links in new tabs can, and those who don't, aren't forced to.

As described in Technique G200: Opening new windows and tabs from a link only when necessary, the exception is when not opening links in new tabs would harm the user experience. For example, a link to terms of use or a help page from a form. If users follow the link and it opens in the same tab, they will lose any data they've typed into the form.

In this case, links must inform the user they'll open in new tabs. Briefly, there are two options for doing so:

• Visible text at the end of the link text, e.g. Terms of use (link opens in new tab)
  • This is the best and most accessible option. It covers both sighted and blind users and is direct and easy to understand, as the information is given in text. If you choose this option, no further action is necessary.
• An icon for sighted users, combined with visually-hidden text for blind users. Note that new tab notifications must be present for sighted as well as blind users. A common mistake is to add visually-hidden text to these links and call it a day.
  • This is not a recommended option, as icons are less understandable than text. They suffer from other problems e.g. they don't scale along with the text if the user increases browser font size (unless perhaps you use an icon font, which have their own accessibility issues)
  • If you do choose this option, be aware of all the accessibility considerations that must go into it, e.g. adequate colour contrast for the icon, an accessible way of providing the visually-hidden text (not in a title or in an aria-label, etc.). This isn't the space for a full tutorial, but there is lots of information out there on coding accessible links.