Issues:
Audit digitale toegankelijkheid website Werken bij het CBS

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Op pagina https://werkenbijhetcbs.nl/ staat in de sectie met video een afbeelding met de alternatieve tekst "video thumbnail". Deze tekst beschrijft de afbeelding niet goed genoeg. Afbeeldingen die informatie overbrengen moeten een betekenisvolle alternatieve tekst hebben waarin de belangrijke informatie van de afbeelding wordt beschreven. Wanneer de afbeelding decoratief is en geen extra informatie geeft, moet deze verborgen worden voor schermlezers. Dit kan op verschillende manieren. Voor afbeeldingen in een img-element kan een leeg alt-attribuut alt="" worden gebruikt.

Bevinding 2: Op pagina https://werkenbijhetcbs.nl/ staan onder de kop "Uitgelichte vacatures" decoratieve afbeeldingen. Deze hebben allemaal de alternatieve tekst “image”. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Voor afbeeldingen in een img-element kan een leeg alt-attribuut alt="" worden gebruikt.
Op pagina https://werkenbijhetcbs.nl/contact staan onder de kop “Ontmoet ons” decoratieve afbeeldingen van vinkjes met dezelfde fout. Dit probleem komt ook voor op pagina https://werkenbijhetcbs.nl/onze-cultuur onder de kop “Hierom kiezen onze collega's voor het CBS” en op pagina https://werkenbijhetcbs.nl/over-ons onder de kop “Het CBS als werkgever”.
Op pagina https://werkenbijhetcbs.nl/arbeidsvoorwaarden staan onder de kop "Investeer in jezelf" decoratieve afbeeldingen met dezelfde fout. Een voorbeeld is de afbeelding onder de kop “Gezonde balans” met de alternatieve tekst "Icoon van balans". Op pagina https://werkenbijhetcbs.nl/vakgebied-data-analist staan onder de kop “Hierom kiezen data analisten voor het CBS” decoratieve afbeeldingen met hetzelfde probleem. Zie ook andere pagina's.

Bevinding 3: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster met een formulier. In dit formulier wordt hCaptcha gebruikt. Er is geen alternatief aanwezig voor de afbeeldingen in de captcha. Ook biedt de website op dit moment geen toegankelijke alternatieve oplossing voor de captcha in zijn geheel. Om die reden moet de captcha volledig toegankelijk zijn. Dat is nu niet het geval. De tekst ‘klik op elke afbeelding met…’ maakt het doel van de afbeeldingen wel duidelijk, maar dit is niet voldoende. Het advies is om helemaal geen captcha te gebruiken, omdat dit altijd een drempel vormt. Zie de Engelstalige pagina https://www.w3.org/TR/turingtest/ voor meer informatie en mogelijke alternatieven.

Bevinding 4: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters naast het invoerveld met de placeholdertekst “bijv. 3446 AD” een pijltjestoets met de zichtbare tekst “Alle afstanden”. Deze knop opent een dropdownlijst. Het pijltje geeft visueel aan of de dropdownlijst open of gesloten is. Deze toestand is echter niet toegankelijk voor bezoekers die een schermlezer gebruiken. Als het draaien of veranderen van een afbeelding een betekenis heeft, moet die betekenis ook toegankelijk zijn voor blinde bezoekers. Zorg dat schermlezers dit ook kunnen begrijpen. Voeg hiervoor bijvoorbeeld een visueel verborgen tekst toe of gebruik een aria-expanded-attribuut.

Bevinding 5: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de paginering pijlafbeeldingen die functioneren als links. Het tekstalternatief ontbreekt, waardoor de links niet toegankelijk zijn. De afbeeldingen zijn interactief, maar zonder tekstalternatief heeft de link geen inhoud. Dit valt onder succescriterium 2.4.4 en 4.1.2. Om de link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft. Op die manier weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Bevinding 6: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express opent op kleine schermen de knop met de tekst "Filter" een dialoogvenster. De knop met het icoon “X” sluit dit venster, maar dit icoon heeft geen tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Voeg hiervoor een beschrijving toe via een alt-tekst bij het img-element, een aria-label of een tekst die visueel verborgen is maar wel toegankelijk is voor de schermlezer.
Hetzelfde probleem doet zich voor bij het pijl-icoon dat verschijnt op de pagina bij weergave op kleine schermen en waarmee de bezoeker naar de bovenkant van de pagina kan scrollen. Ook dit icoon heeft geen tekstalternatief.

Bevinding 7: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie missen enkele knoppen een toegankelijke naam. Het gaat om de knop met het pijltje bovenaan die de bezoeker terugbrengt naar de pagina met vacatures en de knoppen onder de kop “Vervoersmiddel”.

Bevinding 8: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staat in de sectie onder de kop “het CBS” een logo dat is geplaatst met een img-element. Dit element mist een alt-attribuut. Daardoor lezen schermlezers nu de bestandsnaam voor, en dat is niet de bedoeling. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo zichtbaar is. Zo weten bezoekers die het logo niet kunnen zien ook welke tekst erin staat. Als het logo geen link is, moet in de alternatieve tekst ook het woord ‘Logo’ worden toegevoegd.

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)

Bevinding 9: Op pagina https://werkenbijhetcbs.nl/ staat onder de kop “Werken bij hét statistiekbureau voor en door Nederland” een video. In deze video komen op verschillende momenten teksten en logo’s in beeld, bijvoorbeeld rond 1:28. Deze visuele informatie is niet toegankelijk voor blinde bezoekers, omdat er geen media-alternatief of audiobeschrijving aanwezig is. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit kan voor succescriterium 1.2.3 worden opgelost met een geschreven tekst als media-alternatief. Om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 10: De video op pagina https://werkenbijhetcbs.nl/ onder de kop “Werken bij hét statistiekbureau voor en door Nederland” voldoet niet aan succescriterium 1.2.5, waarin een audiobeschrijving voor video’s verplicht is. Een audiobeschrijving is hier nodig, omdat er in het bestaande audiokanaal voldoende ruimte is om de visuele informatie toe te voegen. Een media-alternatief is in dit geval niet meer toegestaan als oplossing. Dit is belangrijk voor mensen die de video niet of niet goed kunnen zien. Zie ook succescriterium 1.2.3.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 11: In de footer van de website staat een groep links die visueel als een geheel wordt weergegeven, maar deze groepering is niet terug te vinden in de HTML-structuur. Dit geldt bijvoorbeeld voor de links “Vacatures”, “Arbeidsvoorwaarden”, “Cultuur” en andere.
Hetzelfde probleem doet zich voor bij de groep met socialmedia-links, waar de visuele groepering ook niet in de HTML is opgenomen. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML aanwezig zijn. Neem deze elementen daarom op in een ul-element of nav-element.

Bevinding 12: In de header van de website opent op kleine schermen de knop met drie horizontale lijnen een navigatiemenu. In dit menu worden de teksten “Werken bij het CBS” en “Onze vakgebieden” visueel gepresenteerd als kopjes die de links eronder groeperen. In de code zijn deze teksten echter als gewone span-elementen opgenomen binnen een element met role="menu", zonder semantische rol of programmatische relatie met de bijbehorende groepen links. Daardoor ervaren bezoekers die een schermlezer gebruiken geen verband tussen de groep links en de bijbehorende tekst. Een mogelijke oplossing is het gebruik van role="group" met aria-labelledby voor elke sectie. Een andere oplossing is het toepassen van semantische HTML, bijvoorbeeld een kop of lijststructuur buiten het menu-patroon wanneer het om website-navigatie gaat. Ook andere oplossingen zijn mogelijk.

Bevinding 13: Op pagina https://werkenbijhetcbs.nl/ staan twee select-elementen, “Vakgebied” en “Plaats”, samen met de knop “Toon vacatures”. Hoewel deze elementen visueel gegroepeerd zijn, is deze relatie niet programmatisch vastgelegd in de HTML. Bezoekers die een schermlezer gebruiken merken daardoor niet dat de twee dropdowns en de knop samen één filter vormen. Dit maakt het moeilijker om het doel van deze bedieningselementen en hun samenhang te begrijpen. Dit probleem kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element met een beschrijvende tekst worden gebruikt.
Op pagina https://werkenbijhetcbs.nl/stage komt hetzelfde probleem voor bij de select-elementen “Type stage:” en “Onderwijsniveau:” samen met de knop “Toon stageopdrachten”.

