Rapport:
Audit digitale toegankelijkheid website Losser Doet!

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl staan in de header drie links, bijvoorbeeld “Lees website voor”. Naast deze links staan decoratieve iconen. Deze iconen hebben een tekstalternatief, bijvoorbeeld “hearing”. Een decoratieve afbeelding geeft geen extra informatie en moet daarom worden verborgen voor schermlezers. Verwijder het tekstalternatief.
Dit probleem komt ook voor bij het “X”-icoon in de extra inhoud die door deze links wordt geopend.

Op alle pagina’s van https://www.losserdoet.nl heeft het logo bovenaan de pagina geen tekstalternatief. Informatieve afbeeldingen zoals een logo moeten altijd een tekstalternatief hebben. In het tekstalternatief moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die de afbeelding niet kunnen zien ook wat er staat. Zorg ervoor dat het logo een tekstalternatief heeft.

Op alle pagina’s van https://www.losserdoet.nl heeft het logo in de footer geen tekstalternatief. Het alt-attribuut ontbreekt. Logo’s zijn informatieve afbeeldingen en moeten daarom altijd een alternatieve tekst bevatten met de volledige tekst van het logo, zodat gebruikers van hulptechnologieën ook kunnen begrijpen wat erop staat. Voeg een alt-attribuut toe aan de afbeelding en plaats daarin een tekstalternatief met de volledige tekst van het logo. Aangezien het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Op de homepagina https://www.losserdoet.nl, onder de kop "Uit de agenda", staan afbeeldingen. De tekstalternatieven van deze afbeeldingen herhalen de tekst naast de afbeeldingen, bijvoorbeeld “Powerworkshop: Excel Fundamentals”. De schermlezer leest nu dezelfde informatie twee keer voor. Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/agenda/.

Op pagina https://www.losserdoet.nl/test, onder de kop "Meld je aan voor de Losser doet! nieuwsbrief", staan decoratieve iconen met dezelfde alternatieve tekst “arrow_right_alt”. Deze decoratieve afbeeldingen geven geen extra informatie en moeten daarom verborgen worden voor schermlezers. Verwijder de tekstalternatieven zodat de alt-attributen leeg worden.

Op pagina https://www.losserdoet.nl/nieuws/ont-wikkelen-en-versterken/ functioneert de afbeelding onder "Ont-wikkelen en versterken" als een link die bij activering een schermvullende weergave van de afbeelding opent. Deze informatie is niet aanwezig in de HTML-code. Daardoor is het voor een blinde bezoeker niet duidelijk dat dit een link is die een grote weergave van afbeelding opent. Dit kan worden opgelost door verborgen tekst (“opent een grote weergave”) toe te voegen of gebruik te maken van het attribuut aria-haspopup.
Dit probleem komt ook voor in de schermvullende weergave bij het “x”-icoon.

Op pagina https://www.losserdoet.nl/agenda/powerworkshop-excel-fundamentals/, boven de tekst “Datum”, staat een afbeelding zonder alt-attribuut. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/ bevat de video op verschillende momenten namen van de sprekers en logo’s, bijvoorbeeld rond 0:15 en 0:52. Er is echter geen media-alternatief en geen audiodescriptie beschikbaar. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Voor succescriterium 1.2.3 kan dit worden opgelost met een geschreven tekst (media-alternatief). Voor succescriterium 1.2.5 is dat echter niet genoeg. Hiervoor moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Audiobeschrijving moet alleen op de plekken worden toegevoegd waar de ruimte voor is. De meeste video’s hebben deze ruimte aan het begin en op het eind.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/ voldoet niet aan succescriterium 1.2.5. Dit succescriterium vereist audiodescriptie voor video’s. Audiodescriptie is nodig omdat er voldoende ruimte is binnen het bestaande audiospoor. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien. Audiobeschrijving moet alleen op de plekken worden toegevoegd waar de ruimte voor is. De meeste video’s hebben deze ruimte aan het begin en op het eind. Zie ook succescriterium 1.2.3.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl zijn in de header en footer een groep links aanwezig die visueel als één geheel wordt getoond. In de header gaat het om het topmenu met de links "Lees website voor", "Tekstgrootte" en "Zoeken". Deze groepering is niet terug te zien in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Plaats de elementen in een nav-element of een ul-element met meerdere li-elementen. Leg de relatie tussen de links vast in de code.

Op pagina https://www.losserdoet.nl/contact/ staat een formulier. Op de foutmeldingen is aria-hidden=”true” gebruikt. Deze code maakt het ontoegankelijk voor bezoekers met schermlezers. De relatie tussen de foutmelding en het invoerveld ontbreekt. Verwijder deze code.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/ik-heb-een-vacature/, op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, op pagina https://www.losserdoet.nl/flexpools/, bijvoorbeeld in de sectie “Hoe kan ik meedoen?”, en op andere pagina’s.

