Issues:
Audit digitale toegankelijkheid website Bezoekersregistratie Tweede Kamer

(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: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. In deze melding staan twee img-element, bij de links 'Akkoord' en 'Niet akkoord'. Deze img-elementen hebben geen toegankelijk tekst alternatief. Dat is ook niet nodig, aangezien de begeleidende tekst voldoende informatie biedt. De afbeeldingen worden nu echter wel opgemerkt door hulpsoftware. Omdat de afbeelding niet genegeerd kan worden en een tekst alternatief mist, wordt bijvoorbeeld de bestandsnaam voorgelezen als tekst alternatief. Dit is storend en mogelijk verwarrend. Zorg er daarom voor dat hulpsoftware de afbeeldingen kan negeren door een leeg alt-attribuut toe te voegen aan de img-elementen.

Bevinding 2: Wanneer velden correct zijn ingevuld, verschijnt er een icoon van een groen vinkje. Dit vinkje heeft geen alternatieve tekst. Zorg ervoor dat informatieve afbeeldingen over een tekst alternatief beschikken, bijvoorbeeld door het CSS-icoon als img-element op de pagina te plaatsen met een alt-attribuut, of door screenreader-only tekst toe te voegen.

Bevinding 3: In de datumkiezer in het veld 'Bezoekdatum' kunnen bezoekers met pijl iconen naar een volgende of vorige maand navigeren. Deze afbeeldingen hebben geen alternatieve tekst, daarom is er geen toegankelijke naam voor de interactieve elementen. In het Engels zijn deze wel aanwezig, namelijk 'prev' en 'next'. Maak deze teksten toegankelijker, bijvoorbeeld door het aan te passen naar 'previous month' en 'next month.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 4: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. In de melding staat de visuele kop 'Cookies'. Deze tekst is echter niet als kop (met een h-element) opgemaakt. Bezoekers die gebruik maken van bijvoorbeeld voorleessoftware kunnen met een sneltoets of een koppenlijst door de koppen op een pagina navigeren, om zo snel een beeld te krijgen van de inhoud van de pagina. Dat kan echter niet als de kop alleen visueel opgemaakt is, in plaats van met de juiste semantische code. Gebruik daarom een kop opmaak, bijvoorbeeld het h2-element, om de tekst goed op te maken.

Bevinding 5: Wanneer de bezoeker met het toetsenbord of de muis focus plaatst op het veld 'Bezoekdatum' verschijnt een dialoogvenster. Dit venster wordt niet herkend door hupsoftware. Zorg ervoor dat aanvullende content die verschijnt door een actie van de bezoeker ook herkend wordt door voorleessoftware.

Bevinding 6: Onder het formulier staat tekst. Visueel is deze tekst opgedeeld in vier verschillende alinea's. In de code zijn de drie alinea's die betrekking hebben op persoonsgegevens opgemaakt als één alinea met dubbele br-elementen om visueel de aanwezigheid van verschillende alinea's te maken. Die visuele informatie uit de presentatie van deze tekst is daardoor niet beschikbaar voor hulpsoftware. Het advies is om deze tekst in vier verschillende alinea's te plaatsen.

Bevinding 7: Advies: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. Het div-element waarin de cookiemelding staat heeft geen naam en rol, er is daardoor geen onderscheid tussen de cookiemelding en de rest van de pagina. Overweeg dit aan te passen.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 8: Op pagina https://bezoekers.tweedekamer.nl/nl/ is het attribuut autocomplete="cc-given-name" gebruikt. Dat attribuut is bedoeld voor de voornaam op een betaalmiddel (cc staat voor credit card) en niet voor 'Voorletters (zoals vermeld in ID-bewijs of legitimatiebewijs)'. Het is in deze situatie daarom ook niet toegestaan om de cc-versie van autocomplete waarden te gebruiken. Het gebruik van autocomplete="cc-additional-name" is onjuist. Deze waarde is bedoeld voor aanvullende voornamen (ook wel doopnamen genoemd) op een betaalmiddel. Deze waarde is niet bedoeld voor een tussenvoegsel op een officieel ID. Zie https://www.w3.org/Translations/WCAG21-nl/#input-purposes voor een overzicht van geldige autocomplete waarden.
Bij het gebruik van autocomplete="family-name" is het tussenvoegsel onderdeel van de waarde die door hulpsoftware automatisch ingevuld wordt. Bij het gebruik van die waarde in het huidige formulier bestaat dus het risico dat het tussenvoegsel twee keer ingevuld wordt. Er zijn verschillende oplossingen mogelijk, één daarvan is om de achternaam niet te splitsen in twee invoervelden. Een andere optie is om beide invoervelden een duidelijke instructie te geven en op tussenvoegsel en op achternaam geen autocomplete te gebruiken. Het gebruik van autocomplete op de geboortedatum en het e-mailadres voldoet wel aan de eisen van dit succescriterium. Deze problemen komt ook voor op de Engelstalige versie van dit formulier.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 9: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. In de cookiemelding komt donkerblauwe tekst (HEX #121469) 'Lees meer over ons privacy- en cookiebeleid.' op een donkergrijze achtergrond (HEX #181919) voor. De contrastratio is hier 1,1:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 10: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. In de cookiemelding komt grijze tekst (HEX #3D3F3F) 'Wij gebruiken cookies om...' voor op een donkergrijze achtergrond (HEX #181919). De contrastratio is hier 1,6:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 11: Wanneer de velden voor geboortedatum toetsenbordfocus hebben, kleurt de achtergrond van de velden grijs (HEX #E0E7EA). De contrastratio van de grijze tekst van de placeholders (HEX #757575) is dan 3,6:1 waar dat minimaal 4,5:1 moet zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 12: Door de instellingen 'maximum-scale=1.0' en 'user-scalable=no' in de metadata van de websites, wordt voorkomen dat bezoekers die de website op een mobiel apparaat bekijken in kunnen zoomen op de website. Hierdoor kunnen zij de content op de pagina niet vergroten. Zorgt ervoor dat deze instellingen schalen en zoomen van tekst niet uitschakelen.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 13: Door de instellingen 'maximum-scale=1.0' en 'user-scalable=no' in de metadata van de websites, wordt voorkomen dat bezoekers die de website op een mobiel apparaat bekijken in kunnen zoomen op de website. Hierdoor kunnen zij de content op de pagina niet vergroten. Zorgt ervoor dat deze instellingen schalen en zoomen van tekst niet uitschakelen.

Bevinding 14: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. Wanneer bezoekers met schermgrootte 1280 bij 1024 inzoomen naar 400%, zijn de links om cookies te accepteren of te weigeren niet meer zichtbaar en bereikbaar. Zorg ervoor dat inzoomen niet leidt tot een verlies van informatie en functionaliteit.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 15: Op https://bezoekers.tweedekamer.nl/nl/ staat bovenaan een optie om taal van de pagina aan te passen. Op dit onderdeel is een aangepaste indicator van de toetsenbordfocus gebruikt. Die indicator van de toetsenbordfocus (HEX #E0E7EA) heeft met 1,3:1 niet voldoende contrast om te voldoen. Het gebruik van deze kleur is op de overige invoervelden geen probleem omdat er daar ook een zichtbare cursor geplaatst wordt.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 16: Na het invullen van twee cijfers in de invoervelden voor geboortedag of geboortemaand is het niet langer mogelijk om deze invoeren aan te passen. Het maken van een simpele typfout zorgt er nu voor dat gebruikers die alleen het toetsenbord kunnen gebruiken vast lopen. Dit is ook een probleem onder de eisen van succescriterium 3.2.2.

Bevinding 17: Advies: De datumkiezer in het veld 'Bezoekdatum' is niet bereikbaar en bedienbaar met het toetsenbord. Er is een toegankelijk alternatief aanwezig, want de bezoeker kan zelf een datum invullen. Idealiter is ieder interactief element zowel met de muis als met het toetsenbord bedienbaar.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 18: De titel van de pagina is 'Bezoekers Registratie | Invitado demo event'. Dit omschrijft de inhoud van de pagina onvoldoende, het is nu niet duidelijk dat het om een bezoek aan de Tweede Kamer gaat. Pas de titel aan, bijvoorbeeld naar 'Bezoekersregistratie Tweede Kamer'. Let erop dat de Engelse versie van het formulier ook een paginatitel in het Engels krijgt.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 19: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. Deze cookiemelding krijgt niet als laatste maar als eerste focus, waardoor de cookiemelding over de content van de pagina blijft staan. Zorg ervoor dat bezoekers direct de cookiemelding kunnen sluiten door deze bovenaan in de focusvolgorde te plaatsen.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 20: Advies: In de tekst 'De vergaderagenda van de Tweede Kamer is ...' staat de linktekst 'Klik hier'. Uit de context van de zin is het duidelijk waar de link naar verwijst, maar een bezoeker die gebruik maakt van een linklijst (via voorleessoftware) zal niet direct begrijpen waar de 'klik hier' naar verwijst. Dit geldt ook voor de linktekst 'website'. Overweeg om een duidelijker linkdoel te gebruiken, zoals 'actuele vergaderagenda van de Tweede Kamer'. Dit geldt ook voor de Engelstalige teksten. Dit doet zich ook voor op pagina https://bezoekers.tweedekamer.nl/nl/aangemeld.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 21: De enige tekst die gebruikt kan worden om de invoervelden voor geboortedag, geboortemaand en geboortejaar van elkaar te onderscheiden is de in die invoervelden gebruikte placeholdertekst. Die tekst moet daarom ook onderdeel worden van de toegankelijke naam van dat invoerveld. De namen van deze invoervelden worden op dit moment bepaald door de waarde van het aria-label op dat element. Het advies is dan ook om die tekst aan te vullen met 'DD', 'MM' en 'JJJJ'. Voor de Engelse versies van deze aria-labels geldt dat er Engelse tekst aangevuld met de Engelse placeholder moet komen te staan (bijvoorbeeld 'Birth year (YYYY)').

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 22: Wanneer de bezoeker de taal van de pagina instelt op Engels, is de titel van de pagina nog steeds 'Bezoekers Registratie | Invitado demo event'. Voorleessoftware zal deze titel in het Engels voorlezen, waardoor de tekst niet meer herkenbaar is. Vertaal de titel naar het Engels.

Bevinding 23: Wanneer de bezoeker de taal van de pagina instelt op Engels, is de alternatieve tekst van het logo nog steeds 'Logo Tweede Kamer'. Vertaal de alternatieve tekst naar het Engels.

Bevinding 24: Op pagina https://bezoekers.tweedekamer.nl/en/ zijn drie aria-labels gebruikt op de invoervelden voor 'Date of birth *'. De teksten in die aria-label attributen zijn nu Nederlands en voldoen niet. Het advies is om deze naar het Engels te vertalen.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Bevinding 25: Bovenaan de pagina https://bezoekers.tweedekamer.nl/nl/ staat een optie om de taal van de pagina aan te passen. Dit is gedaan met behulp van een select-element en zodra een gebruiker deze taal aanpast wordt er een andere pagina geladen. Dat gedrag is niet toegestaan onder de eisen van dit succescriterium. Er zijn verschillende manieren om dit op te lossen. Een daarvan is om deze keuzelijst te vervangen door een enkele link met een naam als "English version".

Bevinding 26: Op pagina https://bezoekers.tweedekamer.nl/nl/ wordt de toetsenbordfocus verplaatst naar het invoerveld voor geboortemaand zodra er bij geboortedag twee cijfers zijn ingevuld. Het gevolg is ook dat het voor toetsenbord gebruikers niet meer mogelijk is om die invoer aan te passen. Het maken van een simpele typfout maakt het nu voor gebruikers onmogelijk om dit formulier succesvol te verzenden. Dit komt ook voor bij het invoerveld voor geboortemaand en komt ook voor op de Engelse versie van dit formulier

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 27: Wanneer bezoekers het formulier proberen te versturen zonder alle velden ingevuld te hebben, verschijnen er foutmeldingen bij de velden, zoals '' Voorletters (zoals vermeld in ID-bewijs of legitimatiebewijs) * ' is een verplicht veld." Wanneer er geen correct e-mailadres in wordt gevoerd, is de melding 'Vul hier een geldig e-mailadres in." Dit zijn geen toegankelijke foutmeldingen. De foutmelding beschrijft nu wel welk veld niet correct is ingevuld, maar niet wélke fout de bezoeker heeft gemaakt. Bijvoorbeeld 'Het veld Voorletters (zoals vermeld in ID-bewijs of legitimatiebewijs) * is niet ingevuld. Dit is een verplicht veld.' Dat een veld verplicht is, of dat er een ander dataformat ingevuld moet worden, is een foutsuggestie zoals bedoelt bij succescriterium 3.3.3. Dit geldt ook voor de Engelstalige foutmeldingen.

Bevinding 28: Wanneer bezoekers één van de drie velden onder Geboortedatum niet invullen, verschijnt de melding 'Geboortedatum* is een verplicht veld'. Het is daarbij niet duidelijk wélk veld niet goed is ingevuld.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 29: Wanneer bezoekers iets invullen bij de velden onder 'Geboortedatum' verdwijnt de placeholder. Het is dan niet meer visueel duidelijk om welke informatie gevraagd wordt. Zorg er daarom voor dat labels en instructies duidelijk zichtbaar zijn én blijven, ook bij invoer, bijvoorbeeld door de instructies boven het invoerveld te plaatsen.

Bevinding 30: Verplichte velden worden aangegeven met een asterisk (*). Er staat echter nergens op de pagina wat een * betekent. Zorg er daarom voor dat deze informatie (bijvoorbeeld: Velden met een * zijn verplicht.) op de pagina staat, bij voorkeur vóór de formuliervelden. Dit geldt ook voor de Engelstalige pagina.

Bevinding 31: Advies: Het lijkt de bedoeling te zijn dat een gebruiker in het invoerveld 'Achternaam (zoals vermeld in ID-bewijs of legitimatiebewijs) *' een achternaam zonder tussenvoegsel gebruikt. Op het moment dat dat de bedoeling is moet dit expliciet vermeld worden. Niet alle gebruikers hebben voldoende overzicht om zich te realiseren dat dit de bedoeling is door het gebruik van een apart invoerveld voor tussenvoegsel. Het advies is om dit formulier te vereenvoudigen en maar één invoerveld voor achternaam te gebruiken.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 32: Wanneer de bezoeker met het toetsenbord of de muis focus plaatst op het veld 'Bezoekdatum' verschijnt een dialoogvenster. Dit venster wordt niet herkend door hupsoftware. Zorg ervoor dat dergelijke vensters een toegankelijke naam en rol hebben. Het gaat om het div-element met id="ui-datepicker-div".

Bevinding 33: Advies: Wanneer bezoekers de website voor het eerst openen verschijnt er een cookiemelding. De elementen waarmee bezoekers cookies accepteren of weigeren zijn nu opgemaakt als link, terwijl een button hier semantisch correct is. Gebruik bij voorkeur de correcte elementen (een link verwijst een bezoeker ergens heen, een button voert een actie uit). Een bijkomend advies is om de bediening van een cookiemelding die (gedeeltelijk) over andere content heen valt aan het begin van de focus volgorde te zetten zodat die het gebruik van de onderliggende pagina zo min mogelijk blokkeert.

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 proces Nederlands:
  https://bezoekers.tweedekamer.nl/nl/
• Home proces Engels:
  https://bezoekers.tweedekamer.nl/en/
• Bevestingspagina:
  https://bezoekers.tweedekamer.nl/nl/aangemeld

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.