Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website CBS

(Alleen de bevindingen)

Scope van de evaluatie

Naam website CBS
Datum 24 april 2023
Scope van de website Binnen de scope van het onderzoek vallen:
Buiten de scope van het onderzoek vallen:
  • 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: 91

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: Op de homepagina staat boven de kop 'Investeringen groeien met ruim 5 procent in februari' een svg afbeelding. Deze is nu niet verborgen voor hulpsoftware. Voeg aria-hidden=true toe om dit op te lossen.

Bevinding 2: Op pagina https://www.cbs.nl/nl-nl/over-ons/contact staat de afbeelding 'Bel met Teletolk'. De alternatieve tekst van deze afbeelding is 'Logo teletolk'. Zorg ervoor dat wanneer afbeeldingen tekst bevatten, alle tekst op de afbeelding voorkomt in de alternatieve tekst. Er zijn overigens meerdere bevindingen die gaan over deze afbeelding, zie ook succescriterium 1.4.5 en 2.5.3.

Bevinding 3: Op pagina https://www.cbs.nl/nl-nl/over-ons/contact staat een afbeelding met de alternatieve tekst 'Contact'. Deze alternatieve tekst omschrijft niet wat er op de afbeelding is te zien. De afbeelding kan ook als decoratief worden beschouwd en heeft daarom geen alternatieve tekst nodig. Los dit probleem op door de alternatieve tekst aan te passen, of geef de afbeelding een leeg alt-attribuut zodat hulpsoftware het als decoratief beschouwd.

Bevinding 4: In het contactformulier op https://www.cbs.nl/nl-nl/over-ons/contact/contactformulier zijn verplichte velden met een asterisk (*) aangegeven. Deze asterisken hebben een alternatieve tekst nodig omdat ze niet door alle voorleessoftware worden voorgelezen. Het is al voldoende om op de input-elementen van de formuliervelden het required-attribuut te plaatsen.
Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking wordt een asterisk ook gebruikt om informatie over te brengen.

Bevinding 5: Op pagina https://www.cbs.nl/nl-nl/maatschappij hebben drie afbeeldingen de alternatieve tekst 'In de regionale Monitor Brede Welvaart wordt de brede welvaart van gemeentes, provincies en COROP-gebieden in kaart gebracht.'. Deze alternatieve tekst omschrijft niet wat er op deze afbeeldingen is te zien. Deze afbeeldingen kunnen als decoratief worden beschouwd en hebben daarom geen alternatieve tekst nodig. Los dit probleem op door of de afbeeldingen een goede alternatieve tekst te geven, of maak de afbeeldingen decoratief door deze een leeg alt-attribuut te geven.

Bevinding 6: De grafieken op pagina https://www.cbs.nl/nl-nl/nieuws/2023/13/economisch-beeld-opnieuw-wat-negatiever zijn opgemaakt als svg-afbeeldingen. Screenreaders lezen de tekst in de grafieken voor, bijvoorbeeld de getallen langs de y-as en de jaartallen langs de x-as. Het kan verwarrend zijn voor screenreadergebruikers als deze teksten worden voorgelezen. Omdat er een toegankelijk alternatief is voor de grafieken (de tabellen) is een mogelijke oplossing voor dit probleem het verbergen van de grafieken door aria-hidden op het svg-element te plaatsen.

Bevinding 7: Op pagina https://www.cbs.nl/nl-nl/visualisaties/welvaart-in-coronatijd/veiligheid staat een afbeelding van de tekst 'Vragen en antwoorden coronacrisis'. Deze afbeelding heeft geen alternatieve tekst, hierdoor is de tekst op de afbeelding niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Ook heeft de link waarmee de afbeelding is opgemaakt geen toegankelijke naam (zie succescriteria 2.4.4. en 4.1.2). Het is overigens niet toegestaan om afbeeldingen van tekst op een pagina te gebruiken, zie succescriteria 1.4.5. Los dit probleem op door de tekst in de afbeelding als HTML tekst op de pagina te plaatsen.

Bevinding 8: Advies: Op de homepage staan boven de koppen afbeeldingen met wisselende alt-teksten. Sommige zijn decoratief (alt=""), andere hebben een beschrijving als 'Een vrouw koopt aubergines bij een groentewinkel, waar de verse groente buiten ligt uitgestald'. Omdat de afbeelding ook als decoratief kan worden beschouwd mag de afbeelding een leeg alt-attribuut krijgen zodat deze verborgen is voor hulpsoftware. Zorg ervoor dat de afbeelding verborgen wordt of een goede alternatieve tekst krijgt.

1.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 9: Op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline staat een video die geen ondertiteling heeft. Hierdoor is de video mogelijk moeilijk te volgen voor mensen met een auditieve beperking. Zorg ervoor dat video's altijd een ondertiteling hebben.

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 10: Voor de video op pagina https://www.cbs.nl/nl-nl/video/fa3dd282309246feb6c907cc6d166a92?16by9=true staat een video waarin tekst in beeld komt te staan. Niet alle teksten in beeld komen voor in het audiospoor, bijvoorbeeld de tekst 'Internationaal' rond 1:05 en de percentages in beeld rond 5:42. Ook komt er op het eind van de video een logo met tekst in beeld die niet worden genoemd in het audiospoor. Zorg ervoor dat er een uitgeschreven tekst in de vorm van een transcript aanwezig is, of voeg audiodescriptie toe aan de video om ook gelijk te voldoen aan succescriterium 1.2.5. Het is overigens beter om zowel een transcript en audiodescriptie toe te voegen als alternatief voor de video.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://www.cbs.nl/nl-nl/video/fa3dd282309246feb6c907cc6d166a92?16by9=true staat een video waarin tekst in beeld komt te staan. Niet alle teksten in beeld komen voor in het audiospoor, bijvoorbeeld de tekst 'Internationaal' rond 1:05 en de percentages in beeld rond 5:42. Ook komt er op het eind van de video een logo met tekst in beeld die niet worden genoemd in het audiospoor. Zorg ervoor dat visuele informatie in een video terug te vinden is in het audiospoor door deze bijvoorbeeld uit te laten spreken door een voice-over of audiodescriptie toe te voegen aan de video.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 12: Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking staan blokken content met daarin koppen, zoals 'Bevolkingsteller' en 'Huishoudens'. Deze koppen zijn in de code niet opgemaakt met een kop-element. Zorg ervoor dat wanneer iets visueel een kop is dit ook in de code als zo is aangegeven.
Op andere pagina's komen ook koppen voor die niet zijn opgemaakt met het kop-element. Op pagina https://www.cbs.nl/nl-nl/nieuws/2023/13/economisch-beeld-opnieuw-wat-negatiever zijn bijvoorbeeld de koppen van grafieken niet opgemaakt als kop, en op https://www.cbs.nl/nl-nl/video/fa3dd282309246feb6c907cc6d166a92?16by9=true staan koppen zoals 'over het CBS' die niet zijn opgemaakt als kop.