Op pagina https://www.losserdoet.nl/contact/ staan kopjes in de zijkolom die niet als koppen zijn gemarkeerd: E-mail, Telefoon, Adres. Voor bezoekers die hulpsoftware gebruiken, is een tekst die er visueel uitziet als kop maar niet als kop is gemarkeerd niet bruikbaar. Deze bezoekers navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te springen. Dit is alleen mogelijk wanneer de koppen ook in de code als kop zijn vastgelegd. Wanneer koppen uitsluitend visueel zijn vormgegeven (bijvoorbeeld door vetgedrukte tekst), wijkt bovendien de structuur van de informatie in de code af van de visuele structuur.
Markeer koppen met het juiste HTML-element op het correcte kopniveau (h1 t/m h6).
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/?s=we, onder andere bij de koppen in de zoekresultaten, op pagina https://www.losserdoet.nl/ik-heb-een-vacature/, op pagina https://www.losserdoet.nl/agenda/, bijvoorbeeld bij “Filters”, en op andere pagina’s.

Op pagina https://www.losserdoet.nl/contact/ staat een formulier. Alle label-elementen zijn niet expliciet gekoppeld aan de bijbehorende invoervelden. De ID’s staan niet in de bijbehorende invoervelden. Label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Door deze koppeling lezen schermlezers het label voor als een bezoeker direct naar het invoerveld navigeert. Andere oplossingen zijn ook mogelijk.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/ik-heb-een-vacature/, op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, op pagina https://www.losserdoet.nl/flexpools/, bijvoorbeeld in de sectie “Hoe kan ik meedoen?”, en op andere pagina’s.

Op pagina https://www.losserdoet.nl/test wordt een kop van niveau 1 direct gevolgd door een andere kop van hetzelfde niveau. Dit betreft “404” en “Oeps! Die pagina kon niet worden gevonden!”. Als twee kop-elementen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Dit kan bijvoorbeeld worden opgelost door deze twee koppen samen te voegen tot één of door het niveau van een van de koppen aan te passen.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/flexpools/ bij “Doe jij ook mee?” en “Hier vind je meer uitleg”.

Op pagina https://www.losserdoet.nl/?s=we is de broodkruimelnavigatie geïmplementeerd als een verzameling links, maar de onderliggende structuur en relatie tussen deze links zijn niet semantisch gedefinieerd in de HTML. Dit kan worden opgelost door de links in een nav- of een ul- of ol-element met twee of meerdere li-elementen te plaatsen.
Hetzelfde probleem komt voor op alle andere pagina’s met broodkruimelnavigatie.

Op pagina https://www.losserdoet.nl/?s=we zijn de pagineringslinks onder de zoekresultaten visueel gegroepeerd, maar deze groepering is niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat pagineringslinks bij elkaar horen, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of ol-element of plaats een kopje boven de paginering dat alleen voor een schermlezer zichtbaar is.

Op pagina https://www.losserdoet.nl/nieuws/ont-wikkelen-en-versterken/ wordt in het kruimelpad het strong-element gebruikt voor opmaak, bijvoorbeeld bij “Ont-wikkelen en versterken”. Het strong-element heeft een semantische betekenis: het geeft aan dat de tekst extra nadruk krijgt. Gebruik dit element daarom niet uitsluitend voor een visueel effect (vetgedrukte tekst).
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/agenda/powerworkshop-excel-fundamentals/, op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, op pagina https://www.losserdoet.nl/extern/secretaris/ en op andere pagina’s met broodkruimelnavigatie.

Op pagina https://www.losserdoet.nl/nieuws/ont-wikkelen-en-versterken/ wordt onder de kop "Ont-wikkelen en versterken" het em-element gebruikt voor opmaak, bijvoorbeeld bij “Interview Martin Beld, KREW academy”. Het em-element heeft een semantische betekenis: het geeft aan dat tekst extra nadruk krijgt. Gebruik dit element daarom niet uitsluitend voor een visueel effect.

Op pagina https://www.losserdoet.nl/nieuws/ont-wikkelen-en-versterken/ zijn de volgende teksten koppen, maar de kop-elementen ontbreken. Het strong-element wordt gebruikt om deze teksten eruit te laten zien als koppen. Zie bijvoorbeeld “Trainingen die vrijwilligers laten groeien”, “Over de KREW academy” en andere teksten. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Verwijder het strong-element of em-element en markeer deze tekst met een passend kop-element, zoals h2 of h3. De visuele opmaak kan eventueel met CSS worden toegepast. Dit type element wordt vaak toegevoegd via de knop "B" (vet) in een tekstbewerker.
Dit probleem komt ook voor op pagina’s https://www.losserdoet.nl/agenda/powerworkshop-excel-fundamentals/, https://www.losserdoet.nl/extern/secretaris/, https://www.losserdoet.nl/cursussen/gespreksvoering-als-vrijwilliger/ en andere.

