Toegankelijkheidsmonitor 2017

1124 studenten
173 websites
15 criteria
18% toegankelijk

De resultaten van de toegankelijkheidsmonitor liggen in lijn met die van de vorige jaren, met een lichte stijging:

van 14,8% toegankelijke websites in 2015, naar 17,9% toegankelijk in 2017
82,1% van de steekproef scoort onvoldoende

De resultaten komen uit de analyse van 173 websites door 1124 studenten tijdens het academiejaar 2016 - 2017. Meer over de opzet en de methodologie.

Resultaat per jaar

17,9% 2017
14,8% 2015
14,2% 2013
12,6% 2012
8,4% 2011
9,7% 2010
7% 2009
4% 2007

Steekproef

De steekproef bevat 173 websites, zowel Franstalig als Nederlandstalig, verdeeld in 14 categoriën:

Resultaten

31 van de 173 sites in de steekproef scoren 75% of meer en zijn minimaal toegankelijk volgens de criteria van dit onderzoek.

Gemiddeld resultaat per criterium

Er is één verschil in de criteria ten opzichte van de vorige edities. Het punt in verband met Flash-objecten is vervangen door het aangeven van de taal van de pagina.

1. Is de titel van de webpagina's betekenisvol? 75%

Voor 25% van de websites in de steekproef geeft de paginatitel niet duidelijk aan op welke pagina men zich bevindt.

Impact

De paginatitel wordt als eerste voorgelezen door een screenreader als de pagina opent. Het verschijnt ook in de browsertabs en in de zoekresultaten. Als die niet betekenisvol is, wordt het moeilijker om zich te oriënteren en op een efficiënte manier te navigeren, niet enkel voor personen met een handicap.

Oplossing

De redacteur geeft de pagina een unieke titel, het CMS voegt automatisch de naam van de website achteraan toe in de titel.

2. Is de taal van de pagina's correct aangegeven? 81%

Dit punt is OK op de meeste websites. Maar op 19% is de taal van de pagina’s niet correct aangeduid.

Impact

Als de pagina wordt voorgelezen met een screenreader, kan de spraaksynthese zich aanpassen aan de taal van de pagina. Als de taal niet juist aangeduid is, dan is de inhoud niet te begrijpen omdat die met de foute uitspraak wordt voorgelezen.

Oplossing

De oplossing is zeer simpel: de taal van de pagina moet aangeduid worden in de templates via het lang-attribuut.

3. Is de focus zichtbaar als je navigeert met de tabtoets? 40%

Op meer dan de helft van de websites is de focus (bijvoorbeeld een stippellijntje rond een link) niet zichtbaar als men de tabtoets gebruikt om de links te bereiken.

Impact

Zonder zichtbare focus is het onmogelijk om de website enkel met toetsenbord te gebruiken, want men kan niet zien waar men zich bevindt. Dit is vooral een probleem voor personen met een motorische handicap.

Oplossing

Een paar lijnen verwijderen of aanpassen in de CSS-code van de website (outline bij focus) is meestal voldoende om het probleem op te lossen.

4. Zijn alle onderdelen bruikbaar via het toetsenbord? (zonder muis) 35%

De meerderheid van de geteste websites zijn niet toegankelijk met het toetsenbord.

Impact

Dit is blokkerend voor alle personen die geen muis kunnen gebruiken. Blinden en personen met een motorische handicap hebben hier het meeste last van.

Oplossing

Het zijn meestal de dynamische componenten (tabs, uitklapmenu’s, accordeons, etc.) die problemen veroorzaken. Het kan moeilijk zijn om deze problemen op te lossen in bestaande componenten. Maar er bestaan herbruikbare toegankelijke componenten. De beste oplossing is dus om meteen toegankelijke componenten te kiezen of aan de toegankelijkheid te denken bij het ontwikkelen van de componenten.

5. Is er een stopknop voor bewegende inhoud of animaties? 49%

51% van de websites in de steekproef hebben bewegende elementen die niet kunnen gestopt worden. In de meeste gevallen zijn het slideshows.

Impact

Beweging op een pagina maakt het moeilijker voor iedereen om zich te concentreren en de inhoud te lezen. Voor personen met dyslexie of een concentratiestoornis kan beweging een webpagina helemaal onbruikbaar maken.

Oplossing

Voeg een pauzeknop toe aan het bewegende element.

6. Zijn hyperlinks duidelijk te onderscheiden van andere tekst? 52%

Dit criterium gaat over links binnen een paragraaf. Links zijn traditioneel onderstreept en daardoor makkelijker te herkennen. Op de helft van de steekproef zijn links enkel te onderscheiden op basis van kleur.

Impact

Kleurenblinden of slechtziende personen zullen moeite hebben om de links te vinden, wat navigeren op de website moeilijker maakt.

Oplossing

