DEV Community 👩‍💻👨‍💻

Cover image for 3 Ways to Make`target="_blank"` Accessible
Lucia Cerchie
Lucia Cerchie

Posted on • Updated on

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

READ THIS NOTE: I have since learned that using target="_blank" can introduce a security issue. So for accessibility and security's sake, I recommend eschewing target="_blank" altogether. I'm leaving this post up as an example of learning from showing your work.

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:

Alt Text

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:

Alt Text

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

Alt Text

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

Alt Text

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

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

Alt Text

Then you would add CSS like this: source for CSS

Alt Text

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

Top comments (9)

cerchie profile image
Lucia Cerchie

Thanks for that resource, it's great and really helps me understand the security issue! The one thing I'd still use a force-open for was a scenario where a user could click a link while they had entered form data but not submitted it yet. A new tab could save them from losing their work. What would your proposed solution be? Avoiding that type of user flow design altogether?

patoezequiel profile image
Patricio Hondagneu Roig

Gotta try them out. Thanks for your contribution!

bourpie profile image
Pierre Bourgeois • Edited on

Thank you. May I suggest a version using pseudo selectors.

[target="_blank"] {
position: relative;
display: inline-block;
padding-right: 1rem;
[target="_blank"]:after {
content: "(opens in a new window)";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
[target="_blank"]:before {
content: " \2197";
position: absolute;
right: 0;

Please let me know what you think.

cerchie profile image
Lucia Cerchie

wow this is such a lovely example of CSS enhancing accessibility!

sabarishcodes profile image
Sabarish Rajamohan

This should be useful.. Thanks much

adam_cyclones profile image
Adam Crockett

Huh, never thought of this, thanks 😊

themikelopez profile image
Mike Lopez

Thanks for this article. Always looking to make my content accessible for all users.

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git