Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid Kamerdebatten

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Kamerdebat
Datum 16 april 2025
Scope van de website Binnen de scope van het onderzoek valt:
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
    		•
    Conformiteitsdoel WCAG 2.1 niveau AA

    Uitgebreide toetsresultaten

    Aantal bevindingen: 28

    1. Waarneembaar

    1.1 Tekstalternatieven

    1.1.1 Niet-tekstuele content (Niveau A)

    Informatie over succescriterium 1.1.1 Niet-tekstuele content

    Uitkomst: Onvoldoende

    Bevinding 1: Op https://kda.staging.rijksapplicaties.nl/vragen wordt met een pictogram aangegeven of de vraag terug te luisteren is. Deze informatie is niet beschikbaar voor hulpsoftware. Voeg dit pictogram als afbeelding toe en geef deze alt-tekst. Hetzelfde komt vaker voor in de website, bijvoorbeeld op de pagina "Gebruikersbeheer" in https://kda.staging.rijksapplicaties.nl/beheer bij de knoppen met een vergrootglas icoon waarmee het modaal "Gebruiker bewerken" wordt geopend.

    Bevinding 2: Op de pagina https://kda.staging.rijksapplicaties.nl/beheer onder de knop "versie info" wordt met een pictogram aangegeven of iets zichtbaar is of niet. Deze informatie is echter niet beschikbaar voor hulpsoftware. Implementeer de pictogrammen als afbeeldingen, in plaats van icon fonts, en geef ze alt-tekst. Of gebruik gewoon "ja" of "nee" als tekst in die kolom.

    Bevinding 3: Op https://kda.staging.rijksapplicaties.nl/debatten kan de inhoud van de tabel middels de koppen van de tabel gesorteerd worden. Het pictogram hiervoor is een chevron, dat met JavaScript klikbaar is gemaakt, en wordt ingeladen middels een <i> element. Er wordt gebruik gemaakt van font-awesome. Door middel van icon fonts kan men via CSS letters en andere tekens toevoegen. Dit gebeurt via de CSS- pseudo-elementen ::before en ::after, die het gewenste pictogram laten zien. Tekst die via CSS wordt toegevoegd komt in de accessibility tree. Screenreaders spreken dat karakter dus uit, en niet het pictogram. Als het gebruikte karakter een andere betekenis heeft dan het icoon, kan dat verwarrend zijn voor gebruikers. Het et aria-label "Oplopend gesorteerd" of "Aflopend gesorteerd" op het i element zou dit probleem kunnen oplossen omdat een aria-label de inhoud van een element overschrijft, maar dan moet het i element een andere rol krijgen want aria-label mag alleen bij interactieve elementen zoals bijvoorbeeld links en buttons gebruikt worden.

    Bevinding 4: Op pagina https://kda.staging.rijksapplicaties.nl/voorbereid staan de logo's van de partijen die een vraag hebben voorbereid met een lege alt. Deze afbeeldingen hebben betekenis dus er is een alternatieve tekst nodig. Geef een alternatieve tekst aan de afbeeldingen, bijvoorbeeld "logo D66".

    1.3 Aanpasbaar

    1.3.1 Info en relaties (Niveau A)

    Informatie over succescriterium 1.3.1 Info en relaties

    Uitkomst: Onvoldoende

    Bevinding 5: Op https://kda.staging.rijksapplicaties.nl/ is het hoofdmenu opgemaakt als een lijst in de code. Echter is er geen <ul> element waarin de <li> elementen staan. Dit komt door het gebruik van role=navigation op het ul-element, hierdoor wordt de semantiek van lijst-elementen overschreven met een landmark rol. Verwijder het role attribuut en nest de lijst in een <nav>-element.

    Bevinding 6: Op https://kda.staging.rijksapplicaties.nl/debatten zijn de knoppen "Huidig" en "Gearchiveerd" in de code als een lijst opgemaakt. Echter is er geen <ul> element waarin de <li> elementen staan. Dit komt door het gebruik van role=navigation op het ul-element, hierdoor wordt de semantiek van lijst-elementen overschreven met een landmark rol. Verwijder de rol.

    Bevinding 7: Op https://kda.staging.rijksapplicaties.nl/debatten blijft de knop van een geselecteerd debat focus krijgen, waardoor het lijkt alsof deze gedeselecteerd kan worden. Visueel door het gebruik van een checkbox, lijkt dat ook visueel zo. Maar dat is niet mogelijk. Dit is verwarrend voor gebruikers van hulpsoftware en bemoeilijkt het selecteren van een debat met spraakbesturing. In plaats van knoppen, gebruik hier een radiobutton. Dat zorgt ervoor dat slechts 1 debat steeds gekozen kan worden, wat de bedoeling is in deze applicatie, en zorgt ervoor dat de status van gekozen of niet gekozen automatisch naar hulpsoftware toe wordt gecommuniceerd.

    Bevinding 8: Op https://kda.staging.rijksapplicaties.nl/vragen is er bij de vragen sprake van geneste tabellen. De kolom met C of T als inhoud maakt namelijk gebruik van een geneste tabel om C of T weer te kunnen geven. Geneste tabellen kunnen gecompliceerd zijn voor hulpsoftware. Gebruik 1 tabel om alle informatie te kunnen weergeven. Als een tabel gebruikt wordt voor opmaak kan role="presentation" er voor zorgen dat hulpsoftware de tabel informatie negeert

    Bevinding 9: Bij het toevoegen van een nieuwe vraag op https://kda.staging.rijksapplicaties.nl/vragen zijn er zaken die men kan aanvinken, onder andere "commissielid" en "thema". Visueel zijn het checkboxen, maar in de code zijn het knoppen en functioneel zijn het radiobuttons. Dat is verwarrend voor bezoekers, omdat dit een hele andere manier van bedienen met toetsenbord betekent. Ook heeft het impact op spraakbesturing. Semantisch is het ook niet correct: als je wil dat mensen iets selecteren, gebruik dan het native radiobutton element. Dat communiceert ook automatisch de status naar hulpsoftware toe. Gebruik dus radiobuttons in plaats van knoppen, en groepeer deze met fieldset en legend.

    Bevinding 10: In de lijst met vragen op https://kda.staging.rijksapplicaties.nl/voorbereid, is de vraag zelf opgemaakt met het strong-element. Dit is niet toegestaan, want dat is bedoeld om een woord (of enkele woorden) in een zin nadruk te geven. Het mag dus niet worden gebruikt om zaken vetgedrukt te maken of om koppen aan te duiden. Verwijder het element en maak de vraag op als een kop.

    1.4 Onderscheidbaar

    1.4.1 Gebruik van kleur (Niveau A)

    Informatie over succescriterium 1.4.1 Gebruik van kleur

    Uitkomst: Onvoldoende

    Bevinding 11: Als men op https://kda.staging.rijksapplicaties.nl/vragen een vraag opent kan men de knop "Vraag terugluisteren" gebruiken. Bij het indrukken verandert deze enkel van kleur, functiegewijs gebeurt er niets. Kies een HTML-element dat duidelijker uitdraagt wat de bedoeling is van de knop en wat de verandering van staat (ingeschakeld of niet) betekent. Deze informatie ontbreekt nu en heeft veel impact op hulpsoftware.

    1.4.10 Reflow (Niveau AA)

    Informatie over succescriterium 1.4.10 Reflow

    Uitkomst: Onvoldoende

    Bevinding 12: Op https://kda.staging.rijksapplicaties.nl/vragen springt de pagina steeds terug naar de originele grootte als men de tekst en viewport aanpast. Zorg ervoor dat deze pagina meeschaalt als de tekst en viewport aangepast worden.

    2. Bedienbaar

    2.1 Toetsenbordtoegankelijk

    2.1.1 Toetsenbord (Niveau A)

    Informatie over succescriterium 2.1.1 Toetsenbord

    Uitkomst: Onvoldoende

    Bevinding 13: De tooltip in de kolom 'Actief" op de pagina account domeinen in https://kda.staginzg.rijksapplicaties.nl/beheer laat enkel informatie zien bij muis. De tooltip kan niet worden geopend of gesloten met toetsenbord. Zorg ervoor dat de tooltip een knop is die daarna de informatie uitklapt. Zorg ervoor dat de knop een duidelijke toegankelijke naam heeft en vergeet niet om aria-expanded te gebruiken.

    Bevinding 14: Als men de vraag bekijkt op https://kda.staging.rijksapplicaties.nl/voorbereid, kan men het antwoord kopiëren. Deze knop is niet te bedienen met het toetsenbord, omdat er geen interactief element als een knop is gebruikt. Gebruik een knop om dit op te lossen.

    2.2 Genoeg tijd

    2.2.1 Timing aanpasbaar (Niveau A)

    Informatie over succescriterium 2.2.1 Timing aanpasbaar

    Uitkomst: Onvoldoende

    Bevinding 15: De pagina https://kda.staging.rijksapplicaties.nl/vragen ververst ongeveer elke 10 seconden. Voor bezoekers die met behulp van het toetsenbord navigeren komt de toetsenbordfocus dan weer op het eerst interactieve element op de pagina. Voor tijdslimieten geldt dat de bezoeker die moet kunnen uitzetten, aanpassen of verlengen. Dat is nu niet het geval.

    2.4.2 Paginatitel (Niveau A)

    Informatie over succescriterium 2.4.2 Paginatitel

    Uitkomst: Voldoende

    Bevinding 16: De paginatitel is uniek, maar we adviseren om achter de titel ook de naam van de website of organisatie te vermelden. Bijvoorbeeld "Beheer - kamerdebatten".

    2.4.3 Focus volgorde (Niveau A)

    Informatie over succescriterium 2.4.3 Focus volgorde

    Uitkomst: Onvoldoende

    Bevinding 17: Op https://kda.staging.rijksapplicaties.nl/ staat het hoofdmenu extra in de lees- en tabvolgorde doordat op de container <div class="navbar navbar-default"> het attribuut tabindex=0 wordt gebruikt. Voor niet-interactieve elementen is het niet toegestaan om zaken middels dit attribuut in de lees- en tabvolgorde te zetten. Het attribuut maakt een element door het toepassen ervan ook niet operabel of interactief. Verwijder het attribuut.

    Bevinding 18: Op https://kda.staging.rijksapplicaties.nl/debatten staan de koppen van de tabel in de lees- en tabvolgorde. Dit komt door het tabindex=0 attribuut. Voor niet-interactieve elementen is het niet toegestaan om zaken middels dit attribuut in de lees- en tabvolgorde te zetten. Het attribuut maakt een element door het toepassen ervan ook niet operabel of interactief. Verwijder het attribuut.

    3. Begrijpelijk

    3.1 Leesbaar

    3.1.2 Taal van onderdelen (Niveau AA)

    Informatie over succescriterium 3.1.2 Taal van onderdelen

    Uitkomst: Onvoldoende

    Bevinding 19: Op https://kda.staging.rijksapplicaties.nl/ wordt het hoofdmenu in mobile view gepresenteerd met een hamburgermenu. De knop daarvoor heeft als toegankelijke naam "Toggle navigation". Geef de knop een toegankelijke naam in het Nederlands.

    3.3 Assistentie bij invoer

    3.3.2 Labels of instructies (Niveau A)

    Informatie over succescriterium 3.3.2 Labels of instructies

    Uitkomst: Onvoldoende

    Bevinding 20: Op de pagina "Gebruikersbeheer" in https://kda.staging.rijksapplicaties.nl/beheer heeft het invoerveld om te filteren op naam geen label. Dit heeft impact op hulpsoftware als screenreaders en spraakbesturing. Voeg een label toe om dit op te lossen.

    Bevinding 21: Op de pagina "Gebruikersbeheer" in https://kda.staging.rijksapplicaties.nl/beheer heeft de checkbox om te filteren op gearchiveerde gebruikers geen label. Dit heeft impact op hulpsoftware als screenreaders en spraakbesturing. Voeg een label toe om dit op te lossen.

    4. Robuust

    4.1 Compatibel

    4.1.2 Naam, rol, waarde (Niveau A)

    Informatie over succescriterium 4.1.2 Naam, rol, waarde

    Uitkomst: Onvoldoende

    Bevinding 22: Op https://kda.staging.rijksapplicaties.nl/debatten kan de inhoud van de tabel middels de koppen van de tabel gesorteerd worden. Dit is mogelijk met de muis en in principe door tabindex=0 ook met het toetsenbord. Maar hulpsoftware krijgt niet mee dat dit interactief is, omdat er geen interactief element is gebruikt. Dit heeft vooral impact op spraakbesturing en kan verwarrend zijn bij gebruik van screenreaders. Voeg in elke kolom een knop in de <th> toe naast de naam voor de kolom en geef die knop een duidelijk label/toegankelijke naam. Dit speelt ook op https://kda.staging.rijksapplicaties.nl/dossier, https://kda.staging.rijksapplicaties.nl/beheer bij account domeinen

    Bevinding 23: Op https://kda.staging.rijksapplicaties.nl/debatten kan de inhoud van de tabel middels de koppen van de tabel gesorteerd worden. Het pictogram hiervoor is een chevron, dat met JavaScript klikbaar is gemaakt, en wordt ingeladen middels een <i> element. Met een aria-label attribuut wordt een toegankelijke naam/label gegeven. Dit is op HTML-elementen met een generieke rol (o.a ook div en span) niet toegestaan. Verwijder het attribuut en gebruik een knop (geef die knop uiteraard een toegankelijke naam). Dit komt ook voor op https://kda.staging.rijksapplicaties.nl/dossier en account domeinen op https://kda.staging.rijksapplicaties.nl/beheer.

    Bevinding 24: Op https://kda.staging.rijksapplicaties.nl zit het hoofdmenu in de volgende container: <div id="main-nav" class="navbar-collapse collapse" role="button" tabindex="0"> Deze knop heeft geen toegankelijke naam en de functie van de knop is onduidelijk, omdat deze niets met het hoofdmenu doet en ook niet de knop is voor het hamburgermenu in mobile view. Verwijder de rol en het tabindex-attribuut.

    Bevinding 25: Op https://kda.staging.rijksapplicaties.nl/debatten blijft de knop van een geselecteerd debat focus krijgen, waardoor het lijkt alsof deze gedeselecteerd kan worden. Visueel door het gebruik van een checkbox, lijkt dat ook visueel zo. Maar dat is niet mogelijk. Dit is verwarrend voor gebruikers van hulpsoftware en bemoeilijkt het selecteren van een debat met spraakbesturing. In plaats van knoppen, gebruik hier een radiobutton. Dat zorgt ervoor dat slechts 1 debat steeds gekozen kan worden, wat de bedoeling is in deze applicatie, en zorgt ervoor dat de status van gekozen of niet gekozen automatisch naar hulpsoftware toe wordt gecommuniceerd.

    Bevinding 26: Op https://kda.staging.rijksapplicaties.nl/vragen worden in veel knoppen slechts een pictogram gebruikt voor een visueel label. Dit is toegestaan als het pictogram door iedereen begrepen kan worden en het een standaard is, zoals het vergrootglas voor zoeken. Voor de knoppen op deze pagina is dat echter niet het geval en dient er ook tekst naast het pictogram in de knop te staan.

    Bevinding 27: Als men op https://kda.staging.rijksapplicaties.nl/vragen een vraag opent kan men de knop "Vraag terugluisteren" gebruiken. Bij het indrukken verandert deze enkel van kleur, functiegewijs gebeurt er niets. Kies een HTML-element dat duidelijker uitdraagt wat de bedoeling is van de knop en wat de verandering van staat (ingeschakeld of niet) betekent. Deze informatie ontbreekt nu en heeft veel impact op hulpsoftware.

    Bevinding 28: Op de pagina "Gebruikersbeheer" in https://kda.staging.rijksapplicaties.nl/beheer heeft de knop om de actieve filters te wissen geen toegankelijke naam. Dit heeft impact op screenreaders en spraakbesturing. Voeg een toegankelijke naam toe om dit op te lossen.

    Onderbouwing van de evaluatie

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

    Steekproef getoetste webpagina's

    Ondersteunende technieken

    Bronnen

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

    Geprint: 2025-05-22 15:05:37 v2.4-011