Op pagina https://www.losserdoet.nl/ik-heb-een-vacature/ staan groepen selectievakjes, voorafgegaan door tekst, bijvoorbeeld “Begeleiding*”. Visueel vormen deze elementen groepen, maar die relatie is niet vastgelegd in de HTML. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst, bijvoorbeeld “Begeleiding*”.

Op pagina https://www.losserdoet.nl/agenda/ bevatten de select-elementen “Categorie” en “Locatie” selectievakjes. Deze selectievakjes zijn voor schermlezers verborgen met “display:none”. Verberg native selectievakjes niet met “display:none” of vergelijkbare technieken die ze uit de toegankelijkheidsboom verwijderen. Zie ook succescriterium 4.1.2.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/ staan onder de teksten “Wat we zoeken:” en “Wat we bieden:” lijsten met 3 en 4 items. Deze lijsten hebben geen correcte markering. Tekst die eruitziet als een opsomming moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Zorg ervoor dat alle opsommingen correct worden gemarkeerd in de HTML-structuur, bijvoorbeeld met een ul-element (opsomming met opsommingstekens).

Op pagina https://www.losserdoet.nl/flexpools/, onder de kop "Hier vind je meer uitleg", staan secties met verborgen inhoud. In deze secties zijn de elementen die de verborgen inhoud openen en sluiten niet gemarkeerd als koppen. De teksten waarmee delen van een accordeon kunnen worden ingeklapt en uitgeklapt, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3. Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven.

Op pagina https://www.losserdoet.nl/flexpools/ is de kop “Flexpool – Klussen” geen inhoudelijke kop, omdat er geen content onder staat. Kop-elementen zijn bedoeld om informatie op een pagina te structureren. Bezoekers die hulpsoftware gebruiken, vertrouwen op koppen om te navigeren en de structuur van de pagina te begrijpen. Verwijder het h3-element of plaats inhoud onder deze kop.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/nieuws/ staan artikelen die uit twee links bestaan: een link met een afbeelding en een link met een titel. De volgorde van de HTML-elementen binnen de artikelen is niet logisch. De link met de afbeelding en de datum staat boven de kop. De huidige volgorde is: links met afbeeldingen, datum, kop, tekst. Dat komt doordat de koppen niet bovenaan in de code van elk artikel staan. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Combineer de links tot één link en laat het alt-attribuut leeg. Plaats de datum onder de kop.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/contact/ staat een formulier. De invoervelden voor persoonsgegevens (“Naam”, “E-mailadres”, “Telefoonnummer”) missen het autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals naam, e-mailadres en telefoonnummer moeten het autocomplete-attribuut met de juiste waarde hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden ingevoerd. Op deze pagina staat meer informatie over autocomplete en welke waarden verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/ik-heb-een-vacature/, op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, op https://www.losserdoet.nl/, in de footer, bij het veld voor het invoeren van een e-mailadres, en op andere pagina’s.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl staat lichtblauwe tekst (HEX #3AABE6) op een witte achtergrond of andersom. Dit geldt bijvoorbeeld voor links in het hoofdmenu, voor tekst en links op de homepagina, voor teksten zoals “Als vrijwilliger kan je veel ... kan meedoen” en andere elementen. De contrastratio is te laag: 2,6:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

Op alle pagina’s van https://www.losserdoet.nl staat witte tekst op een oranje achtergrond (HEX #E87722) of andersom. Dit geldt bijvoorbeeld voor de knop “Flexpools” in het menu, de knop ‘Aanmelden’ in de footer en koppen zoals “Uit de agenda” op de homepagina en andere pagina’s. De contrastratio is te laag: 2,9:1. Voor normale tekst moet de contrastratio minimaal 4,5:1 zijn. Voor grote tekst, groter dan 24px, moet de contrastratio minimaal 3,0:1 zijn.

Op alle pagina’s van https://www.losserdoet.nl staat op een klein scherm in de header blauwe tekst (HEX #3AABE6) “Menu” op een lichtgrijze achtergrond (HEX #F0F0F0). De contrastratio is te laag: 2,3:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

Op alle pagina’s van https://www.losserdoet.nl veranderen links bij hover naar grijze tekst (HEX #8E8E8E) op een witte achtergrond. Dit geldt bijvoorbeeld voor links in de footer en op de homepagina, zoals “Ont-wikkelen en versterken” en andere links. De contrastratio van deze tekst is 3,3:1. Zorg ervoor dat het kleurcontrast niet lager wordt dan 4,5:1. Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook als het element toetsenbordfocus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover).

