DEV Community

loading...
Cover image for 3 Ways to Make`target="_blank"` Accessible

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

cerchie profile image Lucia Cerchie ・2 min read

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. W3.org 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. W3.org 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.

Discussion

pic
Editor guide
Collapse
cerchie profile image
Lucia Cerchie Author

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?

Collapse
sabarishcodes profile image
Sabarish Rajamohan

This should be useful.. Thanks much

Collapse
adam_cyclones profile image
Adam Crockett

Huh, never thought of this, thanks 😊

Collapse
patoezequiel profile image
Patricio Hondagneu Roig

Gotta try them out. Thanks for your contribution!