Bevinding 13: Op pagina https://www.cbs.nl/en-gb/corporate/2023/12/the-covid-19-pandemic-how-did-it-affect-statistics- is de tekst 'The need for .... Welfare and Sport.' schuingedrukt gemaakt met het em-element. Hiervoor is het em-element niet geschikt. Het element heeft een semantische waarde; het geeft aan hulpsoftware aan dat een tekst met nadruk moet worden uitgesproken. Om deze reden mag het element alleen worden gebruikt op één of enkele woorden en mag het niet worden gebruikt voor de visuele opmaak van tekst. Los dit probleem op door het em-element te verwijderen en de tekst op te maken met een andere methode, bijvoorbeeld via CSS.

Bevinding 14: Op pagina https://www.cbs.nl/nl-nl/abonnementen staat een groep selectievakjes met het bijschrift 'Beschikbare abonnementen *'. Deze selectievakjes zijn in de code niet gegroepeerd. Hierdoor weten bezoekers die het scherm niet kunnen zien niet dat de selectievakjes bij elkaar horen. Zorg ervoor dat de selectievakjes worden gegroepeerd, bijvoorbeeld door gebruik te maken van een fieldset legend combinatie.
Dit probleem komt ook voor in de filteropties op pagina https://www.cbs.nl/nl-nl/zoeken?q=bevolking.

Bevinding 15: Als op pagina https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart een thema is geselecteerd, bijvoorbeeld 'Bevolking', worden de gegevens op de kaart ook getoond in een tabel. Deze tabel heeft twee kopcellen in de eerste rij, het bereik van deze th-elementen is niet aangegeven. Hierdoor is het voor hulpsoftware moeilijk te bepalen of deze th-elementen koppen zijn voor rijen of kolommen. Geef het bereik op de th-elementen aan door gebruik te maken van het scope attribuut of id- en headers-attributen.

Bevinding 16: Wanneer bezoekers gebruikmaken van voorleessoftware zoals NVDA of Microsoft Verteller is het uitklapbare menu 'Filter op beginletter' op pagina https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen niet goed te bedienen. Het is mogelijk om de knop uit te klappen met het toetsenbord en focus te plaatsen op alle links in dit uitgeklapte menu, maar de links worden niet voorgelezen door de voorleessoftware wanneer deze focus hebben. Mogelijk komt dit doordat de uitklapbare knop is opgemaakt als een button-element met daaronder een div-element met role=listbox. De a-elementen binnen dit div-element zijn niet opgemaakt met role=option, waardoor de listbox niet goed werkt met hulpsoftware. Maak de listbox correct op om dit probleem op te lossen.

Bevinding 17: Wanneer het formulier op https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand wordt ingevuld verschijnt er een som op de pagina. Voor bezoekers die het scherm niet kunnen zien is het niet duidelijk dat in deze som een bedrag door een ander bedrag wordt gedeeld. Zorg ervoor dat de visuele weergave van de som ook duidelijk is in de code. Dit kan bijvoorbeeld door waar nu visueel een streep staat in de code de screenreader only tekst 'gedeeld door' te plaatsen. Waar de 'x' is gebruikt om vermenigvuldigen aan te geven moet dit ook worden aangevuld met een screenreader only tekst.