Op pagina https://www.losserdoet.nl/ik-heb-een-vacature/ staat grijze tekst (HEX #808080) op een witte achtergrond, bijvoorbeeld “Begeleiding*”. De contrastratio is te laag: 3,9:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

Op pagina https://www.losserdoet.nl/agenda/ hebben de select-elementen “Categorie”, “Datum” en “Locatie” grijze (HEX #808080) teksten op een lichte (HEX #F6F5FC) achtergrond. De contrastverhouding is te laag: 3,6:1. Zorg ervoor dat de teksten minimaal een contrastverhouding van 4,5:1 hebben.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Op pagina https://www.losserdoet.nl/agenda/ bevat de knop “wis” grijze (HEX #808080) tekst op een witte achtergrond. De contrastverhouding is 3,9:1. Wanneer minimaal één optie in de filters is geselecteerd, wordt de tekst op de knop “wis” rood (HEX #FF0000) op een witte achtergrond. De kleurcontrastverhouding is dan 3,7:1. Beide waarden liggen onder het vereiste minimum 4,5:1 voor tekst van deze grootte.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Op pagina https://www.losserdoet.nl/agenda/ is in het element “Datum” de huidige datum weergegeven als een wit cijfer op een roze (HEX #F67280) achtergrond, met een contrastverhouding van 2,8:1. Een vergelijkbaar contrastprobleem doet zich voor bij de data van de vorige en volgende maanden: deze worden weergegeven als grijze (HEX #CCCCCC) cijfers op een witte achtergrond met een contrastverhouding van 1,6:1. Dit is lager dan het vereiste minimum van 4,5:1.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Op pagina https://www.losserdoet.nl/flexpools/ staat blauwe tekst (HEX #3AABE6) op een grijze achtergrond (HEX #F0F0F0), bijvoorbeeld “Af en toe tijd in het weekend?”. De contrastratio is te laag: 2,3:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl zijn in het head-element van de HTML-code het attribuut user-scalable=no aanwezig. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen. Verwijder deze code.

Wanneer de homepagina https://www.losserdoet.nl wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, gaat de tekst van de links onder de kop “Actueel” deels verloren. Zie bijvoorbeeld “Powerworkshop: Excel Fundamentals”. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Wanneer pagina https://www.losserdoet.nl/flexpools/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, gaat in secties met verborgen inhoud een deel van het formulier deels verloren. Zie bijvoorbeeld de links in “Cloudflare”. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de homepagina https://www.losserdoet.nl wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaan de kop “En we doen het samen!” en de tekst daaronder deels verloren. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Wanneer pagina https://www.losserdoet.nl/ik-heb-een-vacature/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaat de volgende tekst deels verloren: “Je hebt nog geen bestand gekozen”. Alles moet zichtbaar blijven, ook bij een dergelijke zoom.

Wanneer pagina https://www.losserdoet.nl/agenda/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaat de tekst in de agenda-items deels verloren. Zie bijvoorbeeld “Powerworkshop: Excel Fundamentals”. Zorg ervoor dat alles nog leesbaar is wanneer wordt ingezoomd tot 400%.

Wanneer pagina https://www.losserdoet.nl/flexpools/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaat in secties met verborgen inhoud een deel van het formulier deels verloren. Zie bijvoorbeeld de links in “Cloudflare”. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/contact/ heeft de knop “VERSTUUR BERICHT” een lichtgrijze (HEX #B7B6B5) toetsenbordfocus op een witte achtergrond. De contrastratio tussen deze kleuren is 2,0:1 en ligt onder de vereiste minimale waarde van 3,0:1.

Op deze website wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een rand. Die aanpassing is met CSS toegevoegd. Voor de standaard focusindicator zijn geen contrasteisen in WCAG; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen, naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél. Zorg dat het contrast van de aangepaste focusindicator minimaal 3,0:1 is.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/ik-heb-een-vacature/, op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, op pagina https://www.losserdoet.nl/flexpools/, bijvoorbeeld in de sectie “Hoe kan ik meedoen?”, en op andere pagina’s.

Op pagina https://www.losserdoet.nl/agenda/ bevatten de select-elementen “Categorie” en “Locatie” selectievakjes met een grijze (HEX #ADB5BD) rand op een witte achtergrond, wat resulteert in een contrastverhouding van 2,1:1. Het kleurcontrast tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze filteropties moet minimaal 3,0:1 zijn.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers de pagina https://www.losserdoet.nl/agenda/ openen bij een standaard desktop-viewportbreedte (bijvoorbeeld 1280px) en de tekstafstand toepassen zoals beschreven in dit succescriterium, worden sommige links “Lees meer” gedeeltelijk onzichtbaar en onleesbaar. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

