Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Jeugdmonitor CBS

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Jeugdmonitor CBS
Datum 4 juli 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op jeugdmonitor.cbs.nl
  • Alle PDF's op jeugdmonitor.cbs.nl
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
  • Conformiteitsdoel WCAG 2.1 niveau AA

    Uitgebreide toetsresultaten

    Aantal bevindingen: 38

    1. Waarneembaar

    1.1 Tekstalternatieven

    1.1.1 Niet-tekstuele content (Niveau A)

    Informatie over succescriterium 1.1.1 Niet-tekstuele content

    Uitkomst: Onvoldoende

    Bevinding 1: Bovenaan elke pagina staat het logo van de rijksoverheid. De alternatieve tekst 'Jeugdmonitor' mist de informatie dat het hier over een website van de rijksoverheid gaat.

    Bevinding 2: Onderaan de homepagina staat bijvoorbeeld boven 'Regionale vergelijkingen' een afbeelding met de alternatieve tekst 'Regionale vergelijkingen'. Deze tekst beschrijft de afbeelding niet maar is herhaling van de titel. Pas de alternatieve tekst aan of maak de afbeelding eventueel decoratief door een leeg alt-attribuut toe te voegen binnen het img-element. Hetzelfde probleem komt op meer plaatsen in de website voor, bijvoorbeeld bij de twee afbeeldingen daarnaast en de foto van een klas met de toegankelijke tekst 'Annual Youth Monitor' op de pagina https://jeugdmonitor.cbs.nl/cijfers..

    Bevinding 3: Op pagina https://jeugdmonitor.cbs.nl/onderzoeksbeschrijvingen/ICT-gebruik-van-huishoudens-en-personen staat onder 'Bronnen' een afbeelding van een pijl waarmee aangegeven wordt dat een externe link geopend wordt. Het icoon wordt door middel van het pseudo-element :before en de content property in de CSS op de pagina gezet. Op deze manier kan het zijn dat het icoon wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. De content property is alleen geschikt voor het toevoegen van puur decoratieve content. Een oplossing kan zijn om het icoon in de HTML te plaatsen, bijvoorbeeld als img-element of svg met tekst alternatief.
    Advies: Gebruik geen icoontjes voor externe links of nieuwe vensters: https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/

    Bevinding 4: De afbeeldingen in PDF-document 'Handleiding StatLine' hebben geen beschrijving. Bijvoorbeeld de afbeelding waarop te zien is hoe voor een bepaalde tabel gekozen kan worden op pagina 3 is geen decoratieve afbeelding. Deze afbeelding heeft geen beschrijving en is niet als artefact aangemerkt. Voor informatieve afbeeldingen geldt dat ze een beschrijving moeten hebben van de informatie die er in staat. De decoratieve afbeeldingen dienen als artefact te worden getagd.

    1.2 Op tijd gebaseerde media

    1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

    Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

    Uitkomst: Onvoldoende

    Bevinding 5: Op de pagina https://jeugdmonitor.cbs.nl/publicaties/videos-over-jaarrapport-2017-landelijke-jeugdmonitor is er in de video 'Jeugdmonitor criminaliteit' op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 1:00. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5.

    1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

    Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

    Uitkomst: Onvoldoende

    Bevinding 6: Op de pagina https://jeugdmonitor.cbs.nl/publicaties/videos-over-jaarrapport-2017-landelijke-jeugdmonitor is er in de video 'Jeugdmonitor criminaliteit' op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 1:00. Er ontbreekt een voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien niet weten wat er wordt getoond in de video. Laat de teksten in beeld uitspreken door een voiceover of maak gebruik van een audiodescriptie.

    1.3 Aanpasbaar

    1.3.1 Info en relaties (Niveau A)

    Informatie over succescriterium 1.3.1 Info en relaties

    Uitkomst: Onvoldoende

    Bevinding 7: In de footer van elke pagina staan alle links onder 'Service' en 'Help' in lijsten met één item. Voorleessoftware leest elke lijst als afzonderlijke lijst ('Lijst met één item, item 1: etc') voor. Maak twee lijsten van de items onder 'Service' en 'Help'.

    Bevinding 8: Op verschillende pagina's is de koppenstructuur niet optimaal. Bijvoorbeeld de pagina https://jeugdmonitor.cbs.nl/onderzoeksbeschrijvingen/ICT-gebruik-van-huishoudens-en-personen begint met een kop van niveau 2, dan een kop van niveau 3 'Wat behelst het onderzoek' zonder inhoud. Een kop zonder content eronder mag niet voorkomen, een kop moet altijd een korte beschrijving van de onderliggende tekst bevatten. In dit geval beschrijft deze kop de volgende 7 koppen van niveau 3 en zou van een niveau hoger moeten zijn. De kop van niveau 2 bevat de titel van de pagina en zou van niveau 1 moeten zijn.
    Hulpsoftware gebruikt de koppenstructuur om een overzicht van de inhoud van een pagina te geven. Standaard is om de inhoud van een pagina te beginnen met een kop niveau 1 met de titel van de pagina waarna het niveau van volgende koppen steeds maar één niveau lager wordt. Geef de pagina een logische koppenstructuur.

    Bevinding 9: Het PDF-document 'Handleiding StatLine' is niet goed gecodeerd (van tags voorzien). Op veel plaatsen, bijvoorbeeld op pagina 3 is gewone tekst gecodeerd als kop niveau 1. Zorg voor een semantisch correcte code-laag in de PDF's op de website.

    1.3.2 Betekenisvolle volgorde (Niveau A)

    Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

    Uitkomst: Onvoldoende

    Bevinding 10: Op de homepagina staan blokken met een afbeelding, een kop en tekst. Op dit moment heeft de afbeelding de zelfde alternatieve tekst als de titel van het blok, dat wordt afgekeurd onder 1.1.1. Het is niet duidelijk bij welke kop de afbeelding hoort, als de blokken achter elkaar worden voorgelezen. Zet de koppen vooraan in de HTML-code en zet hierachter de afbeelding (met alternatieve tekst), of verwijder de alternatieve tekst van de afbeeldingen (maar behoud het alt-attribuut) om de afbeelding te verbergen voor hulpsoftware. Visueel mag deze indeling wel aangehouden worden.

    Bevinding 11: Het PDF-document 'Handleiding StatLine' is niet goed gecodeerd waardoor de leesvolgorde niet klopt. Bijvoorbeeld van pagina 2 wordt gesprongen naar pagina 7 en dan weer naar pagina 2. Zorg voor een correcte code-laag die de leesvolgorde van het document volgt.

    1.3.3 Zintuiglijke eigenschappen (Niveau A)

    Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

    Uitkomst: Onvoldoende

    Bevinding 12: Op pagina https://jeugdmonitor.cbs.nl/index.php/in-de-regio/benchmark-Jeugdhulp is in de tekst sprake van de linkerkaart en de rechterkaart. Blinden kunnen de visuele locatie van de kaarten niet zien. Alle instructies om content te kunnen begrijpen of te bedienen, moeten ook tekstueel en/of semantisch aanwezig zijn zodat de instructies ook te begrijpen zijn voor mensen die het beeld niet zien. Denk hierbij aan vorm, omvang, locatie, geluid en oriëntatie van de content, die ook tekstueel beschreven moet zijn op dezelfde pagina.

    1.4 Onderscheidbaar

    1.4.1 Gebruik van kleur (Niveau A)

    Informatie over succescriterium 1.4.1 Gebruik van kleur

    Uitkomst: Onvoldoende

    Bevinding 13: De links in de lopende tekst op pagina https://jeugdmonitor.cbs.nl/index.php/contact#main-content, bijvoorbeeld de link 'info@cbs.nl' of pagina https://jeugdmonitor.cbs.nl/cijfers de link 'Jeugdmonitor StatLine', zijn alleen herkenbaar doordat ze een andere kleur hebben. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk niet herkennen dat om links gaat. Zorg ervoor dat hyperlinks in lopende tekst ook herkenbaar zijn aan minimaal één andere eigenschap, bijvoorbeeld door ze te onderstrepen.

    1.4.3 Contrast (minimum) (Niveau AA)

    Informatie over succescriterium 1.4.3 Contrast (minimum)

    Uitkomst: Onvoldoende

    Bevinding 14: In de zoekfunctie bovenaan iedere pagina staat de placeholdertekst 'Zoeken'. De contrastratio tussen de grijze tekst (HEX #868E96) en de witte achtergrond is 3,2:1 waar dat minimaal 4,5:1 moet zijn.

    1.4.10 Reflow (Niveau AA)

    Informatie over succescriterium 1.4.10 Reflow

    Uitkomst: Onvoldoende

    Bevinding 15: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt in de footer van elke pagina een deel van de witte tekst 'Onderzoeksbeschrijvingen' in de achtergrond die dezelfde kleur heeft. Zorg ervoor dat tekst altijd leesbaar blijft en vermijd een scrollbalk in de leesrichting (horizontaal).

    Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina https://jeugdmonitor.cbs.nl/index.php/in-de-regio/benchmark-Jeugdhulp de tekst 'Esri, HERE, Garmin, FAO, NOAA, USGS | CBS/Statistics Netherlands.' onder de twee kaarten. Na klikken op de tekst wordt hij alsnog niet goed weergegeven. Zorg ervoor dat tekst altijd leesbaar blijft.

    1.4.11 Contrast van niet-tekstuele content (Niveau AA)

    Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

    Uitkomst: Onvoldoende

    Bevinding 16: In de header van elke pagina staat een knop 'Zoeken'. Het contrast van het witte vergrootglas op de roze achtergrond (HEX #F2D9E7) is te laag. De contrastverhouding is hier 1,3:1, waar dit minimaal 3:1 moet zijn.

    1.4.13 Content bij hover of focus (Niveau AA)

    Informatie over succescriterium 1.4.13 Content bij hover of focus

    Uitkomst: Onvoldoende

    Bevinding 17: Wanneer bezoekers op onder andere pagina https://jeugdmonitor.cbs.nl/regionaal-jeugdrapport#twenterand met de muis over een datavisualisatie hoveren, verschijnt aanvullende content. Bezoekers moeten deze informatie weer kunnen verwijderen zonder de muis of toetsenbordfocus te verplaatsen, bijvoorbeeld met de escape-toets. Dit is nu niet mogelijk.

    2. Bedienbaar

    2.1 Toetsenbordtoegankelijk

    2.1.4 Enkel teken sneltoets (Niveau A)

    Informatie over succescriterium 2.1.4 Enkel teken sneltoets

    Uitkomst: Onvoldoende

    Bevinding 18: Op de pagina https://jeugdmonitor.cbs.nl/publicaties/videos-over-jaarrapport-2017-landelijke-jeugdmonitor wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

    2.2 Genoeg tijd

    2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

    Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

    Uitkomst: Onvoldoende

    Bevinding 19: Op de homepagina staat een carrousel die na elke paar seconden een nieuw beeld laat zien. Deze carrousel kan niet gestopt, gepauzeerd of verborgen worden. Bij sommige mensen kan de beweging misselijkheid veroorzaken. Voor mensen met bijvoorbeeld een cognitieve beperking kan het lastig zijn omdat zij zich tijdens het lezen niet kunnen concentreren op de tekst, doordat de tekst beweegt. Zorg dat bezoekers de carrousel kunnen stoppen of pauzeren, of verwijder de carrousel in z’n geheel.

    2.4.1 Blokken omzeilen (Niveau A)

    Informatie over succescriterium 2.4.1 Blokken omzeilen

    Uitkomst: Onvoldoende

    Bevinding 20: Elke pagina bevat wel een skiplink (een mechanisme om naar een ander deel van de pagina te springen), maar de skiplink is niet de eerste link op de pagina en hij werkt niet. Zorg dat bezoekers direct naar de hoofdinhoud van een pagina kunnen springen, zonder dat zij daar extra handelingen voor moeten uitvoeren.

    2.4.2 Paginatitel (Niveau A)

    Informatie over succescriterium 2.4.2 Paginatitel

    Uitkomst: Onvoldoende

    Bevinding 21: De PDF 'Handleiding StatLine' heeft wel een document titel in de eigenschappen maar 'weg' beschrijft de inhoud van de PDF niet. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

    2.4.3 Focus volgorde (Niveau A)

    Informatie over succescriterium 2.4.3 Focus volgorde

    Uitkomst: Onvoldoende

    Bevinding 22: Op pagina https://jeugdmonitor.cbs.nl/index.php/in-de-regio/benchmark-Jeugdhulp kan je met de tabtoets door de pagina navigeren. Er wordt in de HTML gebruikgemaakt van het attribuut tabindex=0 op bijvoorbeeld het seperator element tussen de twee kaarten. Daardoor ontstaat er bij een onlogische focusvolgorde. Zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert. Plaats geen tabindex="0" op elementen die geen focus horen te krijgen.

    Informatie over succescriterium 2.4.4 Linkdoel (in context)

    Uitkomst: Onvoldoende

    Bevinding 23: Op de homepagina zijn de afbeeldingen in de carrousel bovenaan de pagina links. De alternatieve tekst van één van de afbeeldingen is '3 meiden chillen in het gras in de zon'. Dit is ook de linktekst. Deze tekst beschrijft het linkdoel niet. De afbeelding is illustratief, het alt-attribuut kan daarom leeg blijven. Geef de link daarnaast een goede beschrijvende linktekst.

    Bevinding 24: Op pagina https://jeugdmonitor.cbs.nl/zoeken?search=onderwijs wordt onderaan gebruikgemaakt van paginering. De linknaam is onvoldoende voor screenreadergebruikers. Zo is de linknaam '1' bij pagina 1, '2' bij pagina 2, enzovoorts. Vul deze links aan door er het woord 'pagina ' voor te zetten. Deze tekst kan visueel verborgen worden.

    Bevinding 25: De link 'Ga naar volgende pagina' in de paginering op pagina https://jeugdmonitor.cbs.nl/zoeken?search=onderwijs heeft geen toegankelijke naam. Het title-attribuut wordt niet door alle browsers en hulpsoftware even goed ondersteund en is daarom geen vervanging van het alt-attribuut. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Verwijder daarnaast het aria-hidden=true attribuut.

    Bevinding 26: Advies: Op de homepagina staan onder 'Publicaties' een aantal blokken met tekst die linken naar een publicatie. De linktekst bestaat uit volledige tekst in het blok inclusief datum en tijd van publicatie. Zorg voor een korte linktekst die het doel van de link goed beschrijft. Hetzelfde probleem komt vaker voor in de website, bijvoorbeeld op pagina https://jeugdmonitor.cbs.nl/zoeken?search=onderwijs bij alle zoekresultaten.

    Bevinding 27: Advies: Bovenaan elke pagina staat het logo van de rijksoverheid en Jeugdmonitor, dit is een link naar de homepagina, de linktekst 'Jeugdmonitor' beschrijft het linkdoel niet, voeg bijvoorbeeld 'home' toe aan de linktekst.

    2.4.7 Focus zichtbaar (Niveau AA)

    Informatie over succescriterium 2.4.7 Focus zichtbaar

    Uitkomst: Onvoldoende

    Bevinding 28: Op de homepagina zijn de afbeeldingen in de carrousel bovenaan de pagina links. Foto's die niet zichtbaar zijn kunnen toch focus hebben. Mensen die met behulp van het toetsenbord door de pagina navigeren kunnen nu niet zien welk element focus heeft. Zorg er voor dat alleen zichtbare elementen focus kunnen krijgen.

    2.5 Input modaliteiten

    2.5.3 Label in naam (Niveau A)

    Informatie over succescriterium 2.5.3 Label in naam

    Uitkomst: Onvoldoende

    Bevinding 29: In de header van elke pagina is een zoekveld. De toegankelijke naam van het zoekveld 'Search' bevat niet de naam visueel zichtbaar is 'Zoeken'. Zorg ervoor dat de visuele naam in de toegankelijke naam aanwezig is, liefst vooraan.

    3. Begrijpelijk

    3.1 Leesbaar

    3.1.1 Taal van de pagina (Niveau A)

    Informatie over succescriterium 3.1.1 Taal van de pagina

    Uitkomst: Onvoldoende

    Bevinding 30: In de eigenschappen van het PDF-document 'Handleiding StatLine' is de taal niet goed ingevuld. Deze staat op Engels in plaats van Nederlands. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

    3.1.2 Taal van onderdelen (Niveau AA)

    Informatie over succescriterium 3.1.2 Taal van onderdelen

    Uitkomst: Onvoldoende

    Bevinding 31: De eerste skiplink op elke Nederlandstalige pagina heeft als tekst 'Skip to main navigation'. Deze tekst is in een andere taal. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="en" toe te voegen. Beter nog is om een Nederlandse tekst te gebruiken.
    Hetzelfde komt vaker in de website voor, bijvoorbeeld bij het zoekveld in de header van elke pagina heeft de toegankelijke naam 'Search'. Voeg een taalwissel toe of beter nog geef de Nederlandse naam 'Zoeken' om ook te voldoen aan 2.5.3. Hetzelfde geldt voor de toegankelijke naam van het vergrootglas in de header van elke pagina bij een smal beeldscherm als de hamburgermenu-knop in beeld is: 'Toggle navigation'.

    Bevinding 32: In de Engelstalige pagina staat de placeholder tekst 'Zoeken' in het zoekveld. Hiervoor moet in de code een taalwisseling aangegeven worden, dit kan door de omliggende html-code een lang="en" toe te voegen, of beter nog, vertaal de tekst.

    De YouTube video player op pagina https://jeugdmonitor.cbs.nl/publicaties/videos-over-jaarrapport-2017-landelijke-jeugdmonitor is gecodeerd als Engelstalig. De titel 'Jeugdmonitor criminaliteit' is Nederlands. Hiervoor moet in
    de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="nl" toe te voegen.

    4. Robuust

    4.1 Compatibel

    4.1.2 Naam, rol, waarde (Niveau A)

    Informatie over succescriterium 4.1.2 Naam, rol, waarde

    Uitkomst: Onvoldoende

    Bevinding 33: Bij een breed scherm heeft de zoekknop met het vergrootglas in de header van elke pagina heeft geen toegankelijke naam. Het is voor screenreadergebruikers nu niet duidelijk wat de knop doet.

    Bevinding 34: De link 'Ga naar volgende pagina' in de paginering op pagina https://jeugdmonitor.cbs.nl/zoeken?search=onderwijs heeft geen toegankelijke naam. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen.

    Bevinding 35: Onderaan pagina https://jeugdmonitor.cbs.nl/zoeken?search=onderwijs staat een paginering. De knop met het pijltje naar de volgende pagina heeft het aria-hidden attribuut maar het is een actieve link die focus krijgt. Haal het aria-hidden attribuut hier weg.

    Bevinding 36: Op pagina https://jeugdmonitor.cbs.nl/publicaties/videos-over-jaarrapport-2017-landelijke-jeugdmonitor staan twee video's in een iframe geplaatst. Daar ontbreekt het title-attribuut. Plaats het title-attribuut in dit iframe met een goede omschrijving van de inhoud van het iframe, bijvoorbeeld "Video jeugdmonitor criminaliteit". Hetzelfde geldt voor de iframes met kaarten op pagina .https://jeugdmonitor.cbs.nl/index.php/in-de-regio/benchmark-Jeugdhulp

    Bevinding 37: Op pagina https://jeugdmonitor.cbs.nl/publicaties/videos-over-jaarrapport-2017-landelijke-jeugdmonitor staan twee video's met het logo van het CBS die linken naar de YouTube pagina van het CBS. Er is wel een a-element aanwezig maar het href-attribuut mist. Hierdoor is de link onder andere niet bereikbaar en bedienbaar met het toetsenbord. Zorg ervoor dat iedere link een href attribuut bezit.

    Bevinding 38: Opmerking: Bij een smal scherm als de hamburgermenu-knop aanwezig is heeft de zoekknop met het vergrootglas in de header van elke pagina de functie en toegankelijke naam 'Toggle navigation'. Voor ziende mensen is echter niet duidelijk wat de knop doet want het zoekveld onderaan het menu komt niet direct in beeld. Dit is een usability probleem.

    Onderbouwing van de evaluatie

    Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

    Steekproef getoetste webpagina's

    Ondersteunende technieken

    Bronnen

    Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

    Geprint: 2024-11-21 12:09:01 v2.4-011