Accessibility Tip: External Links
Written on
External links. They’re everywhere. And if you're building a website, you're definitely going to need a few. But how do you make sure they’re not annoying or confusing? Here are some tips to make them more accessible.
Identify your external links
And give them a name. No, not names like "Julien" or "Médard." Just the same name for all of them. We can do this in two ways: either you manually add a class to every external link, let’s go with .ext-link, shall we? Or ... we’re lazy. And we use some divine JavaScript to assign a class to all external links.
This is my default script for this. But feel free to get creative with JavaScript:
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll("a");
const currentDomain = window.location.hostname;
links.forEach(link => {
const linkDomain = new URL(link.href).hostname;
if (linkDomain && linkDomain !== currentDomain) {
link.classList.add("ext-link");
const span = document.createElement("span");
span.classList.add("visually-hidden");
span.textContent = " (opens an external website)";
link.appendChild(span);
}
});
});
Help screen readers
The keen-eyed among you may have noticed something else in the above code. Take another look and see if you can spot it.
Wow, wait. No, this is not Dora, The Explorer. This is Matthias, The Explorer. Now, please don’t imagine me in a Dora outfit. That’s NOT happening. Also: we’re getting sidetracked.
By now, you probably noticed that I also added a span with the class .visually-hidden. What does that do?
Well, it tells screen readers that the link opens an external website. Why not display this information to users who don’t use a screen reader?
Because of this:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
What about the plebs who don’t use a screen reader?
You can provide a simple icon for them with the following CSS. What does it look like? Check the example below.
a.ext-link {
&::after {
content: url("/assets/img/icons/up-right-from-square-solid.svg");
width: 0.75rem;
height: 0.75rem;
margin-left: 0.25rem;
display: inline-block;
margin-top: -0.5rem;
top: -0.5rem;
position: relative;
filter: brightness(0) invert(1);
transition: transform 0.3s ease;
}
}
Why is this important?
Good question. Because a lot of websites don’t actually do this. Why not? Because 1) it’s not taught in expensive YouTube courses and/or 2) it’s missing from GPT-generated code. There are probably a ton of other reasons, but I think we can summarize it under these two.
People also care less about privacy than they used to. I bring up privacy because it is actually relevant here. If I click a link to another website, I go to that other website. Now, say that website is NSFW—maybe you don’t want to open that at work. You don’t want your employer to notice it in their network traffic and confront you about it.
On the other hand, maybe you just don’t want a certain domain to know that you visited. Or simpler: you don’t want to visit that website at all.
I’ll give a very simple example in my blog about focus.
"How does this .ext-link help me?"
Well, since you can see that this is an external website, you might instinctively hover over the link. That way, you can check where the website actually leads. Yes, you could do this even if the icon wasn’t there, but this way, I’m helping you be more mindful and decide whether you actually want to visit that external site.
Apologies to anyone I’ve tricked into an awkward situation by clicking an NSFW link. But let this be a lesson. Because I’m still nice—there are other websites with less good intentions that see you as a user, not a visitor. And too be fair: the text of the link should be descriptive to what a link is linking to.
Should external links open in a new tab?
Personally, I don’t think so. I think users should decide this for themselves. But a lot of websites do it anyway. Why?
The main reason is that websites want to keep their visitors (or should I say ‘users’ in this case) on their site. This increases their session duration. The longer users stay on their site, the better the stats, the better their ad revenue, the better their income.
If you insist on using target="_blank" (there are some use cases), I recommend also adding rel="noopener noreferrer". This protects users on older browsers when linking to potentially malicious sites. Why? I won’t explain that here, because it’s not relevant and, honestly, I don’t recommend opening a new tab in the first place.
It’s also important to update your script to indicate that the link opens in a new tab. How? Like this, for example:
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll("a");
const currentDomain = window.location.hostname;
links.forEach(link => {
const linkDomain = new URL(link.href).hostname;
if (linkDomain && linkDomain !== currentDomain) {
link.classList.add("ext-link");
const span = document.createElement("span");
span.classList.add("visually-hidden");
span.textContent = "Opens an external website";
link.appendChild(span);
}
if (link.target === "_blank") {
link.classList.add("new-tab-link");
link.setAttribute("rel", "noopener noreferrer");
const newTabSpan = document.createElement("span");
newTabSpan.classList.add("visually-hidden");
newTabSpan.textContent = "Opens in a new tab";
link.appendChild(newTabSpan);
}
});
});
Cogartulationes on earning your diploma titled "I read a blog about external links, so now I'm a pro!" You did it!