Op pagina https://www.losserdoet.nl/extern/secretaris/ wordt de tekst van de link “secretaris@stichtinghetstaringmonument.nl” deels onzichtbaar en onleesbaar wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium. De content moet in zulke gevallen goed blijven functioneren en leesbaar blijven; dit kan worden bereikt door tekstcontainers responsief te maken.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/agenda/ toont het filterelement “Categorie” bij hover extra content (“Filter op categorie”) dat andere pagina-elementen overlapt, zoals de kop eronder (bijvoorbeeld “Vandaag (donderdag)”). Zorg dat bezoekers de extra content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan een bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl is op een klein scherm een knop voor het mobiele menu aanwezig. Deze knop is niet met het toetsenbord te bedienen. Zorg ervoor dat alle functionaliteit volledig met alleen het toetsenbord kan worden bediend, zonder dat een muis nodig is.
Dit probleem komt ook voor bij de sluitknop in het mobiele menu.

Op alle pagina’s van https://www.losserdoet.nl staat bovenaan de pagina op een klein scherm een logo dat als link functioneert. Deze link is niet met het toetsenbord te bedienen. Zorg dat alle functionaliteit volledig via het toetsenbord toegankelijk en bedienbaar is, zonder gebruik van een muis.

In de header opent de knop “Lees website voor” een extra sectie met een knop “Lees voor”. Deze knop is niet toegankelijk met het toetsenbord. Zorg ervoor dat alle functionaliteit volledig met alleen het toetsenbord te bedienen is, zonder een muis te hoeven gebruiken. Zie pagina https://www.losserdoet.nl.

Op pagina https://www.losserdoet.nl/test staan boven de kop “Meld je aan voor de Losser doet! nieuwsbrief” interactieve elementen die functioneren als links. Deze elementen zijn niet met het toetsenbord bereikbaar. Alle functionaliteit op een webpagina moet met het toetsenbord te bedienen zijn.

Op pagina https://www.losserdoet.nl/agenda/ zijn agenda-items niet toegankelijk met alleen het toetsenbord. Maak ze toegankelijk voor mensen die uitsluitend het toetsenbord gebruiken.

Op pagina https://www.losserdoet.nl/agenda/ tonen filterelementen extra inhoud met selectievakjes bij hover, bijvoorbeeld “Filter op categorie”, maar deze selectievakjes zijn niet beschikbaar voor toetsenbordgebruikers. Zorg ervoor dat ze ook toegankelijk zijn voor deze groep gebruikers.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Pagina https://www.losserdoet.nl/test bevat de instructie: “Navigeer terug naar de homepagina of kies uit een van de links hieronder.”. Deze links zijn echter niet met het toetsenbord te bereiken en te bedienen. Zorg dat alle interactieve elementen met het toetsenbord te bedienen zijn.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De video op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/ is opgenomen in een YouTube-videospeler die gebruikmaakt van sneltoetsen met één teken. De 'k' toets kan gebruikt worden om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met hulpsoftware. 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. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player\_parameters\#disablekb (Engels).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl ontbreekt een skiplink. Met een skiplink kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Zorg dat de skiplink de eerste link is op de pagina.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/test is de titel “Losser doet! - Vrijwilligerswerk in Losser : Losserdoet!” geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Wanneer correct ingesteld, wordt deze tekst bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina die de inhoud van de pagina beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl staan in de header drie links, bijvoorbeeld “Lees website voor”, die extra inhoud openen. De toetsenbordfocus gaat naar deze inhoud, maar na het laatste item verschuift de focus naar de hoofdpagina, terwijl deze extra inhoud open blijft en een deel van de pagina bedekt. Dit is geen logische focusvolgorde. Dit kan worden opgelost door de focus binnen het venster te houden totdat op de sluitknop is geklikt of op de ESC-toets is gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus verloren gaat.

Op alle pagina’s van https://www.losserdoet.nl verschijnt op een klein scherm een menuknop die een mobiel menu opent. Op dit moment kan met het toetsenbord uit het mobiele menu worden genavigeerd. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden totdat op de sluitknop is geklikt of op de ESC-toets is gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus het menu verlaat.

Op alle pagina’s van https://www.losserdoet.nl komt de toetsenbordfocus na de link “nieuwsbrief” terecht op een onzichtbaar interactief element in de header. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Zorg ervoor dat alleen zichtbare elementen toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch en voorspelbaar blijft.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.losserdoet.nl, onder de kop “En we doen het samen!”, staan links met telefoon- en locatie-iconen. De toegankelijke namen van deze links zijn “phone” en “location_on”. Deze teksten beschrijven niet voldoende wat de bestemming van de link is. Dit probleem komt ook voor bij links in de header die iconen bevatten met overbodige tekstalternatieven die worden voorgelezen, bijvoorbeeld: “hearing Lees website voor”.

