Rapport:
Audit digitale toegankelijkheid website Centrum Jong voor jeugd & gezin

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl staat in het logo bovenaan de pagina de volledige tekst "Centrum Jong voor jeugd & gezin", maar het tekstalternatief bevat alleen "Centrum Jong". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Het tekstalternatief moet worden aangepast naar: “Centrum Jong voor jeugd & gezin”.

Op pagina https://www.centrumjong.nl bevindt zich in het menu bovenaan een link met een vergrootglasicoon die een zoekbalk opent. In deze zoekbalk staat een knop die alleen bestaat uit een afbeelding van een vergrootglas. Deze knop heeft geen tekstalternatief. Als een knop alleen uit een afbeelding bestaat, dan wordt de alternatieve tekst van de afbeelding gebruikt als naam van de knop. Deze alternatieve tekst moet niet beschrijven wat er te zien is, maar wat de functie of het doel van de knop is. Als dit ontbreekt, is de functie van de knop onduidelijk voor schermlezers. De beschrijving kan worden toegevoegd via een aria-label of een visueel verborgen tekst die toegankelijk is voor schermlezers. Op pagina https://www.centrumjong.nl/test is hetzelfde probleem aanwezig. Ook hier staat in de zoekbalk een knop die enkel bestaat uit een afbeelding van een vergrootglas, zonder dat er een toegankelijke naam aan is gegeven. Hierdoor is de functie van de knop niet duidelijk voor hulpsoftware. De beschrijving moet op dezelfde manier worden toegevoegd: via een aria-label of een visueel verborgen tekst. Op pagina https://www.centrumjong.nl/?s=jong staat dezelfde zoekbalk met dezelfde knop die alleen bestaat uit een afbeelding zonder tekstalternatief. Ook hier is het voor bezoekers die hulpsoftware gebruiken niet duidelijk wat de functie van de knop is.

Op pagina https://www.centrumjong.nl verschijnt in de header op een klein scherm een menulink die bestaat uit drie horizontale lijnen. Deze link opent het navigatiemenu. Wanneer erop wordt geklikt, verandert het icoon in een kruis en verandert de functie van de link naar het sluiten van het menu. De alternatieve tekst blijft echter in beide gevallen “Menu”. Dit is niet correct. Als een link alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de link beschrijven. Op het moment dat de functie verandert, moet ook de alternatieve tekst veranderen. Zorg ervoor dat de tekst alternatief automatisch mee verandert met de functie van de link.

Op pagina https://www.centrumjong.nl/ staat onder de kop "Cursussen" een decoratieve afbeelding. Het alt-attribuut van deze afbeelding bevat alleen dubbele aanhalingstekens (alt=""""). Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Hiervoor moet een leeg alt-attribuut worden gebruikt: alt="". Op pagina https://www.centrumjong.nl/contact/ is hetzelfde probleem te zien. Ook daar is een decoratieve afbeelding aanwezig met een onjuist ingevuld alt-attribuut. Deze afbeelding moet worden verborgen voor schermlezers door het alt-attribuut leeg te laten: alt="". Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ is er eveneens een decoratieve afbeelding met een alt-attribuut dat niet correct is ingevuld. Deze afbeelding geeft geen extra informatie en moet worden verborgen voor schermlezers met alt="". Op pagina https://www.centrumjong.nl/informatie-over-scheiding/ staat een decoratieve afbeelding met een foutief alt-attribuut. Omdat deze afbeelding alleen voor visuele opmaak is bedoeld, moet het alt-attribuut leeg worden gelaten: alt="".

