Issues:
Audit digitale toegankelijkheid eDiensten Burgerzaken Centric

(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: Bijvoorbeeld op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/OudAdres/ bij vensterbreedte van 1280 pixels ingezoomd tot 200% zijn de stappen van het proces te zien aan de ronde iconen bovenaan de pagina. Deze afbeeldingen hebben betekenis. De iconen worden ook door middel van het pseudo-element ::before en de content property in de CSS op de pagina gezet. Op deze manier kan het zijn dat het icoon wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. De content property is alleen geschikt voor het toevoegen van puur decoratieve content. Een oplossing kan zijn om het icoon in de HTML te plaatsen, bijvoorbeeld als img- of svg-element met tekstalternatief.
Hetzelfde komt vaker voor op de website, bijvoorbeeld bij het icoon van de Nederlandse of Britse vlag, zonder CSS is van taal wisselen niet mogelijk.

Bevinding 2: Bijvoorbeeld op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/OudAdres/ bij vensterbreedte van 1280 pixels ingezoomd tot 200% zijn de stappen van het proces te zien aan de ronde iconen bovenaan de pagina. Deze afbeeldingen hebben betekenis maar de alternatieve tekst ontbreekt. Hierdoor hebben de links waarmee de iconen zijn opgemaakt geen toegankelijke naam. Dit geldt ook voor andere iconen, bijvoorbeeld de het icoon van de Nederlandse of Britse vlag. Een oplossing kan zijn om het icoon in de html te plaatsen, bijvoorbeeld als img- of svg-element met tekstalternatief. Zie ook succescriterium 2.4.4.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 3: Op pagina https://ediensten-burgerzaken.centric.eu/AfschriftBurgerlijkeStand/Betalen/ is bij het veld 'Betaalmethode' het label niet expliciet geassocieerd met de combobox. Het invoerveld heeft wel een aria-labelledby attribuut maar dat verwijst niet naar het label maar naar de inhoud van het veld. Zo krijgt een bezoeker die gebruik maakt van een screenreader niet te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen. Zorg ervoor dat de combobox gekoppeld is aan het visuele label, bijvoorbeeld door gebruik te maken van for- en id-attributen.
Een soortgelijk probleem komt ook voor bij andere comboboxen, bijvoorbeeld de combobox 'Geboorteplaats *' als op pagina https://ediensten-burgerzaken.centric.eu/AfschriftBurgerlijkeStand/Afschrift/ bij 'Akte*' voor geboorteakte is gekozen.

Bevinding 4: Op de betaalpagina https://ediensten-burgerzaken.centric.eu/AfschriftBurgerlijkeStand/Betalen/ kan na keuze voor iDeal een bank geselecteerd worden. De methode om een bank te selecteren is opgemaakt met keuzerondjes, maar deze keuzerondjes zijn verborgen voor hulpsoftware door middel van CSS. Alleen het logo van een bank wordt voorgelezen als het elementen focus heeft. Zorg ervoor dat de keuzerondjes niet verborgen zijn voor hulpsoftware. Let hierbij op dat de keuzerondjes een goede toegankelijke naam krijgen, dat is nu niet het geval.

Bevinding 5: Bijvoorbeeld op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/OudAdres/ bij vensterbreedte van 1280 pixels ingezoomd tot 200% zijn de stappen van het proces te zien aan de ronde iconen bovenaan de pagina. Aan de dunne cirkel rond het icoon kan je zien welke stap de huidige pagina is. Voor blinden en slechtzienden is deze informatie niet beschikbaar via hulpsoftware. Markeer de actieve naam zodat deze ook als zodanig wordt voorgelezen door een screenreader. Bijvoorbeeld via aria-current en een waarde die de content beschrijft.

Bevinding 6: De PDF 'Aangifteformulier verhuizing' (te downloaden aan het eind van formulier https://ediensten-burgerzaken.centric.eu/Verhuizen/Login/) is niet gecodeerd (van tags voorzien). Dit betekent dat er de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en ALT-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan. Hetzelfde geldt voor de Engelstalige PDF.

Bevinding 7: Advies: De koppenstructuur is niet altijd correct, bijvoorbeeld op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/Afronden/ hebben 'UW AANGIFTE VAN VERHUIZEN' en 'AANVRAGER' dezelfde kopniveau 3, terwijl 'AANVRAGER' onderdeel is van 'UW AANGIFTE VAN VERHUIZEN' en dus een kopniveau lager zou moeten hebben. Ook is er geen kop van niveau 2 op de pagina. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, et cetera.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 8: De titel van de PDF 'Aangifteformulier verhuizing' (te downloaden aan het eind van formulier https://ediensten-burgerzaken.centric.eu/Verhuizen/Login/), is witte tekst op een groene achtergrond (HEX #11913A) en heeft te weinig contrast. Deze tekst heeft een te laag contrast. De contrastverhouding is 4,1:1 waar dit 4,5:1 moet zijn. Hetzelfde geldt voor de Engelstalige PDF.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 9: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% op pagina https://ediensten-burgerzaken.centric.eu/home/index/?choice=processes, dan loopt de tekst 'CENTRIC EDIENSTEN' over het logo waardoor de tekst daarvan slecht of niet leesbaar is. Zorg ervoor dat content niet over elkaar komt te staan wanneer bezoekers inzoomen.

Bevinding 10: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% op onder andere https://ediensten-burgerzaken.centric.eu/AfschriftBurgerlijkeStand/AangeverDetails/, dan verdwijnt vanaf 175% de tekst 'Aanvragen afschrift Burgerlijke Stand' van de pagina. Content en functionaliteiten mogen niet verwijden wanneer bezoekers inzoomen op een pagina.

Bevinding 11: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan is het bijvoorbeeld op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/NieuwAdres/ niet mogelijk om de maand december te kiezen omdat die niet in beeld kan scrollen. Ook is de tekst die verschijnt als op het vraagteken naast de datum geklikt wordt niet volledig te lezen. Een gedeelte valt buiten beeld en is niet in beeld te scrollen. Zorg dat de tekst binnen het beeld blijft en dat alle functionaliteit ook op lage resolutie werkt.

2. Bedienbaar

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 12: Elke pagina met terugkerende inhoud bevat wel een skiplink (een mechanisme om naar een ander deel van de pagina te springen), maar als bij een smal venster de hamburgermenu knop verschijnt is de skiplink niet het eerste dat focus krijgt. Dat zijn de (verborgen) links in het hamburgermenu. Zorg ervoor dat de skiplink als eerste op de website focus krijgt om dit probleem op te lossen.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 13: De PDF 'Aangifteformulier verhuizing' (te downloaden aan het eind van formulier https://ediensten-burgerzaken.centric.eu/Verhuizen/Login/) heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond. Hetzelfde geldt voor de Engelstalige PDF.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 14: Wanneer bezoekers op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/AangeverDetails/ een fout e-mailadres invullen, verschijnen er foutmeldingen 'Dit e-mailadres is ongeldig.' onder het invoerveld. Bezoekers die met het toetsenbord navigeren moeten met de tabtoets direct bij die foutmelding uitkomen, nu blijft de focus op de 'Volgende' toets staan. Los dit probleem bijvoorbeeld op door de toetsenbordfocus te verplaatsen naar het veld waarbij de foutmelding verschijnt.

Bevinding 15: Als op pagina pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/AangeverDetails/ op de knop 'Volgende' wordt geklikt heeft op de volgende pagina de knop 'Volgende' focus. Dit is verwarrend, met name voor blinde bezoekers. Als een nieuwe pagina geladen wordt verwacht men de focus boven aan de nieuwe pagina.

Bevinding 16: Bij een vensterbreedte van 1280 pixels als is ingezoomd tot 200% verschijnt er links in de header van elke formulier een hamburgermenu-knop. Het hamburgermenu is voor hulpsoftware onzichtbaar gemaakt door middel van het aria-hidden attribuut, wanneer het menu visueel zichtbaar is verandert de waarde van aria-hidden naar 'false'. Toch is het voor toetsenbordgebruikers mogelijk om focus te plaatsen op de links in het menu wanneer dit visueel niet zichtbaar is, hierdoor zal voorleessoftware ook niets aangeven omdat de waarde van aria-hidden in dat geval 'true' is. Zorg ervoor dat het alleen mogelijk is om focus te plaatsen op de links in het menu wanneer dit menu visueel zichtbaar is.

Bevinding 17: Bij een vensterbreedte van 1280 pixels als is ingezoomd tot 200% verschijnt er links in de header van elke pagina een hamburgermenu-knop. Wanneer het menu openstaat, is de content op de achterliggende pagina nog steeds bereikbaar met het toetsenbord. Hierdoor kunnen toetsenbordgebruikers niet altijd zien welk element focus heeft. De content op de pagina achter het menu moet niet worden opgemerkt door hulpsoftware en mag niet bereikbaar zijn met het toetsenbord, totdat de bezoeker het menu afsluit. Zorg dat de focus binnen het menu venster blijft totdat deze gesloten is. Hetzelfde gebeurt vaker in de website, bijvoorbeeld als er een venster met een foutmelding opent omdat een formulier niet volledig is ingevuld, zoals op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/NieuwAdres/.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 18: De link om de taal te veranderen in de header van elke pagina heeft geen toegankelijke naam. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Zie ook succescriterium 4.1.2.
Hetzelfde komt vaker voor op de website, bijvoorbeeld in de header van elke pagina bij een schermresolutie van 1280 pixels breed ingezoomd tot 200% bij de knop om uit te loggen rechtsboven en bij dezelfde resolutie bijvoorbeeld op pagina https://ediensten-burgerzaken.centric.eu/VermissingReisdocument/Afronden/ de ronde iconen bovenaan de inhoud, de links die de voortgang van het proces aangeven.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 19: Opmerking: Op onder andere pagina https://ediensten-burgerzaken.centric.eu/AfschriftBurgerlijkeStand/Afschrift/ kunnen bezoekers een datum selecteren door middel van een knop die visueel gelabeld is met een kalender icoon. Deze knop heeft de toegankelijke naam 'Aktedatum'. Voor sommige gebruikers van hulpsoftware geeft dit niet duidelijk genoeg aan wat deze knop doet. Een betere toegankelijke naam zou bijvoorbeeld 'Selecteer datum' zijn.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 20: Wanneer de link om de taal te veranderen in de header van elke pagina focus heeft, is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 21: In de eigenschappen van de PDF 'Aangifteformulier verhuizing' (te downloaden aan het eind van formulier https://ediensten-burgerzaken.centric.eu/Verhuizen/Login/) is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF. Hetzelfde geldt voor de Engelstalige PDF.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 22: Op de homepagina als de taal op Engels staat heeft de contrastknop in de header van de pagina de toegankelijke tekst 'Stel het contrast in op hoog'. Deze tekst is in een andere taal. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="nl" toe te voegen. Beter is het om de toegankelijke tekst Engelstalig te maken.
Hetzelfde komt vaker in de website voor, bijvoorbeeld op de homepagina onder 'BELASTINGEN' zijn alle links Nederlandstalig zonder taalwisseling in de code.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 23: Onder andere op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/Aangever/ staat een formulier waar bij de verplichte velden een * wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een sterretje (*) zijn verplicht'.

Bevinding 24: Wanneer bij doorgeven verhuizing gekozen is voor 'Ik ga in een verzorgingshuis wonen.' dan is op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/Upload/ het veld 'In wonen verzorging uploaden.' verplicht. Het label van het veld geeft niet aan welk document verplicht verzonden moet worden. Geef duidelijke instructies.

Bevinding 25: Advies: Op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/NieuwAdres/ staat een label met de toegankelijke tekst 'Ik verhuis met mijn echtgeno(o)t(e)/geregistreerde partner (en evt. kinderen).' Visueel is de tekst 'echtgeno(o)t(e)' duidelijk, maar voorgelezen door hulpsoftware verdient de tekst 'echtgenoot of echtgenote' de voorkeur. Toegankelijke tekst mag anders zijn als de geschreven tekst mits dezelfde informatie wordt gegeven. Ook zou '(en evt. kinderen)' vervangen kunnen worden door 'en eventueel kinderen', hulpsoftware leest ook haakjes voor.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 26: Onder andere op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/AangeverDetails/ moet een e-mailadres ingevuld worden. Als dat niet goed is gedaan verschijnt de melding: 'E-mailadres is niet ingevuld. Dit veld is verplicht.' Hier ontbreekt een foutsuggestie.
Een suggestie moet voldoende informatie geven om het veld goed in te vullen. Bijvoorbeeld: ‘controleer of het e-mailadres het volgende format heeft: naam@domein.nl’

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 27: De link om de taal te veranderen in de header van elke pagina heeft geen toegankelijke naam. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Zie ook succescriterium 2.4.4.

Bevinding 28: Als op de pagina https://ediensten-burgerzaken.centric.eu/AfschriftBurgerlijkeStand/Afschrift/ bij 'Akte' gekozen wordt voor bijvoorbeeld 'Huwelijksakte' dan krijgt de span het attribuut aria-readonly="true". Het attribuut aria-readonly mag alleen gegeven worden aan invoervelden, bijvoorbeeld een textveld. Foute aria-code kan ongewenste resultaten geven bij hulpsoftware. Zorg ervoor dat aria correct wordt gebruikt.
Dit probleem komt op meer plaatsen in de website voor, op deze pagina ook bij de velden 'Van', 'Maand' en 'Gehuwd in'. Eenzelfde soort probleem komt voor op pagina https://ediensten-burgerzaken.centric.eu/Verhuizen/NieuwAdres/. Het attribuut aria-expanded="false" mag alleen gebruikt worden voor elementen met bepaalde rollen, zoals een link of menuitem.

Bevinding 29: Als bij een schermresolutie van 1280 pixels breed ingezoomd wordt tot 200%, wordt de tekst van de link 'Afbreken en uitloggen' vervangen voor een icoon. Hierdoor heeft de link geen tekstueel label meer en is er geen toegankelijke naam voor deze link aanwezig. Zorg ervoor dat de link altijd een toegankelijke naam heeft, ook bij een ingezoomde weergave. Los dit probleem bijvoorbeeld op door gebruik te maken van een aria-label.

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://ediensten-burgerzaken.centric.eu/home/index/?choice=processes
• 404:
  https://ediensten-burgerzaken.centric.eu/error/erroroccurred/
• Formulier Doorgeven verhuizen:
  https://ediensten-burgerzaken.centric.eu/Verhuizen/Login/
• Formulier Aanvragen afschrift Burgerlijke stand:
  https://ediensten-burgerzaken.centric.eu/AfschriftBurgerlijkeStand/Login/
• Formulier Doorgeven vermissing reisdocument:
  https://ediensten-burgerzaken.centric.eu/VermissingReisdocument/Login/
• Formulier Huwelijk:
  https://ediensten-burgerzaken.centric.eu/Huwelijk/Agenda/

Ondersteunende technieken

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

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.