Toegankelijkheidsmonitor 2018

Moniteur de l'accessibilité 2018

  • 1070 studenten
  • 186 websites
  • 15 criteria
  • 24% toegankelijk

24% is een mooi resultaat. De stijging die we vorig jaar konden vaststellen zet zich duidelijk verder.

  • van 18% toegankelijke websites in 2017, naar 24% toegankelijk in 2018

  • Weliswaar scoort nog steeds 76% van de steekproef onvoldoende

We zijn blij dat we ook in het academiejaar 2017-2018 weer 1070 studenten hebben bereikt met deze toegankelijkheidsmonitor. Zij analyseerden 186 websites (13 meer dan vorige editie). Meer over de opzet en de methodologie.

Resultaat per jaar
  • 24% 2018
  • 18% 2017
  • 15% 2015
  • 14% 2013
  • 13% 2012
  • 8% 2011
  • 10% 2010
  • 7% 2009
  • 4% 2007
Resultaat per jaar

Steekproef

De steekproef bevat 186 websites, zowel Franstalig als Nederlandstalig, verdeeld in 15 categorieën. De categorieën zijn dezelfde als die van vorig jaar. Met het oog op de aankomende wetgeving over de toegankelijkheid van overheidswebsites hebben we de categorie Overheid toegevoegd.

Resultaten

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

Gemiddeld resultaat per criterium

Voor 20% 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. Dit geldt 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.

Dit punt is OK op de meeste websites. Op 21% 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.

Op meer dan de helft van de websites (59%) 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. Men kan namelijk 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.

De meerderheid van de geteste websites (60%) 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. Er bestaan echter 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.

49% 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.

Dit criterium gaat over links binnen een paragraaf. Links zijn traditioneel onderstreept en daardoor makkelijker te herkennen. Op 38% 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. Dit kan bijvoorbeeld met onderstreping of vetgedrukt.

Dit is meestal OK. Op 95% 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.

Op 63% 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, alsook het alt-attribuut leeg laten voor decoratieve afbeeldingen. Alle afbeeldingen achteraf omschrijven kan omslachtig zijn.

27% van de websites met video heeft ondertiteling, 23% heeft geen video en 50% 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.

44% 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.

76% 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.

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.

Op 72% van de websites is dit in orde. Op 27% van de websites zijn de formulieren niet juist gecodeerd. Op 1% 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.

Op 20% van de websites zijn foutmeldingen in formulieren afwezig of niet volledig. Op 77% zijn de foutmeldingen OK. Op 3% 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.

Oplossing

Zorg ervoor dat foutmeldingen duidelijk in tekst worden uitgedrukt en op een logische plaats staan.

Bij de grote meerderheid van de websites (75%) voldoet de broncode niet volledig aan de HTML standaard.

Impact

Als de broncode niet valideert, is er meer risico dat er dingen mislopen als de website met hulpmiddelen wordt geraadpleegd.

Oplossing

Volg de standaard tijdens de ontwikkeling om problemen te voorkomen. Gebruik de validator van het W3C om problemen te identificeren en corrigeren.

gemiddeld percentage per criterium

Analyse

De percentages per ijkpunt zijn opvallend gelijk aan die van vorige editie. De grootste vooruitgang noteren we bij het visuele verschil tussen linktekst en overige tekst (van 52% naar 62%). Ook mooi is dat het ondertitelen van video's stijgt van 43% naar 50% en de valide broncode van 18% naar 25%.

De volgende ijkpunten scoren het best (boven 75%):

  • Betekenisvolle links
  • Correct gebruik van lijsten
  • Tekstuele aanwijzingen bij fout ingevulde formuliervelden
  • Betekenisvolle paginatitels

De punten waar men het slechtst op scoort:

  • Valide HTML code
  • Tekstuele alternatieven voor afbeeldingen
  • Toetsenbord toegankelijkheid
  • Zichtbare tabfocus bij toetsenbordgebruik

Deelnemende scholen

Ephec Erasmus hogeschool Brussel HEB ESI Haute Ecole de la Province de Liège HoGent Odisee PXL Thomas More UCLL IFOSUP Wavre Artesis Plantijn Hogeschool Antwerpen

AnySurfer bedankt de docenten en studenten van de deelnemende scholen:

Contact