Bevinding 14: Op pagina https://werkenbijhetcbs.nl/ wordt bij het activeren van de skiplink “Overslaan naar content” in de sectie "Uitgelichte vacatures" een kop van niveau 2 direct gevolgd door een kop van niveau 1. Dit gaat om de koppen “Uitgelichte vacatures” en “404”. In dit geval is een van de koppen niet juist toegepast. Het advies is de kopniveaus aan te passen.
Op pagina https://werkenbijhetcbs.nl/arbeidsvoorwaarden staat een kop van niveau 3 die direct wordt gevolgd door een andere kop van hetzelfde niveau. Dit gaat om de koppen “Salaris, thuiswerken, pensioen: check.” en “Benieuwd naar de sfeer?”. Op pagina https://werkenbijhetcbs.nl/vakgebied-data-analist staat een kop van niveau 2 die direct wordt gevolgd door een andere kop van hetzelfde niveau. Dit gaat om de koppen “Vacatures data analist” en “Geen Data analyse vacatures op dit moment.”. Op pagina https://werkenbijhetcbs.nl/stage staat een kop van niveau 2 die direct wordt gevolgd door een andere kop van hetzelfde niveau. Dit gaat om de koppen “Onze feiten, jouw frisse blik, een ware succesformule” en “Hierom kiezen stagiair(e)s voor het CBS:”.

Bevinding 15: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster. In dit dialoogvenster staat een h3-kop genest binnen een h4-kop. Dit gaat om de tekst “Meld je aan voor de CBS Jobalert”. De geneste structuur moet verwijderd worden. Gebruik één kop-element, h3 of h4, afhankelijk van het juiste niveau in de hiërarchie van de pagina.

Bevinding 16: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster. In dit dialoogvenster staat de knop “Voor welke locatie(s) wil je meldingen krijgen?” die een suggestielijst opent. Wanneer er geen optie is geselecteerd en de lijst is gesloten, wordt de tekst “Alle locaties” visueel getoond maar niet aangekondigd door schermlezers. Hierdoor weten bezoekers die een schermlezer gebruiken niet welke opties geselecteerd zijn.
Een vergelijkbaar probleem doet zich voor wanneer opties worden gekozen. De tekst van de geselecteerde optie samen met het aantal geselecteerde opties wordt visueel getoond op de knop, bijvoorbeeld “Den Haag (Henri Faasdreef 312, Den Haag, Zuid-Holland, Nederland) + 1”, maar deze informatie wordt niet programmatisch doorgegeven aan schermlezers wanneer de lijst gesloten is.
Hetzelfde probleem doet zich voor bij de knop “Welke afdeling heeft je interesse?”.

Bevinding 17: Op pagina https://werkenbijhetcbs.nl/onze-cultuur heeft in het hoofdmenu de actieve link naar de huidige pagina in het submenu “Werken bij het CBS” een duidelijke visuele weergave. Deze aanduiding is echter niet terug te vinden in de code. Bezoekers die de pagina laten voorlezen hebben daardoor geen toegang tot deze informatie. Zorg dat deze informatie ook op een andere manier wordt overgedragen, zodat slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="page" toe aan de actieve link. Andere mogelijkheden zijn een h1-kop met dezelfde tekst als het menu-item of het gebruik van de paginatitel (title).
Hetzelfde probleem doet zich voor op pagina’s zoals https://werkenbijhetcbs.nl/over-ons, https://werkenbijhetcbs.nl/vakgebied-data-analist, https://werkenbijhetcbs.nl/vakgebied-it en andere.

Bevinding 18: Op pagina https://werkenbijhetcbs.nl/onze-cultuur staat een carrousel met afbeeldingen waarin pijltjestoetsen worden gebruikt om tussen de slides te wisselen. De slides zelf zijn programmatisch gegroepeerd met role="group". De pijltjestoetsen die de carrousel bedienen zijn echter buiten deze groep gecodeerd. Hierdoor ervaren bezoekers die een schermlezer gebruiken de knoppen niet als onderdeel van de carrousel. Zorg dat alle onderdelen van de carrousel, inclusief de navigatieknoppen, programmatisch onderdeel zijn van dezelfde groep.
Hetzelfde probleem doet zich voor bij carrousels op andere pagina’s, zoals https://werkenbijhetcbs.nl/arbeidsvoorwaarden, https://werkenbijhetcbs.nl/vakgebied-data-analist, https://werkenbijhetcbs.nl/vakgebied-it en andere.

Bevinding 19: Op pagina https://werkenbijhetcbs.nl/over-ons staan onder de kop “Feiten over het CBS” teksten die geen koppen zijn, maar toch verkeerd zijn gemarkeerd met een h3-element.
Hetzelfde probleem komt voor onder de kop “Het CBS als werkgever”. De HTML-kop is hier niet betekenisvol gebruikt, maar alleen toegepast om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop omdat er geen inhoud onder staat. Door het gebruik van het h3-element krijgt de tekst wel onterecht deze betekenis. HTML-koppen zijn bedoeld om structuur te geven aan de informatie op een pagina. Bezoekers die een schermlezer gebruiken, vertrouwen op koppen om door de pagina te navigeren en de opbouw te begrijpen. HTML-koppen mogen daarom niet alleen voor een visueel effect worden gebruikt, zoals grotere of vetgedrukte tekst. Verwijder het h3-element en gebruik een ander element, bijvoorbeeld een p-element. De gewenste stijl kan met CSS worden toegevoegd.

Bevinding 20: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters naast het invoerveld met de placeholdertekst “bijv. 3446 AD” een pijltjestoets met de zichtbare tekst “Alle afstanden”. Deze knop opent een dropdownlijst met opties. De opties in de dropdownlijst blijven echter toegankelijk voor schermlezers, ook wanneer de lijst gesloten is. Hierdoor krijgen bezoekers die een schermlezer gebruiken toegang tot opties die niet zichtbaar zijn en niet beschikbaar horen te zijn, wat verwarring veroorzaakt. Zorg dat de opties in de dropdown programmatisch verborgen worden wanneer de lijst gesloten is.

Bevinding 21: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express wordt naast de koptekst “Vacatures” een getal getoond dat het totaal aantal zoekresultaten weergeeft, bijvoorbeeld “Vacatures 20”. Visueel lijkt het getal onderdeel te zijn van de kop, maar in de code staat het buiten het kop-element. Daardoor wordt de relatie niet programmatisch overgebracht. Bezoekers die een schermlezer gebruiken ervaren het getal niet als onderdeel van de kop. Hierdoor missen zij belangrijke context bij het navigeren via koppen, omdat de kop “Vacatures” wordt voorgelezen zonder het bijbehorende aantal resultaten.

Bevinding 22: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express bevat elk filtergedeelte een groep selectievakjes die visueel wordt voorafgegaan door een koptekst. Hoewel deze elementen visueel als groep worden weergegeven, is de relatie in de HTML niet programmatisch vastgelegd. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element met de beschrijvende tekst worden gebruikt. Andere oplossingen zijn ook mogelijk.

Bevinding 23: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express heeft in de filters elk selectievakje een label gevolgd door een getal. In de sectie “Vakgebied” staat bijvoorbeeld het selectievakje “Administratief 2”. Visueel geeft het getal aan hoeveel resultaten er beschikbaar zijn voor die optie. In de code maakt dit getal echter geen deel uit van de toegankelijke naam van het selectievakje. Hierdoor horen bezoekers die een schermlezer gebruiken alleen “Administratief” en missen zij belangrijke context over het aantal resultaten per optie. Het getal moet worden opgenomen in de toegankelijke naam van elk selectievakje.

Bevinding 24: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express is het attribuut aria-current="page" toegepast op alle links in de paginering, in plaats van alleen op de link die de huidige pagina weergeeft. Daardoor wordt elke link onjuist aangekondigd als de huidige pagina. Dit zorgt voor verwarring en maakt het onmogelijk om de daadwerkelijk actieve pagina te identificeren. Pas aria-current="page" alleen toe op de actieve link in de paginering.
Een vergelijkbaar probleem doet zich voor op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie, waar meerdere links ten onrechte het attribuut aria-current="page" hebben.

Bevinding 25: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express zijn de pagineringslinks onder de zoekresultaten visueel gegroepeerd, maar deze groepering is niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links, zoals de paginering, bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul-element of ol-element.

