WCAG 3.2 indicates that content should be provided in a predictable format and that subsequently when a new tab is opened on a click that the user is made aware of this.

I have a webpage with a list of many links that open in a new tab. W3C recommends that either this is indicated in the link text or an indicator is provided on hover/focus. However, because of the extensive amount of links on the same page that require this, providing these options would significantly disrupt the design/UI.

Are there are other less visually intrusive ways to achieve this conformance without providing a pop-up or text warning for each link?

Also, are there other accessibility issues related to opening new windows/tabs?


You cross-posted this question on stackoverflow.com too. I answered it there with pretty extensive details but am including the answer here too to make it easier for others to find the answer.

The answer depends on the level of conformance you're trying to achieve. Most companies (and most country laws) require AA conformance. In fact, the guidelines say that AAA conformance should not be required.

Note 2: It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

However, that does not mean you shouldn't consider some of the AAA requirements. For example, having color contrast that's greater than 4.5:1 (1.4.6 Contrast (Enhanced)) or making sure your link text makes sense by itself rather than relying on the context around it (2.4.9 Link Purpose (Link Only)) are both great enhancements above AA conformance.

With regards to links opening in new windows, that falls under 3.2.5 Change on Request, which is a AAA conformance. So depending on the level of conformance you're trying to achieve, you might not have to conform to it.

If you only had a handful of links scattered throughout your site that opened in a new window, it would be nice to have a visual indicator that shows the link will open in a new window, and to convey that same information to screen readers. (See H83: Using the target attribute to open a new window on user request and indicating this in link text (HTML) as an example. You could also use an icon instead of text, but make sure the icon has the alt attribute or that you provide context to a screen reader via aria-label, aria-labelledby, or visually hidden text).

But if you do that, and then you have a page where most of the links go to a new window, the page might look cluttered with all the extra information. This is where you'd have to be careful. If you decide to have a general comment on that one page that says that all links open in a new window so that you don't need an icon next to each link, then you'd be failing WCAG 3.2.4 Consistent Identification, which is a AA requirement. That is, you'd have some pages with "new window" icons next to the links and another page without it.

So you need to decide if you want to indicate that a link opens in a new window (a AAA requirement) or not. As mentioned earlier, implementing some AAA requirements is a good thing. Just be consistent.

| improve this answer | |

So, to precise your demand, it would be something like wikipedia thing at the end of articles? ( Example : https://en.wikipedia.org/wiki/Supply-side_platform )

If yes, I think that showing it won't disturb that much. Or maybe implement something like Reference anchors to show a "list" of those links at the end of your articles ?

If you want to open new tabs, take care about NOT focus the web browser of the user to those new tabs. Or else 1) they'll loose the focus on your main website (which is not good) 2) it can create frustration since they're not in control at 100% of what's hapenning.

| improve this answer | |
  • so there's no way to handle this with aria or labels that don't visually appear on the screen? the visual is a lot more disorienting than it would be in the Wikipedia link. – Dog Feb 8 '19 at 15:04
  • 1
    What kind of visual icon do you have? Maybe you could change it to have something more "standard" according to web navigation. You could try to innove on this one, but it depends on your objective and you'll have to test a LOT. So check first ressources you have, then choose between innovation and "Web standard". – Rhevan Feb 8 '19 at 16:16

If this is for a web-only site, what about using two different underline styles on hover?

  • single (normal) underline for links that open in the same window
  • double-underlines for links that open in a new window

Or using one of the nifty hover states from http://ianlunn.github.io/Hover/. The speech bubbles are interesting

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.