Accessibility-tip: externe links
Geschreven op
Externe links. Ze zijn overal. En als je een website bouwt, ga je er sowieso een paar nodig hebben. Maar hoe zorg je ervoor dat ze niet irritant of verwarrend zijn? Hier zijn een paar tips om ze toegankelijker te maken.
Identificeer je externe links
En geef ze een naam. Nee, geen namen als "Julien" of "Médard". Allemaal dezelfde naam. We kunnen dat op twee manieren doen: ofwel ga je zelf manueel bij elke externe link een class toevoegen. Laten we gaan voor .ext-link. Zullen we dat afspreken? Of ... we zijn lui. En we gebruiken wat hemelse JavaScript om alle externe links een class te geven.
Dit is mijn default script dat ik hiervoor gebruik. Maar voel vrij om zelf kunst te maken met 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 = " (opent een externe website)";
link.appendChild(span);
}
});
});
Help schermlezers
De aandachtige kijkertjes hebben nog iets anders opgemerkt in bovenstaande code. Kijk nog eens even terug en zie of je het zelf kan vinden.
Wow, wacht. Nee, dit is niet Dora, The Explorer. Dit is Matthias, The Explorer. Nu, mij niet voorstellen in een pakje van Dora aub. Gaat NIET gebeuren. En ook: we dwalen af.
Ondertussen zag je ongetwijfeld al wel dat ik ook een span met de class .visually-hidden toevoegde. Wat doet dat?
Wel, die zegt enkel tegen schermlezers dat de link een externe website opent. Waarom niet aan mensen die geen schermlezer gebruiken?
Omdat dit:
.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;
}
Wat met het volk dat geen schermlezer heeft?
Daar kan je een eenvoudig icoontje voor voorzien met de volgende CSS. Hoe ziet dat eruit? Dat zie je in het voorbeeld hieronder.
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;
}
}
Waarom is dit belangrijk?
Goeie vraag. Want heel veel websites doen het eigenlijk niet. Waarom niet? Omdat het 1) niet wordt geleerd in dure YouTube-opleidingen en 2) vaak ontbreekt in GPT-gegeneerde code. Waarschijnlijk zijn er nog veel andere redenen, maar ik denk dat we het wel kunnen opsommen onder deze twee.
Mensen geven ook een minder om hun privacy tegenover vroeger. Ik vermeld nu privacy, omdat het wel degelijk met privacy te maken heeft. Als ik op een link klik naar een andere website, ga ik ook naar die andere website. Stel: die website is een NSFW-website, dan wil je die niet openen op je werk. Want je wil niet dat je werkgever dit misschien opmerkt in hun internet-trafiek en er jou over gaat aanspreken.
Langs de andere kant wil je misschien gewoon niet dat een bepaald domein weet dat jij daar langskomt. Of simpeler: je wil die website niet bezoeken.
Ik ga een heel eenvoudig voorbeeld geven in mijn blog over focus.
"Hoe helpt die .ext-link mij nu?"
Wel, omdat je ziet dat dit een externe website is, kan je de reflex hebben om met je huis over de link hoveren. Op die manier kan je zien naar waar deze website linkt. Ja, je kon dit ook doen als het icoontje er niet stond. Maar op deze manier help ik jou om te laten weten dat je voorzichtig moet zijn en zelf moet bepalen of je naar een externe website wil.
Mijn excuses aan de mensen die ik heb gefopt en in een lastig parket zijn terechtgekomen omdat ze op een NSFW-website terecht zijn beland. Maar laat het een les zijn. Want ik ben nog braaf. Er zijn andere websites die minder goeie bedoelingen hebben en jou zien als een gebruiker, geen bezoeker. En om eerlijk te zijn: de tekst van een link zou beschrijvend moeten zijn voor de pagina waarnaar gelinkt wordt.
Moet dat ook in een extern tabblad openen?
Persoonlijk vind ik van niet. Persoonlijk vind ik dat dat iets dat een gebruiker zelf moet leren bepalen. Maar veel websites doen het wel. Waarom?
De hoofdreden is dat mensen hun bezoekers (lees 'gebruikers' in dit geval) op hun website houden. Dit om de bezoekduur te boosten. Hoe langer 'gebruikers' op hun website zijn, hoe beter voor de cijfers, hoe beter voor hun reclamebanners, hoe beter voor de inkomsten.
Stel, je wil target="_blank" gebruiken? (Er zijn use cases dat dit wel interessant kan zijn) dan raad ik je aan om ook rel="noopener noreferrer" toe te voegen. Dit om mensen met browsers met een oude versie te beschermen als je linkt naar een website die kwaadwillende content kan bevatten. Waarom ga ik hier en nu niet uitleggen: omdat het niet relevant is en ik je niet per se aanraad om een nieuw tabblad te openen in de eerste plaats.
Het is ook belangrijk om je script uit te breiden om duidelijk te maken dat je opent in een extern tabblad. Hoe? Zo bijvoorbeeld:
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 = "Opent een externe 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 = "Opent in een nieuw tabblad";
link.appendChild(newTabSpan);
}
});
});
Porificiteerd met je diploma genaamd "Ik heb een blog gelezen over externe links, dus ik ben nu een pro"! You did it!