Op de homepagina https://www.losserdoet.nl, onder de koppen “Recent nieuws” en “Recente vacatures”, staan artikelen. Elk artikel bestaat uit twee links. De link met de afbeelding heeft geen toegankelijke naam en heeft daardoor geen duidelijk linkdoel. Dit kan bijvoorbeeld worden opgelost door de twee links samen te voegen tot één link met een goede beschrijving.

Op pagina https://www.losserdoet.nl/test staat een link “homepagina”. Deze link verwijst niet naar de homepagina van de huidige website https://www.losserdoet.nl, maar naar een andere website https://www.fundamentlosser.nl. Dit kan verwarrend zijn voor bezoekers die hulpsoftware gebruiken. Het doel van de link is niet duidelijk.

Op pagina https://www.losserdoet.nl/?s=we hebben de pagineringslinks korte tekst, zoals 1, 2 en 3. Deze teksten beschrijven niet goed waar de links naar toe verwijzen. Voor ziende bezoekers is het duidelijk, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn. Dit kan verbeterd worden door de linkteksten aan te vullen met het (visueel verborgen) woord ‘pagina’. Maak deze teksten duidelijker, zodat bezoekers die een schermlezer gebruiken weten wat de bestemming van de link is.

Op pagina https://www.losserdoet.nl/nieuws/ staan artikelen die uit twee links bestaan: links met afbeeldingen en links met titels. De links met afbeeldingen hebben geen beschrijvende toegankelijke naam, bijvoorbeeld “martin”. Het doel van deze links is niet duidelijk. Dit kan bijvoorbeeld worden opgelost door de twee links samen te voegen tot één link met een goede beschrijving.

Op pagina https://www.losserdoet.nl/nieuws/ont-wikkelen-en-versterken/ functioneert de afbeelding onder "Ont-wikkelen en versterken" als een link die bij activering een schermvullende weergave van de afbeelding opent. Deze link heeft geen toegankelijke naam en heeft daardoor geen duidelijk linkdoel. Daardoor is het voor een blinde bezoeker niet duidelijk dat dit een link is die een grote weergave van een afbeelding opent. Dit probleem kan worden opgelost door een beschrijvend tekstalternatief toe te voegen aan de linkafbeelding of door het aria-label-attribuut met een beschrijvende tekst aan de link toe te voegen. Andere oplossingen zijn ook mogelijk.
Dit probleem komt ook voor in de schermvullende weergave bij de “x”-link.

Pagina https://www.losserdoet.nl/test bevat de instructie: “Navigeer terug naar de homepagina of kies uit een van de links hieronder.”. De links waarnaar verwezen wordt, hebben geen zichtbare tekst. Dit zorgt voor misleidende instructies en kan verwarrend zijn voor gebruikers. Zorg ervoor dat de links duidelijk zichtbare en begrijpelijke linkteksten hebben.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/ staat een iframe met een video. Het title-attribuut is "Stichting Onderwijsbegeleiding geeft talent een kans". In het title-attribuut van een iframe moet niet alleen worden aangegeven waar het over gaat, maar ook tot welk type content het behoort (bijvoorbeeld een podcast of video). De beschrijving in het title-attribuut moet uniek en betekenisvol zijn, zodat bezoekers met hulpsoftware kunnen bepalen of ze de inhoud willen verkennen. Wijzig het title-attribuut en geef daarin aan welk type inhoud het iframe bevat en waar het over gaat.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van deze website is de standaard toetsenbordfocusstijl verwijderd van interactieve elementen en is er geen aangepaste focusindicator als alternatief voorzien. Zie bijvoorbeeld de links in de header en footer op pagina https://www.losserdoet.nl. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die toetsenbordfocus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina zij zich bevinden. Implementeer een aangepaste focusindicator die voldoet aan de toegankelijkheidsnormen (voldoende contrast, duidelijke visuele aanduiding).
Dit probleem doet zich ook voor bij andere elementen op andere pagina’s.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/contact/ staat een formulier. Alle invoervelden in het formulier hebben geen toegankelijke naam. Er zijn echter zichtbare labels voor deze velden aanwezig, zoals “Naam”. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg ervoor dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin van de naam. De toegankelijke naam mag ook gelijk zijn aan de zichtbare tekst.
Dit probleem komt ook voor op pagina’s https://www.losserdoet.nl/ik-heb-een-vacature/, https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, https://www.losserdoet.nl/flexpools/, bijvoorbeeld in de sectie “Hoe kan ik meedoen?”, en op andere pagina’s.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website op een klein scherm wordt bekeken, hebben de knoppen in de header toegankelijke namen in het Engels: “hearing”, “format_size” en “search”. Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Dit zorgt voor een onnatuurlijke uitspraak en vermindert de begrijpelijkheid voor gebruikers van schermlezers. Deze teksten moeten in het Nederlands worden vertaald.
Zie pagina https://www.losserdoet.nl.

