Samen maken we van jouw website een succes.

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.

jooa11y overview

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.

jooa11y frontend

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

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

jooa11y leesbaarheid

 

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.

jooa11y lege koptekst gevonden

 

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.

jooa11y ontbrekendeh1

 

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

jooa11y headingnietopeenvolgend

 

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). 

jooa11y headingtelang

 

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.

jooa11y tekstenhoofdletters

 

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.

jooa11y tekstencursief

 

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.

jooa11y tekstendikgedrukt

 

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. 

jooa11y tekstenlijsten

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.

jooa11y contrast

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.

jooa11y afbeeldingalttekst

 

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

  jooa11y afbeeldingalttekstlink

 

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.

jooa11y afbeeldingalttekstbestandsextensie

 

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.

jooa11y afbeeldingdecoratief

 

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.

jooa11y afbeeldingalttekstlinktelang

 

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.

jooa11y afbeeldingalttekstlinktitel

 

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.

jooa11y afbeeldingpluslink

 

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".

jooa11y linktekst

 

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

jooa11y linkleeg

 

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.

jooa11y linknaarpdf

 

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.

jooa11y linkbestand

 

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.

jooa11y linktabblad

 

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.

jooa11y linkdubbel

 

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.

jooa11y embeddedvideotitel

 

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.

jooa11y embeddedvideo

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.

jooa11y formuliergeenlabel

 

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.

jooa11y formuliergeenlabel

 

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

jooa11y formulieronzichtbaarlabel

 

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.

jooa11y formulierreset

 

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.

jooa11y tabellegekoptekst

 

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.

jooa11y tabelontbrekendekoptekst

 

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.

jooa11y tabelheadinginkoptekst

  

 

Jeroen Moolenschot

Over Jeroen Moolenschot

Jeroen werkt sinds 2006 met het Joomla! CMS. Naast het bouwen en onderhouden van Joomla! websites en webshops is hij ook bekend met zoekmachineoptimalisatie (SEO), Joomla hosting en het ontwikkelen van templates en extensies. Verder is Jeroen een frequente bezoeker van de Joomladagen en JUG's. Hij zet zich in voor de Joomla! community als lid van het "Certification Exam & Platform" team. Kortom: Ben je op zoek naar een Joomla Specialist, dan zit je hier goed!

Wil je meer weten?

Ben je benieuwd of ik de geschikte partner voor jouw project ben? Kijk dan eens in mijn portfolio, bekijk wat mijn klanten vertellen of neem direct contact met mij op.


Gerelateerde artikelen

Wat klanten vertellen

Diane Smeulders

Na het ontwerpen van een logo met bijbehorende huisstijl door een vormgever moest er ook een website gebouwd worden. Met onze beperkte computerkennis was het beter om dit uit te besteden. Wij hebben hiervoor een fijne samenwerkingspartner gevonden in Jeroen van Joomill. Onze website is echt een weerspiegeling geworden van wie wij zijn en waar wij voor staan.  Goed werk, Jeroen!

- Diane Smeulders