Bevinding 18: De PDF 'Statline Flyer' (https://www.cbs.nl/-/media/_pdf/2017/50/neuwe-statline-flyer.pdf) is niet gecodeerd/van tags voorzien. Hierdoor kan hulpsoftware de structuur van het document niet bepalen. Het is bijvoorbeeld niet mogelijk om te bepalen van koppen zijn, of informatieve afbeeldingen een alternatieve tekst hebben en wat de leesvolgorde van het document is. Zorg ervoor dat de PDF wordt voorzien van een codelaag. Omdat de PDF geen codelaag heeft kan deze niet worden getest op alle succescriteria. Houdt er daarom rekening mee dat bij het aanmaken van de codelaag nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Ook de PDF 'Huren aanpassen met de Consumentenprijsindex' (https://www.cbs.nl/-/media/cbs/infographics/huurprijsmodule/huren-aanpassen-met-de-consumentenprijsindex-(1).pdf) is niet voorzien van een codelaag.

Bevinding 19: Advies: Op pagina https://www.cbs.nl/nl-nl/over-ons/website/toegankelijkheid staat onder de kop 'Deel deze pagina' een visuele lijst van social media iconen die werken als links. In de code zijn deze links niet opgemaakt als een lijst. Het is beter om elementen die visueel een lijst zijn ook in de code op te maken als een lijst, bijvoorbeeld door gebruik te maken van het ul-element.
Deze content komt voor op meerdere pagina's, bijvoorbeeld ook op pagina https://www.cbs.nl/nl-nl/cijfers en https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking.

Bevinding 20: Advies: Op pagina https://www.cbs.nl/nl-nl/publicatieplanning wordt de H1 kop 'Publicatieplanning' in de koppenstructuur opgevolgd door de H3 kop 'Olieverbruik'. Voor de toegankelijkheid van de pagina is het beter om een logische koppenstructuur te gebruiken. Deze begint bij kopniveau 1, opgevolgd door kopniveau 2, knopniveau 3, etc. Sla geen kopniveau over.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 21: Op de homepage staan blokken content die een afbeelding, een kop van een nieuwbericht en aanvullende informatie bevatten. Sommige van deze afbeeldingen hebben een alternatieve tekst maar in de HTML zijn de afbeelding boven de bijbehorende kop geplaatst. Wanneer een screenreader de pagina voorleest is het voor bezoekers niet te bepalen bij welke kop de afbeelding hoort. Daarom is het belangrijk dat in de HTML informatie dat bij een kop hoort daar onder is geplaatst. Een mogelijk oplossing voor dit probleem is het aanpassen van de volgorde waarin content in de HTML is geplaatst. Een andere oplossing voor dit probleem is ervoor zorgen dat de afbeeldingen geen alternatieve tekst hebben en verborgen zijn voor hulpsoftware. Dit mag omdat deze afbeelding decoratief zijn en geen alternatieve tekst nodig hebben.
Een soortgelijk probleem komt ook voor bij de blokken content op pagina https://www.cbs.nl/nl-nl/maatschappij.

Bevinding 22: Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking staat achter de tekst '2022' een asterisk (*). Deze asterisk is een verwijzing naar de voetnoot '* Voorlopige cijfers'. Bezoekers die het scherm niet kunnen zien en gebruikmaken van een screenreader kunnen de relatie tussen de verwijzing en voetnoot niet bepalen. Daarom is het belangrijk dat de informatie in de voetnoot wordt voorgelezen op de plek van de verwijzing. Dit kan bijvoorbeeld door deze informatie als tekst te plaatsen op de plek van de verwijzing, dat mag als gewone tekst of als een screenreader only tekst.

Bevinding 23: Op pagina https://www.cbs.nl/nl-nl/nieuws/2023/13/economisch-beeld-opnieuw-wat-negatiever staan grafieken. Deze grafieken hebben visueel een kop die erboven staat en eventueel extra informatie, bijvoorbeeld de kop 'Conjunctuurklokindicator (ongewogen gemiddelde van de indicatoren in de Conjunctuurklok)'. In de HTML zijn deze koppen onder de grafiek geplaatst, waardoor screenreaders eerst de grafiek voorlezen en daarna de beschrijvende kop. Dit kan verwarrend zijn voor screenreadergebruikers. Plaats de kop en extra informatie in de HTML boven het svg-element van de grafiek.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Voldoende

Bevinding 24: Advies: Op pagina https://www.cbs.nl/nl-nl/nieuws/2023/13/economisch-beeld-opnieuw-wat-negatiever staat de grafiek 'Consumenten- en producentenvertrouwen (seizoengecorrigeerd)'. In deze grafiek staan twee lijnen, met verschillende kleuren wordt in de legenda aangegeven wat elke lijn betekent. Bezoekers die kleuren niet goed kunnen waarnemen, bijvoorbeeld vanwege kleurenblindheid, kunnen mogelijk het onderscheidt tussen de twee lijnen aan de hand van de kleuren niet waarnemen. Gebruik daarom kleur niet als enige middel om de lijnen van elkaar te onderscheiden, maak bijvoorbeeld één van de lijnen een gestippelde lijn. De grafiek heeft een toegankelijk alternatief (de tabel), daarom is het niet verplicht om deze aanpassing te maken.
Dit komt ook voor bij andere grafieken, bijvoorbeeld pagina https://www.cbs.nl/en-gb/news/2023/04/excess-mortality-for-the-third-consecutive-year-in-2022.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 25: Op onder andere de homepage staat de knop 'Uw mening'. Na het activeren van deze knop verschijnt er een venster op het scherm met daarin de knop 'Ik wil mijn mening geven over de gehele website'. Als deze knop is geactiveerd en daarna het keuzerondje en keuzeveld zijn ingevoerd, is de link 'contactpagina' (HEX #37A1CD) zichtbaar. Op de witte achtergrond heeft deze link een te laag contrast. De contrastverhouding is hier 2,9:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem geldt ook voor de knop 'versturen' in hetzelfde venster.

Bevinding 26: Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking staat een witte tekst op een oranje achtergrond (HEX #DE8601). Deze tekst heeft onvoldoende contrast. De contrastverhouding is hier 2,7:1, waar dat minimaal 3:1 moet zijn voor grote tekst (vanaf 14pt en dikgedrukt of vanaf 18pt) en 4,5:1 voor kleine tekst.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 27: Op pagina https://www.cbs.nl/nl-nl/over-ons/contact staat een afbeelding van de tekst 'Bel met Teletolk'. Omdat dit een afbeelding is wordt de tekst niet voorgelezen door screenreader. Ook is het niet mogelijk om de tekstgrootte of stijl aan te passen voor mensen met slecht zicht of dyslexie. Vermijd daarom het gebruik van afbeeldingen van tekst en plaats dit als HTML tekst op de pagina.
Een soortgelijk probleem komt ook voor bij de afbeelding van de tekst 'Vragen en antwoorden coronacrisis' op pagina https://www.cbs.nl/nl-nl/visualisaties/welvaart-in-coronatijd/veiligheid.

Bevinding 28: Opmerking: Op pagina https://www.cbs.nl/nl-nl/over-ons/website/toegankelijkheid staat een afbeelding met daarin tekst, de afbeelding is ook opgemaakt als een link. De informatie die op de afbeelding staat is te vinden door de link te volgen, maar verder is de informatie op de afbeelding niet te vinden op deze pagina. Het is beter om de tekst in de afbeelding ook als gewone HTML-tekst op de pagina te plaatsen.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 29: Wanneer op de homepage wordt ingezoomd tot 400% bij een schermbreedte van 1280x1024px, verdwijnt het navigatiemenu achter een knop vanaf 150%. Binnen dit menu is het voor toetsenbordgebruikers niet meer mogelijk om bepaalde menu-items uit te klappen, bijvoorbeeld 'Cijfers'. Focus wordt alleen op de link geplaats, er is geen knop meer waarmee bezoekers het menu-item kunnen uitklappen. Een mogelijk oplossing voor dit probleem is om een knop toe te voegen aan het menu waarmee bezoekers de menu-items kunnen uitklappen. In de code is zo een knop aanwezig, maar deze is verborgen (voor hulpsoftware) door de CSS-eigenschap display: none;.

Bevinding 30: Wanneer op pagina https://www.cbs.nl/nl-nl/publicatieplanning wordt ingezoomd tot 400% bij een schermbreedte van 1280x1024px, verdwijnt vanaf 250% een kolom uit de tabel op de pagina. Het gaat hierbij om de kolom 'Verslagperiode'. Content op een pagina mag niet verdwijnen wanneer bezoekers inzoomen. Zorg ervoor dat deze kolom in de tabel blijft staan wanneer bezoekers inzoomen op de pagina.

Bevinding 31: Wanneer bezoekers op de homepage inzoomen tot 400% bij een schermbreedte van 1280x1024px, staat de knop 'Uw mening' over andere content, bijvoorbeeld voor de hamburgermenuknop. Hierdoor zijn knoppen moeilijk te bedienen en zijn teksten slechter leesbaar. Zorg ervoor dat de knop 'Uw mening' niet over andere content komt te staan wanneer bezoekers inzoomen.
Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op pagina https://www.cbs.nl/nl-nl/publicatieplanning en https://www.cbs.nl/nl-nl/visualisaties/welvaart-in-coronatijd/veiligheid.

Bevinding 32: Op pagina https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart verdwijnt de kaart als bezoeker inzoomen tot 400% bij een schermbreedte van 1280x1024px, dit gebeurt vanaf 300%. De kaart en bijbehorende informatie, zoals filteropties en de toegankelijke tabel, zijn niet meer beschikbaar en bedienbaar in ene ingezoomde weergave. Zorg ervoor dat content beschikbaar is wanneer bezoekers inzoomen op de pagina.

Bevinding 33: Opmerking: Wanneer bezoekers inzoomen op pagina https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart is het venster waar de kaart, toegankelijke tabel en informatie in wordt getoond erg klein. Ook staat de knop 'Filteren' deels voor deze content. Hierdoor is de content op deze pagina slecht leesbaar voor bezoekers die moeten inzoomen, bijvoorbeeld vanwege slecht zicht of kleurenblindheid.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 34: Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking staat de meerkeuzevraag 'Heeft deze informatie u geholpen? *'. Wanneer met het toetsenbord focus wordt geplaatst op de meerkeuzeopties 'Ja' en 'Nee' wordt dat aangegeven met een blauwe focusrand (HEX #A0D1FA). Het contrast van deze focusrand op de witte achtergrond is te laag. De contrastverhouding is hier 1,6:1, waar dat minimaal 3:1 moet zijn.
Dit contrastprobleem komt voor op meerdere pagina's, bijvoorbeeld op pagina https://www.cbs.nl/nl-nl/nieuws/2023/08/economie-groeit-het-sterkst-in-regio-haarlemmermeer en https://www.cbs.nl/en-gb/news/2023/04/excess-mortality-for-the-third-consecutive-year-in-2022.

Bevinding 35: Advies: In de grafieken op pagina https://www.cbs.nl/en-gb/news/2023/04/excess-mortality-for-the-third-consecutive-year-in-2022 wordt een oranje kleur (HEX #F39200) gebruikt om informatie over te brengen. Op de witte achtergrond heeft deze kleur een te laag contrast. De contrastverhouding is hier 2,3:1. Voor de grafiek is een toegankelijke tabel als alternatief aanwezig. Daarom is het niet nodig dat de gebruikte kleuren in de grafieken voldoende contrast hebben. Maar om de grafieken toegankelijker te maken is het beter om kleuren te gebruiken die een minimale contrastverhouding van 3:1 hebben.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 36: In het navigatiemenu op onder andere de homepage wordt content zichtbaar wanneer bezoekers met de muisaanwijzer over de menu-items gaan. Het is niet mogelijk voor bezoekers om deze content te verwijderen zonder de muisaanwijzer te verplaatsen. Zorg ervoor dat bezoekers de aanvullende content kunnen verwijderen zonder de muisaanwijzer te bewegen, bijvoorbeeld met de Escape toets.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 37: Op onder andere de homepage staat de knop 'Uw mening'. Deze knop is niet met het toetsenbord te bedienen wanneer bezoekers gebruikmaken van voorleessoftware, zoals NVDA of Microsoft Verteller. Mogelijk komt dit doordat het element geen knop is maar een klikbaar iframe. Daarom zou een mogelijk oplossing voor dit probleem zijn om de knop op te maken met een button-element.

Bevinding 38: Op onder andere de homepage staat de knop 'Uw mening'. Na het activeren van deze knop verschijnt er een venster op het scherm met daarin de knop 'Ik wil mijn mening geven over een deel van de pagina'. Nadat deze knop is geactiveerd kunnen bezoekers die gebruikmaken van de muisaanwijzer een deel van de pagina selecteren. Voor toetsenbordgebruikers is deze functie niet aanwezig. Zorg ervoor dat deze functionaliteit ook beschikbaar is voor toetsenbordgebruikers, of zorg voor een gelijkwaardig alternatief.

Bevinding 39: In de grafieken op pagina https://www.cbs.nl/nl-nl/nieuws/2023/13/economisch-beeld-opnieuw-wat-negatiever staan knoppen waarmee menu's kunnen worden uitgeklapt. Deze knoppen zijn niet te bedienen met het toetsenbord, het is niet mogelijk om hier focus op te plaatsen. Een mogelijke oorzaak hiervoor is dat de knoppen onderdeel zijn van het svg-element van de grafiek en niet zijn opgemaakt met een button-element. Zorg ervoor dat deze knoppen ook te bedienen zijn met het toetsenbord.
Deze knop komt ook voor op andere pagina's, bijvoorbeeld op https://www.cbs.nl/nl-nl/nieuws/2023/08/economie-groeit-het-sterkst-in-regio-haarlemmermeer en https://www.cbs.nl/en-gb/news/2023/04/excess-mortality-for-the-third-consecutive-year-in-2022.

Bevinding 40: Wanneer een thema is geselecteerd op pagina https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart zijn filteropties naast de kaart te zien. De 'Bekijk meer' knoppen in dit filter zijn niet te bedienen met het toetsenbord. Mogelijk komt dit doordat deze knoppen niet zijn opgemaakt als knoppen maar met label- en input-elementen. Ook zijn de keuzerondjes zelf niet te bedienen met het toetsenbord, mogelijk omdat geen focus wordt geplaatst op het input-element maar op een span-elementen (zie ook succescriterium 2.4.3). Zorg ervoor dat de filteropties te bedienen zijn met het toetsenbord.

Bevinding 41: Wanneer bezoekers bij een schermbreedte van 1280x1024px inzoomen tot 400%, verdwijnt op pagina https://www.cbs.nl/nl-nl/longread/rapportages/2023/cbs-jaarplan-2023 vanaf 125% het sub-navigatiemenu achter een knop. Deze knop is niet te bedienen met het toetsenbord. Zorg ervoor dat alle interactieve elementen te bedienen zijn met het toetsenbord.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 42: Behalve de homepage bevat elke pagina een skiplink waarmee herhalende content kan worden overgeslagen. Zorg ervoor dat de homepage ook een skiplink bevat zodat bezoekers op deze pagina ook de herhalende content kunnen overslaan. Het is namelijk hinderlijk voor toetsenbordgebruikers als zij elke keer dat zij de homepage bezoeker moeten navigeren door het menu en andere items in de header.

Bevinding 43: Wanneer bezoekers inzoomen tot 400% bij een schermbreedte van 1280x1024px, verdwijnt vanaf 170% de skiplink op https://www.cbs.nl/nl-nl/cijfers. Hierdoor is er geen mechanisme aanwezig waarmee bezoekers de herhalende content op de pagina kunnen overslaan. Zorg ervoor dat de skiplink in ingezoomde weergave ook op de pagina blijft staan.
Dit probleem komt op meerde pagina's voor, bijvoorbeeld ook op pagina https://www.cbs.nl/nl-nl/maatschappij en https://www.cbs.nl/nl-nl/visualisaties/welvaart-in-coronatijd/veiligheid.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 44: Aan de hand van de paginatitel op https://www.cbs.nl/nl-nl/over-ons/contact kan de bezoeker niet weten op welke website hij zich bevindt. Voeg daarom de naam van de website toe aan de paginatitel.
Bij meerdere pagina's op de website ontbreekt de naam van de website in de paginatitel, bijvoorbeeld op pagina https://www.cbs.nl/nl-nl/maatschappij en https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart.

Bevinding 45: Op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline kan de uitgeschreven van de video worden gedownload als een PDF. Deze PDF heeft geen documenttitel. Een documenttitel bij PDF's is belangrijk. Het geeft aan screenreadergebruikers door wat het hoofdonderwerp van het document is en het helpt lezers met navigeren wanneer meerdere documenten openstaan. Geef het bestand daarom een goede documenttitel in de documenteigenschappen.

Dit probleem komt ook voor in de volgende PDF's:

Bevinding 46: De PDF 'Huren aanpassen met de Consumentenprijsindex' (https://www.cbs.nl/-/media/cbs/infographics/huurprijsmodule/huren-aanpassen-met-de-consumentenprijsindex-(1).pdf) heeft een documenttitel in de documenteigenschappen, maar deze documenttitel omschrijft de inhoud van het document niet goed. Er staat bijvoorbeeld 'Microsoft Word' in de documenttitel. Ook wordt deze titel niet getoond bij het openen van het document. Pas de documenttitel aan en zorg ervoor dat deze wordt getoond bij openen, wat kan worden aangegeven in de documenteigenschappen onder 'Weergave bij openen'.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 47: Op onder andere de homepage staat de knop 'Uw mening'. Na het activeren van deze knop verschijnt er een venster op het scherm. In dit venster is het voor toetsenbordgebruikers mogelijk om focus te plaatsen op de teksten 'Uw mening telt!' en 'Dankzij uw reactie kunnen wij de website verbeteren.'. Dit zijn geen bedienbare elementen, het is alleen mogelijk hier focus op te plaatsen omdat de teksten een tabindex hebben. Zorg ervoor dat focus niet wordt geplaatst op niet-bedienbare elementen. Los dit probleem op door de tabindex op de teksten te verwijderen.

Bevinding 48: Op pagina https://www.cbs.nl/nl-nl/publicatieplanning staat een tabel. Het is voor toetsenbordgebruikers mogelijk om focus te plaatsen op elke tabelrij terwijl dit geen interactief element is. Dit kan verwarrend zijn voor toetsenbordgebruikers. Zorg ervoor dat het alleen mogelijk is om focus te plaatsen op elementen die bedienbaar zijn. De reden dat focus wordt geplaatst op de tabelrijen is omdat de tr-elementen tabindex=0 hebben. Verwijder dit attribuut van de elementen om het probleem op te lossen.

Bevinding 49: Het is voor toetsenbordgebruikers mogelijk om twee keer focus te plaatsen op de selectievakjes op pagina https://www.cbs.nl/nl-nl/abonnementen. Eén keer is het zichtbaar dat de focus is geplaatst op het selectievakje aan de hand van een focusrand, en één keer is de focus verbogen. Mogelijk komt dit doordat er onder de input-elementen een span-element is geplaatst met tab-index=0. Dat focus twee keer wordt geplaatst op dezelfde elementen is verwarrend voor bezoekers die de pagina bedienen met het toetsenbord. Zorg ervoor dat focus maar één keer op de selectievakjes wordt geplaatst en dat de focus te allen tijde zichtbaar is door gebruik te maken van een focusrand.

Bevinding 50: Op pagina https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart is het mogelijk om focus te plaatsen op de hele kaart terwijl dit geen interactief element is. Zorg ervoor dat focus alleen geplaatst kan worden op elementen die interactief zijn.

Bevinding 51: Wanneer een thema is geselecteerd op pagina https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart zijn filteropties naast de kaart te zien. Bij de opmaakt van de keuzerondjes in dit filter gaat er iets mis, de input-elementen van de keuzerondjes zijn uit de focusvolgorde gehaald met het attribuut tab-index=-1. In plaats van op de input-elementen wordt focus geplaatst op de span-elementen met tab-index=0 binnen de label-elementen. Voorleessoftware leest deze span-elementen voor als 'klikbaar' wanneer hier focus op wordt geplaatst, hierdoor worden de keuzerondjes niet voorgelezen. Zorg voor een opmaak die overeenkomt met de visuele weergave van de keuzerondjes. Zorg dat focus wordt geplaatst op de keuzerondjes zelf en niet op de span-elementen.

Bevinding 52: Op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline staat een video. Het is voor toetsenbordgebruikers mogelijk om focus te plaatsen op de hele videospeler terwijl dit geen interactief element is. Dit komt doordat er op het div-element met het aria-label 'Video Player' het attribuut tab-index=0 is geplaatst. Zorg ervoor dat focus niet wordt geplaatst op inactieve elementen.

Bevinding 53: De volgorde waarin elementen focus krijgen in de videospeler op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline houdt geen logische volgorde aan. Na het activeren van de knop 'Afspelen' krijgt de knop om de uitgeschreven tekst te openen focus, daarna de hele videospeler, daarna de schuifregelaar en de afspeel/pauzeer knop. De afspeel/pauzeer knop moet voor de schuifregelaar focus krijgen omdat deze daar visueel voorstaat. Ook mag de hele videospeler geen focus krijgen omdat dit geen interactief element is.

Bevinding 54: Op pagina verschijnt een foutmelding dynamisch op de pagina als bezoekers het verplichte veld niet goed hebben ingevuld bij versturen. De toetsenbordfocus verplaatst niet naar het veld waar de foutmelding bij verschijnt. Hierdoor kunnen sommige bezoekers de foutmelding missen. Zorg ervoor dat de toetsenbordfocus verplaatst naar het veld waar de foutmelding bij verschijnt.

Bevinding 55: Wanneer op de homepage wordt ingezoomd tot 400% bij een schermbreedte van 1280x1024px, verandert de lay-out van de pagina vanaf 150% inzoomen. Als bezoekers met het toetsenbord over de pagina navigeren, wordt het zoekveld geopend in een apart venster wanneer deze focus krijgt. Hierbij is de achterliggende pagina nog zichtbaar, maar deze is donkerder gemaakt. Als focus uit het zoekveld wordt gehaald blijft het venster openstaan en gaat de toetsenbord focus verder op de achterliggende pagina terwijl deze slecht zichtbaar is. Zorg ervoor dat wanneer de toetsenbordfocus uit het zoekveld wordt gehaald dit venster automatisch afsluit.

Bevinding 56: Wanneer op de homepage wordt ingezoomd tot 400% bij een schermbreedte van 1280x1024px, verdwijnt het navigatiemenu achter een knop vanaf 150%. Het is voor toetsenbordgebruikers mogelijk om focus te plaatsen op de achterliggende pagina terwijl dit menu is geopend. Hierdoor weten ziende toetsenbordgebruikers niet welk element focus heeft. Een mogelijk oplossing voor dit probleem is zorgen dat het menu automatisch afsluit wanneer focus van het laatste menu-item wordt gehaald, of zorg ervoor dat focus binnen het menu blijft tot de bezoeker deze afsluit.

Bevinding 57: Wanneer op pagina https://www.cbs.nl/nl-nl/visualisaties/cijfers-op-de-kaart wordt ingezoomd tot 400% bij een schermbreedte van 1280x1024px, verdwijnen de filteropties achter een knop vanaf 150%. Met deze knop kan een venster worden geopend dat de hele pagina bedekt. Terwijl dit venster openstaat is het mogelijk om focus te plaatsen op de achterliggende pagina. Dit is vervelend voor ziende toetsenbordgebruikers. Zorg ervoor dat focus binnen het venster blijft tot de bezoeker het afsluit of dat het venster automatisch afsluit als focus eruit wordt gehaald.
Dit probleem komt ook voor bij de filteropties op pagina https://www.cbs.nl/nl-nl/zoeken?q=bevolking.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 58: Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking zijn blokken content opgemaakt als link doordat alle content binnen dit blok in een a-element is geplaatst. Hierdoor kloppen de toegankelijke namen van de blokken 'Bevolkingsontwikkeling' en 'Levensloop' niet. Er staan namelijk svg-afbeeldingen en verbogen cijfers in deze blokken die worden voorgelezen door screenreaders. Hierdoor geeft de toegankelijke naam niet duidelijk aan waar de link naar verwijst. Wel is geprobeerd deze verbogen tekst te overschrijven met een aria-label, maar dit aria-label is niet correct geplaatst (zie succescriterium 4.1.2). Zorg dat de links een goede toegankelijke naam hebben door de verbogen teksten ook te verbergen voor hulpsoftware, bijvoorbeeld met aria-hidden of aria-label.

Bevinding 59: Op pagina https://www.cbs.nl/nl-nl/zoeken?q=bevolking staat paginering onder de zoekresultaten. Deze links hebben de toegankelijke namen '1', '2', '3', '324' en 'Volgende'. Voor ziende bezoekers is het duidelijk dat deze links naar pagina's verwijzen, maar voor bezoekers die het scherm niet kunnen zien is dat niet duidelijk. Zorg ervoor dat 'pagina' wordt toegevoegd aan de toegankelijke namen van deze links.

Bevinding 60: Op pagina https://www.cbs.nl/bestaatniet komt twee keer de linktekst 'homepage' voor. Een van deze links verwijst naar de Nederlandstalige homepage en de andere naar de Engelstalige homepage. Bezoekers die gebruikmaken van een linklijst, bijvoorbeeld screenreadergebruikers, kunnen het onderscheid tussen deze twee links niet maken. Zorg ervoor dat wanneer twee dezelfde linkteksten op een pagina worden gebruikt, beide links naar dezelfde pagina verwijzen. Een mogelijk oplossing voor dit probleem is door één linktekst aan te passen, pas bijvoorbeeld de link 'homepage' naar de Nederlandstalige homepage aan naar homepagina.

Bevinding 61: Op pagina https://www.cbs.nl/nl-nl/visualisaties/welvaart-in-coronatijd/veiligheid is de afbeelding van de tekst 'Vragen en antwoorden coronacrisis' opgemaakt als link. Doordat deze afbeelding geen alternatieve tekst heeft, heeft de link geen toegankelijke naam. Hierdoor weten bezoekers die bijvoorbeeld gebruikmaken van voorleessoftware niet waar de link naar verwijst. Zorg ervoor dat de link een toegankelijke naam krijgt, bijvoorbeeld door de afbeelding een alternatieve tekst te geven.

Bevinding 62: Advies: Op de homepage zijn blokken content opgemaakt als link, bijvoorbeeld de afbeelding, kop van een nieuwsbericht en bijbehorende informatie. Omdat zoveel content is geplaatst in het a-element is de toegankelijke naam van de links erg lang. Dit kan vervelend zijn voor screenreadergebruikers die navigeren over de pagina aan de hand van een linklijst. Het is daarom beter om alleen de kop van het nieuwsartikel op te maken met een a-element, daarna kan het klikgebied van de link worden vergroot met JavaScript.
Op de homepage is ook alle tekst onder de kop 'Verwacht' opgemaakt als één link, en soortgelijke blokken content komen ook op andere pagina's voor, bijvoorbeeld op https://www.cbs.nl/nl-nl/maatschappij.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 63: Op pagina https://www.cbs.nl/nl-nl/video/fa3dd282309246feb6c907cc6d166a92?16by9=true staat een videospeler die met een iframe-element op de pagina is geplaatst. Via het title-attribuut heeft het iframe de toegankelijke naam 'The Kaltura Dynamic Video Player' gekregen. Dit omschrijft de video in het iframe niet. Zorg ervoor dat de toegankelijke naam van de iframe de video omschrijft.

Bevinding 64: Op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline staat een videospeler. Deze videospeler is opgemaakt met een div-element dat het aria-label 'Video Player' heeft. Naast dat dit label Engels is omschrijft het ook de video niet. Zorg ervoor dat het label de video beschrijft en niet de videospeler.

In de videospeler op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline staat een knop met de toegankelijke naam 'Achteruit zoeken'. Deze knop heeft geen visueel label en daardoor alleen te bedienen voor bezoekers die navigeren met het toetsenbord. Zorg ervoor dat deze knop een visueel label krijgt.

Bevinding 65: Wanneer op de homepage wordt ingezoomd tot 400% bij een schermbreedte van 1280x1024px, verdwijnt het navigatiemenu achter een knop vanaf 150%. Deze knop heeft het toegankelijke label 'Wissel navigatie'. Dit label geeft niet duidelijk aan wat de knop doet. Het lijkt namelijk of de knop de bezoeker laat wisselen van navigatie, terwijl de knop eigenlijk een menu opent. Zorg ervoor dat het label van de knop duidelijk aangeeft wat de functie is. Ook als de functie van de knop wissel moet het toegankelijke label wisselen. Dit gebeurt bijvoorbeeld wanneer het menu is geopend, dan wordt de functie van de knop het sluiten van het menu maar blijft het label 'Wissel navigatie'.
Dit probleem komt voor op meerdere pagina's, bijvoorbeeld ook bij de tweede 'Wissel navigatie' knop op pagina https://www.cbs.nl/nl-nl/over-ons/contact en pagina https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 66: Bij de vraag 'Heeft deze informatie u geholpen? *' op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking staat de knop 'Versturen'. Wanneer deze knop focus heeft is dat niet zichtbaar. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator, bijvoorbeeld door een focusrand te gebruiken.
Deze knop staat ook op andere pagina's, bijvoorbeeld op https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen en https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand.

Bevinding 67: Op pagina https://www.cbs.nl/nl-nl/abonnementen wordt focus twee keer op de selectievakjes geplaatst, zie succescriterium 2.4.3. Een van deze keren wordt de focus niet aangeven met een visuele indicatie zoals een focusrand. Hierdoor weten ziende toetsenbordgebruikers niet welk element focus heeft. Voeg een focusrand toe om dit probleem op te lossen, of zorg ervoor dat focus niet twee keer wordt geplaatst op de selectievakjes.

Bevinding 68: Wanneer op https://www.cbs.nl/nl-nl/visualisaties/welvaart-in-coronatijd/veiligheid focus wordt geplaatst op de knoppen 'Download CSV' en 'Toon tabel' bij de grafieken 'Geregistreerde misdrijven' en 'Woninginbraken' is dat niet zichtbaar. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator, bijvoorbeeld door een focusrand te gebruiken.

Bevinding 69: Wanneer op de homepage wordt ingezoomd tot 400% bij een schermbreedte van 1280x1024px, verdwijnt het navigatiemenu achter een hambugermenuknop vanaf 150%. Wanneer focus wordt geplaatst op deze knop is dat niet zichtbaar. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator, door bijvoorbeeld een focusrand te gebruiken.
Dit probleem komt ook voor bij de tweede hamburgermenuknop op pagina https://www.cbs.nl/nl-nl/over-ons/contact en https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 70: Op onder andere de homepage staat de knop 'Uw mening'. Deze knop heeft de toegankelijke naam 'Usabilla Feedback Button'. Wanneer het visuele label van een knop niet voorkomt in de toegankelijke naam is de knop moeilijk te bedienen met spraaksoftware. Zorg er daarom voor het visuele label altijd voorkomt in de toegankelijke naam.

Bevinding 71: De afbeelding 'Bel met Teletolk' op pagina https://www.cbs.nl/nl-nl/over-ons/contact is opgemaakt als link. De toegankelijke naam van deze link is 'Logo teletolk'. Het visuele label van deze link komt niet voor in de alternatieve tekst. Hierdoor is deze niet goed te bedienen met spraaksoftware. Zorg ervoor dat het visuele label voorkomt in de toegankelijke naam van de link.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 72: Op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline staat een videospeler. Deze videospeler is opgemaakt met een div-element dat het aria-label 'Video Player' heeft. Dit label is Engels terwijl de hoofdtaal van de pagina Nederlands is. Zorg ervoor dat elementen een label hebben die in dezelfde taal is als de taalaanduiding van de pagina, of maak gebruik van een taalwissel.

Bevinding 73: Op pagina https://www.cbs.nl/nl-nl/longread/rapportages/2023/cbs-jaarplan-2023 staat de screenreader only kop 'pageNavigation'. Deze kop is in het Engels terwijl de taalaanduiding van de pagina Nederlands is. Zorg ervoor dat alle teksten (ook verborgen teksten) in dezelfde taal zijn als de hoofdtaal van de pagina, of geef een taalwissel aan op deze tekst.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Voldoende

Bevinding 74: Advies: Op pagina https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen staat een uitklapbaar menu 'Filter op beginletter'. Wanneer bezoekers een item in dit menu selecteren herlaadt de pagina en staat de toetsenbordfocus bovenaan de pagina. Dit kan verwarrend zijn voor sommige bezoekers omdat het menu 'Filter op beginletter' eerder lijkt op een combobox dan een echt menu. Om deze reden kunnen bezoekers verwachten dat het menu werkt als een combobox en daardoor geen wijziging van context zal plaatsvinden, zoals het verplaatsen van de focus, wanneer een item wordt geselecteerd. Daarom is het beter om ervoor te zorgen dat wanneer de pagina herlaadt de focus begint op de uitklapbare knop 'Filter op beginletter' in plaats van boven aan de pagina.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 75: Wanneer bezoekers een verplicht veld op pagina https://www.cbs.nl/nl-nl/over-ons/contact/contactformulier niet (goed) invullen en het formulier vesturen, verschijnt er een foutmelding op het scherm, bijvoorbeeld de foutmelding 'Stel uw vraag * is een verplicht veld.'. Deze foutmelding geeft niet goed aan welke fout de bezoeker heeft gemaakt, het geeft namelijk niet duidelijk aan dat de gemaakte fout het leeg laten van het veld is. Een foutmelding moet altijd aangeven welke fout de bezoeker heeft gemaakt.

Bevinding 76: In het formulier op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking (bestaande uit alleen de vraag 'Heeft deze informatie u geholpen?') wordt gebruik gemaakt van HTML5 foutmeldingen als het formulier wordt gestuurd zonder dat de vraag is ingevuld. HTLM5 foutmeldingen zijn niet toegankelijke omdat de melding niet altijd duidelijk is en maar kort in beeld blijft staan. Los dit probleem op door eigen foutmeldingen toe te voegen aan dit formulier.
Dit formulier komt ook voor op andere pagina's, bijvoorbeeld op https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen en https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand.

Bevinding 77: In het formulier op pagina https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand verschijnt bij het verplichte veld de foutmelding 'Vul alstublieft eerst de geldende huurprijs in.' als deze leeg is gelaten bij het versturen. Deze foutmelding geeft niet aan welke fout de bezoeker heeft gemaakt. De gemaakte fout is namelijk dat het veld niet is ingevuld. Dit probleem komt ook voor bij de foutmelding 'Vul uw huurprijs in zonder punt of spatie (bijvoorbeeld: 1.287,25 noteert u als 1287,25)' die verschijnt wanneer geen geldige waarde wordt ingevuld. Zorg ervoor dat foutmeldingen altijd aangeven welke fout de bezoeker heeft gemaakt.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 78: Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking staat bij de vraag 'Heeft deze informatie u geholpen?' een asterisk (*). Nergens staat bij deze vraag aangegeven wat de asterisk betekend. Dit kan verwarrend zijn voor bezoekers met bepaalde cognitieve beperkingen. Zorg ervoor dat wanneer iconen informatie overbrengen de betekenis hiervan wordt uitgelegd in tekst. In deze situatie kan de betekenis van de asterisk bij deze vraag ook worden verward met de asterisk die wordt gebruikt als een verwijzing naar een voetnoot.
Deze vraag komt ook voor op andere pagina's, bijvoorbeeld op https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen, https://www.cbs.nl/nl-nl/nieuws/2023/08/economie-groeit-het-sterkst-in-regio-haarlemmermeer en https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 79: In de broncode van pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking staat een </p> zonder openingstag. Dit kan problemen opleveren voor hulpsoftware. Zorg ervoor dat er een <p> op de juiste plek wordt geplaatst of verwijder de </p>.

Dit komt ook voor op pagina:

Bevinding 80: Op pagina https://www.cbs.nl/nl-nl/abonnementen zijn in de code label-elementen en input-elementen samen geplaatst in label-elementen. Doordat een label-element in een ander label-element is genest kan dit problemen opleveren voor hulpsoftware. Zorg ervoor dat het tweede label-element niet genest is in een ander label-element.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 81: Op de homepage staat onder de kop 'Presentatie economische groei en arbeidsmarkt Q4 2022' een afspeel-icoon. Dit icoon is met een span-element in de HTML code geplaatst. Op dit span-element staat een alt-attribuut en aria-label. Beide element mogen alleen op een element met een geschikte rol staan. Plaats een role=image op het span-element om dit probleem op te lossen.
Op pagina https://www.cbs.nl/nl-nl/nieuws/2023/08/economie-groeit-het-sterkst-in-regio-haarlemmermeer komt dit element ook voor en op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline wordt een aria-label ook geplaatst op een div-element zonder rol.

Bevinding 82: Op pagina https://www.cbs.nl/nl-nl/over-ons/contact/contactformulier staat een tweede navigatiemenu met daarin het lijstitem 'Klachten of bezwaar'. Op het li-element van dit lijstitem is het attribuut 'aria-haspopup="aria-haspopup"' geplaatst. Dit is geen geldige waarde voor het attribuut aria-haspopup. Wanneer een aria-attribuut geen geldige waarde heeft kan dit problemen opleveren voor hulpsoftware. Zorg ervoor dat het attribuut aria-haspopup een geldige waarde krijgt. Kijk voor meer informatie op https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup.
Dit probleem komt ook voor op pagina https://www.cbs.nl/nl-nl/over-ons/contact en https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen.

Bevinding 83: Op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking is gebruik gemaakt van een aria-label op div-elementen, bijvoorbeeld in het content blok 'Bevolkingsontwikkeling'. Het aria-label mag alleen worden gebruikt op elementen die een rol hebben. Wanneer aria-label wordt geplaatst op een div-element wordt dit meestal genegeerd door hulpsoftware. Zorg ervoor dat aria-label wordt geplaatst op elementen met een geschikte rol, zie https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label voor meer informatie. Een mogelijke oplossing voor het probleem op deze pagina is om het aria-label niet te plaatsten op een div-elementen dat genest is in een a-elementen, maar om het attribuut op het a-element zelf te plaatsen.

Bevinding 84: Het formulier op https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking is met een iframe-element op de pagina geplaatst. Een iframe heeft altijd een toegankelijke naam nodig via het title-attribuut. Zorg ervoor dat op het iframe een title-attribuut wordt geplaats met een toegankelijke naam die de inhoud van het element omschrijft.
Dit formulier komt ook voor op andere pagina's, bijvoorbeeld op https://www.cbs.nl/nl-nl/nieuws/2023/08/economie-groeit-het-sterkst-in-regio-haarlemmermeer, https://www.cbs.nl/nl-nl/onze-diensten/methoden/begrippen en https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand.

Bevinding 85: In de videospeler op pagina https://www.cbs.nl/nl-nl/cijfers/statline/info-over-statline staat een knop waarmee bezoekers de uitgeschreven tekst kunnen openen. Deze knop heeft geen toegankelijke naam. Hierdoor is de knop moeilijk te bedienen voor bezoekers die gebruikmaken van hulpsoftware. Zorg ervoor dat de knop een toegankelijke naam krijgt, bijvoorbeeld door gebruik te maken van aria-label.
In deze videospeler komen meerdere knoppen voor zonder toegankelijke naam, zoals de knop 'Thema' die op het eind van de video wordt getoond.

Bevinding 86: Op pagina https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand staan 'Meer informatie' knoppen die gelabeld zijn met een vraagteken. Visueel is duidelijk wanneer deze knoppen zijn uitgeklapt, maar deze informatie is niet beschikbaar voor mensen die het scherm niet kunnen zien. Zorg ervoor dat in de code wordt aangegeven wanneer deze knoppen in- en uit zijn geklapt, bijvoorbeeld door gebruik te maken van aria-expanded.

Bevinding 87: Op pagina https://www.cbs.nl/nl-nl/visualisaties/welvaart-in-coronatijd/veiligheid komt een link voor zonder toegankelijke naam, zie ook succescriterium 2.4.4.

Bevinding 88: Advies: Op pagina https://www.cbs.nl/nl-nl/longread/rapportages/2023/cbs-jaarplan-2023 staan de knoppen 'Hoofdstuk' en 'Pagina'. Deze knoppen werken niet als knoppen maar als links. Wanneer bezoekers deze knoppen activeren herlaadt de pagina en verplaatst de toetsenbordfocus. Dat is wat een link doet, terwijl een knop een actie uitvoert. Het is beter om knoppen alleen als knop op te maken als deze een actie uitvoeren. Maak deze knoppen daarom als links op door het attribuut role=button te verwijderen van de a-elementen.
Een soortgelijk probleem komt ook voor bij de 'Meer informatie' knoppen die zijn opgemaakt als links op pagina https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 89: Wanneer bezoekers de vraag 'Heeft deze informatie u geholpen?*' op pagina https://www.cbs.nl/nl-nl/visualisaties/dashboard-bevolking hebben verstuurd verschijnt de melding 'Bedankt! Bedankt voor het delen van uw feedback met ons' op het scherm. Deze melding wordt niet opgemerkt door screenreaders, hierdoor kunnen screenreadergebruikers deze informatie missen. Zorg ervoor dat wanneer content op het scherm verschijnt dit wordt opgemerkt door screenreader, bijvoorbeeld door gebruik te maken van aria-live.
Dit probleem komt ook voor op andere pagina's, bijvoorbeeld op https://www.cbs.nl/nl-nl/nieuws/2023/08/economie-groeit-het-sterkst-in-regio-haarlemmermeer en https://www.cbs.nl/en-gb/news/2023/04/excess-mortality-for-the-third-consecutive-year-in-2022.

Bevinding 90: Op pagina https://www.cbs.nl/nl-nl/abonnementen staan selectievakjes. Als geen van de selectievakjes is ingevuld en op 'Aanmelden' of 'Afmelden' wordt gedrukt, verschijnt de foutmelding 'Selecteer minimaal één van bovenstaande abonnementen.*' op het scherm. Deze foutmelding wordt niet opgemerkt door hulpsoftware. Zorg ervoor dat meldingen die op het scherm verschijnen worden opgemerkt door hulpsoftware.
Dit probleem komt ook voor bij andere meldingen op deze pagina, bijvoorbeeld wanneer het formulier is verstuurd en er een bevestigingsmelding verschijnt op de pagina.

Bevinding 91: Wanneer bezoekers het verplichte veld op pagina https://www.cbs.nl/nl-nl/onze-diensten/bereken-huurverhoging-vrije-sector-huurwoning-of-bedrijfspand niet invullen bij versturen, verschijnt er dynamisch een foutmelding bij dit veld. Deze melding wordt niet opgemerkt door voorleessoftware. Hierdoor kunnen bezoekers die het scherm niet kunnen zien deze melding mogelijk missen. Zorg ervoor dat de foutmelding wordt opgemerkt door hulpsoftware. Dit kan bijvoorbeeld door de toetsenbordfocus te verplaatsen naar het veld waar de foutmelding bij staat (zie ook succescriterium 2.4.3).

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-12-26 20:40:47 v2.4-011