De primaire taal van de pagina https://www.losserdoet.nl is Nederlands (lang="nl-NL"), maar de pictogrammen voor telefoon en locatie hebben tekstalternatieven in het Engels: “phone” en “location_on”. Aangezien de pictogrammen als links functioneren, zijn hun toegankelijke namen eveneens in het Engels. Vertaal deze teksten naar het Nederlands.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/?s=we, waar de tekst in de titel “Search results for ‘we’: Losserdoet!” in het Engels staat.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/contact/ staat een formulier. Op de foutmeldingen is aria-hidden=”true” gebruikt. Deze code maakt ze niet toegankelijk voor bezoekers met schermlezers. Verwijder deze code.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/ik-heb-een-vacature/, op pagina https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, op pagina https://www.losserdoet.nl/flexpools/, bijvoorbeeld in de sectie “Hoe kan ik meedoen?”, en op andere pagina’s.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.losserdoet.nl staat in de footer een e-mailinvoerveld met de placeholder tekst "Jouw emailadres". Dit veld heeft geen permanent label. 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header openen de links “Lees website voor”, “Tekstgrootte” en “Zoeken” aanvullende inhoudssecties, maar in de code wordt niet aangegeven of deze secties geopend of gesloten zijn. Als een link extra inhoud kan tonen en verbergen, dan moet hulpsoftware de staat van deze inhoud (zichtbaar of verborgen) kunnen bepalen. Daarvoor kan het aria-expanded-attribuut gebruikt worden. Hierdoor kunnen schermlezers gebruikers correct informeren over de huidige staat van de bijbehorende inhoudssecties. Zie bijvoorbeeld de pagina https://www.losserdoet.nl.

In de header opent de knop “Lees website voor” een sectie met een interactief element met het label “Lees voor”. Dit element gedraagt zich als een knop, maar heeft niet de juiste toegankelijke rol. Hierdoor kunnen schermlezers niet doorgeven dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Het gevolg is dat alle content die met deze knop kan worden geopend ook niet toegankelijk is. Zorg dat de knop de juiste toegankelijke rol heeft. Zie bijvoorbeeld de pagina https://www.losserdoet.nl.

Op alle pagina’s van https://www.losserdoet.nl staat bovenaan de pagina op een klein scherm een logo dat als link functioneert. Deze link heeft niet de juiste toegankelijke rol. Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Zorg ervoor dat dit element de juiste toegankelijke rol heeft. De beste oplossing is het gebruik maken van standaard HTML-elementen.
Een vergelijkbaar probleem komt vaker voor, bijvoorbeeld op pagina https://www.losserdoet.nl/test.

Op alle pagina's van https://www.losserdoet.nl staan bovenaan twee navigatie-elementen zonder toegankelijke namen. Dit kan gebruikers van schermlezers in verwarring brengen over welke navigatie waarvoor dient. Dit kan worden opgelost door deze navigatie-elementen toegankelijke namen te geven, bijvoorbeeld door een aria-label-attribuut met beschrijvende tekst toe te voegen.

Op alle pagina’s van https://www.losserdoet.nl is op een klein scherm een knop voor het mobiele menu aanwezig. Dit element gedraagt zich als een knop, maar heeft niet de juiste toegankelijke rol. Hierdoor kunnen schermlezers niet doorgeven dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Zorg dat de knop de juiste toegankelijke rol heeft.
Dit probleem komt ook voor bij de sluitknop in het mobiele menu.

Op alle pagina’s van https://www.losserdoet.nl is op een klein scherm een knop voor het mobiele menu aanwezig. Deze knop geeft echter geen informatie over de status van het menu (geopend of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van schermlezers. Dit kan bijvoorbeeld opgelost worden door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die voor ziende bezoekers met CSS wordt verborgen. Een andere optie is om het aria-expanded-attribuut te gebruiken op de menuknop. Dit attribuut moet de waarde “true” krijgen als het menu getoond wordt, en “false” als het menu verborgen is.

Op alle pagina’s van https://www.losserdoet.nl is het element “Flexpools” in het hoofdmenu onjuist gecodeerd als een knop. Het element brengt de bezoeker namelijk naar een andere locatie. Hiervoor is de rol van link bedoeld. De rol van knop is bedoeld voor elementen waarmee bezoekers een actie kunnen uitvoeren. Gebruik voor dit element de rol van link. Pas hiervoor het element aan door bijvoorbeeld een a-element te gebruiken.

