Advies- en auditbureau in digitale toegankelijkheid | WEB: properaccess.nl | TEL: 06-28742275 | MAIL: contact@properaccess.nl
Wij hebben de content van de website https://digitoegankelijk.pleio.nl/ onderzocht tussen 12 en 18 maart 2025. Op dit moment zijn 22 van de 33 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 11 nog fout gaat, en hoe je dat kunt verbeteren.
In dit onderzoek hebben we 33 van de 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. Dit is een contentonderzoek. Daarom zijn de eisen die over de techniek gaan niet meegenomen. Toch kunnen sommige bevindingen in dit rapport technisch zijn. Gebruik dit rapport in combinatie met het techniekonderzoek van Pleio om een toegankelijkheidsverklaring op te stellen.
| Beoordeling | SC |
|---|---|
| Voldoet of nvt | 22 |
| Voldoet niet | 11 |
| Totaal | 33 |
De afgekeurde succescriteria zijn: 1.1.1, 1.2.3, 1.2.5, 1.3.1, 1.3.2, 2.1.4, 2.4.4, 2.4.6, 3.3.2, 3.3.3, 4.1.2
Niet in scope:
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
In het hoofdmenu staat een knop met de eerste letter van de gebruikersnaam. Met deze knop kun je een tooltip openen met verschillende profielinstellingen en opties. De toegankelijke naam is "user.usermenu", wat deze functie niet nauwkeurig beschrijft. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.
Voeg tekst toe die deze knop goed beschrijft.
Voldoet niet aan SC 2.4.6
Link naar pagina: Homepagina
Het logo bovenaan deze pagina dat te zien is voordat je inlogt, staat in een img-element. Dit logo heeft geen alternatieve tekst (alt=””).
Hierdoor lezen schermlezers nu de bestandsnaam voor, en dat is niet de bedoeling. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat.
Voeg een alt-tekst toe.
Voldoet niet aan SC 1.1.1
Op deze pagina staan meerdere knoppen met de tekst "Lees meer". Deze knoppen hebben dezelfde tekst, maar openen verschillende secties. Hierdoor weet een blinde bezoeker niet welke sectie met welke knop geopend wordt.
Zorg dat de teksten van de knoppen verschillend zijn, zodat de bezoeker weet welke sectie bij een bepaalde knop hoort.
Voldoet niet aan SC 2.4.6
Link naar pagina: Zoekresultaten
In de zoekresultaten op de tabbladen "Afbeeldingen" en "Bestanden" staan decoratieve afbeeldingen met de alternatieve tekst “Soort bestand: JPG”. Deze afbeeldingen voegen niets toe aan de inhoud van de pagina en moeten daarom verborgen zijn voor schermlezers.
Verwijder de attributen role=”img” en aria-label van deze svg-elementen. Hierdoor zijn de afbeeldingen verborgen voor schermlezers.
Voldoet niet aan SC 1.1.1
Op de tabbladen "Afbeeldingen" en "Bestanden" is de HTML-volgorde van elementen in artikelen als volgt: eerst een afbeelding met een tekstalternatief en dan een kopje.
Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke afbeelding bij welk artikel hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.
De leesvolgorde los je dus eigenlijk op door de afbeelding te verbergen.
Verwijder de attributen role=”img” en aria-label van deze scg-elementen.
Voldoet niet aan SC 1.3.2
Op deze pagina, op het tabblad "Blogs" hebben sommige artikelen afbeeldingen. Zie bijvoorbeeld naast de kop "Deze 4 pijlers zijn een stevig fundament voor jouw online strategie bij een (lokale) overheid". Deze afbeeldingen zijn decoratief, toch hebben ze een alternatieve tekst gekregen die niets toevoegt aan de pagina, bijvoorbeeld “Ruwe betonnen pilaren en muren met verweerde texturen, verlicht door warm licht dat een roestachtige gloed op de oppervlakken werpt.”.
Verwijder de aria-labels waarin deze teksten zijn opgenomen.
Voldoet niet aan SC 2.4.4
Link naar pagina: Agenda items
Op deze pagina staat onder meerdere evenementen een link met de tekst “MS Teams”, maar elke link verwijst naar een andere URL. Er zijn dus meerdere links aanwezig in de steekproef met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.
Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.
Voldoet niet aan SC 2.4.4
Op deze pagina staat een link met onleesbare karakters. Het gaat om de link bij het evenement "Microsoft tips and tricks - gegeven door Microsoft specialist". In deze link staan de karakters “/”. De tekst van links mag geen symbolen bevatten zoals streepjes, underscores en andere. Deze karakters maken het doel van de link onduidelijk.
Verwijder de niet-leesbare karakters en herschrijf de tekst. Zorg dat de linktekst duidelijk en beschrijvend is.
Voldoet niet aan SC 2.4.4
Link naar pagina: Algemeen
Geen bevindingen
Link naar pagina: Werken met het Dashboard DigiToegankelijk (4 tips)
em-element is gebruikt voor opmaakOnder de kop "Tip1: Bekijk de historie van je organisatie" op deze pagina is een em-element gebruikt om tekst italic te maken. Het gaat om de tekst “ Tip: vink na het zoeken het filter ‘organisaties’ aan en druk op ‘toepassen’. Dat schoont de resultaten goed op.” Dit gebeurt ook onder de kop “Tip 2: Vergelijk je organisatie met een andere organisatie” en de kop “Tip 4: Gebruik het Dashboard voor rapportages”.
Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).
Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.
Voldoet niet aan SC 1.3.1
Link naar pagina: Microsoft tips and tricks - gegeven door Microsoft specialist
Op deze pagina staat onder de kop "Microsoft tips and tricks - gegeven door Microsoft specialist" een informatief element naast de datum (dag van de week), met het attribuut aria-hidden="true". Dit attribuut zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Gebruik dit daarom niet bij informatieve elementen.
Verwijder het attribuut aria-hidden=”true”.
Voldoet niet aan SC 1.3.1
strong-element is gebruikt voor opmaak
Onder de kop "Microsoft tips and tricks - gegeven door Microsoft specialist” is een strong-element gebruikt om tekst vetgedrukt te maken. Hele zinnen staan in dit element.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).
Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.
Voldoet niet aan SC 1.3.1
Met de knop met de tekst “Agenda” op deze pagina kun je een bestand downloaden, maar de toegankelijke naam is alleen “Agenda”. Dit beschrijft deze functie niet duidelijk genoeg. Een blinde bezoeker weet daardoor niet wat deze knop precies doet.
Voeg tekst toe die deze knop goed beschrijft.
Voldoet niet aan SC 2.4.6
Link naar pagina: Overzicht WCAG-EM vs. WCAG 2.1 vs. EN 301 549
strong-element is gebruikt voor opmaakIn de tabel op deze pagina is het strong-element gebruikt om tekst vet te maken. Het gaat om de rij- en kolomnamen. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).
Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.
Voldoet niet aan SC 1.3.1
strong-element is gebruikt in koptekstIn de koppen “Overzichtstabel: WCAG-EM vs. WCAG 2.1 vs. EN 301 549”, “Wat zijn de belangrijkste verschillen?” en “Wanneer gebruik je welke?” is naast het kop-element ook het strong-element gebruikt. Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).
Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.
Voldoet niet aan SC 1.3.1
Link naar pagina: Medewerker
Op deze pagina staat een knop met de tekst “Stuur bericht”. Hiermee open je een dialoogvenster. In dit venster staat een invoerveld met de placeholder-tekst “Schrijf een bericht”. Dit invoerveld heeft geen permanent label; de placeholder-tekst is hiervoor gebruikt. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen.
Voeg een label toe in de vorm van een tekst of een icoon.
Voldoet niet aan SC 3.3.2
Op deze pagina staat een knop met de tekst “Stuur bericht”. Hiermee open je een dialoogvenster. In dit venster staat een invoerveld met de placeholder-tekst “Schrijf een bericht”. Dit invoerveld heeft geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
Voldoet niet aan SC 4.1.2
Link naar pagina: Instellingen
Geen bevindingen
Link naar pagina: Mijn bestanden
Onder de kop “Bestanden” op deze pagina staan twee informatieve afbeeldingen: “Ingelogde gebruikers” en “Alleen eigenaar”. Deze hebben het attribuut aria-hidden="true". Schermlezers negeren inhoud met het attribuut aria-hidden="true". Deze inhoud is dus verborgen voor blinde bezoekers. Verwijder dit attribuut zodat een blinde bezoeker dezelfde informatie krijgt als een ziende bezoeker.
Verwijder aria-hidden="true".
Voldoet niet aan SC 1.1.1
Link naar pagina: Thema Onboarding (Bestanden)
Geen bevindingen
Link naar pagina: Groepen
Geen bevindingen
Link naar pagina: Maak agenda-item aan
Op deze pagina staat onder de kop “Welkomstbericht” een invoerveld (“Bericht”) dat geen toegankelijke naam heeft. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij hier in moeten vullen.
Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.
Voldoet niet aan SC 4.1.2
Op het tabblad "Instellingen" op deze pagina staat een keuzevakje met de tekst "Aanwezigheidsformulier". Hiernaast staat een knop met een icoon van een tandwiel. De knop bestaat alleen uit dit icoon, maar deze afbeelding heeft geen tekstalternatief. Als een knop alleen uit een afbeelding bestaat, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de knop.
Daarom moet de alternatieve tekst anders ingevuld worden dan bij een gewone informatieve afbeelding. Er moet niet in staan wat er te zien is, maar juist wat de functie of het doel is van de knop. Als dit niet duidelijk is, weet een schermlezer niet wat de functie van de knop is.
Voeg de beschrijving toe via een alt-tekst bij het img-element, een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.
Voldoet niet aan SC 1.1.1
Link naar pagina: Welkom bij deze Community
Op deze pagina staan twee video’s onder de kop “Video’s”. Deze video’s staan in iframes die geen title-attribuut hebben.
Iframes moeten een goede beschrijving hebben. Die staat meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.
Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt
welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.
Voldoet niet aan SC 4.1.2
Op deze pagina staan twee Vimeo-video’s. De gebruikte Vimeo-speler gebruikt sneltoetsen, zoals de ‘s' om een video te delen en de 'd’ om technische details te bekijken. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.
Je lost dit op door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).
Voldoet niet aan SC 2.1.4
Op deze pagina staan twee video's onder de kop "Video's". De eerste video bevat tekst met de URL "www.pleio.nl" aan het einde van de video (rond 1:34). De tweede video bevat dezelfde tekst met URL rond 1:02. Voor deze teksten is geen alternatief aanwezig. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.
Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.
Voldoet niet aan SC 1.2.3
De twee video's op deze pagina voldoen niet aan succescriterium 1.2.5, dat audiobeschrijving of een media-alternatief voor video's vereist. Specifiek voor deze video is audiobeschrijving (niveau AA) nodig, aangezien er voldoende ruimte is binnen het bestaande audiospoor.
Voeg een audiobeschrijving toe aan de video. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.
Voldoet niet aan SC 1.2.5