3 Ways to Make`target="_blank"` Accessible

I was writing a static page for an open source project recently and I wanted to insert some links. Personally, I prefer the links that pop up in a new window. That way I can have one bajillion tabs open at once, like usual. (You shouldn't always write this attribute and personal preference is not a great reason to use it, as I have learned.)

But how do you implement new tabs? Add a target="_blank" HTML attribute like so:

The links were the main feature in this static page, and I wanted to check if I wrote them accessibly, so I tweeted at the A11y Project to check on my syntax.

They helpfully pointed out that people using assistive technology could be frustrated by a surprise window popping up.

So, what's the solution?

There are a couple things to try.

You could add a warning in the name or label like so:

You could also use CSS to generate a warning. W3.org has an example of what that looks like:

You're gonna need a span inside your link, wrapping the warning message.

Then you'll need to apply CSS classes to hide the warning message until you hover. W3.org has more detail on that.

Alternatively, you can add a screen-reader-only class to your span.

Then you would add CSS like this: source for CSS

And there you have it. Three ways to make your target="_blank" attribute accessible.