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:
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.
Top comments (7)
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?
Gotta try them out. Thanks for your contribution!
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.
wow this is such a lovely example of CSS enhancing accessibility!
This should be useful.. Thanks much
Huh, never thought of this, thanks 😊
Thanks for this article. Always looking to make my content accessible for all users.