Bevinding 26: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staat een groep links die visueel als geheel wordt weergegeven, maar deze groepering is niet terug te vinden in de HTML-structuur. Dit gaat om de links “Beschrijving”, “Reisafstand” en “Over het CBS”. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul-element of nav-element of maak er een tablist van volgens het patroon op pagina https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Bevinding 27: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staat het invoerveld “Mijn postcode”. Wanneer dit veld correct wordt ingevuld en de knop “Bereken route” wordt geactiveerd, verschijnt er een melding zoals “Resultaat het CBS is 218km van Diemerkade Diemen af waarover u 896 minuten doet.”. De tekst “Resultaat” is hierbij niet als kop gemarkeerd. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als een kop, maar niet als kop is gecodeerd. Via koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Dit werkt alleen als de kop ook daadwerkelijk in de code aanwezig is. Wanneer koppen alleen visueel als kop zijn vormgegeven, bijvoorbeeld door vetgedrukte tekst, wijkt de structuur in de code af van de visuele structuur. Dit probleem kan worden voorkomen door koppen altijd te markeren met het juiste HTML-element en het juiste kopniveau, h1, h2, h3, h4, h5 of h6. Vaak is dit niveau instelbaar via de content-editor in het CMS, waarna de juiste HTML-code automatisch wordt toegepast.

Bevinding 28: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie verschijnt een formulier nadat de link “Solliciteer nu” is geactiveerd. In dit formulier staat een interactief upload-element met het label “Cv”. Dit element is verborgen voor de schermlezer met display:none.
Hetzelfde probleem doet zich voor bij het interactieve element met het label “Motivatiebrief”, dat zichtbaar wordt wanneer de knop “Of upload een bestand” wordt geactiveerd. De CSS-code display:none zorgt ervoor dat inhoud verborgen wordt voor schermlezers. Dit mag daarom niet worden gebruikt bij informatieve elementen.

Bevinding 29: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie verschijnt een formulier nadat de link “Solliciteer nu” is geactiveerd. In dit formulier wordt de foutmelding “Deze vraag is verplicht” getoond. De relatie tussen de foutmeldingen en de invoervelden is niet vastgelegd in de code. Hierdoor kan hulpsoftware deze informatie niet doorgeven aan de bezoeker. Dit kan worden opgelost door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Bevinding 30: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie wordt onder de kop "Kom werken aan de feiten" het strong-element verkeerd gebruikt. De hele zin is in een strong-element geplaatst om de tekst vetgedrukt weer te geven. Ook de em-elementen worden verkeerd toegepast in de tekst die begint met “Ben jij (bijna) afgestudeerd in HRM …”, waar ze alleen zijn gebruikt om tekst cursief weer te geven. De elementen strong en em hebben een semantische waarde: ze geven aan dat de tekst extra nadruk moet krijgen. Daarom mogen deze elementen niet uitsluitend worden gebruikt om een visueel effect zoals vetgedrukt of cursief te bereiken. Voor zulke visuele effecten moet CSS worden toegepast.

Bevinding 31: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staan koppen zoals “Waar jij het verschil maakt”, “Je toekomstige collega’s”, “Dit ben jij” en andere. In deze koppen worden zowel het h4-element als het strong-element gebruikt. Het strong-element heeft een semantische waarde: het geeft aan dat de tekst extra nadruk moet krijgen. Daarom mag het niet worden toegepast om alleen een visueel effect zoals vetgedrukte tekst te bereiken. Voor dit doel moet CSS worden gebruikt.
Hetzelfde probleem komt voor op pagina https://werkenbijhetcbs.nl/testimonial-simone bij de kop “Interesse in preventieve gezondheidszorg” en op pagina https://werkenbijhetcbs.nl/testimonial-coskun bij koppen zoals “Visitekaartje van het CBS”.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 32: Op pagina https://werkenbijhetcbs.nl/ staat onder de kop “Welk werkveld past bij jou?” in de HTML-structuur binnen de artikelen eerst de afbeelding, daarna de kop en vervolgens de link. Ditzelfde probleem komt voor onder de koppen “Uitgelichte vacatures” en “Onze werklocaties”. Wanneer deze artikelen van boven naar beneden worden voorgelezen door een schermlezer, is niet duidelijk welke afbeelding bij welk artikel hoort. Dit komt doordat de koppen niet bovenaan in de code van elk artikel staan. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud die bij een bepaalde kop hoort, zoals afbeeldingen en tekst, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur, terwijl de visuele vormgeving wel mag afwijken. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren door de alt-tekst leeg te laten (alt="" op het img-element). De leesvolgorde wordt dan: koptekst – inhoud.
Hetzelfde probleem doet zich voor op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express bij de zoekresultaten.

Bevinding 33: Op pagina https://werkenbijhetcbs.nl/ openen onder de kop “Uitgelichte vacatures” de links “Bekijk vacature” dialoogvensters. In deze dialoogvensters is de volgorde van de HTML-elementen niet logisch. Bovenaan staan teksten zoals “24 - 40 uur”, “€775 bruto p/m” en “Den Haag, Nederland”, terwijl de kop pas daarna in de code staat. Daarvoor staat ook nog de link “Deel vacature”. Doordat de koppen niet bovenaan in de code van elk dialoogvenster staan, kan dit verwarrend zijn voor bezoekers die een schermlezer gebruiken. 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, terwijl de visuele vormgeving wel mag afwijken.
Hetzelfde probleem doet zich voor op andere pagina’s, zoals https://werkenbijhetcbs.nl/vakgebied-it, https://werkenbijhetcbs.nl/vakgebied-onderzoeker, https://werkenbijhetcbs.nl/vakgebieddetail-overig en andere.

Bevinding 34: Op pagina https://werkenbijhetcbs.nl/arbeidsvoorwaarden staat onder de kop "Investeer in jezelf" de HTML-structuur in een onlogische volgorde. Eerst staat de afbeelding, daarna de kop en vervolgens 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, terwijl de visuele vormgeving wel mag afwijken.

Bevinding 35: Op pagina https://werkenbijhetcbs.nl/vakgebied-data-analist staat in de sectie “Data analist” de HTML-structuur in een onlogische volgorde. Eerst staat de tekst, daarna een link en vervolgens de kop. 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, terwijl de visuele vormgeving wel mag afwijken.
Hetzelfde probleem doet zich voor op andere pagina’s, zoals https://werkenbijhetcbs.nl/vakgebied-it, https://werkenbijhetcbs.nl/vakgebied-onderzoeker, https://werkenbijhetcbs.nl/vakgebieddetail-overig en andere.

Bevinding 36: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie is de volgorde van de HTML-elementen niet logisch. In de code staan de knop “Deel vacature” en teksten zoals “Nieuw”, “36 - 40 uur”, “€3.246 - €4.341 bruto p/m” en “Heerlen, Nederland” boven de kop “Medewerker bedrijfsadministratie”.
Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Het probleem kan worden opgelost door alle inhoud die bij de kop hoort in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur, terwijl de visuele vormgeving wel mag afwijken.

Bevinding 37: Op pagina https://werkenbijhetcbs.nl/ontmoet-je-collegas is de volgorde van de HTML-elementen in de artikelen niet logisch. In de code staat eerst de afbeelding, daarna de kop, vervolgens de tekst en tot slot de link “lees meer”. 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, terwijl de visuele vormgeving wel mag afwijken.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 38: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie verschijnt een formulier nadat de link “Solliciteer nu” is geactiveerd. In dit formulier is het autocomplete-attribuut gebruikt voor invoervelden voor persoonlijke informatie. Dat is goed gedaan. Het probleem is echter dat de waarde "phone" niet klopt voor het telefoonnummer. Dit moet autocomplete="tel" of autocomplete="tel-national" zijn. Op deze pagina staat meer informatie over autocomplete en de verplichte waardes die gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 39: Op pagina https://werkenbijhetcbs.nl/onze-cultuur wordt de actieve link in het hoofdmenu (de link naar de huidige pagina) alleen aangegeven met een andere achtergrondkleur. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen het kleurverschil mogelijk niet onderscheiden en zien daardoor niet welke link actief is en welke niet. Zorg dat actieve links ook op een andere manier herkenbaar zijn, bijvoorbeeld door ze te onderstrepen of vetgedrukt weer te geven.
Hetzelfde probleem doet zich voor op pagina’s zoals https://werkenbijhetcbs.nl/over-ons, https://werkenbijhetcbs.nl/vakgebied-data-analist, https://werkenbijhetcbs.nl/vakgebied-it en andere.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 40: In de header van de website staan knoppen met blauwe tekst (HEX #387E9E), zoals “Werken bij het CBS”, op een lichtgrijze achtergrond (HEX #F4F4F4). De contrastratio is hier te laag, namelijk 4,1:1. Wanneer deze knoppen via het toetsenbord focus krijgen, staat de blauwe tekst op een grijze achtergrond (HEX #DEDEE5), wat een contrastratio van 3,4:1 oplevert. Omdat de tekst kleiner is dan 24px en niet vetgedrukt, moet de contrastratio minimaal 4,5:1 zijn.