Door enkele lijnen CSS aan te passen, kunnen alle links in doorlopende tekst goed herkenbaar worden gemaakt. Bijvoorbeeld met onderstreping of vetgedrukt.

7. Zijn linkteksten betekenisvol? 91%

Dit is meestal OK. Op 91% van de websites kan je de bestemming van de link afleiden uit de linktekst.

Impact

Betekenisvolle links zorgen ervoor dat de bezoeker van de website kan voorspellen op welke pagina hij terecht gaat komen. Betekenisvolle links zijn heel belangrijk voor personen die geen overzicht hebben over de pagina en het doel van de link niet uit de context kunnen afleiden.

Oplossing

Onbetekenisvolle links zoals 'klik hier' vermijden of herbenoemen. Dit kan omslachting zijn op een bestaande website.

8. Hebben alle afbeeldingen een alternatieve beschrijving? 32%

Op 68% van de websites staan afbeeldingen zonder alt-tekst of met een incorrecte alt-tekst.

Impact

Als een afbeelding informatie bevat en geen tekstalternatief heeft, dan is de informatie niet beschikbaar voor screenreadergebruikers.

Oplossing

Altijd een alt-tekst toevoegen bij het invoegen van een betekenisvolle afbeelding, het alt-attribuut leeg laten voor decoratieve afbeeldingen. Alle afbeeldingen achteraf omschrijven kan omslachtig zijn.

9. Zijn video's ondertiteld? 43%

15% van de websites met video heeft ondertiteling, 28% heeft geen video en 57% heeft geen ondertiteling voorzien.

Impact

Zonder ondertitels is een video niet toegankelijk voor doven en slechthorenden.

Oplossing

Voorzie ondertiteling bij het ontwerp van de video. Ondertiteling kan uitbesteed worden aan professionelen, maar er bestaan ook (gratis) online tools om het zelf te doen.

10. Is er voldoende contrast tussen de kleur van de tekst en de achtergrondkleur? 52%

48% van de websites gebruikt kleurcombinaties die onder het minimum ratio scoren (4,5 voor tekst, 3 voor koppen).

Impact

Een laag contrast kan tekst onleesbaar maken voor slechtzienden. Slechte contrasten maken het lezen moeilijker voor iedereen, vooral op een klein scherm (mobiel) of bij lichtinval.

Oplossing

Tijdens de ontwerpfase kleurcombinaties kiezen die voldoende contrasteren. Contrast verbeteren op een bestaande website kan meestal gemakkelijk, door de kleur van de tekst of de achtergrond aan te passen in de CSS code.

11. Zijn koppen correct gemarkeerd in HTML? 75%

75% van de websites gebruikt het juiste kopniveau in de HTML-code (H1, H2, H3, etc.).

Impact

Als kopniveau's niet of incorrect zijn gebruikt in de code, kunnen programma’s zoals screenreaders of andere hulpmiddelen de structuur niet gebruiken. Een blinde persoon ziet de inhoud van de pagina dan als een lange blok tekst zonder structuur.

Oplossing

Redacteurs brengen structuur aan door koppen te markeren in een logische en hiërarchische volgorde. H1 voor de titel, H2 voor een subkop enzoverder.

12. Zijn lijsten correct gemarkeerd in HTML? 94%

Bijna alle websites gebruiken lijsten om een correcte manier (ul en ol elementen).

Impact

Het gebruik van lijsten geeft structuur aan de inhoud. Wanneer lijsten enkel visueel aangeduid zijn, maar niet juist gecodeerd zijn, kondigen screenreaders ze niet aan als lijsten.

Oplossing

Gebruik echte lijsten (ul en ol) in plaats van lijsten visueel na te bootsen tijdens de ontwikkeling van de pagina’s en tijdens het invoeren van de inhoud.

13. Zijn formulierenvelden verbonden met hun label? 65%

Op 63% van de websites is dit in orde. Op 35% van de websites zijn de formulieren niet juist gecodeerd. Op 2% van de websites werden er geen formulieren gevonden.

Impact

Als de formuliervelden niet verbonden zijn met hun label, kan een screenreader of een spraakherkenningsprogramma geen link leggen tussen de twee elementen. Het wordt moeilijker om het formulier in te vullen.

Oplossing

Gebruik de HTML-elementen en -attributen op de juiste manier tijdens de ontwikkeling van formulieren. Het for attribuut van het label element moet identiek zijn aan het id van het input element.

14. Is er tekstuele hulp na het verkeerd invullen van een formulier? 72%

Op 28% van de websites zijn foutmeldingen in formulieren afwezig of niet volledig. Op 70% zijn de foutmeldingen OK. Op 2% werden geen formulieren gevonden.

Impact

Als de foutmeldingen in formulieren niet duidelijk worden aangeduid en uitgelegd door middel van tekst, zullen sommige gebruikers ze niet vinden of niet begrijpen wat ze moeten verbeteren.