jooa11y - De Joomla Toegankelijkheidscontroleur plugin

Bij het ontwikkelen van een website is toegankelijkheid een belangrijk onderdeel geworden de afgelopen jaren. Bij toegankelijkheid of accessibility zorg je ervoor dat jouw website door iedereen te bekijken is, ook voor mensen met een (visuele) beperking.

Vergelijk het met een fysieke winkel. Wanneer je een trap of hoge drempel over moet om in jouw winkel te komen, dan is hij niet te bezoeken door mensen in een rolstoel en ook niet handig voor mensen met een kinderwagen. Je zal dan bezoekers en omzet mislopen. Dit geldt ook voor jouw website. Zijn de lettergroottes en kleuren niet juist, dan verlaten sommige mensen snel jouw website.

Daarnaast heeft een goede toegankelijkheid ook voor jouw indirect voordelen. Google reageert hier erg positief op en een goed toegankelijke website zorgt er automatisch voor dat jouw website hoger in de zoekmachines terecht komt.

Maar hoe weet je nu of je alles wel goed doet en wat zou je eventueel kunnen verbeteren? Joomla heeft daarvoor vanaf Joomla 4.1 een speciale plugin, de Joomla Toegankelijkheidscontroleur. Deze Joomla a11y Checker markeert visueel algemene toegankelijkheids- en bruikbaarheidsproblemen. De plugin controleert bij zo'n 50 punten op fouten of waarschuwingen en begeleidt de beheerder van de website bij het oplossen ervan. Belangrijk om te vermelden is dat het natuurlijk een automatisch systeem is en je zelf altijd met gezond verstand na moet blijven denken of je sommige zaken wel of niet wil aanpassen.

Deze plugin is ontwikkeld door Brian Teeman, die het Sa11y-script gereed heeft gemaakt voor het gebruik binnen Joomla.

Hoe schakel je de Joomla a11y Checker in?

Om de Joomla Toegankelijkheidscontroleur te gebruiken, moet je er in de eerste plaats voor zorgen dat jouw Joomla versie 4.1 of hoger is.
Je kunt dan naar Systeem » Plugins gaan en zoeken naar "Joomla Toegankelijkheidscontroleur", Dit is een Systeem plugin waar je verschillende opties kunt instellen. Hier kun je de plugin inschakelen.

Wanneer de plugin is ingeschakeld, ga je naar de voorkant van de website en log je in als administrator/superuser om de plugin in werking te zien.

Op welke punten controleert de Joomla a11y Checker?

Jooa11y doet een snelle scan bij het laden van de pagina. Iedere pagina wordt op zo'n 50 punten gecontroleerd. Als er fouten of waarschuwingen zijn, geeft de knop een meldingsbadge weer met het totale aantal gedetecteerde problemen. Rood geeft fouten aan, terwijl geel aangeeft dat er alleen waarschuwingen zijn.

Door op het toegankelijkheidsknopje of de melding op de pagina te klikken krijg je meer informatie.

Hieronder zal ik een zo compleet mogelijk overzicht geven van alle meldingen.

Je kunt de toegankelijkheidsproblemen in verschillende categorieën indelen.

• De leesbaarheid van de tekst
• Titels en kopteksten
• Teksten
• Contrast
• Afbeeldingen
• Links
• Embedded content
• Formulieren
• Tabellen

De leesbaarheid van de tekst

De Jooa11y plugin geeft je een indicatie van het niveau van de technische leesbaarheid van je ingevoerde tekst. Een goede leesbaarheidsscore is een indicatie dat jouw tekst begrijpelijk en gemakkelijk te verwerken is. Buiten de technische leesbaarheid zijn ook de inhoud, de structuur en het design van de tekst belangrijk voor de totale leesbaarheid. Daarom geeft deze plugin geen garantie over het precieze leesniveau maar is slechts een indicatie.

De leesbaarheidsscore wordt uitgedrukt in:
- Goed
- Tamelijk moeilijk
- Moeilijk
- Erg moeilijk

De leesbaarheidsscore is gebaseerd op het totaal aantal woorden van de tekst, gemiddeld aantal woorden per zin. En het percentage met complexe woorden.

Er wordt gebruik gemaakt van de Flesch-Kincaid leesbaarheidstest

Tips om de score te verbeteren

• Houd zinnen gemiddeld rond de 15 woorden.
• Vermijd zinnen die groter zijn dan 25 woorden.
• Splits lange zinnen op of gebruik opsommingstekens.
• Vermijd complexe woorden of woorden met veel lettergrepen.

Titels en kopteksten

Om de pagina te begrijpen is het van belang dat je de titels en tussenkopjes op de juiste manier op je website plaatst. Webbrowsers, plug-ins en ondersteunende technologieën kunnen ze gebruiken om in-page navigatie aan te bieden.

