-
829 studenten -
175 websites -
15 criteria -
32% toegankelijk
Kort
AnySurfer onderzocht voor de tiende keer, met de hulp van hogeschoolstudenten, de toegankelijkheid van Belgische websites. 32% van de sites voldoen aan minimale toegankelijkheidsvereisten.
Wie heeft de websites getest?
829 studenten van 11 hogescholen testten elk 2 websites uit de steekproef. De studenten volgden een opleiding waarin webdesign of webontwikkeling aan bod komt.
Hartelijk bedankt aan de docenten en studenten van de deelnemende scholen:
- Artesis Plantijn Hogeschool Antwerpen, Bachelor Grafische en Digitale Media
- EPHEC, bachelor informatica
- Haute École Libre Mosane (HELMo), bachelor informatica
- Henallux, bachelor informatica
- HoGent Aalst, bachelor informatica
- HoGent Gent, bachelor informatica
- Howest Kortrijk, bachelor multimedia en communicatie
- Odisee Brussel, bachelor toegepaste informatica
- Thomas More Geel, bachelor informatica
- UC Leuven-Limburg, bachelor informatica
- Vives Kortrijk, bachelor toegepaste informatica
Welke websites zijn getest?
De steekproef bevatte 175 websites, zowel Franstalig als Nederlandstalig, verdeeld in 17 categorieën. De steekproef bevat 35 sites minder dan vorig jaar en ongeveer een derde is nieuw.
Welke methode is gebruikt?
Zoals in de voorgaande jaren, gebruikten de studenten een simpele testmethode, de Quickscan. Ze evalueerden elke website op 15 criteria. De meeste sites zijn door zes afzonderlijke studenten getest. Daarna verwerkte AnySurfer de resultaten. De criteria staan hieronder.
Hoe scoorden de websites?
56 van de 175 sites in de steekproef scoren 75% of meer en zijn minimaal toegankelijk volgens de 15 criteria van dit onderzoek. Dat is 32% van de geteste websites. 68% is dus niet toegankelijk.
Gemiddeld resultaat per criterium
De eerste 14 criteria zijn dezelfde als vorig jaar; enkel het laatste is gewijzigd. .
Voor 22% 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 16% 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 eenvoudig: de taal van de pagina moet aangeduid worden in de templates via het lang-attribuut.
Op de meeste websites (61%) 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.
42% 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 40% 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 93% 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 69% 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.
42% van de websites met video heeft ondertiteling, 31% heeft geen video en 27% heeft video's zonder ondertiteling.
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.
45% 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.
79% 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 (88%) 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 70% van de websites is dit in orde. Op 26% van de websites zijn de formulieren niet juist gecodeerd. Op 4% 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 19% van de websites zijn foutmeldingen in formulieren afwezig of niet volledig. Op 75% zijn de foutmeldingen OK. Op 5% werden geen formulieren gevonden waarvoor foutmeldingen nodig zijn.
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.
Op 26% van de sites is de inhoud niet goed leesbaar, of moet de gebruiker horizontaal scrollen als hij in de browser inzoomt tot 400%.
Impact
Slechtzienden die de zoom-functie van de browser gebruiken, maar ook mensen die de website bezoeken met een smartphone of op een klein scherm bekijken, kunnen geen toegang hebben tot de hele inhoud, of ze zijn verplicht horizontaal te scrollen om de inhoud te lezen.
Oplossing
Zorg ervoor dat de inhoud zich aanpast aan de breedte van het venster (responsive website) en dat de hele inhoud leesbaar is in die configuratie.
Wat betekenen deze resultaten
Op 68% van Belgische websites komt een persoon met een handicap obstakels tegen die het moeilijk of onmogelijk maken om bijvoorbeeld:
- een online cursus te volgen,
- het programma van een culturele activiteit te raadplegen,
- het nieuws te volgen,
- een overheidsdienst te contacteren.
De vooruitgang met 10 procentpunten ten opzichte van vorig jaar is te verklaren doordat het laatste criterium is gewijzigd. We vervingen een criterium dat meestal niet OK was door een criterium dat OK is in 75% van de gevallen. Een hele reeks websites die anders net onder de drempel van 75% scoorde, is daar nu net overheen gegaan.
| Jaar | Resultaat |
|---|---|
| 2007 | 4% |
| 2008 | - |
| 2009 | 7% |
| 2010 | 10% |
| 2011 | 8% |
| 2012 | 13% |
| 2013 | 14% |
| 2014 | - |
| 2015 | 15% |
| 2016 | - |
| 2017 | 18% |
| 2018 | 24% |
| 2019 | 22% |
| 2020 | 32% |
