Rapport:
Audit digitale toegankelijkheid website Winkel van Kadaster

Uitkomst: Onvoldoende

Bevindingen: In de header van de website bevatten de hoofdmenulinks zoals "Situaties" submenu's. Deze links gebruiken pijliconen om aan te geven of de secties open of gesloten zijn. Hoewel de positie van het icoon deze status visueel overbrengt, is deze niet altijd programmatisch toegankelijk voor schermlezers. Er ontbreekt een tekstalternatief. Hoewel het aria-expanded-attribuut wordt gebruikt, wordt het pas aan de link toegevoegd nadat het submenu is geopend. Hierdoor kan de open- of dichtstatus van het submenu voor de eerste interactie en in de initiële staat niet programmatisch worden bepaald. Als het draaien of veranderen van een afbeelding iets betekent, moet die betekenis ook toegankelijk zijn voor blinde bezoekers. Een pijltje dat naar beneden wijst kan aangeven dat een sectie met inhoud nog dicht is, en een pijltje omhoog dat de inhoud zichtbaar is. Zorg ervoor dat schermlezers dit ook begrijpen. Hiervoor moet het aria-expanded-attribuut altijd aanwezig zijn en de huidige status nauwkeurig weergeven. Zie ook succescriterium 4.1.2.
Zie pagina https://www.cms2.acceptatie.kadaster.nl/winkel.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een knop met een "i"-icoon. Deze knop opent aanvullende content met een afbeelding. Deze aanvullende content bevat een afbeelding zonder alt-attribuut. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten. Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding blijft de waarde leeg, bij een informatieve afbeelding wordt een duidelijke alternatieve tekst toegevoegd.

Het logo bovenaan de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C toont de volledige tekst "BUCKAROO", maar de alt-tekst is "Webwinkel ACC". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die de afbeelding niet kunnen zien ook precies wat er staat.
Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: "BUCKAROO".

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.cms2.acceptatie.kadaster.nl/winkel, bij het invoeren van een adres in het zoekveld, verschijnt de kop "Geselecteerd perceel:", maar het kop-element ontbreekt. Het strong-element wordt gebruikt om het op een kop te laten lijken. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis.

Op de pagina https://www.cms2.acceptatie.kadaster.nl/winkelwagen staat een tabel waarin tabelkoppen ook als h3-koppen zijn gemarkeerd. Tabelkoppen (th-elementen) mogen niet tegelijkertijd gemarkeerd zijn als heading-elementen (h1-h6). Dit zorgt voor verwarring bij schermlezers en andere hulptechnologieën. Tabelkoppen hebben een andere functie dan koppen in de inhoud: zij labelen kolommen of rijen binnen de tabelstructuur. Door ze dubbel te markeren ontstaat onduidelijkheid over de documentstructuur en wordt de navigatie voor gebruikers van hulptechnologieën bemoeilijkt. Gebruik voor tabelkoppen alleen th-elementen met eventueel scope-attributen, en reserveer h-elementen voor de algemene inhoudsstructuur.

De pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C bevat een formulier. Het label-element met "Card number:" is niet expliciet gekoppeld aan het bijbehorende invoerveld. Het label-element verwijst naar een onjuist input-element. De label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Door deze koppeling lezen schermlezers het label voor als een bezoeker direct naar het invoerveld navigeert.
Hetzelfde probleem doet zich voor bij de "Expiration date:"-select-elementen. Let op: één label kan niet naar twee select-elementen verwijzen. Voeg aparte labels toe voor elk select-element.

De pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C bevat een formulier. Er is een groep select-elementen onder het label "Expiration date", maar dit label is niet programmatisch gekoppeld aan de bijbehorende groep. Hierdoor weten bezoekers die een schermlezer gebruiken niet dat er een relatie is tussen de groepslabel en de bijbehorende groep. Zorg dat de groepslabel in de code gekoppeld is aan de groep. Dit kan bereikt worden met fieldset- en legend-elementen.