Op pagina https://www.centrumjong.nl/nieuws zijn decoratieve afbeeldingen aanwezig. De afbeelding bij de tekst “Tips voor de hitte” heeft bijvoorbeeld een toegankelijke naam “Link naar Hittetips”. Omdat deze afbeelding decoratief is en geen extra informatie geeft, moet deze worden verborgen voor schermlezers. Gebruik hiervoor een leeg alt-attribuut in het img-element: alt="".

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ opent het activeren van de link met afbeelding een dialoogvenster waarin de afbeelding volledig wordt weergegeven. In het geopende dialoogvenster heeft de informatieve afbeelding de alternatieve tekst "Link naar Goed voor jezelf zorgen als ouder". Deze tekst beschrijft de afbeelding onvoldoende. Afbeeldingen die informatie overdragen moeten een betekenisvolle alternatieve tekst hebben waarin de belangrijke informatie uit de afbeelding wordt beschreven.

Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ zijn onderdelen aanwezig met verborgen inhoud. De “+” en “–” iconen geven aan of de inhoud open of gesloten is, maar hebben geen tekstalternatief. Hierdoor is het voor schermlezers niet duidelijk of de inhoud zichtbaar is of niet. Deze informatie wordt niet aangeboden via een aria-expanded-attribuut of een verborgen tekst. Op pagina https://www.centrumjong.nl/informatie-over-scheiding komt hetzelfde probleem voor. De iconen die de toestand van de verborgen inhoud aangeven, hebben geen toegankelijke naam en er is geen gebruikgemaakt van een aria-expanded-attribuut of verborgen tekst. Hierdoor is de status van de inhoud onduidelijk voor hulpsoftware. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ ontbreken eveneens tekstalternatieven bij de “+” en “–” iconen. De toestand van de inhoud wordt niet aangegeven met een aria-expanded-attribuut of verborgen tekst, waardoor schermlezers niet kunnen vaststellen of de inhoud geopend of gesloten is.

Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staat in de sectie die wordt geopend met “Vaccinaties” een video onder de tekst “Filmpje over het vaccinatieschema 2025”. Deze video is ingevoegd met een video-element, maar heeft geen toegankelijke naam. Hierdoor krijgen bezoekers die schermlezers gebruiken geen informatie over het doel of onderwerp van de video. Dit probleem kan worden opgelost door het video-element te voorzien van een toegankelijke naam met behulp van het title-attribuut, een aria-label of een aria-labelledby-attribuut dat verwijst naar de zichtbare tekst.

Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staat onder “Download de GroeiGids App” een informatieve afbeelding met een alt-attribuut dat alleen dubbele aanhalingstekens bevat (alt=""""). Alternatieve teksten mogen geen symbolen zoals streepjes of underscores bevatten, omdat deze de leesbaarheid verstoren. De alt-tekst moet daarom worden herschreven en duidelijk omschrijven wat er op de afbeelding te zien is, zonder het gebruik van niet-leesbare karakters. Onder de afbeelding staat een knop waarmee een uitgebreide beschrijving wordt geopend. Deze beschrijving luidt “Screenshot Groeigids”, maar dit geeft geen goede weergave van de inhoud van de afbeelding. De beschrijving moet duidelijk maken wat er op de afbeelding te zien is, zodat bezoekers die de afbeelding niet kunnen zien toch begrijpen wat wordt afgebeeld.

Op pagina https://www.centrumjong.nl/opvoedinformatie-2024/ staat onder de kop “Download de GroeiGids App” een afbeelding met een leeg alt-attribuut (alt=""). Deze afbeelding is zichtbaar voor schermlezers, maar heeft geen tekstalternatief. Als het om een informatieve afbeelding gaat, moet er een beschrijvende tekst worden toegevoegd aan het alt-attribuut zodat duidelijk wordt wat er op de afbeelding te zien is. Een leeg alt-attribuut is in dit geval niet toegestaan. Als de afbeelding decoratief is, moet deze expliciet worden verborgen voor schermlezers, bijvoorbeeld met aria-hidden="true". Andere oplossingen zijn ook mogelijk.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staat in de sectie die wordt geopend met “Vaccinaties” een video waarin gesproken wordt. Hoewel er ondertiteling aanwezig is, is deze automatisch gegenereerd en daardoor onnauwkeurig. Zie bijvoorbeeld de video “Waar kun je terecht..”. Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen toch alle informatie. De ondertiteling moet exact overeenkomen met wat er gezegd wordt. Automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er interpunctie ontbreekt en fouten in kunnen zitten. Buiten de hoofdinhoud van deze pagina staan andere video's met hetzelfde probleem. Ook deze video's bevatten automatisch gegenereerde ondertiteling die niet volledig en accuraat is. De ondertiteling moet worden vervangen door correcte en volledige tekst die overeenkomt met de gesproken inhoud. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ zijn video's aanwezig in onderdelen met verborgen inhoud, bijvoorbeeld in de sectie die wordt geopend met “Centrale zorgverlener”. Deze video's bevatten eveneens automatisch gegenereerde ondertiteling. Omdat deze niet exact overeenkomt met de gesproken tekst, voldoet deze niet. De ondertiteling moet volledig en nauwkeurig zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staat in de sectie die wordt geopend met “Vaccinaties” een video waarin rond 1:41 tekst en logo’s in beeld komen. Voor deze video is geen media-alternatief of audiobeschrijving beschikbaar. De video bevat visuele informatie die niet toegankelijk is voor bezoekers die blind of slechtziend zijn. Hierdoor missen zij belangrijke inhoud. Dit kan worden opgelost met een geschreven tekst (media-alternatief) die alle visuele informatie beschrijft. Om ook te voldoen aan succescriterium 1.2.5 moet daarnaast een audiobeschrijving worden toegevoegd waarin namen, functies, logo’s en teksten in de video worden benoemd. Ook buiten de hoofdinhoud van deze pagina staat een video met hetzelfde probleem. In deze video komen visuele elementen voor die niet toegankelijk zijn voor bezoekers met een visuele beperking. Er is geen media-alternatief of audiobeschrijving aanwezig. Hierdoor is de informatie niet volledig toegankelijk. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ staan video's in onderdelen met verborgen inhoud, bijvoorbeeld in de sectie die wordt geopend met “Centrale zorgverlener”. Ook deze video's bevatten visuele informatie zoals tekst of logo’s, zonder dat er een media-alternatief of audiobeschrijving beschikbaar is. Bezoekers die blind of slechtziend zijn, krijgen hierdoor de informatie niet mee. Een geschreven tekst of audiobeschrijving is nodig om de inhoud toegankelijk te maken.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ voldoet de video niet aan succescriterium 1.2.5, omdat er geen audiobeschrijving is toegevoegd. In de bestaande audiotrack is voldoende ruimte aanwezig om aanvullende beschrijvingen in te voegen. Een media-alternatief is in dit geval niet toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien, zodat zij ook toegang hebben tot visuele informatie zoals teksten, logo’s en handelingen in beeld. Ook buiten de hoofdinhoud van deze pagina staat een video met hetzelfde probleem. De video bevat visuele informatie, maar er is geen audiobeschrijving beschikbaar, terwijl daar in de audiotrack wel ruimte voor is. Hierdoor is de informatie niet volledig toegankelijk voor bezoekers die slechtziend of blind zijn. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ staan video's in onderdelen met verborgen inhoud, bijvoorbeeld in de sectie die wordt geopend met “Centrale zorgverlener”. Ook deze video's voldoen niet aan succescriterium 1.2.5. Er is geen audiobeschrijving aanwezig, terwijl er voldoende ruimte is om deze in de bestaande audio op te nemen. Dit belemmert de toegankelijkheid voor bezoekers die de visuele informatie niet kunnen waarnemen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/contact/ wordt het strong-element onjuist gebruikt voor opmaakdoeleinden. De link “ouderchat.nl.” is om visuele redenen vetgedrukt door deze in een strong-element te plaatsen. Het strong-element heeft echter een semantische functie: het geeft aan dat de inhoud extra nadruk moet krijgen. Dit element mag daarom niet worden gebruikt om alleen een visueel effect zoals vetgedrukte tekst te bereiken. Gebruik hiervoor CSS. Op pagina https://www.centrumjong.nl/toegankelijksheidsverklaring/ komt hetzelfde probleem voor. Ook daar is het strong-element gebruikt om tekst visueel vet te maken, zonder dat de inhoud daadwerkelijk extra nadruk nodig heeft. Dit gebruik is niet correct en moet worden vervangen door een visuele opmaak via CSS. Op pagina https://www.centrumjong.nl/informatie-over-scheiding/ worden in onderdelen met verborgen inhoud links weergegeven die onterecht in een strong-element zijn geplaatst voor visuele opmaak. Aangezien deze elementen geen semantische nadruk toevoegen, moet de vetgedrukte weergave via CSS worden geregeld. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ zijn in verborgen secties links opgenomen waarin het strong-element is gebruikt voor opmaak. Omdat dit element bedoeld is voor inhoudelijke nadruk en niet voor styling, moet het gebruik van strong hier worden vervangen door CSS.

Op pagina https://www.centrumjong.nl/informatie-over-scheiden-professionals/overzicht-aanbod-voor-kinderen-0-12-jaar/ wordt bij de tekst “Diverse trainingen voor kinderen:” het strong-element eveneens gebruikt voor een visueel effect. Ook hier moet in plaats daarvan CSS worden toegepast om de tekst visueel te benadrukken.

Op pagina https://www.centrumjong.nl/contact/ zijn de teksten "Telefoon", "Zaanstad", "Oostzaan" en "Wormerland" onjuist gemarkeerd met een strong-element in plaats van een kop-element, zoals h2. Het strong-element is bedoeld om nadruk te geven aan enkele woorden of een zinsdeel en niet om een kop te markeren. Koppen zijn belangrijk voor de structuur van de tekst. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, wordt de betekenis ervan duidelijk voor hulpsoftware.

Op pagina https://www.centrumjong.nl/test zijn de teksten "Niets gevonden" en "Voor de beste zoekresultaten, houd het volgende in gedachte" onjuist gemarkeerd met een strong-element. Deze teksten hebben een structurerende functie en moeten daarom als kop worden gemarkeerd met een kop-element, zodat hulpsoftware de structuur van de pagina goed kan interpreteren. Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ zijn de teksten "Basisschool" en "Middelbare school" in de sectie die wordt geopend met "Jeugdgezondheidszorg op school" gemarkeerd met een strong-element in plaats van een kop-element. Aangezien deze teksten een kopfunctie hebben, moeten ze met een kop-element worden gemarkeerd zodat de structuur van de inhoud duidelijk is voor hulpsoftware.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ is de kruimelpadnavigatie opgebouwd uit een verzameling links, maar de onderliggende structuur en de onderlinge relatie tussen deze links zijn niet semantisch gedefinieerd in de HTML. Dit kan worden opgelost door de links in een nav-element of een ul-element te plaatsen, zodat hulpsoftware de navigatiestructuur correct kan interpreteren. Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ is de kruimelpadnavigatie opgebouwd uit losse links zonder een semantisch verband. De structuur kan worden verbeterd door de links in een nav-element of een ul-element te plaatsen, zodat de relatie tussen de links duidelijk is voor hulpsoftware. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ zijn de links in de kruimelpadnavigatie niet semantisch gegroepeerd. Door de links in een nav-element of een ul-element te plaatsen, kan de structuur van de navigatie beter worden overgebracht aan hulpsoftware. Op pagina https://www.centrumjong.nl/informatie-over-scheiden-professionals/overzicht-aanbod-voor-kinderen-0-12-jaar/ ontbreekt een semantische structuur in de kruimelpadnavigatie. De losse links moeten in een nav-element of een ul-element worden geplaatst om de onderlinge relatie voor hulpsoftware begrijpelijk te maken.

Op pagina https://www.centrumjong.nl/contact/ staat een formulier met een groep keuzerondjes. Deze groep heeft het label "Ik ben", maar dit label is niet programmatisch gekoppeld aan de bijbehorende groep. Hierdoor is voor bezoekers die hulpsoftware gebruiken niet duidelijk dat er een relatie is tussen het groepslabel en de keuzerondjes. Zorg dat de groepslabels in de code gekoppeld zijn aan de groepen. Dit kan worden bereikt met het attribuut aria-labelledby of door het formulier correct te structureren met fieldset- en legend-elementen.

Op pagina https://www.centrumjong.nl/toegankelijksheidsverklaring/ wordt het em-element onjuist gebruikt voor visuele opmaak. In de zin “Deze toegankelijkheidsverklaring is opgesteld op 5 april 2022.” is het em-element toegepast zonder dat de tekst extra nadruk krijgt. Het em-element heeft een semantische functie en mag alleen worden gebruikt als de inhoud betekenisvol benadrukt moet worden. Voor puur visuele effecten, zoals cursieve tekst, moet CSS worden gebruikt.

Op pagina https://www.centrumjong.nl/nieuws/ zijn de pagineringslinks onder de nieuwsartikelen visueel gegroepeerd, maar deze groepering is niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, zoals bij paginering, dan moet die structuur ook terugkomen in de HTML. Dit kan bijvoorbeeld worden bereikt door de links op te nemen in een ul-element of nav-element.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ staat onder de kop "Ideeën om meer te zorgen voor jezelf" een lijst met zes items. Deze lijst is onjuist gemarkeerd, omdat elk item is geplaatst in een afzonderlijk ul-element. Door deze opmaak wordt elk item door hulpsoftware geïnterpreteerd als een aparte lijst. Alle zes de items moeten worden gegroepeerd in één ul-element om een correcte lijststructuur te waarborgen. Op pagina https://www.centrumjong.nl/informatie-over-scheiding/ is in de sectie die wordt geopend met “Cursussen” een lijst met twee items opgenomen. Ook hier is elk item in een afzonderlijk ul-element geplaatst, wat leidt tot een verkeerde interpretatie door hulpsoftware. De items moeten worden samengevoegd in één ul-element om een semantisch correcte lijst te vormen.

Op pagina https://www.centrumjong.nl/cj-locatie/ is de tekst onder koppen zoals “Centrum Jong Krommenie” in de HTML gestructureerd met ul-elementen. Deze opmaak veroorzaakt meerdere toegankelijkheidsproblemen. Visueel wordt de inhoud onder “Adres” en “Inloopspreekuur” gepresenteerd als gegroepeerde blokken met gerelateerde informatie, maar deze relaties worden in de huidige HTML-structuur niet aanwezig. Onder “Adres” is de inhoud verdeeld over drie afzonderlijke li-elementen, terwijl “Inloopspreekuur” verdeeld is over twee ul-elementen. Hierdoor wordt gerelateerde inhoud opgesplitst in meerdere, losse lijstitems of aparte lijsten, wat verwarrend is voor bezoekers die hulpsoftware gebruiken. Aangezien deze inhoud visueel is vormgegeven als label–waardeparen, is het beter om een dl-element te gebruiken. Als alternatief kan de inhoud worden gepresenteerd als blokken met contactinformatie, waarbij elk label zoals “Adres”, “Telefoon” en “Inloopspreekuur” wordt gemarkeerd met een h4-element en de bijbehorende waarde in een p-element wordt geplaatst. Als het ul-element behouden moet blijven, moet één ul-element worden gebruikt waarin elk li-element de volledige informatie voor “Adres”, “Telefoon” en “Inloopspreekuur” groepeert, zodat de structuur consistent en begrijpelijk blijft voor hulpsoftware.

Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staat in de sectie die wordt geopend met “Jeugdgezondheidszorg voor je baby en peuter” een kop met de tekst “Mijn Kinddossier”. In deze kop is naast een kop-element ook een strong-element gebruikt. Het strong-element heeft een semantische functie en geeft aan dat de tekst extra nadruk moet krijgen. Het mag daarom niet worden toegepast om enkel een visueel effect te bereiken, zoals vetgedrukte tekst. Voor visuele opmaak moet CSS worden gebruikt.

In het PDF-document op https://www.centrumjong.nl/wp-content/uploads/2020/08/infosheet-toegang-jeugdhulp-002.pdf ontbreken structurele codes, waardoor de inhoud niet toegankelijk is voor schermlezers. Bovendien kan het document hierdoor niet volledig worden onderzocht. Het gaat om alle succescriteria die verband houden met de codelaag van de pdf, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het mogelijk dat er nieuwe toegankelijkheidsproblemen aan het licht komen die nu nog niet zichtbaar zijn. In het PDF-document op https://www.centrumjong.nl/wp-content/uploads/2019/11/A4-Aanbod-voor-kinderen-0-12-jaar.pdf ontbreken eveneens structurele codes. De inhoud is hierdoor ontoegankelijk voor schermlezers en het document kan niet volledig worden onderzocht. De problemen hebben betrekking op succescriteria die samenhangen met de pdf-codelaag, zoals het gebruik van semantische koppen en alternatieve teksten bij afbeeldingen. Bij herstel van deze tekortkomingen kunnen aanvullende toegankelijkheidsproblemen zichtbaar worden.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.centrumjong.nl/ is de leesvolgorde van HTML-elementen binnen de artikelen onder “Uitgelicht nieuws” onlogisch. De huidige volgorde is: link met afbeelding, daarna de kop als link, gevolgd door de tekst. Deze volgorde ontstaat doordat de koppen niet bovenaan in de code van elk artikel staan. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Zorg dat alle inhoud die bij een bepaalde kop hoort, in de code onder die kop wordt geplaatst. Dit zorgt voor een logische structuur. De visuele opmaak mag hiervan afwijken. Op pagina https://www.centrumjong.nl/opvoedinformatie-2024/ staat onder de kop “Betrouwbare informatie voor elke levensfase” een vergelijkbaar probleem. De leesvolgorde van HTML-elementen is: link met afbeelding, gevolgd door de kop als link. Ook hier ontbreekt een logische structuur in de code, wat verwarring kan veroorzaken bij het gebruik van een schermlezer. Zorg dat de inhoud in de code onder de bijbehorende kop wordt geplaatst om de structuur te verbeteren.

Op pagina https://www.centrumjong.nl/?s=jong is de leesvolgorde van HTML-elementen binnen de artikelen onjuist. De huidige volgorde is: nummer, daarna de kop, gevolgd door de tekst. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur die beter te begrijpen is voor bezoekers die hulpsoftware gebruiken.

Op pagina https://www.centrumjong.nl/nieuws/ is de leesvolgorde van HTML-elementen binnen de nieuwsartikelen als volgt: afbeelding, kop, tekst en link. Wanneer deze artikelen van boven naar beneden worden voorgelezen door een schermlezer, is het niet duidelijk welke afbeelding bij welk artikel hoort. Dit kan worden opgelost door alle inhoud, inclusief de afbeelding en de tekst, die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag hiervan afwijken. Een alternatieve oplossing is om de afbeeldingen bij de artikelen als decoratief te markeren. Dit kan door de alt-tekst leeg te laten (alt="" op het img-element). De afbeelding wordt dan genegeerd door de schermlezer, waardoor de leesvolgorde koptekst – inhoud wordt.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/contact/ bevat het formulier invoervelden voor persoonlijke informatie, zoals “Naam”, “Postcode” en “E-mailadres”. Deze velden missen het autocomplete-attribuut. Invoervelden voor persoonlijke informatie, zoals achternaam, e-mailadres of telefoonnummer, moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware ondersteuning bieden bij het invullen, bijvoorbeeld door de gegevens automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waarin persoonlijke informatie 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.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina’s van de website https://www.centrumjong.nl/ is de webReader-tool aanwezig. Wanneer deze tool wordt geactiveerd, wordt de voortgang aangegeven met een oranje lijn tegen een grijze lijn. In dit geval wordt uitsluitend kleur gebruikt om informatie over de voortgang over te brengen. Hierdoor is deze informatie niet waarneembaar voor bezoekers die kleuren niet goed kunnen onderscheiden.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.centrumjong.nl/ hebben links die toetsenbordfocus ontvangen een wittekstkleur op een groene achtergrond met kleurcode (HEX #8FB732). De huidige contrastratio is 2,3:1. Dit is onvoldoende, want voor tekst geldt een minimale contrastratio van 4,5:1. Dit probleem komt voor bij links in de hoofdnavigatie in de header, zoals “Voor ouders”, en bij links in de submenu’s die via deze links worden geopend. Ook in de footer, bijvoorbeeld onder “Contactmogelijkheden”, en op de homepagina bij links zoals “Stel je vraag”, “Tips voor de hitte” en “Bekijk alle locaties” is dit probleem aanwezig.

In de header van de website https://www.centrumjong.nl/ verschijnt op een klein scherm een menulink met drie horizontale lijnen om het navigatiemenu te openen. De links in het geopende menu hebben witte tekst op een groene achtergrond met kleurcode (HEX #8FB732). De huidige contrastratio is 2,3:1, wat onvoldoende is. Voor tekst geldt een minimale contrastratio van 4,5:1.
In de footer van de website https://www.centrumjong.nl/ hebben de links onder de kop “Contactmogelijkheden”, zoals “Adresgegevens”, donkergroene tekst met kleurcode (HEX #576F1E) op een groene achtergrond met kleurcode (HEX #8FB732). De contrastratio is 2,4:1, wat onvoldoende is. Voor tekst geldt een minimale contrastratio van 4,5:1. Op pagina https://www.centrumjong.nl/informatie-over-scheiding/ is hetzelfde probleem aanwezig bij links die toetsenbordfocus ontvangen, zoals de link “Klik hier voor meer informatie over de cursussen voor kinderen” in de sectie die wordt geopend met “Cursussen” en de link “www.echtscheiding-wijzer.nl” in de sectie die wordt geopend met “Interessante links”. De contrastratio voldoet ook hier niet aan de minimale eis van 4,5:1. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ komt dit probleem eveneens voor bij links in de secties met verborgen inhoud, bijvoorbeeld in de sectie die wordt geopend met “Centrale zorgverlener”. Ook hier is de contrastratio onvoldoende.

Op de homepagina https://www.centrumjong.nl/ staat onder de kop “Uitgelicht nieuws” de lichtroze tekst “Algemeen, 16 juni 2025” en “Algemeen, 5 juni 2025” met kleurcode (HEX #F7CCE4) op een roze achtergrond met kleurcode (HEX #D9017A). De contrastratio is 3,5:1, wat onvoldoende is. Voor tekst geldt een minimale contrastratio van 4,5:1.

Op pagina https://www.centrumjong.nl/cj-locatie/ heeft de grijze linktekst “Bekijk locatie” met kleurcode (HEX #777777) een onvoldoende contrastratio van 4,2:1 tegen de lichtgrijze achtergrond met kleurcode (HEX #F8F8F8). Voor tekst geldt een minimale contrastratio van 4,5:1.

In het PDF-document op https://www.centrumjong.nl/wp-content/uploads/2020/08/infosheet-toegang-jeugdhulp-002.pdf staat witte tekst op een groene achtergrond met kleurcode (HEX #76B82A), bijvoorbeeld bij de teksten “Toegang Jeugdhulp”, “Problemen in het gezin …” en “Medische problemen?”. De contrastratio is 2,4:1, wat te laag is. Omdat het hier om grote tekst gaat, moet de contrastratio minimaal 3,0:1 zijn.

In het PDF-document op https://www.centrumjong.nl/wp-content/uploads/2020/08/infosheet-toegang-jeugdhulp-002.pdf staat blauwe tekst met kleurcode (HEX #0098C1) op een witte achtergrond. Dit geldt bijvoorbeeld voor de tekst “Meer weten? Ga naar:” en de teksten daaronder. De contrastratio is 3,4:1. Zorg dat het contrast minimaal 4,5:1 is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/toegankelijksheidsverklaring/ wordt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de tekst gedeeltelijk afgekapt. Het gaat om de koppen “Handhavingsprocedure” en “Toegankelijksheidsverklaring” en de linktekst “https://www.nationaleombudsman.nl/klacht-indienen/uw-klacht.”. Zorg dat alle inhoud nog werkt en volledig leesbaar is bij 400% zoom op een scherm van 1280 bij 1024 pixels.

Op pagina https://www.centrumjong.nl/cj-locatie/ wordt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% in de footer de tekst van koppen en links gedeeltelijk afgekapt. Dit geldt bijvoorbeeld voor de kop “Contactmogelijkheden” en de link “Adresgegevens”. Zorg dat alle inhoud nog werkt en leesbaar is bij 400% zoom op een scherm van 1280 bij 1024 pixels.

Op pagina https://www.centrumjong.nl/informatie-over-scheiden-professionals/overzicht-aanbod-voor-kinderen-0-12-jaar/ wordt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de tekst onder de kop “Jeugdteam Oostzaan-Wormerland” gedeeltelijk afgekapt. Het gaat om de tekst “info@jeugdteamoostzaanwormerland.nl”. Zorg dat alle inhoud nog werkt en leesbaar is bij 400% zoom op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.centrumjong.nl/ heeft de link met het vergrootglasicoon een onvoldoende contrastratio van 2,3:1 tegen de groene achtergrond met kleurcode (HEX #8FB732) wanneer deze toetsenbordfocus ontvangt. Deze link opent een paneel met een zoekbalk. In dit paneel heeft de knop met het vergrootglasicoon hetzelfde probleem. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen. Dit moet minimaal 3,0:1 zijn. Hetzelfde probleem komt voor bij de sticky link met het pijltje-icoon om de pagina omhoog te scrollen wanneer deze toetsenbordfocus ontvangt.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ treedt dit probleem ook op bij de socialmedia-iconen onder “Deel dit stuk” wanneer de links toetsenbordfocus ontvangen. Op deze pagina is het probleem ook aanwezig bij de knop met het kruisje (“x”) in het dialoogvenster dat opent wanneer op de link met de afbeelding wordt geklikt.
In de header van de website https://www.centrumjong.nl/ verschijnt op een klein scherm een menulink met drie horizontale lijnen om het navigatiemenu te openen. In het geopende menu staan links met een vergrootglasicoon en een “X”-icoon. Deze iconen hebben een witte kleur op een groene achtergrond met kleurcode (HEX #8FB732). De huidige contrastratio is 2,3:1, wat onvoldoende is. Dit moet minimaal 3,0:1 zijn.

In de header van de website https://www.centrumjong.nl/ verschijnt op een klein scherm een menulink met drie horizontale lijnen om het navigatiemenu te openen. In het geopende menu worden links zoals “Voor ouders” begeleid door pijltjesiconen die aangeven dat er submenu’s zijn. Deze pijltjes hebben een lichtgroene kleur met kleurcode (HEX #C7DB99) op een groene achtergrond met kleurcode (HEX #8FB732). De huidige contrastratio is 1,6:1, wat onvoldoende is. Dit moet minimaal 3,0:1 zijn.

Op pagina https://www.centrumjong.nl/contact/ staat onder “Contactformulier” een formulier. De contrastratio tussen de grijze rand van de invoervelden met kleurcode (HEX #BBBBBB) en de lichtgrijze veldachtergrond met kleurcode (HEX #F8F8F8) is 1,8:1. De contrastratio tussen dezelfde grijze rand en de witte paginabackground is 1,9:1. Dit is onvoldoende. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrastratio van 3,0:1 hebben met de achtergrond.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ wordt bij het activeren van de link met afbeelding de afbeelding op volledig formaat geopend. In het geopende dialoogvenster heeft de “x”-knop, wanneer de afbeelding toetsenbordfocus krijgt, een lichtgroene kleur met kleurcode #D8E6B7 op een groene achtergrond met kleurcode (HEX #8FB732). De contrastratio is 1,8:1, wat onvoldoende is. Dit moet minimaal 3,0:1 zijn. Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ zijn er secties met verborgen inhoud. De “+”- en “–” iconen die worden gebruikt om de open- of gesloten status van deze secties aan te geven, hebben een contrastratio van 2,3:1. Ook dit is onvoldoende en moet minimaal 3,0:1 zijn.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het hoofdmenu in de header van de website https://www.centrumjong.nl/ bevat items met submenu’s. Wanneer een bezoeker met de muis over deze items beweegt, verschijnen de submenu’s en overlappen ze de paginainhoud. De bezoeker moet deze content eenvoudig kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Dit kan bijvoorbeeld door het indrukken van de Escape-toets. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staat in de sectie die wordt geopend met “Vaccinaties” een YouTube-videospeler. Deze speler gebruikt sneltoetsen, zoals de ‘k’ om de video te starten of stoppen en de ‘m’ om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers, omdat ze ook actief zijn wanneer de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen veroorzaken voor mensen die spraakbediening gebruiken, omdat deze letters ook in uitgesproken woorden kunnen voorkomen. Ook voor mensen die per ongeluk een toets indrukken, is dit onhandig. Dit probleem kan worden opgelost 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. Zie voor meer informatie: https://developers.google.com/youtube/player_parameters#disablekb. Ditzelfde probleem is aanwezig bij de video's die op deze pagina buiten de hoofdinhoud staan.

Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ komt dit probleem ook voor bij video's in de secties met verborgen inhoud, bijvoorbeeld in de sectie die wordt geopend met “Centrale zorgverlener”. Ook hier worden YouTube-sneltoetsen gebruikt die botsen met hulpsoftware, wat kan worden opgelost met de parameter disablekb=1.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina’s van de website https://www.centrumjong.nl/ bevatten geen skiplink. Er moet een manier zijn om vaste onderdelen van een pagina over te slaan, zoals het navigatiemenu en andere herhalende elementen. Hiervoor wordt een skiplink gebruikt. Met deze link kunnen bezoekers herhalende inhoud overslaan en direct naar de hoofdinhoud van de pagina gaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina kunnen overslaan.

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.centrumjong.nl/wp-content/uploads/2020/08/infosheet-toegang-jeugdhulp-002.pdf is geen titel ingesteld in de bestandsinstellingen. Zelfs als er een titel op de eerste pagina staat, moet er ook in de pdf-metadata een documenttitel worden ingesteld. Wanneer een pdf wordt geopend in een pdf-lezer, zoals Adobe Acrobat of een browser, wordt standaard de bestandsnaam weergegeven in de titelbalk, bijvoorbeeld document123.pdf. Als er een documenttitel is ingesteld, wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen, omdat zij sneller kunnen bepalen of het document relevant is. Dit kan worden aangepast in de bestandseigenschappen van het bronbestand of van het pdf-document.

In het PDF-document op https://www.centrumjong.nl/wp-content/uploads/2019/11/A4-Aanbod-voor-kinderen-0-12-jaar.pdf is in de bestandsinstellingen de titel "Flyer A4_tbv digitaal verspreiding.indd" ingesteld. Deze titel is niet beschrijvend genoeg. Bovendien wordt in de titelbalk van de pdf-lezer de bestandsnaam weergegeven in plaats van de documenttitel. Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel worden ingesteld. Wanneer een pdf wordt geopend in een pdf-lezer zoals Adobe Acrobat of een browser, wordt standaard de bestandsnaam weergegeven. Als er een documenttitel is ingesteld, wordt die in plaats daarvan getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen, omdat zij dan snel kunnen beoordelen of het document relevant is. Dit kan worden aangepast in de bestandseigenschappen van het bronbestand of van het pdf-document.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.centrumjong.nl/ verschijnt op een klein scherm een menulink met drie horizontale lijnen om het navigatiemenu te openen. Op dit moment kunnen bezoekers met het toetsenbord uit het menu navigeren terwijl het menu open blijft staan. De toetsenbordfocus verplaatst zich dan naar de onderliggende pagina, terwijl het menu actief 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 de bezoeker op de sluitknop heeft geklikt of op de Escape-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus het menu verlaat.
Op de pagina’s van de website https://www.centrumjong.nl/ is de webReader-tool aanwezig. Wanneer de knop “Lees voor” wordt aangeklikt, verschuift de toetsenbordfocus naar de pauzeknop. Dit is geen logische focusvolgorde. De focus moet op de knop “Lees voor” blijven staan.

Op pagina https://www.centrumjong.nl/contact/ staat een formulier. Onder “Ik ben” bestaat de laatste optie uit een keuzerondje met een naastgelegen tekstinvoerveld. Wanneer een bezoeker met het toetsenbord door het formulier navigeert en bij deze laatste optie komt, krijgt alleen het tekstinvoerveld toetsenbordfocus en het keuzerondje niet. Daarnaast is het na het bereiken van het tekstinvoerveld niet mogelijk om met Shift + Tab terug te gaan naar de vorige opties of invoervelden in het formulier. Hierdoor moet de toetsenbordgebruiker door de gehele pagina navigeren om terug bij het formulier te komen. Dit is onlogisch en verwarrend.

Op pagina https://www.centrumjong.nl/contact/ worden bij het versturen van het formulier met lege of onjuiste gegevens foutmeldingen weergegeven. Boven het formulier staan deze foutmeldingen als links. Wanneer een toetsenbordgebruiker deze links activeert, wordt de pagina wel naar het bijbehorende invoerveld gescrold, maar krijgt dat veld geen toetsenbordfocus. Dit is onlogisch en kan verwarrend zijn. Zorg dat de focus ook op het juiste invoerveld komt te staan wanneer een foutmeldinglink wordt gebruikt.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.centrumjong.nl/ staat een navigatiemenu met een link waarvan de zichtbare tekst “AAA” is. De toegankelijke naam van deze link is eveneens “AAA”. Deze toegankelijke naam beschrijft niet duidelijk de functie van de link. Hierdoor weet een blinde bezoeker niet wat deze link precies doet. Voeg een toegankelijke naam toe die de linkfunctie duidelijk beschrijft.

In de header van de website https://www.centrumjong.nl/ staat in het navigatiemenu de link “Contact” die een submenu opent. In dit submenu staat een link die alleen het teken “–” (streepje) toont. De toegankelijke naam van deze link is ook “–”, wat geen betekenisvolle context biedt voor gebruikers van schermlezers. Zorg dat deze link een beschrijvende toegankelijke naam krijgt die duidelijk maakt wat de functie of bestemming is.

Op pagina https://www.centrumjong.nl/?s=jong missen de pagineringslinks voldoende context. Voor ziende bezoekers is het duidelijk dat de nummers “1”, “2”, “3” enzovoort paginanummers zijn, maar voor bezoekers met een visuele beperking of die een schermlezer gebruiken, is dit niet altijd duidelijk. Dit kan worden verbeterd door de linkteksten aan te vullen met het (visueel verborgen) woord ‘pagina’, zodat de functie van deze links beter wordt overgebracht. Op pagina https://www.centrumjong.nl/nieuws/ komt hetzelfde probleem voor bij de pagineringslinks. Ook hier ontbreekt voldoende context voor hulpsoftware en slechtziende bezoekers. Voeg ook hier het woord ‘pagina’ toe aan de linkteksten om de toegankelijkheid te verbeteren.

Op pagina https://www.centrumjong.nl/?s=jong bevat de paginering links met de symbolen “›”, “»”, “«” en “‹”. De toegankelijke namen van deze links bestaan alleen uit deze symbolen, waardoor het doel van de links niet duidelijk is, vooral voor gebruikers van schermlezers. Dit kan worden opgelost door tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben.

Op pagina https://www.centrumjong.nl/nieuws/ komt hetzelfde probleem voor bij de pagineringslinks. Ook hier moeten alle links een duidelijke omschrijving krijgen zodat het doel voor iedereen helder is.

Op pagina https://www.centrumjong.nl/nieuws/ staan meerdere links met dezelfde tekst “Lees verder”, terwijl de bestemmingen van deze links verschillen. Dit kan verwarrend zijn voor bezoekers. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als de bestemming anders is, moet de linktekst ook anders zijn. Op pagina https://www.centrumjong.nl/cj-locatie/ komt een vergelijkbaar probleem voor bij links met dezelfde tekst, namelijk “Bekijk locatie”. Ook hier moeten links met verschillende bestemmingen een unieke tekst krijgen om verwarring te voorkomen.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ is er een afbeelding die als link functioneert en bij klikken een weergave op volledig scherm opent. De toegankelijke naam van deze link is “Link naar Goed voor jezelf zorgen als ouder”. In de HTML-code staat niet duidelijk beschreven wat deze link precies doet. Hierdoor is het voor een blinde bezoeker niet duidelijk dat deze link een grote weergave van de afbeelding opent. Dit kan worden opgelost door verborgen tekst toe te voegen, zoals “opent een grote weergave”, of door gebruik te maken van het attribuut aria-haspopup.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website https://www.centrumjong.nl/ zijn er links die submenu’s openen. Wanneer deze submenu’s openstaan, hebben menu-items te lange en verwarrende toegankelijke namen. Deze namen bevatten de volledige tekstinhoud van alle submenu-items, in plaats van alleen het zichtbare label van het individuele item. Bijvoorbeeld, wanneer de link “Voor ouders” wordt geactiveerd en het submenu zichtbaar is, wordt de toegankelijke naam van het menu-item met de zichtbare tekst “Voor ouders” uitgebreid tot: “Voor ouders Informatie over scheiding Inloopspreekuur Jeugdgezondheidszorg Jeugdteam Logopediespreekuur Opvoedinformatie Opvoedspreekuur Specifiek aanbod in jouw gemeente Stel je vraag Maak afspraak opvoedspreekuur Naar cursussen Naar MijnKinddossier”. Binnen het submenu hebben twee menu-items hetzelfde probleem. Zo is de toegankelijke naam van een menu-item: “Informatie over scheiding Inloopspreekuur Jeugdgezondheidszorg Jeugdteam Logopediespreekuur Opvoedinformatie Opvoedspreekuur Specifiek aanbod in jouw gemeente Stel je vraag.” Elk menu-item moet een unieke en beknopte toegankelijke naam hebben die overeenkomt met het zichtbare label. Dit zorgt voor duidelijkheid en een correcte navigatie

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ opent het activeren van de link met de afbeelding in een volledig schermweergave. In het geopende dialoogvenster heeft de “x”-knop de functie om het dialoogvenster te sluiten, maar de toegankelijke naam van deze knop is “x”. Dit beschrijft de functie niet duidelijk, waardoor een blinde bezoeker niet weet wat deze knop precies doet. Voeg een toegankelijke naam toe die de functie van deze knop goed beschrijft.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ opent de link met afbeelding de afbeelding in een dialoogvenster. De toegankelijke naam van dit dialoogvenster is nu “x”, waardoor schermlezers de betekenis van het dialoogvenster niet goed kunnen overbrengen aan gebruikers. Dit kan worden opgelost door een aria-label toe te voegen aan het dialoogvenster met een duidelijke beschrijving van de inhoud.

Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staan meerdere iframes naast de hoofdinhoud. Deze iframes hebben title-attributen met tekst die niet duidelijk maakt om welk type inhoud het gaat. Bijvoorbeeld, het title-attribuut van het iframe onder “Filmpje ‘Zora is zwanger’” is “Zora is Zwanger”. Iframes moeten een duidelijke beschrijving krijgen in het title-attribuut. Deze beschrijving moet het type inhoud aangeven, zoals een video of podcast, en waar de inhoud over gaat. De beschrijving moet uniek en betekenisvol zijn. Zo kunnen bezoekers met hulpsoftware beter bepalen of het de moeite waard is om de inhoud van het iframe te bekijken.

Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ staat onder "Download de GroeiGids App" een afbeelding. Onder deze afbeelding staat een knop waarmee de lange beschrijving van de afbeelding geopend wordt. De toegankelijke naam van deze knop is "Lange beschrijving". Deze toegankelijke naam beschrijft niet duidelijk genoeg wat het doel van de knop is.

Op pagina https://www.centrumjong.nl/opvoedinformatie-2024/ staat onder "Download de GroeiGids App" ook een afbeelding. Onder deze afbeelding staat dezelfde knop met de toegankelijke naam "Lange beschrijving". Deze toegankelijke naam beschrijft niet duidelijk genoeg wat het doel van de knop is.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/contact/ staat een formulier. Onder "Ik ben" staat als laatste keuzeoptie een radioknop met daarnaast een tekstveld. De ingevulde tekst van dit invoerveld dient als zichtbaar label voor de radioknop, maar de toegankelijke naam van deze radioknop ontbreekt. Hierdoor kunnen bezoekers die gebruikmaken van spraaksoftware het element niet bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Het label moet daarom permanent zichtbaar zijn en ook voorkomen in de toegankelijke naam van het element. Wanneer de zichtbare tekst niet voorkomt in de toegankelijke naam in de code, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat en zet deze tekst bij voorkeur vooraan. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Op pagina https://www.centrumjong.nl/contact/ staat een formulier. Onder "Ik ben" staat als laatste optie een radioknop met daarnaast een tekstveld. De zichtbare tekst (de waarde in het tekstveld) hangt af van wat de bezoeker invoert, maar de toegankelijke naam van dit invoerveld is "Anders" en komt uit het attribuut aria-label. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, kunnen bezoekers die spraaksoftware gebruiken het element niet bedienen. Zij spreken namelijk een commando uit door de zichtbare tekst voor te lezen. Als deze zichtbare tekst niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg daarom dat de toegankelijke naam de zichtbare tekst bevat en plaats deze tekst bij voorkeur vooraan. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.centrumjong.nl/wp-content/uploads/2019/11/A4-Aanbod-voor-kinderen-0-12-jaar.pdf staat in de metadata geen taal ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/?s=jong staat in het title-element tekst in een andere taal: "You searched for jong". Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die staat ingesteld in het lang-attribuut op het html-element, in dit geval op "nl-NL". Vertaal deze tekst naar het Nederlands. Op pagina https://www.centrumjong.nl/test staat in het title-element tekst in een andere taal: "Page not found". Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die staat ingesteld in het lang-attribuut op het html-element, in dit geval op "nl-NL". Vertaal deze tekst naar het Nederlands.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/contact/ staan in het formulier foutmeldingen zoals: "Dit veld is vereist.". Dit is een instructie en geen goede foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zit. Vaak bevat een goede foutmelding een ontkenning. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/contact/ staat in het formulier onder "Ik ben" als laatste optie een radioknop met daarnaast een tekstveld. De radioknop en het invoerveld hebben geen permanent zichtbaar label. Hierdoor is het voor sommige bezoekers met cognitieve beperkingen moeilijk om deze interactieve elementen goed te gebruiken. Zorg ervoor dat elk interactief element een zichtbaar label heeft dat duidelijk maakt waar het element voor dient.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://www.centrumjong.nl/ staat een navigatiemenu waarin een element staat met de rol role="menu". Een van de items binnen dit menu heeft geen correcte kindrol menuitem. Het gaat hier om het item met de zichtbare tekst "AAA". Voor sommige ARIA-rollen is het verplicht om een specifieke combinatie van ouder- en kindrollen te gebruiken. Dit staat exact beschreven in de richtlijnen van WAI-ARIA. Als deze rollen niet volledig in de code staan, werken de elementen niet zoals de ontwikkelaar heeft bedoeld. Bovendien heeft het plaatsen van slechts een deel van deze verplichte rollen geen positief effect op de toegankelijkheid. In de submenu’s die geopend worden door links zoals "Voor ouders" staat een vergelijkbaar probleem. Elk submenu bevat meerdere elementen met role="menuitem", maar het verplichte bovenliggende element met role="menu" ontbreekt hier. Daarnaast bevatten deze elementen met role="menuitem" op een verkeerde manier geneste ul-elementen met nog meer menuitems erin. Deze opbouw voldoet niet aan de structuurvereisten van WAI-ARIA.

Bovenaan de pagina https://www.centrumjong.nl/ bevatten de links in het hoofdmenu submenu's, maar in de code staat niet aangegeven of een submenu geopend of gesloten is. Als er een link staat die een submenu kan tonen of verbergen, dan moet hulpsoftware kunnen bepalen wat de toestand (zichtbaar of verborgen) van dat submenu is. Hiervoor kan het attribuut aria-expanded gebruikt worden. Maar let op: dit attribuut werkt alleen zolang de focus op de link blijft staan. Verplaatst de focus zich? Zorg dan voor een verborgen tekst die aangeeft wat de toestand van het submenu is. Op pagina https://www.centrumjong.nl/ doet hetzelfde probleem zich voor bij de link met een icoon van een vergrootglas. Deze link opent een paneel met een zoekbalk.

Bovenaan de pagina https://www.centrumjong.nl/ verschijnt op een klein scherm een menulink (met drie horizontale lijnen) waarmee het navigatiemenu geopend kan worden. De link geeft geen informatie over de toestand van het menu (open of gesloten) aan bezoekers die dit niet kunnen zien, bijvoorbeeld gebruikers van schermlezers. Dit kan bijvoorbeeld opgelost worden door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen en deze met CSS te verbergen voor ziende bezoekers. Een andere mogelijkheid is het gebruik van het attribuut aria-expanded op de menulink. Dit attribuut moet de waarde "true" krijgen als het menu getoond wordt, en "false" als het menu verborgen is.

Bovenaan de pagina https://www.centrumjong.nl/ opent de link met een icoon van een vergrootglas een zoekbalk. In deze zoekbalk staat een knop met een icoon van een vergrootglas, maar deze knop heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of functie van deze knop is. Geef deze knop een toegankelijke naam die duidelijk het doel ervan beschrijft. Op pagina https://www.centrumjong.nl/test staat hetzelfde probleem met de knop met een icoon van een vergrootglas in de zoekbalk. Geef ook hier een duidelijke en toegankelijke naam die het doel van deze knop beschrijft. Op pagina https://www.centrumjong.nl/?s=jong staat hetzelfde probleem met de knop met een icoon van een vergrootglas in de zoekbalk. Geef deze knop een toegankelijke naam die duidelijk maakt wat het doel ervan is.

Bovenaan de pagina https://www.centrumjong.nl/ opent de link met een icoon van een vergrootglas een zoekbalk in het hoofdmenu. Terwijl de bezoeker typt, worden er suggesties weergegeven in een dropdownlijst, waardoor het functioneert als een combobox. De benodigde ARIA-rollen en attributen ontbreken echter. Voeg het attribuut role="combobox" toe aan het invoerveld. Daarnaast is het attribuut aria-expanded nodig om de toestand van de verborgen inhoud aan te geven (zichtbaar of niet). Er zijn nog meer attributen vereist om dit element volledig toegankelijk te maken. Raadpleeg hiervoor https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.

Op pagina https://www.centrumjong.nl/ staat een vaste link met een pijlicoon die dient om de pagina omhoog te scrollen. Deze link is verborgen met het attribuut aria-hidden="true". Hierdoor is de link onzichtbaar voor schermlezers. Dit verborgen klikbare element kan echter nog steeds met het toetsenbord de focus krijgen. Dit veroorzaakt verschillende problemen. Bijvoorbeeld kunnen blinde bezoekers met het toetsenbord nog steeds naar dit element navigeren, maar weten ze niet wat dit element is of wat de functie ervan is. Zorg dat elementen die met aria-hidden verborgen zijn, zelf geen toetsenbordfocus kunnen krijgen en geen elementen bevatten die focus kunnen krijgen.

Op pagina https://www.centrumjong.nl/ staat een vaste link met een pijlicoon die de pagina omhoog laat scrollen. Deze link heeft geen toegankelijke naam. Er is geprobeerd om deze link een naam te geven door de tekst “Scroll naar bovenzijde” toe te voegen, maar deze visueel verborgen tekst is ook verborgen voor schermlezers met display:none. De CSS-code display:none zorgt ervoor dat inhoud niet zichtbaar is voor schermlezers. Gebruik dit daarom niet bij informatieve elementen. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of functie van de link is. Geef deze link een toegankelijke naam die duidelijk het doel van de link beschrijft.

Op pagina https://www.centrumjong.nl/ is de webReader-tool aanwezig. De knoppen in het webReader-menu openen dialoogvensters. In deze dialoogvensters hebben de interactieve elementen bovenaan de rol role="button" gekregen. De ouderrol van deze button-elementen is echter list. Hierdoor bevat het ul-element directe kinderen die niet zijn toegestaan.

Op pagina https://www.centrumjong.nl/ is de webReader-tool aanwezig. De knoppen in het webReader-menu openen dialoogvensters. In deze dialoogvensters openen knoppen bovenaan, zoals de knop voor leestempo en de knop die de tekstinstellingen opent, dialoogvensters. Deze dialoogvensters hebben geen toegankelijke namen.

Op pagina https://www.centrumjong.nl/contact/ staat een formulier. Onder "Ik ben" bestaat de laatste optie uit een radio-knop met een tekstinvoerveld ernaast. Deze radio-knop heeft geen toegankelijke naam. Hierdoor is het voor sommige bezoekers met een cognitieve beperking moeilijk om deze keuzerondje goed te gebruiken. Radio-knoppen moeten altijd een toegankelijke naam hebben die het doel beschrijft.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ opent de koppeling met een afbeelding deze afbeelding in een dialoogvenster. Dit dialoogvenster heeft niet de juiste ARIA-rol. Hierdoor kunnen schermlezers niet aangeven dat het om een dialoogvenster gaat. Dit kan opgelost worden door het attribuut role="dialog" toe te voegen aan het dialoogvenster.

Op pagina https://www.centrumjong.nl/goed-voor-jezelf-zorgen-als-ouder-2/ opent de koppeling met een afbeelding een dialoogvenster, maar deze functionaliteit staat niet aangegeven in de code. Om dit op te lossen kan het attribuut aria-haspopup="dialog" worden toegevoegd aan de koppeling. Dit attribuut geeft aan dat er door het klikken op de koppeling een dialoogvenster wordt geopend.

Op pagina https://www.centrumjong.nl/ouders/wat-doet-jeugdgezondheidszorg/ zijn de secties met verborgen inhoud, de zogenaamde accordeons, onjuist uitgevoerd met de ARIA-rol tablist. Tablist is niet geschikt voor accordeons omdat hun gedrag sterk verschilt. Wanneer voor deze rol wordt gekozen, moeten alle functies van een tablijst correct worden geprogrammeerd. Dit botst met het feit dat het geen tablijst is, maar een accordeon. Bij een tablijst moet bijvoorbeeld worden aangegeven welke tab actief is, terwijl bij een accordeon wordt aangegeven welke secties open of gesloten zijn. Daarnaast moet voor een tablijst een andere toetsenbordbediening worden ingesteld. Omdat niet alle functies van een tablijst zijn geprogrammeerd, is dit onderdeel ook als tablijst niet toegankelijk. Een ARIA-oplossing die speciaal voor accordeons is bedoeld, is daarom een betere keuze. Zie https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion voor meer informatie. Andere oplossingen zijn ook mogelijk. Op pagina https://www.centrumjong.nl/informatie-over-scheiding/ staat hetzelfde probleem met accordeons die de rol tablist gebruiken in plaats van een geschikte ARIA-oplossing. Op pagina https://www.centrumjong.nl/ouders/specifiek-aanbod-per-gemeente/ komt hetzelfde probleem voor met accordeons die onjuist de rol tablist hebben gekregen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.centrumjong.nl/ is de webReader-tool aanwezig. Bij het klikken op de knop "Lees voor" wordt een laadanimatie weergegeven. Deze statusmelding is echter niet toegankelijk voor blinde bezoekers. Wanneer een bezoeker een specifiek proces start, geeft de laadanimatie aan dat de applicatie bezig is en dat de bezoeker moet wachten. De animatie krijgt echter geen focus, terwijl deze belangrijke informatie bevat die geldt als een statusmelding. Om ervoor te zorgen dat schermlezers deze melding snel kunnen voorlezen, moet aan de animatie een passend attribuut worden toegekend, zoals aria-live="polite" of role="status". Voor meer informatie over het gebruik van role="status" kan https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22 worden geraadpleegd.