Is je artikel toegankelijk? Jooa11y is jouw hulpmiddel!
De Jooa11y Accessibility Checker is een verborgen parel binnen Joomla. Oorspronkelijk is deze ontwikkeld om artikelen in de backend te controleren. Daarmee helpt hij redacteuren om toegankelijke content te schrijven. Maar de tool werkt ook uitstekend in de frontend, waardoor toegankelijkheidscontroles nog eenvoudiger worden.
Toegankelijkheidstools zijn net superhelden: ze beschikken allemaal over bijzondere krachten, hebben hetzelfde doel – het web toegankelijker maken – maar dragen ieder hun eigen cape en hebben hun eigen specialiteiten. Het is geen wedstrijd; elke tool heeft zijn eigen sterke punten.
Wat Jooa11y onderscheidt, is de uitstekende manier waarop fouten en waarschuwingen worden gepresenteerd.
In recente artikelen over de "Blind Spots of Accessibility Testing Tools" heb ik verschillende gratis hulpmiddelen gebruikt om websites op toegankelijkheid te controleren.
Mijn standaardset bestaat uit gratis browserextensies waarvoor geen registratie nodig is, aangevuld met AI. Meestal gebruik ik:
-
WAVE
-
IBM Equal Access Checker
-
Lighthouse
-
en soms AXE.
Tijdens het ontwikkelproces maak ik daarnaast gebruik van de ontwikkelaarstools van de browser. Ook hulpmiddelen zoals Landmark Navigation en Heading Maps zijn erg nuttig, maar voor snelle controles ben ik vooral enthousiast over Jooa11y.
De ingebouwde toegankelijkheidscontrole van Joomla
Jooa11y werd aan Joomla toegevoegd als hulpmiddel voor contentredacteuren. Tijdens het schrijven van artikelen in de backend markeert de tool toegankelijkheidsproblemen in de tekst, zoals beschreven in een artikel uit 2022 over de toegankelijkheidsfuncties van Joomla.
Het "verborgen geheim" is dat Jooa11y ook in de frontend gebruikt kan worden. In veel gevallen controleert deze plugin zelfs grondiger dan andere browserextensies. Uiteraard is het gebruik in de frontend bedoeld voor ontwikkelomgevingen en niet voor een live website.
Wat Jooa11y niet doet
Jooa11y is geen hulpmiddel om een complete website te scannen of uitgebreide rapportages te genereren. Het is een gereedschap voor websitebouwers en redacteuren, niet voor volledige toegankelijkheidsaudits.
Probeer het zelf!
Open de systeemplugin Jooa11y en configureer deze voor gebruik in de frontend:
-
zet de parameter Show Always op Aan;
-
stel Target Access in op body, zodat de gehele website gecontroleerd wordt.
Bezoek vervolgens je website. Je ziet nu het Jooa11y-pictogram. Door erop te klikken kun je diverse instellingen aanpassen.
Er zijn drie tabbladen:
-
Outline – toont alle koppen (headings) op de pagina.
-
Images – geeft een overzicht van alle afbeeldingen en hun alt-teksten.
-
Settings – hiermee pas je de weergave van het venster aan.
Wanneer Jooa11y fouten of waarschuwingen vindt, wordt het aantal direct weergegeven. Je kunt de meldingen voorlopig negeren terwijl je aan je artikel werkt en pas controleren wanneer je klaar bent.
Na het openen van de checker worden alle problemen direct op de juiste plaats op de pagina weergegeven:
-
fouten met een rood waarschuwingsdriehoekje;
-
waarschuwingen met een geel vraagteken.
Afbeelding: verschillende vakken met kleurcontrastfouten. Twee vakken tonen extra informatie over de gevonden contrastproblemen.
Jooa11y legt kleurcontrastproblemen duidelijk uit en doet direct een voorstel om ze op te lossen.
Dit voorbeeld komt uit het artikel "Blind Spots of Accessibility Testing Tools – Colour Contrast". Daarin werden verschillende tools met elkaar vergeleken op het detecteren van kleurcontrastproblemen. Alle tools vonden dezelfde contrastfout, gaven waarschuwingen voor verdachte kleurinstellingen en hadden dezelfde blinde vlekken waarbij bepaalde fouten niet werden herkend.
Waarom ik Jooa11y graag gebruik
Vergeleken met andere toegankelijkheidstools is Jooa11y mijn favoriet. Dat heeft verschillende redenen:
-
de tool is snel en altijd beschikbaar;
-
je hoeft geen externe controletool te openen;
-
je kunt hem eenvoudig sluiten wanneer je hem niet nodig hebt;
-
de paginalay-out blijft volledig intact;
-
hij vindt veel fouten én waarschuwingen en geeft duidelijke uitleg;
-
waarschuwingen zijn direct zichtbaar en kunnen worden genegeerd wanneer ze in jouw situatie niet relevant zijn;
-
een Heading Map is standaard geïntegreerd;
-
de leesbaarheid van teksten kan worden gecontroleerd;
-
bepaalde onderdelen van een pagina kunnen van controles worden uitgesloten;
-
je kunt eigen controleregels toevoegen.
Afbeelding: uitvoer van WAVE met kleurcontrastfouten.
Deze afbeelding toont dezelfde pagina gecontroleerd met WAVE. De contrastfout wordt gevonden, maar de verdachte achtergrondafbeelding in het gele vlak niet.
Afbeelding: uitvoer van IBM Accessibility Checker.
Ook hier wordt dezelfde pagina gecontroleerd. De IBM Accessibility Checker vindt zowel de contrastfout als de ondoorzichtigheidsinstelling (opacity) in het lichtgroene vlak – wat positief is – maar mist eveneens de verdachte achtergrondafbeelding in het gele vlak. Bovendien zijn de meldingen minder eenvoudig te interpreteren.
Hieruit blijkt dat verschillende tools verschillende soorten problemen detecteren. Voor een eerste, snelle controle is Jooa11y echter moeilijk te overtreffen.
Pro-tip: gebruik een apart toegangsniveau
Wil je Jooa11y op een live website gebruiken? Maak dan bijvoorbeeld een nieuw toegangsniveau "Jooa11y".
Voeg alle gebruikersgroepen toe die artikelen in de frontend mogen bewerken en stel vervolgens het toegangsniveau van de Jooa11y-plugin in op Jooa11y.
Op die manier is de plugin alleen zichtbaar voor redacteuren die content mogen bewerken, terwijl gewone bezoekers van de website er niets van merken.
Conclusie
Maak gebruik van deze superheld binnen Joomla!.
Net als iedere andere toegankelijkheidstool kan Jooa11y niet alle mogelijke toegankelijkheidsproblemen opsporen. Geen enkele tool kan dat. Wel helpt hij je om veelvoorkomende fouten te voorkomen, zoals:
-
onderstreepte tekst die geen link is;
-
afbeeldingen zonder alt-tekst;
-
de meeste kleurcontrastproblemen.
Daardoor vormt Jooa11y een waardevolle aanvulling op het ontwikkelproces van iedere Joomla-website.