Bevinding 41: Bovenaan de pagina’s opent op kleine schermen de knop met drie horizontale lijnen het navigatiemenu. De tekst van de links in dit menu heeft een onvoldoende contrastratio tegen de achtergrond wanneer de links toetsenbordfocus krijgen of wanneer ze worden gehoverd. De tekstkleur is blauw (HEX #0580A1) en de achtergrondkleur is lichtblauw (HEX #F2F9FA). De contrastratio is 4,3:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 42: Op de pagina’s van de website heeft de skiplink “Overslaan naar content” blauwe tekst (HEX #0580A1) op een lichtgrijze achtergrond (HEX #F4F4F4). De contrastratio is 4,1:1. Omdat de tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

Bevinding 43: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters een invoerveld met de placeholdertekst “bijv. 3446 AD”. De grijze tekst (HEX #A3A3A3) tegen de witte achtergrond heeft een contrastratio van 2,5:1.
Ditzelfde probleem komt voor bij het invoerveld met de placeholdertekst “Zoek vacatures”. Zorg dat de placeholdertekst een contrast van minstens 4,5:1 tegen de achtergrond heeft.

Bevinding 44: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staat onder de kop “Mijn postcode” een invoerveld met de placeholdertekst “Mijn postcode”. De grijze placeholdertekst tegen de lichtgrijze achtergrond (HEX #F5F5F5) heeft een contrastratio van 2,3:1.
Ditzelfde probleem komt ook voor op dezelfde pagina in het formulier dat verschijnt nadat de link “Solliciteer nu” is geactiveerd.

Bevinding 45: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat naast de koptekst “Vacatures” het aantal zoekresultaten in witte tekst op een rode achtergrond (HEX #FA3E3E). De contrastratio is 3,6:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 46: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters onder “Vakgebied” de knop “Laad meer” met blauwe tekst (HEX #1E98FC) op een lichtgrijze achtergrond (HEX #F7F7F7). De contrastratio is 2,8:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 47: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat op kleine schermen een knop met de tekst “Filter”. Wanneer deze knop wordt gehoverd, is de tekst donkerblauw (HEX #271D6C) op een blauwe achtergrond (HEX #22536D). De contrastratio is 1,7:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 48: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staan de links “Reisafstand” en “Over het CBS” met paarse tekst (HEX #938EB5) op een witte achtergrond. De contrastratio is te laag, namelijk 3,1:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 49: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staat het invoerveld “Mijn postcode”. Wanneer dit veld leeg wordt gelaten en de knop “Bereken route” wordt geactiveerd, verschijnt er een foutmelding doordat de placeholdertekst rood wordt weergegeven (HEX #E25B5B). Tegen de grijze achtergrond (HEX #F5F5F5) is de contrastratio 3,3:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 50: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie verschijnt een formulier nadat de link “Solliciteer nu” is geactiveerd. In dit formulier wordt de foutmelding “Deze vraag is verplicht” getoond in witte tekst op een rode achtergrond (HEX #FF3B30). De contrastratio is 3,5:1. Dit moet minimaal 4,5:1 zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 51: Wanneer de pagina https://werkenbijhetcbs.nl/vacature-overzicht-express wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, verdwijnt de tekst van de kop “Vacatures” met het aantal resultaten. Zorg dat alle inhoud zichtbaar en leesbaar blijft wanneer een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 52: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters een invoerveld met de placeholdertekst “bijv. 3446 AD”. Het contrast tussen de witte achtergrond van het veld en de lichtgrijze achtergrond van de sectie (HEX #F7F7F7) is 1,1:1. Wanneer de pagina op kleine schermen wordt bekeken, opent de knop “Filter” een dialoogvenster met filters. In dit venster heeft het invoerveld met de placeholdertekst “bijv. 3446 AD” een grijze rand (HEX #D6D6D6) tegen een witte achtergrond, wat een contrastratio van 1,5:1 oplevert. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Een vergelijkbaar probleem staat op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie bij het invoerveld “Mijn postcode” onder de kop “Mijn postcode”. De rand van dit veld is grijs (HEX #F5F5F5) op een witte achtergrond en heeft een contrastratio van 2,3:1. Op dezelfde pagina komt dit probleem ook voor in het formulier dat verschijnt nadat de link “Solliciteer nu” is geactiveerd.

Bevinding 53: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters grijze selectievakjes (HEX #D6D6D6) op een lichtgrijze achtergrond (HEX #F7F7F7). De contrastratio is te laag, namelijk 1,4:1. Dit moet minimaal 3,0:1 zijn.

Bevinding 54: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express heeft in de paginering het pijltjesicoon naar links een grijze kleur (HEX #D6D6D6) op een lichtgrijze achtergrond (HEX #F5F5F5). De contrastratio is 1,3:1. Dit moet minimaal 3,0:1 zijn.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Bevinding 55: Op pagina https://werkenbijhetcbs.nl/ staat in de sectie “Uitgelichte vacatures” onder de kop “Strategisch adviseur CIO” de tekst “Heerlen, Nederland + 1” die een tooltip opent. Wanneer een bezoeker met de muis over deze tekst gaat, verschijnt er nieuwe inhoud. Het is echter niet mogelijk de tooltip met de Esc-toets te sluiten. Zorg dat bezoekers de tooltip met de Esc-toets kunnen sluiten.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 56: Op pagina https://werkenbijhetcbs.nl/ staat in de sectie “Uitgelichte vacatures” onder de kop “Strategisch adviseur CIO” de tekst “Heerlen, Nederland + 1” die een tooltip opent. Wanneer een bezoeker met de muis over deze tekst gaat, verschijnt de tooltip. Dit gebeurt echter niet wanneer de tekst toetsenbordfocus krijgt. Daardoor kunnen bezoekers die alleen met het toetsenbord navigeren de tooltip niet zien en is de informatie daarin voor hen niet toegankelijk. Zorg dat de tooltips ook openen wanneer ze toetsenbordfocus krijgen.

Bevinding 57: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster. In dit venster staat een formulier met hCaptcha. Er kan een challenge verschijnen met tekst zoals "Vind items die gerepareerd kunnen worden met het gereedschap in het voorbeeld." Het is hierbij niet mogelijk om dit object met het toetsenbord te selecteren. Daardoor is de captcha niet toegankelijk voor mensen die geen muis kunnen gebruiken.

Bevinding 58: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters pijltjestoetsen naast sectiekoppen zoals “Vakgebied”. Deze knoppen zijn niet toegankelijk met het toetsenbord. Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.

Bevinding 59: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters schuifregelaars onder “Salaris” en “Uren”. Deze schuifregelaars zijn niet te bedienen met het toetsenbord. Zorg dat de schuifregelaars met het toetsenbord te gebruiken zijn en dat de informatie in deze schuifregelaars toegankelijk is voor alle bezoekers.

Bevinding 60: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express verschijnen er interactieve elementen boven de kop “Vacatures” wanneer bezoekers filters toepassen. Deze elementen geven de gekozen opties weer en maken het mogelijk een filter te verwijderen. Ze kunnen met de muis worden aangeklikt, maar zijn niet te bedienen met het toetsenbord. Een voorbeeld is het selectievakje “Administratief 2” onder “Vakgebied”. Wanneer dit wordt aangevinkt, verschijnt boven de kop “Vacatures” een interactief element met de tekst “Administratief” en een “x”-icoon. Dit element kan niet met het toetsenbord worden gebruikt om het filter te verwijderen.

Bevinding 61: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie verschijnt een formulier nadat de link “Solliciteer nu” is geactiveerd. In dit formulier staat een interactief upload-element met het label “Cv”. Dit element is niet te bedienen met het toetsenbord. Hetzelfde probleem doet zich voor bij het interactieve element met het label “Motivatiebrief”, dat zichtbaar wordt wanneer de knop “Of upload een bestand” wordt geactiveerd.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Bevinding 62: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster met een formulier. Dit formulier gebruikt alleen HTML5-validatie voor invoervelden. Deze foutmeldingen verdwijnen te snel. Er is dus een tijdslimiet ingesteld. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer ook of er nog meer formulieren zijn die dit probleem hebben.

Bevinding 63: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster. In dit dialoogvenster staat een formulier met hCaptcha. Wanneer een bezoeker een paar minuten inactief is terwijl het hCaptcha-venster openstaat, sluit dit venster automatisch. De bezoeker moet dan het formulier opnieuw laden en opnieuw invullen. Dit betekent dat er een tijdslimiet is ingesteld voor hCaptcha. Dit kan een probleem zijn voor iemand die meer tijd nodig heeft om het formulier in te vullen. De tijdslimiet moet daarom voldoen aan de toegankelijkheidseisen. Een bezoeker moet de tijdslimiet kunnen uitzetten, aanpassen of verlengen.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 64: De titel van de pagina https://werkenbijhetcbs.nl/ is correct ingesteld als "Kom werken aan de feiten | CBS". Wanneer echter de skiplink wordt geactiveerd, verandert deze titel in “404 - Page not found: /content | Nuxt”. Dit is geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Zo begrijpen bezoekers beter waar de pagina over gaat. Wanneer dit correct is ingesteld, wordt deze tekst ook getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers eenvoudiger navigeren tussen verschillende pagina’s. Zet daarom in het title-element van de pagina een duidelijke tekst die de inhoud beschrijft.
Hetzelfde probleem doet zich voor op pagina’s zoals https://werkenbijhetcbs.nl/vakgebied-data-analist, https://werkenbijhetcbs.nl/vacature-overzicht-express, https://werkenbijhetcbs.nl/vakgebied-it#/content en andere.

Bevinding 65: De pagina’s https://werkenbijhetcbs.nl/onze-cultuur en https://werkenbijhetcbs.nl/over-ons hebben dezelfde tekst in het title-element: “Werken bij het CBS | Over ons”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Wanneer twee of meer pagina’s dezelfde titel hebben, kan dit verwarrend zijn voor de bezoeker en wordt navigeren tussen pagina’s lastiger. Pas daarom de tekst in het title-element aan zodat deze op elke pagina uniek is en de inhoud nauwkeurig beschrijft.
Hetzelfde probleem doet zich voor op de pagina’s https://werkenbijhetcbs.nl/vacature-overzicht-express en https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie. Het title-element van deze pagina’s bevat dezelfde tekst: “CBS | Vacatures | Werken bij het CBS?”.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 66: In de header van de website komt de toetsenbordfocus na de link met het logo “Centraal Bureau voor de Statistiek” op een onzichtbaar interactief element terecht. Dit element is een link met de toegankelijke naam “Centraal Bureau voor de Statistiek logo Homepagina”. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kunnen bezoekers deze onbedoeld activeren.

Bevinding 67: Op pagina https://werkenbijhetcbs.nl/ komt de toetsenbordfocus na de link “Bekijk vacatures” terecht op onzichtbare interactieve elementen. De toetsenbordfocus mag niet terechtkomen op interactieve elementen die niet zichtbaar zijn. Dit kan ertoe leiden dat bezoekers deze elementen onbedoeld activeren.

Bevinding 68: Op pagina https://werkenbijhetcbs.nl/ staat bovenaan een video. De knoppen “Pauzeer video” en “Speel video” worden gebruikt om de video te pauzeren en af te spelen. Na het iframe met de video verplaatst de toetsenbordfocus zich echter eerst naar de links onder de kop “Kom werken aan de feiten” voordat deze de knop bereikt. Dit is geen logische focusvolgorde. De toetsenbordfocus moet direct na het iframe met de video naar de knop “Pauzeer video”/“Speel video” gaan.

Bevinding 69: Op pagina https://werkenbijhetcbs.nl/over-ons komt in de sectie “Het CBS als werkgever” de toetsenbordfocus vóór de link “Bekijk de arbeidsvoorwaarden” terecht op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kunnen bezoekers deze onbedoeld activeren.

Bevinding 70: Op pagina https://werkenbijhetcbs.nl/vakgebied-data-analist wordt bij het activeren van de link “Bekijk vacatures” in de sectie “Data analist” de pagina naar beneden gescrold en komt de bezoeker bij de sectie “Vacatures data analist”. De toetsenbordfocus verplaatst zich echter niet mee naar deze sectie. Bezoekers die een schermlezer of toetsenbord gebruiken merken daardoor niet dat de pagina is verschoven of dat er nieuwe inhoud zichtbaar is, omdat de focus op de link blijft staan in plaats van naar de doelsectie te gaan. Zorg dat het activeren van de link de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.
Hetzelfde probleem doet zich voor op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie wanneer de links “Beschrijving”, “Reisafstand” en “Over het CBS” worden geactiveerd.

Bevinding 71: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters secties met selectievakjes die kunnen worden gesloten. De toetsenbordfocus kan echter nog steeds op deze onzichtbare selectievakjes terechtkomen. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kunnen bezoekers deze onbedoeld activeren.

Bevinding 72: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters onder “Vakgebied” een knop “Laad meer”. Wanneer een bezoeker op deze knop klikt, worden er meer opties toegevoegd. De toetsenbordfocus verplaatst zich echter niet naar de eerste nieuw toegevoegde optie, maar gaat direct door naar de volgende sectie met selectievakjes. Dit is niet de bedoeling. Zorg dat de toetsenbordfocus bij het laden van meer opties naar de eerste nieuwe optie verplaatst wordt.

Bevinding 73: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de zoekresultaten knoppen met de tekst “Solliciteer” die genest zijn binnen links.
Deze constructie kan ervoor zorgen dat er overbodige focuspunten ontstaan wanneer een bezoeker met het toetsenbord navigeert. Dit kan worden opgelost door een van de geneste links of knoppen te verwijderen.

Bevinding 74: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express opent op kleine schermen de knop met de tekst "Filter" een dialoogvenster. Na het sluiten van dit venster keert de toetsenbordfocus niet terug naar het element waarmee het venster werd geopend of naar het volgende logische element in de focusvolgorde van de pagina. Zorg dat de focus na het sluiten van het venster terechtkomt op het element waarmee het dialoogvenster werd geopend.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 75: Op pagina https://werkenbijhetcbs.nl/ staan onder de kop “Welk werkveld past bij jou?” meerdere links met de tekst “Lees meer” die naar verschillende bestemmingen verwijzen. Er zijn dus meerdere links op de pagina met dezelfde tekst maar met een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst anders zijn. Een vergelijkbaar probleem staat onder de kop “Uitgelichte vacatures”, waar de links “Bekijk vacature” elk een dialoogvenster openen met andere inhoud.
Hetzelfde probleem met de links “lees meer” komt voor op pagina https://werkenbijhetcbs.nl/ontmoet-je-collegas.
Hetzelfde probleem met de links “Bekijk vacature” doet zich voor op andere pagina’s, zoals https://werkenbijhetcbs.nl/vakgebied-it, https://werkenbijhetcbs.nl/vakgebied-onderzoeker, https://werkenbijhetcbs.nl/vakgebieddetail-overig en andere.

Bevinding 76: Op pagina https://werkenbijhetcbs.nl/over-ons staat in de sectie “Het CBS als werkgever” vóór de link “Bekijk de arbeidsvoorwaarden” een onzichtbare link zonder inhoud. Daardoor heeft deze link geen herkenbaar linkdoel. Om dit op te lossen moet de link inhoud krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben.

Bevinding 77: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express functioneren in de paginering pijlafbeeldingen als links, maar deze afbeeldingen zijn verborgen voor schermlezers. Daardoor heeft de link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem hangt samen met succescriterium 4.1.2, omdat de link hierdoor ook geen toegankelijke naam heeft.

Bevinding 78: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express hebben de pagineringslinks onvoldoende context. Voor ziende bezoekers is het duidelijk dat “1”, “2”, “3” enzovoort paginanummers zijn, maar voor slechtziende bezoekers en bezoekers 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".

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 79: Op pagina https://werkenbijhetcbs.nl/ staat een iframe met het title-attribuut "2871 Werken bij website CBS banner". Deze tekst is niet betekenisvol en geeft geen informatie over het type inhoud in het iframe. Iframes moeten een goede beschrijving hebben in het title-attribuut. Daarin moet staan om welk type inhoud het gaat, bijvoorbeeld een podcast of video, en waar het inhoudelijk over gaat. De beschrijving moet uniek en betekenisvol zijn, zodat bezoekers met hulpsoftware kunnen beslissen of het de moeite waard is de inhoud van het iframe te verkennen. Een vergelijkbaar probleem staat onder de kop “Werken bij hét statistiekbureau voor en door Nederland” met een iframe dat de video “Werken bij het CBS” bevat. Dit iframe wordt toegevoegd nadat de bezoeker de afspeelknop activeert.
Hetzelfde probleem komt voor op pagina https://werkenbijhetcbs.nl/over-ons onder de kop “Onze feiten over Nederland”. Daar wordt na het activeren van de afspeelknop een iframe toegevoegd met het title-attribuut: “Op een doorsnee dag”.

Bevinding 80: Op pagina https://werkenbijhetcbs.nl/ verschijnt in de sectie "Uitgelichte vacatures" de kop met de tekst “404” wanneer de skiplink “Overslaan naar content” wordt geactiveerd. Deze kop geeft geen aanvullende informatie of context. Dit is vooral problematisch voor bezoekers die een schermlezer gebruiken. Zij laten koppen voorlezen om snel de structuur van een pagina te begrijpen en relevante inhoud te vinden. Gebruik daarom een specifiekere kop die duidelijk maakt welk soort inhoud of functionaliteit volgt.

Bevinding 81: Op pagina https://werkenbijhetcbs.nl/ staat onder de kop “Werken bij hét statistiekbureau voor en door Nederland” een afspeelknop die de video “Werken bij het CBS” start. De toegankelijke naam van deze knop is echter “Play”, afkomstig van het aria-label. Deze naam beschrijft de functie niet nauwkeurig. Een blinde bezoeker weet daardoor niet wat de knop precies doet. Voeg daarom tekst toe die de functie van de knop goed beschrijft.
Hetzelfde probleem doet zich voor op pagina https://werkenbijhetcbs.nl/over-ons onder de kop “Onze feiten over Nederland”.

Bevinding 82: Op pagina https://werkenbijhetcbs.nl/onze-cultuur staat onder de sectie “De mensen achter de feiten” een carrousel met afbeeldingen. De slides in deze carrousel hebben ontoereikende toegankelijke namen, zoals “1 van %{totaal}”. Elke slide moet een betekenisvolle toegankelijke naam hebben die de inhoud weerspiegelt. Hetzelfde probleem komt voor onder de koppen “Het gaat altijd om kwaliteit. Daar leer je van, het maakt je slimmer.” en “Een omgeving waar data en talent elkaar versterken”.
Ook op andere pagina’s is dit probleem aanwezig, zoals op https://werkenbijhetcbs.nl/over-ons onder de kop “‘Ik wil graag werk doen dat maatschappelijk relevant is’”, op https://werkenbijhetcbs.nl/vakgebied-data-analist onder de kop “Jij zorgt dat cijfers kloppen, zodat Nederland kan sturen op feiten” en op https://werkenbijhetcbs.nl/vakgebied-it onder de kop “‘Jij houdt de motor draaiend, zodat Nederland kan sturen op feiten’”, evenals op andere pagina’s.

Bevinding 83: Op pagina https://werkenbijhetcbs.nl/onze-cultuur staan onder de secties “De mensen achter de feiten”, “Het gaat altijd om kwaliteit. Daar leer je van, het maakt je slimmer.” en “Een omgeving waar data en talent elkaar versterken” carrousels met afbeeldingen. Deze carrousels hebben role="group", aria-roledescription="Carousel" en aria-label="Carousel". Omdat aria-roledescription="Carousel" al is gebruikt, mag het aria-label niet opnieuw het woord "carousel" bevatten. Zorg dat het aria-label het doel of de inhoud van de carrousel beschrijft en niet het type. Het label moet uniek en betekenisvol zijn. Meer informatie hierover staat op https://www.w3.org/WAI/ARIA/apg/patterns/carousel/.
Hetzelfde probleem doet zich voor bij carrousels op andere pagina’s, zoals https://werkenbijhetcbs.nl/over-ons, https://werkenbijhetcbs.nl/vakgebied-data-analist, https://werkenbijhetcbs.nl/vakgebied-it en andere.

Bevinding 84: De pagina https://werkenbijhetcbs.nl/vacature-overzicht-express bevat meerdere knoppen met dezelfde zichtbare tekst: "Solliciteer". Deze knoppen voeren echter verschillende functies uit. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken, omdat niet duidelijk is welke actie elke knop uitvoert. Zorg dat de knoptekst aansluit bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende teksten hebben.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 85: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters selectievakjes waarbij de toetsenbordfocus niet zichtbaar is. Hetzelfde probleem doet zich voor bij links in de zoekresultaten. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar de focus zich bevindt, anders weten zij niet wanneer zij op Enter moeten drukken om een knop of link te activeren.

Bevinding 86: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie verschijnt een formulier nadat de link “Solliciteer nu” is geactiveerd. In dit formulier is de toetsenbordfocus niet zichtbaar op het selectievakje “Akkoord”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals selectievakjes, zodat bezoekers die met het toetsenbord navigeren duidelijk kunnen zien waar de focus zich bevindt.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 87: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster met een formulier dat hCaptcha gebruikt. In het hCaptcha-venster staat een knop met de zichtbare tekst "Overslaan". Deze zichtbare tekst maakt geen deel uit van de toegankelijke naam van de knop. De toegankelijke naam via aria-label is nu “Sla uitdaging over”. De zichtbare tekst moet onderdeel zijn van de toegankelijke naam van de knop.

Bevinding 88: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters naast het invoerveld met de placeholdertekst “bijv. 3446 AD” een pijltjesknop met de zichtbare tekst “Alle afstanden”. Deze knop heeft geen toegankelijke naam. De zichtbare tekst maakt dus geen deel uit van de toegankelijke naam van de knop. Dit betekent dat deze tekst niet gebruikt kan worden om de knop te bedienen met spraakbedieningssoftware.
Vergelijkbare problemen kunnen vaker voorkomen.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 89: Op pagina https://werkenbijhetcbs.nl/ verschijnt na het activeren van de skiplink “Overslaan naar content” onder de kop “Uitgelichte vacatures” tekst in een andere taal zonder taalcodering. Dit gaat om de tekst “Page not found: /content” en de knop “Go back home”. Deze tekst wordt nu uitgesproken volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, namelijk “nl”. De schermlezer moet hier echter overschakelen naar de taal van de zin. Geef het element met deze Engelstalige inhoud daarom het attribuut lang="en" of vertaal de tekst naar het Nederlands.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 90: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster met een formulier. In dit formulier wordt HTML5-validatie gebruikt, waarbij standaard HTML5-foutmeldingen worden getoond wanneer het formulier met lege of onjuiste gegevens wordt verzonden. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders en niet altijd op een toegankelijke manier. De melding kan kortaf en onvolledig zijn. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer ook of er nog meer formulieren zijn die dit probleem hebben.

Bevinding 91: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staat het invoerveld “Mijn postcode”. Wanneer dit veld leeg wordt gelaten en de knop “Bereken route” wordt geactiveerd, wordt de fout alleen aangegeven doordat de placeholdertekst rood wordt en er een rode rand omheen komt. Kleur gebruiken als enige manier om een fout aan te geven, biedt onvoldoende feedback voor alle bezoekers. Bezoekers die een schermlezer gebruiken merken mogelijk niet dat er een fout is opgetreden of begrijpen niet welk veld aandacht nodig heeft. Zorg daarom voor een extra foutindicator, zoals een foutmelding naast het veld, en leg deze programmatisch vast bij het input-element (bijvoorbeeld met aria-describedby). Zorg dat de fout zowel visueel als programmatisch wordt doorgegeven.

Bevinding 92: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie verschijnt een formulier nadat de link “Solliciteer nu” is geactiveerd. In dit formulier wordt de foutmelding “Deze vraag is verplicht” getoond. Dit is echter een instructie en geen echte foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zich bevindt. Vaak bevat dit ook een ontkenning. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 93: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters een invoerveld met de placeholdertekst “bijv. 3446 AD”. Dit veld heeft echter geen permanent label; de placeholdertekst wordt gebruikt als label. Invoervelden moeten altijd een zichtbaar label hebben. Een placeholdertekst kan hiervoor niet worden gebruikt, omdat deze verdwijnt zodra de bezoeker begint te typen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 94: In de header van de website openen navigatieknoppen submenu’s, bijvoorbeeld de knop “Werken bij het CBS”. Het attribuut aria-expanded is echter niet aanwezig wanneer de submenu’s gesloten zijn. Het verschijnt pas met de waarde "true" wanneer het menu geopend wordt. Daardoor wordt de toestand van de submenu’s niet in de code weergegeven wanneer ze gesloten zijn, wat vooral voor schermlezergebruikers problematisch kan zijn. Zorg dat het attribuut aria-expanded altijd aanwezig is op de menuknoppen en dat dit wordt bijgewerkt om de toestand van het submenu weer te geven. Dit attribuut moet de waarde "true" krijgen als het menu zichtbaar is en "false" als het gesloten is. Hetzelfde probleem doet zich voor op kleine schermen bij de knop met drie horizontale strepen waarmee het navigatiemenu wordt geopend.

Bevinding 95: In de header van de website opent op kleine schermen de knop met drie horizontale strepen een navigatiemenu. Dit menu is gemarkeerd met role="menu". Sommige onderliggende 'child'-elementen, zoals de elementen met de teksten “Werken bij het CBS” en “Onze vakgebieden”, zijn echter als gewone span-elementen geïmplementeerd zonder correcte rol. Binnen een role="menu" zijn alleen elementen met role="menuitem", role="menuitemcheckbox", role="menuitemradio" of role="group" met toegankelijke kindrollen role="menuitem" toegestaan.
Voor bepaalde ARIA-rollen is een juiste combinatie van boven- en onderliggende elementen ('parent' en 'child') vereist. Dit is voor elke rol nauwkeurig beschreven in WAI-ARIA. Wanneer deze rollen niet volledig in de code aanwezig zijn, functioneren de elementen niet zoals de ontwikkelaar het bedoelde. Als slechts een deel van de verplichte rollen aanwezig is, heeft dit geen enkel positief effect op de toegankelijkheid. Zorg dat alle 'child'-elementen binnen een role="menu" toegestane en correcte rollen gebruiken en dat de verplichte ARIA-relaties worden gevolgd. Meer details over het menu-patroon zijn te vinden in de WAI-ARIA-specificatie: https://www.w3.org/TR/wai-aria-1.3/#menu.

Bevinding 96: Op pagina https://werkenbijhetcbs.nl/ openen onder de kop “Uitgelichte vacatures” de links “Bekijk vacature” dialoogvensters. Deze functionaliteit is echter niet aangegeven in de code. Om dit op te lossen kan het attribuut aria-haspopup="dialog" worden toegevoegd aan de knop. Dit attribuut geeft aan dat bij het klikken op de knop een dialoogvenster wordt geopend. De status van het dialoogvenster, open of gesloten, kan worden aangegeven met het attribuut aria-expanded, dat de waarde true of false moet krijgen. Let erop dat aria-expanded alleen werkt als zowel het openen als het sluiten van het dialoogvenster door dezelfde knop worden uitgevoerd.
Hetzelfde probleem doet zich voor op andere pagina’s, zoals https://werkenbijhetcbs.nl/vakgebied-it, https://werkenbijhetcbs.nl/vakgebied-onderzoeker, https://werkenbijhetcbs.nl/vakgebieddetail-overig en andere.

Bevinding 97: Op pagina https://werkenbijhetcbs.nl/ openen onder de kop “Uitgelichte vacatures” de links “Bekijk vacature” dialoogvensters. Deze dialoogvensters missen zowel een correcte ARIA-rol als een toegankelijke naam. Schermlezers kunnen daardoor niet aangeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan worden opgelost door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".
Hetzelfde probleem doet zich voor op andere pagina’s, zoals https://werkenbijhetcbs.nl/vakgebied-it, https://werkenbijhetcbs.nl/vakgebied-onderzoeker, https://werkenbijhetcbs.nl/vakgebieddetail-overig en andere.

Bevinding 98: Op pagina https://werkenbijhetcbs.nl/ openen onder de kop “Uitgelichte vacatures” de links “Bekijk vacature” dialoogvensters. In deze dialoogvensters ontbreekt bij de knop met het “X”-icoon een toegankelijke naam. Daardoor begrijpen bezoekers die een schermlezer gebruiken niet wat het doel of de functie van de knop is. Geef deze knop een toegankelijke naam die het doel van de knop beschrijft.
Hetzelfde probleem doet zich voor op andere pagina’s, zoals https://werkenbijhetcbs.nl/vakgebied-it, https://werkenbijhetcbs.nl/vakgebied-onderzoeker, https://werkenbijhetcbs.nl/vakgebieddetail-overig en andere.

Bevinding 99: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster, maar dit is niet aangegeven in de code. Om dit op te lossen kan het attribuut aria-haspopup="dialog" worden toegevoegd aan de knop. Dit attribuut geeft aan dat bij het klikken op de knop een dialoogvenster wordt geopend. De status van het dialoogvenster, open of gesloten, kan worden aangegeven met het attribuut aria-expanded, dat de waarde true of false moet krijgen. Let erop dat aria-expanded alleen werkt als zowel het openen als het sluiten van het dialoogvenster door dezelfde knop worden uitgevoerd.

Bevinding 100: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam. Voor blinde bezoekers is deze naam nodig om te begrijpen wat de inhoud van het venster is. Schermlezers kunnen hierdoor niet aangeven wat er in het dialoogvenster staat. Dit kan worden opgelost door een aria-label toe te voegen aan het dialoogvenster met een duidelijke beschrijving van de inhoud.

Bevinding 101: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster. In dit dialoogvenster staan twee knoppen: “Voor welke locatie(s) wil je meldingen krijgen?” en “Welke afdeling heeft je interesse?”. Elke knop opent een suggestielijst met role="listbox". Deze listboxen hebben echter geen toegankelijke naam. Zonder toegankelijke namen kunnen schermlezergebruikers niet begrijpen wat het doel van de listboxen is. Zorg dat elke listbox een toegankelijke naam krijgt.

Bevinding 102: Op pagina https://werkenbijhetcbs.nl/over-ons staat in de sectie “Het CBS als werkgever” vóór de link “Bekijk de arbeidsvoorwaarden” een onzichtbare link zonder toegankelijke naam. Daardoor begrijpen bezoekers die een schermlezer gebruiken niet wat het doel of de functie van de link is. Geef deze link een toegankelijke naam die het doel van de link beschrijft.

Bevinding 103: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express ontbreekt bij het invoerveld met de placeholdertekst “bijv. 3446 AD” een toegankelijke naam. Hetzelfde probleem komt voor bij het invoerveld met de placeholdertekst “Zoek vacatures”. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld daarom een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.
Hetzelfde probleem staat op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie bij het invoerveld “Mijn postcode”. Op dezelfde pagina komt dit probleem ook voor in het formulier dat verschijnt nadat de link “Solliciteer nu” is geactiveerd.

Bevinding 104: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters naast het invoerveld met de placeholdertekst “bijv. 3446 AD” een pijltjesknop met de zichtbare tekst “Alle afstanden”. Deze knop heeft geen toegankelijke naam. Daardoor begrijpen bezoekers die een schermlezer gebruiken niet wat het doel of de functie van de knop is. Geef deze knop een toegankelijke naam die het doel van de knop beschrijft.

Bevinding 105: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters naast het invoerveld met de placeholdertekst “bijv. 3446 AD” een pijltjesknop met de zichtbare tekst “Alle afstanden”. Deze knop opent een dropdownlijst. De dropdownlijst en de opties daarin hebben echter niet de juiste toegankelijke rollen. Elk HTML-element heeft standaard een rol die bepaalt welke eigenschappen en functies het element heeft en hoe informatie wordt doorgegeven of ontvangen. Schermlezers en andere hulpsoftware moeten de juiste rol van elk element kennen om er correct mee om te gaan en aan de bezoeker uit te leggen wat het element doet. Zorg dat interactieve elementen de juiste toegankelijke rol hebben.

Bevinding 106: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staat in de filters naast het invoerveld met de placeholdertekst “bijv. 3446 AD” een pijltjesknop met de zichtbare tekst “Alle afstanden”. Deze knop opent een dropdownlijst. Het pijltjesicoon geeft visueel aan of de lijst met opties open of gesloten is. Deze open- of dichtgeklapte toestand wordt echter niet programmatisch doorgegeven aan schermlezers. Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is, maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet. Dit kan worden opgelost door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden, of door visueel verborgen tekst toe te voegen die de toestand van de sectie aangeeft.

Bevinding 107: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters pijltjesknoppen naast sectiekoppen zoals “Vakgebied”. Deze knoppen hebben niet de juiste toegankelijke rol en missen een toegankelijke naam. Daardoor is voor schermlezergebruikers niet duidelijk wat de functie van de knoppen is. Geef de knoppen een correcte toegankelijke rol en een toegankelijke naam die het doel ervan beschrijft.

Bevinding 108: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters onder “Ervaring” selectievakjes zoals “Junior”, “Medior” en “Senior”. Deze selectievakjes hebben geen toegankelijke naam. Daardoor kunnen schermlezergebruikers niet begrijpen wat het doel van de selectievakjes is. Dit probleem ontstaat doordat deze selectievakjes dezelfde waarden in id-attributen hergebruiken en de labels dezelfde for-attributen gebruiken als de selectievakjes onder “Ervaringsniveau”. Hierdoor hebben de selectievakjes onder “Ervaringsniveau” dubbele tekst in hun toegankelijke namen en de selectievakjes onder “Ervaring” helemaal geen toegankelijke namen.

Bevinding 109: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express staan in de filters schuifregelaars onder “Salaris” en “Uren”. Deze schuifregelaars hebben geen correcte rol en geen toegankelijke naam. Daardoor is voor schermlezergebruikers niet duidelijk wat de functie van de schuifregelaars is of welke waarde ermee kan worden ingesteld. Geef de schuifregelaars een juiste toegankelijke rol en een toegankelijke naam die het doel van de schuifregelaars beschrijft.

Bevinding 110: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express verschijnen er interactieve elementen boven de kop “Vacatures” wanneer bezoekers filters toepassen. Deze elementen geven de gekozen opties weer en maken het mogelijk een filter te verwijderen, maar in de code hebben ze geen correcte rol. Een voorbeeld hiervan is het selectievakje “Administratief 2” onder “Vakgebied”. Wanneer dit wordt geselecteerd, verschijnt boven de kop “Vacatures” een interactief element met de tekst “Administratief” en een “x”-icoon. Dit element heeft echter geen juiste rol en geen toegankelijke naam, waardoor schermlezergebruikers niet begrijpen dat hiermee een filter kan worden verwijderd.

Bevinding 111: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express functioneren in de paginering pijlafbeeldingen als links. Deze links hebben geen toegankelijke namen. Daardoor begrijpen bezoekers die een schermlezer gebruiken niet wat het doel of de bestemming van de link is. Geef deze links een toegankelijke naam die het doel van de link beschrijft.

Bevinding 112: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express opent op kleine schermen een knop met het label "Filter" een dialoogvenster. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam. Schermlezers kunnen daardoor niet aangeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan worden opgelost door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Bevinding 113: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express opent op kleine schermen de knop met de tekst "Filter" een dialoogvenster. De knop met het “X”-icoon in dit venster heeft geen toegankelijke naam.
Hetzelfde probleem doet zich voor bij het pijltjesicoon dat op de pagina verschijnt wanneer deze op kleine schermen wordt bekeken en dat de functie heeft om naar boven te scrollen. Ook dit icoon mist een toegankelijke naam.

Bevinding 114: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie missen de volgende knoppen een toegankelijke naam: de knop met het pijltjesicoon bovenaan die de bezoeker terugstuurt naar de pagina met vacatures en de knoppen onder de kop “Vervoersmiddel”. Daardoor is voor schermlezergebruikers niet duidelijk wat het doel van deze knoppen is. Geef deze knoppen een toegankelijke naam die de functie beschrijft.

Bevinding 115: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staan onder de kop “Vervoersmiddel” knoppen met afbeeldingen. Deze knoppen hebben meerdere toestanden (bijvoorbeeld ingedrukt of niet ingedrukt), maar in de code ontbreekt een programmatische weergave van deze toestand. Hierdoor kan hulpsoftware deze informatie niet doorgeven en weten blinde bezoekers niet wat de toestand van de knop is. Zorg dat de toestand van de knop ook in de code wordt weergegeven.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 116: Op pagina https://werkenbijhetcbs.nl/ staan twee select-elementen: “Vakgebied” en “Plaats”. Wanneer de bezoeker een selectie maakt, toont de knop met de tekst “Toon vacatures” het aantal beschikbare vacatures, bijvoorbeeld “Toon vacatures (2)”. Dit aantal is een statusmelding die automatisch door schermlezers moet worden voorgelezen zodra het verandert. De benodigde code om dit mogelijk te maken ontbreekt. Voeg hiervoor het attribuut aria-live toe aan de melding. Andere oplossingen zijn ook mogelijk.
Hetzelfde probleem doet zich voor op pagina https://werkenbijhetcbs.nl/stage bij de select-elementen “Type stage:” en “Onderwijsniveau:” en de knop met de tekst “Toon stageopdrachten”.

Bevinding 117: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster met een formulier. Wanneer de bezoeker dit formulier verstuurt, verschijnt er een wachtanimatie op de knop in plaats van de tekst “Aanmelden”. Deze animatie fungeert als statusmelding, maar is niet toegankelijk voor blinde bezoekers. Dit soort meldingen moet de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan blinde bezoekers zodra het icoon verschijnt. Voeg om dit te bereiken bijvoorbeeld aria-live="polite" toe aan het icoon. Meer informatie over ARIA staat op de pagina https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22.

Bevinding 118: Op pagina https://werkenbijhetcbs.nl/contact opent de knop “Stuur mij vacatures” onder de kop “Jouw vacature nu niet gevonden?” een dialoogvenster met een formulier. Na het verzenden van dit formulier verschijnt de statusmelding “Dankjewel voor je aanmelding voor de Jobalert. Je ontvangt zo spoedig mogelijk een bevestigingsmail.” zonder dat de pagina opnieuw laadt. De toetsenbordfocus wordt echter niet naar de melding verplaatst.
Omdat de pagina niet opnieuw laadt en de focus niet wordt verplaatst, is extra code nodig zodat schermlezers het statusbericht automatisch voorlezen zodra het verschijnt. Voeg hiervoor aria-live="polite" of role="status" toe aan de melding. Meer informatie over role="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22.

Bevinding 119: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express wordt boven de zoekresultaten in de koptekst “Vacatures” het aantal beschikbare vacatures weergegeven. Dit aantal is een statusmelding die automatisch door schermlezers moet worden voorgelezen zodra het verandert. De benodigde code om dit mogelijk te maken ontbreekt. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen. Voeg hiervoor het attribuut aria-live toe aan de melding. Zorg dat de tekst duidelijk is, bijvoorbeeld “[AANTAL] artikelen in winkelmand”.

Bevinding 120: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express verschijnt de tekst “Geen vacatures gevonden.” wanneer er geen items zijn gevonden. Dit is een statusbericht, maar het wordt niet als zodanig voorgelezen. Dat zou wel moeten gebeuren. Statusberichten moeten automatisch door schermlezers worden voorgelezen zodra ze verschijnen of veranderen. De code die dit mogelijk maakt ontbreekt nu. Dit kan worden opgelost door role="status" aan de melding toe te voegen.

Bevinding 121: Op pagina https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie staat het invoerveld “Mijn postcode”. Wanneer dit veld correct wordt ingevuld en de knop “Bereken route” wordt geactiveerd, start het laadproces en verschijnt de tekst “Berekenen”. Deze tekst is een statusbericht, maar wordt niet door schermlezers aangekondigd. Om dit toegankelijk te maken, moet een geschikt aria-live-attribuut (bijvoorbeeld aria-live="polite") worden toegevoegd aan het element dat het voortgangsbericht bevat. Hierdoor kondigen schermlezers de updates van de voortgang aan.
Een vergelijkbaar probleem doet zich voor wanneer het laden is voltooid en er een tekst verschijnt zoals “Resultaat het CBS is 218km van Diemerkade Diemen af waarover u 896 minuten doet.”. Ook dit is een statusbericht. Statusberichten moeten automatisch worden voorgelezen door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd.

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

• Home:
  https://werkenbijhetcbs.nl/
• Contact:
  https://werkenbijhetcbs.nl/contact
• Over ons:
  https://werkenbijhetcbs.nl/onze-cultuur
• Over ons:
  https://werkenbijhetcbs.nl/over-ons
• Arbeidsvoorwaarden:
  https://werkenbijhetcbs.nl/arbeidsvoorwaarden
• Analist:
  https://werkenbijhetcbs.nl/vakgebied-data-analist
• IT:
  https://werkenbijhetcbs.nl/vakgebied-it
• Onderzoeker:
  https://werkenbijhetcbs.nl/vakgebied-onderzoeker
• Zo werkt Simone mee aan de feiten:
  https://werkenbijhetcbs.nl/testimonial-simone
• Aanvullende expertises:
  https://werkenbijhetcbs.nl/vakgebieddetail-overig
• Verhalen:
  https://werkenbijhetcbs.nl/ontmoet-je-collegas
• Stages:
  https://werkenbijhetcbs.nl/stage
• Vacatures:
  https://werkenbijhetcbs.nl/vacature-overzicht-express
• Medewerker bedrijfsadministratie:
  https://werkenbijhetcbs.nl/vacature-overzicht-express#/nl/vacancies/16994-medewerker-bedrijfsadministratie
• Zo werkt Coskun aan de feiten:
  https://werkenbijhetcbs.nl/testimonial-coskun

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

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