Op de homepagina https://www.losserdoet.nl, onder de koppen “Recent nieuws” en “Recente vacatures”, staan artikelen. Elk artikel bestaat uit twee links. De link met de afbeelding heeft geen toegankelijke naam. Dit kan bijvoorbeeld worden opgelost door de twee links samen te voegen tot één link met een beschrijvende toegankelijke naam.

Op pagina https://www.losserdoet.nl/contact/ staat een formulier. Alle invoervelden in het formulier hebben geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef de invoervelden dus toegankelijke namen, bijvoorbeeld door label-elementen aan de velden te koppelen (vervang het name-attribuut door het id-attribuut op de input-elementen).
Dit probleem komt ook voor op pagina’s https://www.losserdoet.nl/ik-heb-een-vacature/, https://www.losserdoet.nl/extern/begeleider-bij-stichting-onderwijsbegeleiding/, https://www.losserdoet.nl/flexpools/, bijvoorbeeld in de sectie “Hoe kan ik meedoen?”, en op andere pagina’s.

Op pagina https://www.losserdoet.nl/test staan boven de kop “Meld je aan voor de Losser doet! nieuwsbrief” interactieve elementen die functioneren als links. Deze elementen hebben echter niet de juiste toegankelijke rol en naam. Als deze elementen als links moeten functioneren, geef ze dan een toegankelijke rol en naam. Als dit niet de bedoeling is, verberg deze elementen dan voor de schermlezer.

Op pagina https://www.losserdoet.nl/nieuws/ont-wikkelen-en-versterken/ staat een link met een afbeelding die een schermvullende afbeelding opent. Deze link heeft geen toegankelijke naam. Hierdoor is voor bezoekers die hulpsoftware gebruiken onduidelijk wat de bestemming of de functie van de link is.
Dit probleem komt ook voor in de schermvullende weergave bij de “x”-link.

Op pagina https://www.losserdoet.nl/nieuws/ont-wikkelen-en-versterken/ staat een link met een afbeelding die een dialoogvenster met een schermvullende afbeelding opent. Dit dialoogvenster mist zowel een correcte rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") of een aria-describedby en role="dialog".

Op pagina https://www.losserdoet.nl/ik-heb-een-vacature/ staat een knop “Voeg je logo toe”. Deze knop heeft geen toegankelijke rol. Elk HTML-element heeft van zichzelf standaard een rol die zijn functie en gedrag beschrijft. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Voorbeelden zijn button, a (link), en header, die automatisch een rol hebben die door browsers en hulpmiddelen zoals schermlezers wordt herkend. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Als een rol niet toegankelijk is, dan betekent dit dat de rol niet correct is ingesteld of dat niet de juiste code is gebruikt. Zorg dat de knop de juiste rol krijgt.

Op pagina https://www.losserdoet.nl/agenda/ hebben onder “Filters” de select-elementen “Categorie”, “Datum” en “Locatie” niet de juiste toegankelijke rollen. Voor goede toegankelijkheid moet elk HTML-element een duidelijke betekenis hebben. De ingebouwde rol bepaalt de functie van het element, en schermlezers gebruiken deze semantiek om correct uit te leggen wat het element doet en hoe het werkt. Kies daarom waar mogelijk voor een standaard HTML-oplossing, zoals een select-element. Alleen als dat technisch niet haalbaar is, kan een passende ARIA-rol — zoals listbox — worden ingezet als alternatief.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.

Op dezelfde pagina https://www.losserdoet.nl/agenda/ is er een probleem met rollen bij de agenda-items: ze functioneren als links, maar hebben niet de juiste toegankelijke rol. Gebruik een native a-element om het volledige agenda-item te omwikkelen, zodat het correcte link-semantiek en ingebouwde toetsenbordondersteuning heeft. Vermijd het gebruik van een div-element voor interactief linkgedrag. Als herstructureren niet mogelijk is, zorg dan dat correcte link-semantiek en volledige toetsenbordtoegankelijkheid worden geboden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.losserdoet.nl/agenda/ tonen de select-elementen “Categorie” en “Locatie” het aantal geselecteerde selectievakjes. Dit aantal is een statusmelding die automatisch door schermlezers moet worden aangekondigd wanneer deze verandert. De benodigde code om deze functionaliteit mogelijk te maken ontbreekt echter. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen. Voeg hiervoor aria-live-attribuut of role="status" aan de melding toe. Zorg dat de tekst duidelijk is, bijvoorbeeld “4 opties geselecteerd”.
Dit probleem komt ook voor op pagina https://www.losserdoet.nl/trainingen-en-cursussen/.