You've probably seen this bit of HTML before:
<a href="https://mysite.com" target="_blank" rel="noopener">My site</a>
Specifically, check out the
target="_blank" attribute. This is what allows a link to open a new tab or window automatically. Whether or not you should even use this attribute is debatable, but this is out of scope of this post.
The information being shared here is an approach I've been using to help inform people who rely on assistive technology, such as a screen reader, when a link opens a new window.
It's a valid question. Why inform someone that activating a link might open a new window or a third-party site?
Well, without this context, people might believe they're following an internal site link in the same browser window. Applying
target="_blank" to open a new tab would cause extra work for sighted keyboard-only users and screen reader users. If they're unprepared to move away from the current site, they'd need to switch back to the previous tab or window.
Give power to the user—let them decide how they'd like to proceed
The idea is to give power to the user; inform the user of what might happen in order to allow a decision to be made on how and when they'd like to proceed.
Back in the day I used to recommend adding a "visually hidden" element along side the link text content.
visuallyhiddenCSS class definition hides content visually, but remains available for screen readers users to consume
<a href="https://mysite.com" target="_blank" rel="noopener"> My site <span class="visuallyhidden">, opens in a new window</span> </a>
When a screen reader encounters this link, it would announce the link as:
My site, opens in a new window
This works well and has been for years. The issue though is the odd time the link text and the
visuallyhidden content is actually announced in reverse order! There's a seemingly impossible-to-fix bug that occurs, sometimes, and as a result, I try my best to stay away from this solution.
What I recommend as a solution to informing people that a link opens a new window is, in my opinion, much cleaner and less "CSS hacky" feeling (sorry, Snook. ❤️)
My solution is this:
- Add a new container element to the DOM which houses any required variants of the warning message
- Each variant element will have a unique
IDREFto use elsewhere in the app
- When a link features the
target="_blank"attribute, add the
aria-describedbyattribute, setting its value to the appropriate
idof the message to be announced
This probably sounds like a lot of extra work, but let's take a look at an example.
First, add the HTML container (aka screen reader sprite sheet) which will hold the variations of the warning message:
<div hidden> <span id="new-window-0">Opens in a new window</span> <span id="new-window-1">Opens an external site</span> <span id="new-window-2">Opens an external site in a new window</span> </div>
You may notice this
div container features the
hidden attribute. This is to ensure this chunk of text is not visible nor are screen readers able to find and read the text out of context. That'd be mighty confusing!
Now that we have these warning messages available, we can easily reference them as required. It might be best to place in a more "global" template in order to access from anywhere in your app.
Next up, including the warning message in the link.
Let's alter the example used above:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0"> My site </a>
Now with the
aria-describedby attribute pointing toward the first warning message element, the link now reads as:
"My site — Opens in a new window"
(Note: The long-dash here is just to point out that
aria-describedby can sometimes generate a pause in-between the link text and the warning message content.)
With this in place, the link text will be read aloud, pause, then the warning message that the link opens a new window. Nice! 💪
I did mention sighted keyboard-only users earlier. How do we inform a sighted user that a new window will open, visually?
One approach is to use an icon alongside the link text. With an icon, someone who can see the icon will get the notice that something different might occur when I activate this link.
I don't think an icon is required in all contexts, such as a listing of social media icon links, or perhaps copyright style links in a
footer section. When it comes to links in body copy, however, it's a good idea to add some sort of visual indicator, just as folks using a screen reader get an audible notice.
Let's say you've got an icon that's suitable. Usually some boxy looking icon with an arrow pointing in an upward direction.
Perhaps something like…
Yes, that'll do. Now that we have our icon, let's include it in the link:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0"> My site <img src="new-window.svg" alt=""> </a>
Now, you might be tempted to include your icon as a background image via CSS. The thing is though, most CSS
background properties are stripped away when it comes to rendering CSS in Windows High Contrast mode. As a result, it's best to include the icon as a foreground image.
Alternatively, you could include the raw SVG markup in the link as well. Observe:
<a href="https://mysite.com" target="_blank" rel="noopener" aria-describedby="new-window-0"> My site <svg aria-hidden="true" focusable="false" …> <path> <!-- … --> </path> </svg> </a>
Nice job! With the
aria-describedby attribute on the link along with the "new window"
img icon alongside the text, all of you users will be able to make an informed decision of if and when to activate the link, either now or later when they're good and ready! 👍
Happy hacking! 😄⌨️🚀
Originally published at medium.com/@svinkle on April 12, 2018.