Lege koptekst gevonden!
Het kan gebeuren dat je per ongeluk een lege koptekst in je artikel plaatst. bijv. <h2></h2> Dit kun je ook gebruiken om de afstand tussen verschillende stukjes tekst te vergroten, maar eigenlijk is dit niet de juiste manier. Verwijder deze regel of wijzig de indeling van Heading naar Normal of Paragraph om dit te repareren.

Ontbrekende Heading 1
Zorg ervoor dat iedere pagina begint met een H1. Heading 1 moet het begin zijn van het hoofdgedeelte van de inhoud en is de hoofdtitel die het algemene doel van de pagina beschrijft.

Niet-opeenvolgend headings niveau gebruikt.
Headings mogen nooit niveaus overslaan. Ga dus in je tekst altijd van H1 naar H2 naar H3 etc.

Heading is te lang!
Headings moeten worden gebruikt om inhoud te organiseren en structuur over te brengen. Ze moeten kort, informatief, en uniek zijn. Houd Headings daarom altijd korter dan 160 tekens (niet meer dan een zin). 

Teksten 

Allemaal hoofdletters gevonden.
Sommige schermlezers kunnen tekst met allemaal hoofdletters interpreteren als een acroniem (afkorting) en zullen elke letter afzonderlijk lezen. Daarnaast vinden sommige mensen allemaal hoofdletters moeilijker te lezen en op SCHEEUWEN doen lijken.

Complete alinea in dikgedrukte en cursieve tekst
Vetgedrukte en cursieve tags hebben semantische betekenis en mogen niet worden gebruikt om hele alinea's te markeren. Vetgedrukte tekst moet worden gebruikt om een sterke nadruk te leggen op woorden en zinnen. Cursief moet worden gebruikt om eigennamen te markeren (dat wil zeggen boek- en artikeltitels), buitenlandse woorden en citaten. Lange citaten moeten worden opgemaakt als blockquote.

Een dikgedrukte tekst is gebruikt als kop
Een regel met vette tekst kan eruit zien als kop, maar iemand die een schermlezer gebruikt kan niet bepalen of het belangrijk is of naar de inhoud springt. Vette tekst mag nooit semantische koppen (Heading 2 tot Heading 6) vervangen.

Zorg ervoor dat u semantische lijsten gebruikt met opsomtekens of getallen.
Bij gebruik van een semantische lijst kunnen ondersteunende technologieën informatie overbrengen zoals het totaal aantal items en de relatieve positie van elk item in de lijst. 

Contrast

Deze plugin heeft ook een kleurcontrast analysetool die de kleurcontrastproblemen van een pagina weergeeft volgens de WCAG 2.1 Richtlijnen. Kleurcontrast verwijst naar hoe heldere of donkere kleuren op schermen tegen elkaar uitkomen; in het bijzonder met betrekking tot de relatieve, grijsschaalhelderheid zoals waargenomen door het menselijk oog.

Als het gaat om de toegankelijkheid van websites, is het contrast tussen de tekst en de tekstachtergrond een punt van zorg voor kleurenblinde en andere slechtziende gebruikers. 

Deze tekst heeft niet genoeg contrast met de achtergrond.
De contrast verhouding moet minimaal 4.5:1 zijn voor normale tekst en 3:1 voor grote tekst.

Afbeeldingen

Afbeeldingen moeten Alt-teksten hebben die de informatie of functie beschrijven die de afbeelding vertegenwoordigt. Dit zorgt ervoor dat beelden gebruikt kunnen worden door mensen met verschillende beperkingen.

Ontbrekende Alt-tekst!
Als de afbeelding een verhaal, stemming of belangrijke informatie overbrengt, zorg er dan voor dat u de afbeelding beschrijft.

Afbeelding wordt gebruikt als link maar mist Alt-tekst!
Zorg ervoor dat Alt-tekst beschrijft waar de link u naartoe brengt.

Bestandsextensie binnen de Alt-tekst gevonden.
Gebruik ook niet de bestandsnaam als Alt-tekst. Als de afbeelding een verhaal, stemming of belangrijke informatie overbrengt, zorg er dan voor dat u de afbeelding beschrijft.

Wanneer je geen alt-tekst wil opgeven, dan kun je de afbeelding ook aanmerken als decoratieve afbeelding. De afbeelding zal genegeerd worden door ondersteunende technologie.

Alt-tekst beschrijving op een gelinkte afbeelding is te lang.
Net zoals bij (tussen-)kopjes is het niet verstandig om te lange teksten te gebruiken. Overweeg de titel van de pagina waar hij naar linkt als alt-tekst.

Overweeg om de titel van de pagina waarnaar hij linkt als Alt-tekst te gebruiken.
Gebruik geen niets-zeggende Alt-teksten zoals "Klik hier", maar zorg ervoor dat Alt-tekst de bestemmingspagina beschrijft.  Of vervang de volgende Alt-tekst met iets meer inhoudelijks.