Het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Eigendomsinformatie%20productvoorbeeld/94853973-7b55-ea04-25a4-18b8a383143e mist structuurcodes, waardoor de content niet toegankelijk is voor schermlezers. Bovendien kunnen wij de PDF hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de PDF-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.
Hetzelfde probleem doet zich voor in het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Hypotheekinformatie%20productvoorbeeld/52e0371d-c972-c137-1411-8f2826a3ee7f.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C mist een formulier met invoervelden voor persoonlijke informatie (bijvoorbeeld Name on card, Card number en andere) het autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres en telefoonnummer moeten het autocomplete-attribuut met de juiste waarde hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C bestaat de foutmelding in het formulier uit het veranderen van de randkleur van de invoervelden. Dit is niet toegankelijk voor bezoekers die de kleur helemaal niet kunnen zien of die kleurenblind zijn. Zorg ervoor dat informatie niet alleen met kleur wordt overgedragen. Gebruik daarnaast nog andere manieren om fouten of ontbrekende informatie door te geven, bijvoorbeeld met tekst of iconen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een knop met witte tekst op een blauwe (HEX #2A98FF) achtergrond. De kleurcontrastverhouding is te laag: 2,9:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een knop met een "i"-icoon. Deze knop opent aanvullende content met witte tekst op een grijze (HEX #808080) achtergrond, bijvoorbeeld "What is the CVC code?". De kleurcontrastverhouding is te laag: 3,9:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

In het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Eigendomsinformatie%20productvoorbeeld/94853973-7b55-ea04-25a4-18b8a383143e staan witte tekstcijfers op een blauwe (HEX #00889E) achtergrond, bijvoorbeeld "1", "2" enzovoort. De kleurcontrastverhouding is te laag: 4,2:1. Zorg dat het contrast minimaal 4,5:1 is.
Hetzelfde probleem doet zich voor in het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Hypotheekinformatie%20productvoorbeeld/52e0371d-c972-c137-1411-8f2826a3ee7f.

In het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Eigendomsinformatie%20productvoorbeeld/94853973-7b55-ea04-25a4-18b8a383143e staat grijze (HEX #B2B2B2) tekst op een witte achtergrond, bijvoorbeeld "BETREFT". De kleurcontrastverhouding is te laag: 2,1:1. Zorg dat het contrast minimaal 4,5:1 is.
Hetzelfde probleem doet zich voor in het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Hypotheekinformatie%20productvoorbeeld/52e0371d-c972-c137-1411-8f2826a3ee7f.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staan in het head-element van de HTML-code maximum-scale=1 en user-scalable=0. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen. Verwijder deze code.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina's van de website, zoals https://www.cms2.acceptatie.kadaster.nl/winkel, worden bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, is de knop met de tekst "Feedback" die een feedbackdialoogvenster opent niet zichtbaar en bedienbaar. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Op de pagina https://www.cms2.acceptatie.kadaster.nl/winkel, na het invoeren van een adres in het zoekveld, verschijnen producten met prijsknoppen die een dialoogvenster openen. In dit dialoogvenster, wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, bedekt de "x"-knop de tekst ernaast, bijvoorbeeld "Het product is toegevoegd aan uw winkelwagen.". Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.cms2.acceptatie.kadaster.nl/winkel, na het invoeren van een adres in het zoekveld, verschijnen knoppen met productnamen, bijvoorbeeld "Eigendomsinformatie". Wanneer op deze knoppen wordt geklikt, opent een modaal dialoogvenster met een sluitknop "x". De toetsenbordfocus op deze knop is lichtblauw (HEX #67BCDF) op een witte achtergrond. De contrastverhouding tussen deze kleuren is 2,1:1, wat lager is dan het vereiste minimum van 3,0:1.
Hetzelfde probleem doet zich voor in de dialoogvensters die openen bij het klikken op knoppen met prijzen, bijvoorbeeld "€ 3.70".
Op deze website wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een rand. Die aanpassing is met CSS toegevoegd. Voor de standaard focusindicator zijn geen contrasteisen in WCAG; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen, naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél. Dit moet ten minste 3,0:1 zijn.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een formulier. De randen van de invoervelden zijn grijs (HEX #CCCCCC) op een lichtgrijze (HEX #F5F5F5) achtergrond. De contrastverhouding is 1,5:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een knop met een grijs (HEX \#A3A3A3) "i"-icoon op een lichtgrijze (HEX #F5F5F5) achtergrond. De contrastverhouding is 2,3:1. Wanneer het contrast van een icoon op een knop lager is dan 3,0:1, is het icoon moeilijk waarneembaar voor bezoekers met een visuele beperking. Dit is met name een probleem wanneer het icoon de enige aanduiding is van de functie van de knop en er geen begeleidende tekst aanwezig is. Volgens dit succescriterium moeten niet-tekstuele elementen die essentieel zijn voor het begrip van de interface een minimaal contrast van 3,0:1 hebben ten opzichte van de achtergrond.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een knop met een "i"-icoon. Deze knop is niet toegankelijk met het toetsenbord. Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.cms2.acceptatie.kadaster.nl/winkel/404 is de titel "404 pagina - Kadaster.nl particulier" 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. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Wanneer correct ingesteld, wordt deze tekst bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina's. Zet een duidelijke tekst in het title-element van de pagina die de inhoud van de pagina beschrijft, bijvoorbeeld "Pagina niet gevonden, 404-fout - Kadaster.nl particulier".

Het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Eigendomsinformatie%20productvoorbeeld/94853973-7b55-ea04-25a4-18b8a383143e heeft een beschrijvende titel, maar deze wordt niet weergegeven in de titelbalk; in plaats daarvan wordt de bestandsnaam getoond. Als een PDF geopend wordt in een PDF-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.PDF. Maar als een documenttitel in de PDF-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het PDF-document.
Hetzelfde probleem doet zich voor in het PDF-document op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Hypotheekinformatie%20productvoorbeeld/52e0371d-c972-c137-1411-8f2826a3ee7f.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina's van de website, zoals https://www.cms2.acceptatie.kadaster.nl/winkel, opent een knop met de tekst "Feedback" een dialoogvenster. Momenteel kan de toetsenbordfocus het geopende dialoogvenster verlaten en naar de onderliggende pagina-inhoud gaan. Bij dit soort dialoogvensters moet de toetsenbordfocus goed worden ingesteld. Wanneer het venster actief is, moet de toetsenbordfocus binnen het venster blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het venster te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus eruit gaat.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.cms2.acceptatie.kadaster.nl/winkel, na het invoeren van een adres in het zoekveld, verschijnen knoppen met productprijzen, bijvoorbeeld "€ 3.70" om toe te voegen aan de winkelwagen. De toegankelijke namen van deze knoppen, zoals "€ 3.70", beschrijven niet goed welk product aan de winkelwagen wordt toegevoegd. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Dit kan worden opgelost door tekst met de productnaam toe te voegen aan de toegankelijke namen.
Hetzelfde probleem doet zich voor op de pagina https://www.cms2.acceptatie.kadaster.nl/winkelwagen bij het toevoegen van een nieuw product.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, op kleine schermen, opent de knop met een vergrootglasicoon de zoekbalk. De zichtbare tekst (placeholdertekst) van de zoekbalk is "Waar ben je naar op zoek?", en de toegankelijke naam van het input-element is "Zoeken". Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg ervoor dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin van de naam. De toegankelijke naam mag ook exact hetzelfde zijn als de zichtbare tekst.
Zie pagina https://www.cms2.acceptatie.kadaster.nl/winkel.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een invoerveld met de zichtbare tekst "Card number:" en de toegankelijke naam van het invoerveld ontbreekt. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg ervoor dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin van de naam. De toegankelijke naam mag ook gelijk zijn als de zichtbare tekst.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C ontbreekt het lang-attribuut op het HTML-element. Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is. Zorg ervoor dat het lang-attribuut aanwezig is en dat dit attribuut de taalcode bevat van de taal van de pagina. Zorg ervoor dat de taal van de pagina is ingesteld op Engels, zodat hulpsoftware de inhoud op de juiste manier kan voorlezen.

In de metadata van de PDF op https://www.cms2.acceptatie.kadaster.nl/documents/1953498/0/Hypotheekinformatie%20productvoorbeeld/52e0371d-c972-c137-1411-8f2826a3ee7f is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website staat een link met de zichtbare tekst "English". Het aria-label-attribuut wordt op deze link gebruikt en bevat tekst in het Engels: "Read Kadaster in English". Dit label wordt voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Geef in de code aan dat er een taalwisseling is, door in een omliggend HTML-element lang="en" toe te voegen. Een andere oplossing is om de tekst van het aria-label naar het Nederlands te vertalen, maar dat is in dit geval wellicht niet gewenst.
Zie pagina https://www.cms2.acceptatie.kadaster.nl/winkel.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C bevat een formulier. Na het verzenden van het formulier met ongeldige of onvolledige invoer worden er geen tekstuele foutmeldingen getoond om de bezoeker te informeren over de gevonden fouten. Dit succescriterium vereist dat wanneer een invoerfout automatisch wordt gedetecteerd, het foutieve item wordt geïdentificeerd en de fout in tekst aan de bezoeker wordt beschreven. Zorg voor duidelijke tekstuele foutmeldingen die het veld met de fout identificeren en het probleem beschrijven. Een voorbeeld van een goede foutmelding is "Het veld [NAAM] is niet (goed) ingevuld.".

Uitkomst: Onvoldoende

Bevindingen: Op de pagina's van de website, zoals https://www.cms2.acceptatie.kadaster.nl/winkel, opent een knop met de tekst "Feedback" een dialoogvenster. Dit dialoogvenster bevat een textarea-element met placeholdertekst "Waar was u naar op zoek?". Er ontbreekt echter een permanent label; de placeholdertekst wordt als label gebruikt. Invoervelden moeten een label hebben dat altijd zichtbaar is. Hier kan dus niet een placeholdertekst voor worden gebruikt, want die verdwijnt zodra de bezoeker begint te typen.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een formulier met twee select-elementen en één label "Expiration date:". Volgens de HTML-specificatie https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-label-element kan één label niet tegelijkertijd aan twee select-elementen worden gekoppeld. Voeg aparte labels toe voor elk select-element, bijvoorbeeld maand en jaar. Deze select-elementen kunnen in een fieldset-element worden geplaatst, en de tekst "Expiration date:" in een legend-element. Andere oplossingen zijn ook mogelijk.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een formulier. Sommige velden zijn verplicht en bevatten een *-symbool (asterisk) in het label. Er is geen uitleg over wat dit symbool betekent. Dit kan nuttig zijn voor bezoekers met cognitieve beperkingen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website bevat het hoofdmenu links zoals "Situaties" die submenu's openen en sluiten, maar een blinde bezoeker krijgt niet altijd informatie of de submenu's open of gesloten zijn. Hoewel het aria-expanded-attribuut wordt gebruikt, wordt het pas aan de link toegevoegd nadat het submenu voor de eerste keer is geopend. Hierdoor kan de open- of dichtstatus van de submenu's voor de eerste interactie en in de initiële staat niet programmatisch worden bepaald. Als er een link is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu (zichtbaar of verborgen) kunnen bepalen. Hiervoor moet het aria-expanded-attribuut altijd aanwezig zijn en de huidige status nauwkeurig weergeven.
Zie pagina https://www.cms2.acceptatie.kadaster.nl/winkel.

In de header van de website bevat het hoofdmenu links zoals "Situaties" die submenu's openen en sluiten. Deze links gebruiken het attribuut aria-haspopup="true", wat aangeeft dat het activeren van een link een popupmenu opent. De submenu's zijn echter geïmplementeerd als gewone navigatielijsten en niet als ARIA-menuwidgets. Hierdoor kunnen hulptechnologieën menuspecifieke rollen en toetsenbordgedrag verwachten die niet aanwezig zijn. Het gebruik van aria-haspopup zonder het bijbehorende menupatroon te implementeren is misleidend voor hulptechnologieën. Als het de bedoeling is om standaard navigatie-submenu's te presenteren, moet aria-haspopup="true" worden verwijderd en kunnen native HTML-semantiek (nav, ul, li) worden gebruikt. Als een ARIA-menuwidget bedoeld is, moet het volledige ARIA-menupatroon, inclusief de juiste rollen en toetsenbordinteractie, consistent worden geïmplementeerd.
Hetzelfde probleem doet zich voor bij de links in de submenu's die volgende submenu's openen.
Zie pagina https://www.cms2.acceptatie.kadaster.nl/winkel.

De pagina https://www.cms2.acceptatie.kadaster.nl/winkel bevat het zoekveld "Zoek op straatnaam en huisnummer of op postcode.". Het zoekveld is een element met role="combobox". Wanneer er geen resultaten worden gevonden, toont de suggestielijst de melding: "Geen resultaat gevonden". Het element met role= "listbox" heeft echter geen toegankelijke naam, waardoor het voor gebruikers van hulptechnologieën onduidelijk kan zijn wat deze lijst voorstelt. Zorg ervoor dat de listbox een toegankelijke naam heeft, bijvoorbeeld door aria-label of aria-labelledby te gebruiken.

De pagina https://www.cms2.acceptatie.kadaster.nl/winkel bevat het zoekveld met placeholdertekst "Adres of postcode + huisnummer" in het tabblad "Adres zoeken". Dit zoekveld is geïmplementeerd als een combobox (role="combobox"). Het aria-haspopup="listbox" is aanwezig in de code, maar het is toegepast op een div-element dat de combobox omhult, in plaats van op het element met role="combobox" zelf. Het aria-haspopup-attribuut moet worden toegepast op het element met role="combobox", zodat hulptechnologieën correct aankondigen dat het invoerveld een popup heeft en welk type popup het is.
Hetzelfde probleem doet zich voor bij het zoekveld met placeholdertekst "Kadastrale aanduiding" in het tabblad "Kadastrale aanduiding zoeken".

De pagina https://www.cms2.acceptatie.kadaster.nl/winkel bevat het zoekveld met placeholdertekst "Adres of postcode + huisnummer" in het tabblad "Adres zoeken". Dit zoekveld is geïmplementeerd als een combobox (role="combobox") en toont suggesties in een dropdown-lijst terwijl de bezoeker typt. Het element met de dropdown-lijst heeft role="listbox", maar deze listbox heeft geen toegankelijke naam. Hierdoor kunnen gebruikers van hulptechnologieën het doel van de lijst mogelijk niet bepalen wanneer deze wordt aangekondigd. Er is geprobeerd een toegankelijke naam te geven met het aria-labelledby-attribuut. Het element waarnaar verwezen wordt, bestaat echter niet in de code. Zorg ervoor dat het element met role="listbox" een toegankelijke naam heeft. Dit kan worden gedaan met aria-labelledby of aria-label. Als aria-labelledby wordt gebruikt, moet het element waarnaar verwezen wordt in de code bestaan en betekenisvolle tekst bevatten die het doel van de lijst beschrijft. Hierdoor kunnen hulptechnologieën de listbox correct aankondigen en bezoekers helpen begrijpen wat de lijst voorstelt.
Hetzelfde probleem doet zich voor bij het zoekveld met placeholdertekst "Kadastrale aanduiding" in het tabblad "Kadastrale aanduiding zoeken".

De pagina https://www.cms2.acceptatie.kadaster.nl/winkel bevat het zoekveld met placeholdertekst "Adres of postcode + huisnummer" in het tabblad "Adres zoeken". Het zoekveld is een element met role="combobox". Wanneer er geen resultaten worden gevonden, wordt de tekst "Geen resultaat gevonden" weergegeven in de suggestielijst. Deze melding is echter geplaatst in een li-element dat geen passende ARIA-rol heeft. Hierdoor ontbreekt de vereiste onderliggende ('child') rol (role="option") voor een listbox. Schermlezers kunnen deze melding daardoor niet correct aankondigen als onderdeel van de combobox-resultaten, waardoor het voor gebruikers onduidelijk is dat er geen resultaten beschikbaar zijn. Voor sommige ARIA-rollen is een combinatie van boven- en onderliggende rollen ('parent' en 'child') nodig. Dit is voor elke rol precies beschreven in WAI-ARIA. Als deze rollen niet (volledig) in de code staan, werken de elementen niet zoals de ontwikkelaar het bedoeld heeft. En als maar een deel van de verplichte rollen aanwezig is, heeft dat geen enkel (positief) effect op de toegankelijkheid.
Hetzelfde probleem doet zich voor bij het zoekveld met placeholdertekst "Kadastrale aanduiding" in het tabblad "Kadastrale aanduiding zoeken".

Op de pagina's van de website, zoals https://www.cms2.acceptatie.kadaster.nl/winkel, opent een knop met de tekst "Feedback" een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam. Een blinde bezoeker heeft deze naam nodig om de inhoud van het dialoogvenster te begrijpen. Hulpsoftware kan daardoor niet doorgeven wat de inhoud van het dialoogvenster is. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.

Op de pagina https://www.cms2.acceptatie.kadaster.nl/winkel, na het invoeren van een adres in het zoekveld, verschijnen producten met prijsknoppen, bijvoorbeeld "€ 3.70". Wanneer op deze knoppen wordt geklikt, opent een modaal dialoogvenster zonder toegankelijke naam. Een bezoeker die een schermlezer gebruikt, heeft deze naam nodig om de inhoud van het dialoogvenster te begrijpen. Hulpsoftware kan daardoor niet doorgeven wat de inhoud van het dialoogvenster is. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.
Hetzelfde probleem doet zich voor bij dialoogvensters die openen met productnaamknoppen, bijvoorbeeld "Eigendomsinformatie".

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C heeft het invoerveld "Card number:" geen toegankelijke naam. 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 dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C, onder "Expiration date:", staan dropdown-lijsten (select-elementen). De toegankelijke namen ontbreken.
Hierdoor is het element niet toegankelijk. Geef het select-element een toegankelijke naam.
Hoe dit moet, staat hierboven beschreven, zie 3.3.2.

Op de pagina https://testcheckout.buckaroo.nl/html/?brq_pttk=08641A1A7C01492AA32E0474C764D92C staat een knop met een "i"-icoon. Deze knop heeft niet de juiste toegankelijke rol en status (open-dicht). Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Zorg ervoor dat dit element de juiste toegankelijke rol heeft. De beste oplossing is het gebruik maken van standaard HTML-elementen.
De status van de knop kan worden getoond door het aria-expanded-attribuut toe te passen op de knop die opent en sluit, of door visueel verborgen tekst toe te voegen die de status van de sectie beschrijft.

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.cms2.acceptatie.kadaster.nl/winkel bevat het zoekveld met placeholdertekst "Adres of postcode + huisnummer" in het tabblad "Adres zoeken". Het zoekveld is een element met role="combobox". Wanneer er geen resultaten worden gevonden, wordt de tekst "Geen resultaat gevonden" weergegeven in de suggestielijst. Dit is een statusbericht, maar wordt niet als dusdanig voorgelezen. Dat zou wel moeten gebeuren. Deze melding is namelijk een statusbericht. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen.
Hetzelfde probleem doet zich voor bij het zoekveld met placeholdertekst "Kadastrale aanduiding" in het tabblad "Kadastrale aanduiding zoeken".

Op de pagina's van de website, zoals https://www.cms2.acceptatie.kadaster.nl/winkel, opent een knop met de tekst "Feedback" een dialoogvenster. In dit dialoogvenster toont een formulier het statusbericht "Bedankt voor uw mening" na verzending zonder dat de pagina opnieuw laadt, en de focus wordt niet naar het bericht verplaatst. De pagina laadt niet opnieuw en de toetsenbordfocus wordt niet naar de melding verplaatst. Daarom is extra code nodig zodat schermlezers het statusbericht automatisch voorlezen zodra het verschijnt. Voeg 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/WCAG21/Techniques/aria/ARIA22.

Op de pagina https://www.cms2.acceptatie.kadaster.nl/klant staat een formulier. Wanneer er formulierfouten optreden, verschijnt er een foutmelding, maar de melding wordt niet aangekondigd door een schermlezer. Bijvoorbeeld "Het ingevoerde e-mailadres is geen geldig adres. Probeer het opnieuw in de vorm: mailto:gebruiker@mail.nl". Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer. Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
Hetzelfde probleem doet zich voor op de pagina https://www.cms2.acceptatie.kadaster.nl/betalen bij het verzenden van het formulier zonder het selectievakje aan te vinken, met de foutmelding "Het veld 'Ik accepteer de algemene voorwaarden' is nog niet ingevuld. Klik op het keuzevakje om de algemene voorwaarden te accepteren".