Toegankelijkheid: Iedereen snapt, net als een snelle website, dat het nodig is, maar de praktijk ligt veelal verder van de theorie. Vandaag: toegankelijke footnotes en hoe dit je SEO kan bevorderen.
Terwijl ik bezig was met een erg lang artikel, namen ook het aantal externe verwijzingen naar bronnen toe. Deze besloot ik onderaan het artikel te verzamelen, onder de noemer "bronnenlijst" of "voetnoten". Denk aan een voetnoot in een boek, zoals te zien in de hero-afbeelding van dit artikel.
Echter, dit werd in beheer van de website omslachtig en tijdrovend. Als ik in de tekst een extra bronvermelding op wilde nemen, moest ik:
- handmatig een link opnemen in de bronnenlijst, onderaan het artikel;
- deze link ook een anker meegeven, om naar te kunnen verwijzen;
- vervolgens vanuit de tekst een koppeling maken naar die voetnoot, zodat je er naar toe springt als je klikt;
- de nummering wijzigen, als ook de doornummering van nakomende bronvermeldingen in de tekst.
Omslachtige handelingen dus, die je niet van website beheerders kunt verwachten of eisen. En bovendien: Wat nou als je website- of webshopbezoeker afhankelijk is van een toetsenbord? Bijvoorbeeld omdat deze last heeft van RSI, reumatische artritis of de ziekte van Parkinson. Of slechtziend of blind en aangewezen is op een screenreader?
Iemand die dan vanuit de tekst bij een voetnoot terecht komt, kan niet meer eenvoudig verder lezen vanaf de plek waar men vandaan kwam.
Global Accessibility Awareness Day
En dus was het tijd voor een betere ofwel geautomatiseerde oplossing. Op de Global Accessibility Awareness Day heb ik binnen het CMS dat we voor onze opdrachtgevers inzetten, een toepassing uitgerold waardoor er voor beheerders geen omkijken is naar het toegankelijk opzetten van voetnoten.
Om het resultaat maximaal tentoon te stellen, heb ik in dit artikel meer dan gebruikelijk gebruik gemaakt van voetnoten, waar ik normaliter directe externe hyperlinks op zou nemen.
Techniek achter web toegankelijke voetnoten
Het CMS is dusdanig getweaked dat het de CSS class
attribuut van alle hyperlinks scant op het trefwoord "footnote". Voor elk gevonden hyperlink, zal het nagaan of het een tekstuele of verwijzende voetnoot is. Een website beheerder kan zonder veel moeite eenvoudig voetnoten introduceren.
De verwijzing naar een voetnoot kan daarbij altijd dusdanig worden opgezet, dat de verwijzing een beschrijvende tekst blijft. Zo weten ook gebruikers van screenreaders wat hen te wachten staat.
Aanvullend wordt vanuit de voetnoten automatisch een knop toegevoegd waarmee wordt teruggesprongen naar de tekst waar men vandaan kwam, voordat ze op een voetnoot-verwijzing klikten.
Screenreaders
Vooral screenreaders profiteren hiervan, doordat men niet door een onbekend aantal hyperlinks hoeft te navigeren om vervolgens zelf na te moeten gaan of men inderdaad weer is teruggesprongen waar ze vandaan kwamen. Klinkt ingewikkeld? Dat is het helaas ook, voor het doelgroep dat is aangewezen op alternatieve vormen van surfen.
De CSS code voor styling
Ook het doornummeren van de bronnenlijst als ook verwijzingen, hoeft niet meer handmatig te gebeuren. Hier komt CSS aan te pas. Om tot een toegankelijke opzet te komen, heb ik er verschillende bronnen op na geslagen bron 1 bron 2 bron 3. Voor diegene die liever direct in de code duikt, hierbij een directe link naar de HTML en CSS code.
Toegankelijkheid is bevorderlijk voor je SEO
Een toegankelijke website is altijd bevorderlijk voor SEO, om onder meer de volgende redenen:
- Wanneer iemand die is aangewezen op enkel toetsenbord, in staat is goed door de website te navigeren, dan kan een Google bot dit ook (de events die met interacties gepaard gaan komen immers minimaal overeen);
- Semantische opmaak van je code, brengt je dichter bij rich snippets. Denk aan opsommingen, juist gebruik van tabellen en captions, defintielijsten;
- Zoekmachines zijn bij gebruik van juiste WAI Aria rollen of gewoonweg juiste semantiek, beter in staat onderscheid te maken in primaire en secundaire navigaties en website onderdelen.
Hoe helpen voetnoten je SEO?
Hoe voetnoten vervolgens bevorderlijk kunnen zijn voor je SEO:
- De al dan niet automatisch gegenereerde voetnoten, kunnen voor extra relevante keywords zorgen in je pagina-teksten;
- De hoofdtekst blijft leesbaarder, doordat er minder gevoelsmatige onderbrekingen zijn tijdens het lezen. Dit kan je bounce-percentage laag en de dwelltime hoog houden, welke beide als factoren voor ranking wordt gezien;
- Eventuele link-juice geef je niet direct weg, waardoor de kans groter is dan men langer op je eigen website blijft.
Test zelf de toegankelijkheid van je site
Ga zelf aan de slag met toegankelijkheid, of test je resultaten. Liever op een laagdrempelige wijze testen? Ga dan eens na of je met alleen toetsenbord (waaronder de TAB-toets en ENTER-toets) door je website kunt navigeren.
Doe dit vervolgens nogmaals, maar dan voor de responsive versie van je website, door je browservenster kleiner te maken. Lukt het je ook hier om via bijvoorbeeld de uitklap navigatie naar dieperliggende pagina's te navigeren? Toegankelijkheid van responsive websites, of eigenlijk voor websites op touchscreen toestellen, valt onder de WCAG 2.1 guidelines. Met WCAG 2.1 ben je toekomstbestendiger.
Lukt het je niet de toegankelijkheid van je website of webshop te testen of te verbeteren? Neem dan vooral contact met me op.