Afbeeldingslink bevat zowel Alt-tekst als omliggende linktekst. 
Dit kan gebeuren wanneer je in de buurt van een afbeelding ook een link plaatst en deze afbeelding wordt (onbedoeld) meegenomen in de link.

Links

Link-tekst is niet beschrijvend genoeg
De link-tekst moet altijd duidelijk, uniek en zinvol zijn. Vermijd veelvoorkomende woorden zoals "klik hier"; of "meer informatie".

Lege links
Heb je (per ongeluk) een link geplaatst zonder tekst, dan wordt deze ook opgemerkt.

Links naar PDF-bestanden
PDF's worden beschouwd als webinhoud en moeten ook toegankelijk worden gemaakt. PDF's bevatten vaak problemen voor mensen die schermlezers gebruiken (ontbrekende structurele tags of ontbrekende veldlabels) en mensen met een beperkt zicht (tekst loopt niet terug bij vergroting).

• Als dit een formulier is, overweeg dan een toegankelijk HTML-formulier als alternatief te gebruiken.
• Als dit een document is, overweeg dan het om te zetten naar een webpagina.

Link naar bestand zonder waarschuwing.
Links naar een PDF of downloadbaar bestand (bijv. MP3, Zip, Word Doc) zonder waarschuwing. Geef het bestandstype aan binnen de linktekst. Als het een groot bestand is, overweeg dan de grootte van het bestand op te nemen.

Link opent in nieuw venster/tabblad zonder waarschuwing.
Dit doen kan desoriënterend zijn, vooral voor mensen die moeite hebben met het ervaren van visuele inhoud. Daarnaast is het niet altijd een goed idee om iemands ervaring te beheersen of beslissingen voor hem te nemen. Geef aan dat de link opent in een nieuw venster binnen de linktekst.

Link heeft identieke tekst als een andere link, maar verwijst naar een andere pagina.
Meerdere links met dezelfde tekst kunnen verwarring veroorzaken voor mensen die schermlezers gebruiken. Overweeg om de link meer beschrijvend te maken om hem te onderscheiden van andere links.

Embedded content

Ingesloten inhoud vereist een toegankelijke naam die de inhoud beschrijft.
Geef net als bij afbeeldingen en links een unieke titel of aria-label attribuut bij het iframe element, die het object omschrijft.

Zorg ervoor dat alle video's ondertiteling hebben en zorg voor transcriptie van bij podcasts.
Het bieden van ondertiteling voor alle audio- en video-inhoud is een verplichting van niveau A. Ondertiteling ondersteunt mensen die doof of slecht horend zijn.

Formulieren

Er is geen label gekoppeld aan deze invoer.

Voeg een id toe aan deze invoer, en voeg een overeenkomend for attribuut toe aan het label.

Er is wel een id maar geen label gekoppeld aan deze invoer.
Voeg een for attribuut toe aan het label dat overeenkomt met het id van deze invoer.

Het label is onzichtbaar
Invoer heeft een toegankelijke naam, maar zorg ervoor dat er ook een zichtbaar label is.

Gebruik nooit een reset-knop
Het grootste probleem van een reset-knop in een formulier is dat hij per ongeluk aangeklikt wordt en dan de bezoeker alle ingevulde informatie kwijt is en opnieuw moet beginnen met invullen. 
Het hebben van twee knoppen onderaan een formulier maakt de interface rommelig en maakt het moeilijker voor gebruikers om hun volgende stap duidelijk te zien. Een kleine hoeveelheid verspilde tijd wordt besteed aan het scannen van de nutteloze knop en het beslissen welke van de twee knoppen de juiste is.

Wanneer gebruikers hun ingevulde gegevens willen aanpassen dan kunnen ze beter de informatie met de hand aanpassen.

Tabellen

Het gebruik van tabellen is iets wat ik altijd afraad, maar soms ontkom je er niet aan om het te gebruiken. Zorg ervoor dat je de <th>-elementen goed gebruikt, om duidelijk te maken welke informatie er in de tabel te lezen is.

Lege tabel koptekst gevonden!
Tabel koppen mogen nooit leeg zijn. Het is belangrijk om rij- en/of kolomkoppen aan te wijzen om hun relatie over te brengen. Deze informatie biedt context voor mensen die ondersteunende technologie gebruiken. Houd er rekening mee dat tabellen alleen voor tabelgegevens gebruikt moeten worden.

Ontbrekende tabelkoppen!
Toegankelijke tabellen hebben HTML-opmaak nodig die kopcellen en gegevenscellen geven die hun relatie bepalen. Deze informatie biedt context aan mensen die ondersteunende technologie gebruiken. Tabellen moeten alleen voor tabelgegevens worden gebruikt.

Koppen zoals Heading 2 of Heading 3 mogen niet gebruikt worden in HTML-tabellen.
Geef tabelkoppen in plaats daarvan aan met behulp van het th-element.