Rapport:
Audit digitale toegankelijkheid website De Nederlandsche Bank

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepage https://www.dnb.nl/ , staat een logo. De volledige tekst van het logo is "De Nederlandsche Bank Eurosysteem". De alternatieve tekst is "De Nederlandsche Bank - Home". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Bovendien moet vermeld worden dat het om een logo gaat. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat en dat dit een officiële website van deze organisatie is. Voeg een alt-tekst toe die het woord "logo" en de volledige tekst van het logo bevat. Hetzelfde probleem wordt waargenomen in de footer.

In de header van de website staat een vergrootglaspictogram dat functioneert als een knop om het zoekveld te openen. De alt-tekst van dit pictogram is "Zoek". Wanneer een bezoeker op de knop klikt, verandert het vergrootglaspictogram in een "X"-pictogram, omdat de functie van de knop wijzigt. In plaats van het zoekveld te openen, sluit de knop het zoekveld nu. Deze functieverandering wordt echter niet doorgevoerd in het tekstalternatief van het pictogram. De alt-tekst van het "X"-pictogram blijft "Zoek", wat niet correct de nieuwe functie van de knop weergeeft. Als een knop alleen uit een afbeelding bestaat, moet de alt-tekst van de afbeelding de functie van de knop beschrijven. Op het moment dat die functie verandert, moet de alt-tekst ook veranderen. Zorg ervoor dat de alt-tekst mee verandert met de functie van de knop.

Op pagina https://www.dnb.nl/statistieken/dashboards/ staan blokjes met links met decoratieve afbeeldingen. Sommige afbeeldingen zijn niet verborgen voor de schermlezer omdat ze alt-tekst bevatten die de tekst van de koptekst van het blok dupliceert. Zie bijvoorbeeld de afbeelding met alternatieve tekst: "Duurzaamheid financiële sector." in het blok met de kop "Duurzaamheid financiële sector".

Op de homepagina https://www.dnb.nl/ onder het navigatiemenu staan blokjes met links. Elk blok bevat een afbeelding. Deze afbeeldingen hebben tekstalternatieven en zijn daarom niet verborgen voor schermlezers. Het is de vraag of de afbeeldingen extra informatie bevatten of dat ze als decoratief beschouwd kunnen worden. Bijvoorbeeld de alternatieve tekst bij de tweede afbeelding, "Chris Figree" voegt niets toe aan de titel van de link. Maak per afbeelding de overweging of het een informatieve of decoratieve afbeelding is. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt=""). Zie hetzelfde probleem onder het kopje "Uitgelicht". Dit komt ook op andere pagina’s voor. Op pagina https://www.dnb.nl/voor-de-sector/open-boek-toezicht/ staan decoratieve afbeeldingen met tekstalternatieven onder het kopje “Open Boek Toezicht”. Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 bevatten de nieuwsberichten decoratieve afbeeldingen met hetzelfde probleem. Op pagina https://www.dnb.nl/voor-de-sector/open-boek-toezicht/sectoren/aanbieders-cryptodiensten/toetsingen-aanbieders-cryptodiensten/ staan artikelen met decoratieve afbeeldingen in de rubriek "Interessante artikelen". Dit zijn slechts enkele voorbeelden.

Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken. Deze grafieken bestaan uit SVG-afbeeldingen. Dergelijke complexe afbeeldingen zijn moeilijk doormiddel van een tekstalternatief te beschrijven, een tekstalternatief heeft geen opmaakmogelijkheden. In dit geval zou een toegankelijk alternatief nodig zijn met de data in tabelvorm. Dat alternatief is ook beschikbaar, onder de “i” knop staat een link, bijvoorbeeld naar de “Bron: Tabel 5.2.6”. De “i” knop is echter niet te bedienen met behulp van het toetsenbord, deze informatie is dus niet toegankelijk. Zorg voor een toegankelijke verwijzing naar een toegankelijk alternatief met de informatie uit de figuur.
PDF: Het PDF-document https://www.dnb.nl/media/whylcxvh/agenda-steven-maijoor-oktober-2024.pdf bevat het logo van de Nederlandse Bank dat is gecodeerd als artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor de schermlezer. De informatie in deze afbeeldingen is ontoegankelijk voor blinde bezoekers en gebruikers van screenreaders. Informatieve afbeeldingen moeten via een figuur-tag worden geplaatst en worden voorzien van een beschrijving (alt-tekst).

PDF: In het PDF-document https://www.dnb.nl/media/whylcxvh/agenda-steven-maijoor-oktober-2024.pdf staat een foto van een spreker zonder tekstalternatief. Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/betrouwbare-financiele-sector/toezicht-op-financiele-instellingen/ staat een video. Tekst en logo's verschijnen op verschillende momenten in de video, bijvoorbeeld rond 0:01 en 1:32, maar er is geen media-alternatief of audiobeschrijving.
Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/betrouwbare-financiele-sector/toezicht-op-financiele-instellingen/ staat een video. Tekst en logo's verschijnen op verschillende momenten in de video, bijvoorbeeld rond 0:01 en 1:32. Bij succescriterium 1.2.3 zijn video’s beschreven waar audiodescriptie of een media-alternatief ontbreekt. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie namelijk verplicht (niveau AA), waar ruimte is in het standaard audiospoor om deze informatie te geven. Er is in deze video voldoende ruimte hiervoor aanwezig, en dus moet de audiodescriptie toegevoegd worden. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepage https://www.dnb.nl/, bevindt zich een navigatiemenu. Dit menu bevat knoppen die submenu's openen, zoals "Thema's", "Voor de sector", "Statistieken" en "Over ons". De submenu's bevatten op hun beurt knoppen die weer andere submenu's openen. Zo is er bijvoorbeeld in het submenu "Thema's" een knop "Actuele economische vraagstukken". Wanneer deze knop wordt geselecteerd, verschijnt er in het geopende submenu een link met de zichtbare tekst "Actuele economische vraagstukken". Deze tekst fungeert als een koptekst, maar de juiste markering ontbreekt. Dit geldt ook voor andere submenu's. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Hetzelfde probleem doet zich voor in de header wanneer de website wordt bekeken op kleinere schermen. Er is een knop met drie horizontale lijnen die een navigatiemenu opent. In dit menu bevinden zich knoppen, zoals "Nieuws", die submenu's openen. Wanneer een bezoeker op de knop "Nieuws" klikt, opent een submenu met een knop met de tekst "Nieuws". Deze tekst fungeert als een kop, maar is niet als zodanig gemarkeerd. Dit probleem doet zich ook voor in andere submenu's.

In de header van de website, bijvoorbeeld op de homepage https://www.dnb.nl/ , staat een vergrootglas waarmee een zoekveld wordt geopend. Wanneer een bezoeker gegevens invoert in dit zoekveld, verschijnt er een lijst met suggesties. In deze lijst staat de tekst "Pagina resultaten" die niet is gemarkeerd als een kop.
Zie hetzelfde probleem in het zoekveld onder de kop "Goedemiddag! Waarmee kunnen we u op weg helpen?" op de homepagina https://www.dnb.nl/ .
De tekst die niet is gemarkeerd als een kop staat ook onder het zoekveld op de homepagina https://www.dnb.nl/ en op de pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 . Zie de tekst "Voorbeelden zoektermen".
Op de pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staat, als deze wordt bekeken op kleine schermen, een knop met de tekst "Filters". Als een bezoeker op deze knop klikt, worden filters weergegeven met de tekst "Filters" bovenaan. Deze tekst "Filters" is niet gemarkeerd als een koptekst.

In de header van de website, bijvoorbeeld op de homepagina https://www.dnb.nl/ , staat een knop "Contact" waarmee verborgen inhoud wordt geopend. In deze inhoud staan teksten die niet als koppen zijn gemarkeerd: "Postadres" en "Bezoekadres".

Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken. Elke grafiek bevat een kop die niet als zodanig is gemarkeerd. Bijvoorbeeld de tekst "Spaargeld van Nederlandse huishoudens". Er staat ook de tekst "Meer informatie" in het gedeelte onder de grafieken. Deze tekst is ook niet gemarkeerd als een kop.

Op pagina https://www.dnb.nl/wet-open-overheid-woo/indienen-woo-verzoek/woo-formulier/ staat een formulier. Binnen het formulier zijn de volgende teksten niet gemarkeerd als koppen: "Verzoek uploaden", "Bent u op zoek naar documenten afkomstig uit een specifieke periode?", Denkt u dat uw Woo-verzoek betrekking heeft op informatie die bij een andere overheidsinstelling dan DNB aanwezig is?".

Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 zijn er secties met inhoud die kan worden in- en uitgeklapt (de zogenaamde accordeons), bijvoorbeeld "Type informatie". De teksten die de verborgen secties openen en sluiten, missen de rol van een kop. De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3. Dit kan opgelost worden door een h-element te gebruiken met daarbinnen een button-element.

Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staat paginaring onder de zoekresultaten. Het huidige paginanummer ziet er visueel anders uit dan de andere, maar dit onderscheid wordt niet af te lezen in de HTML. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Dit kan opgelost worden door een verborgen tekst aan de link toe te voegen, of door het aria-current-attribuut te gebruiken.
Hetzelfde probleem wordt waargenomen op de pagina https://www.dnb.nl/openbaar-register/?p=1&l=20.

Op pagina https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ wordt het strong-element gebruikt voor de opmaak van teksten onder de kop "Over dit artikel". De hele zin wordt opgemaakt met een strong-element: "Dit is deel 1: overheidsschulden." Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS.

Op pagina https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ staat een kop "Lenen gaat door". In deze kop worden het heading-element en het strong-element gebruikt. Verwijder het strong-element.

Op pagina https://www.dnb.nl/voor-de-sector/open-boek-toezicht/sectoren/aanbieders-cryptodiensten/toetsingen-aanbieders-cryptodiensten/ is het em-element gebruikt in het kopje "Beleidsregel Geschiktheid". Het em-element is bedoeld om woorden extra nadruk te geven. Het heeft daarmee een andere semantische waarde dan een kop. Dit element moet dan ook niet gebruikt worden voor koppen. Markeer tussenkopjes als bijvoorbeeld h3-kopjes voor de juiste structuur.

Op pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ worden onder het kopje "Bezoek- en postadres" de volgende kopjes gemarkeerd met een strong-element: "Bezoekadres" en "Postadres". Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Hetzelfde probleem wordt waargenomen op de volgende pagina's. Op pagina https://www.dnb.nl/openbaar-register/?p=1&l=20 staan de volgende koppen in de inhoud die wordt geopend wanneer de bezoeker op de knop "Registers van DNB" klikt: "Vergunningen en toezicht" en "Zoeken in het openbaar register". Op pagina https://www.dnb.nl/pagina-niet-gevonden/ in de rubriek "Bezoek- en postadres" staan de teksten "Bezoekadres" en "Postadres".

Op pagina https://www.dnb.nl/wet-open-overheid-woo/indienen-woo-verzoek/woo-formulier/ staat een formulier. Als het formulier wordt verzonden met lege velden of met onjuiste gegevens, verschijnen er foutmeldingen. De schermlezer in de "formulier"-modus leest niet tussen de invoervelden en zal deze foutmeldingen overslaan. De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Op pagina https://www.dnb.nl/wet-open-overheid-woo/indienen-woo-verzoek/woo-formulier staat in het formulier een select-element onder het label "Bent u op zoek naar specifieke documentsoorten?". Als een bezoeker "Ja" selecteert, verschijnt een groep selectievakjes. Boven deze groep staat de tekst "Welke documentsoorten betreft dat?". De relatie tussen deze selectievakjes en de relatie met de groepslabel (de vraag) kan niet programmatisch worden bepaald. 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 worden gebruikt. Plaats hierin de tekst “Welk documentsoorten betreft dat ?”.

Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken. Deze grafieken bevatten een interactief element met een pictogram van drie horizontale lijnen. Deze knop opent een menu. Het menu staat echter ver van de knop in de HTML-code. Deze knop en het bijbehorende menu zijn niet programmatisch met elkaar verbonden. Het ontbreken van een programmatische koppeling betekent dat er geen duidelijke indicatie is dat het menu bij de knop hoort. Wanneer de knop wordt geactiveerd, worden gebruikers van schermlezers mogelijk niet geïnformeerd over de aanwezigheid van het menu of de bijgewerkte status (geopend/gesloten), wat tot verwarring leidt.
Om dit te verbeteren, moet het triggering element programmatisch worden gekoppeld aan het menu met behulp van aria-controls, en de zichtbaarheid van het menu moet worden overgebracht via aria-expanded.

PDF: Het PDF-document https://www.dnb.nl/media/43cnkobx/visie_op_toezicht_2021_2024.pdf heeft geen codes en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken, kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

PDF: In het PDF-document https://www.dnb.nl/media/whylcxvh/agenda-steven-maijoor-oktober-2024.pdf zijn de kop "Agenda Steven Maijoor", de tekst eronder en de afbeelding van een persoon geplaatst in een opmaaktabel. Wanneer een tabel wordt gebruikt voor opmaak, mogen er geen th-tags aanwezig zijn. In dit geval zijn de th-tags echter wel gebruikt. De th-tags mogen niet aanwezig zijn in een lay-outtabel. Dit kan verwarrend zijn voor blinde bezoekers omdat ze de relatie tussen de cellen niet correct interpreteren. Pas de tabel aan en zorg ervoor dat de teksten "Agenda Steven Maijoor" en "Oktober 2024" worden gemarkeerd als koppen. Onder aan de pagina staat een lege h2-tag. Verwijder deze tag.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 is de volgorde van de HTML-elementen in de nieuwsartikelen momenteel als volgt: afbeelding, kop, tijd en alinea tekst. Wanneer een nieuwsartikel een categorie bevat, zoals bij het artikel "Achtergrond", verandert de volgorde naar: afbeelding, categorie, kop, tijd en alinea tekst. In beide gevallen staat de kop van het artikel niet op de eerste plek in de HTML. Als deze artikelen van boven naar beneden worden voorlezen door een schermlezer, is niet duidelijk welke afbeeldingen en categorieën bij welk artikel horen. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud (afbeeldingen en tekst) die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Laat hiervoor de alt-tekst leeg (alt="" bij het img-element). Dan wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan correct. Hetzelfde probleem doet zich ook voor op andere pagina's. Op pagina's https://www.dnb.nl/voor-de-sector/open-boek-toezicht/sectoren/aanbieders-cryptodiensten/toetsingen-aanbieders-cryptodiensten/ en https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ in de rubriek "Interessante artikelen". Op pagina https://www.dnb.nl/statistieken/dashboards/ zie het blok met links. Meer voorbeelden zijn niet genoemd.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/wet-open-overheid-woo/indienen-woo-verzoek/woo-formulier/ staat een formulier met invoervelden waarmee persoonlijke gegevens worden verzameld. Het attribuut autocomplete ontbreekt. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut 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. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. 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 pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken waarin de kleur van informatieve lijnen niet voldoende contrasteert tegen de achtergrond. Zie bijvoorbeeld de grafiek "Spaargeld van Nederlandse huishoudens". Deze grafiek gebruikt blauwe (HEX #2FB5E4) en grijze (HEX #8399AD) kleuren. Het contrast is 1,2:1. Het contrast tussen interactieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepagina https://www.dnb.nl/ , staat een vergrootglaspictogram waarmee het zoekveld wordt geopend. In dit zoekveld staat een placeholder-tekst: "Uw zoekopdracht". Deze plaatshoudertekst is donkergrijs (HEX #757575). De achtergrond is lichtgrijs (HEX #DCDEE5). Het kleurcontrast is 3,4:1.
Als een zoekveld een zoekicoon heeft met een laag contrast (minder dan 3,0:1 ten opzichte van de achtergrond), en er is ook geen tekstueel label met voldoende contrast, dan moet de placeholdertekst voldoende contrast hebben. Dat moet dan minimaal 4,5:1 zijn. Dit geldt ook als er in de placeholdertekst een belangrijke instructie staat die niet op een andere manier aanwezig is.

Op alle pagina's van de website wordt de rode kleur (HEX #D44240) gebruikt. In combinatie met de lichtgrijze kleur is het kleurcontrast te laag. Dit moet minstens 4,5:1 zijn.

In de header van de website, bijvoorbeeld op de homepagina https://www.dnb.nl/ , staat een vergrootglaspictogram waarmee een zoekveld wordt geopend. Wanneer een bezoeker gegevens invoert in dit zoekveld, verschijnt de suggestielijst. Als de bezoeker met de pijltjestoets naar de opties gaat, staat de rode (HEX #D44240) tekst van de optie op de grijze (HEX #E7EAF3) achtergrond. Het kleurcontrast is 3,8:1. Zie hetzelfde probleem in het zoekveld onder de kop "Goedemiddag! Waarmee kunnen we u op weg helpen?".
Dezelfde combinatie met een laag kleurcontrast komt voor op de pagina https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ onder het kopje "Weerbaarheid". Zie de link tekst "hier".

Op de homepagina staan links onder het kopje "Actuele vraagstukken". Wanneer deze links toetsenbordfocus krijgen of er met de muis overheen worden bewogen, wordt de tekst van de links rood (HEX #D44240) en de achtergrond is lichtgrijs (HEX #FAFAFC). Het contrast is 4,3:1. Ik zie hetzelfde probleem komt voor in links op andere pagina's.

Op pagina https://www.dnb.nl/voor-de-sector/open-boek-toezicht/ onder de kop "Wet- en regelgeving" staat een link met rode tekst "www.wetten.overheid.nl" op de lichtgrijze (HEX #FAFAFC) achtergrond. Deze rode links komen ook op andere pagina's voor.

Op pagina’s https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 en https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ bevindt zich een zijmenu met links naar sociale media. In dit menu staat ook een knop met drie punten, waarmee een dialoogvenster wordt geopend. Dit dialoogvenster bevat lichtgrijze tekst (HEX #999999) op een witte achtergrond (HEX #FFFFFF), met een kleurcontrast van 2,8:1. Dit is onvoldoende, aangezien het contrast minimaal 4,5:1 moet zijn.

Op pagina https://www.dnb.nl/betrouwbare-financiele-sector/toezicht-op-financiele-instellingen/ staat een video. De kleur van de ondertitels is wit. Er is een onderlaag onder de ondertitels, maar die geeft onvoldoende contrast. Op sommige lichte plekken in de video wordt het contrast te laag. Bijvoorbeeld rond 0:32 is het contrast 2,6:1. Voeg een onderlaag met voldoende kleur toe om ervoor te zorgen dat het contrast van de tekst altijd ten minste 4,5:1 blijft.

Op pagina's https://www.dnb.nl/wet-open-overheid-woo/indienen-woo-verzoek/woo-formulier/ en https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ staat in de header de tekst "English". De lichtgrijze (HEX #C3C6CA) tekst op de witte (HEX #FFFFFF) achtergrond heeft een kleurcontrastverhouding van 1,7:1. Dit moet minstens 4,5 zijn.

Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken. Deze grafieken bevatten grijze (HEX#999999) tekst op een lichtgrijze (HEX#F0F4F8) achtergrond. Het contrast is 2,6:1. Zie bijvoorbeeld de tekst "© De Nederlandsche Bank". Deze moet minimaal 4,5:1 zijn.

PDF: In het PDF-document https://www.dnb.nl/media/43cnkobx/visie_op_toezicht_2021_2024.pdf is witte tekst geplaatst op achtergronden met verschillende kleuren. Op pagina’s 2, 3 en 4 zijn de achtergrondkleuren bijvoorbeeld geel (HEX #FBBC00), blauw (HEX #7A9BAF) en donkergroen (HEX #958C00). Het kleurcontrast is te laag. Het contrast met geel is 1,7:1, met blauw 2,9:1 en met donkergroen 3,5:1. Dit moet minimaal 4,5:1 zijn. Op pagina 5 heeft de witte (HEX #FFFFFF) tekst "Structurele uitdagingen" tegen een lichtbruine (HEX #C4A799) achtergrond een contrast van 2,3:1. Dit voldoet niet aan de vereiste minimale contrastverhouding van 3,0:1. Controleer ook de kleurcontrasten op andere pagina’s.

PDF: Op pagina 14 van het PDF-document https://www.dnb.nl/media/43cnkobx/visie_op_toezicht_2021_2024.pdf heeft de groene (HEX #958C00) tekst "Duurzaamheid en toekomstgerichtheid" op de lichtbruine (HEX #E9E3D2) achtergrond een contrast van 2,7:1. De blauwe tekst "Technologie" (HEX #7897AB) op dezelfde lichtbruine achtergrond heeft een contrast van 2,4:1. De rode (HEX #B74101) tekst "Financieel-economische criminaliteit" op de lichtbruine achtergrond heeft een contrast van 4,3:1. Dit voldoet niet aan de minimale eis van 4,5:1. Zie ook andere pagina's met verschillende kleurcombinaties die een te laag kleurcontrast hebben.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website, bijvoorbeeld de homepage https://www.dnb.nl/, wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, verschijnt in de header een knop met drie horizontale lijnen waarmee een navigatiemenu wordt geopend. In dit menu zijn de interactieve elementen onder de knop "Statistieken" niet zichtbaar. Dit betreft de link "Werken bij DNB", de knop "Over ons" en de link "Switch to English". Bij een zoomniveau van 200% op een schermresolutie van 1280 bij 1024 pixels moet alles correct blijven functioneren. Hetzelfde probleem doet zich voor wanneer een bezoeker op de knop met het vergrootglas in de header klikt. Het zoekveld wordt weergegeven, maar zodra de bezoeker een zoekterm invoert, bijvoorbeeld "werk", verschijnt de suggestielijst zonder dat alle opties zichtbaar zijn.
Daarnaast wordt op de pagina https://www.dnb.nl/voor-de-sector/open-boek-toezicht/sectoren/aanbieders-cryptodiensten/toetsingen-aanbieders-cryptodiensten/ bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% het pijlpictogram in de broodkruimelnavigatie over de linktekst "Aanbi..." geplaatst, waardoor de tekst gedeeltelijk wordt verborgen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina's https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 en https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ worden bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, overlapt het zijmenu met links naar sociale media de inhoud van de pagina. Hierdoor zijn bepaalde elementen niet volledig zichtbaar. Zo worden de knop voor het hamburger-menu en de knop "Reset", die verschijnt wanneer de knop "Filters" wordt aangeklikt, gedeeltelijk of volledig verborgen. Dit belemmert de toegankelijkheid en interactie met de pagina.
Bij een zoomniveau van 400% op een schermresolutie van 1280 bij 1024 pixels moet de website correct blijven functioneren zonder dat essentiële onderdelen worden overlapt of verborgen.

Wanneer de tabel op de pagina https://www.dnb.nl/statistieken/publicatiekalender/ wordt bekeken op een ingezoomd of klein scherm, vallen enkele tabelcellen buiten beeld. In sommige browsers, zoals Chrome en Edge, kunnen deze cellen niet meer met het toetsenbord worden bereikt. Dit probleem kan bijvoorbeeld worden opgelost door tabindex="-1" aan de tabel toe te voegen, zodat deze focus kan krijgen. Een soortgelijk probleem doet zich voor bij de tabel onder het kopje "Vergunningen" op de pagina https://www.dnb.nl/openbaar-register/registerdetailpagina/?registerCode=WFTGO&relationNumber=B0163.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepagina https://www.dnb.nl/, staat een vergrootglaspictogram waarmee het zoekveld wordt geopend. Binnen dit zoekveld bevindt zich nog een vergrootglaspictogram dat dient als zichtbaar label voor het zoekveld. De kleur van dit pictogram is donkergrijs (HEX #8A929A) en de achtergrond is lichtgrijs (HEX #DCDEE5). Het kleurcontrast tussen deze elementen is 2,3:1, terwijl dit minimaal 3,0:1 moet zijn.

Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken waarin de kleuren van de informatieve lijnen onvoldoende contrasteren met de achtergrond. In de grafiek "Banktegoeden van huishoudens" is er een blauwe lijn (HEX #2FB5E4) tegen een grijze achtergrond (HEX #F0F4F9), met een contrast van 2,1:1. De gele lijn (HEX #EBBB00) tegen dezelfde grijze achtergrond heeft een contrast van 1,6:1. Dit voldoet niet aan de minimale eis van 3,0:1.

Op alle pagina's van de website, bijvoorbeeld de homepage https://www.dnb.nl/, staat een link "Lees voor" die de ReadSpeaker-tool activeert. In de ReadSpeaker popup player is er een menu. Wanneer de optie "Instellingen" wordt geselecteerd, verschijnt een dialoogvenster met een navigatiemenu dat uit vier tabbladen bestaat. Wanneer een tabblad is geselecteerd en scherpgesteld, verandert de rand van kleur. De aangepaste focusindicator heeft echter onvoldoende kleurcontrast met de achtergrondkleur van het tabblad. De achtergrondkleur is donkerpaars (HEX #6F4FF0) en de focusrand is lichtpaars (HEX #A690FF), wat resulteert in een kleurcontrastverhouding van 2,0:1. Dit voldoet niet aan het vereiste minimum van 3,0:1.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken met interactieve elementen. De bezoeker kan op deze elementen klikken om ermee te interageren. Dit geldt voor de elementen met het "I"-pictogram, het pictogram met drie horizontale lijnen, de select-elementen en de datuminvoervelden. Ook de grafiekelementen met lijnen zijn interactief. Deze functionaliteit is echter niet beschikbaar voor gebruikers die alleen met het toetsenbord navigeren. Alle interactieve elementen moeten volledig bedienbaar zijn met het toetsenbord.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/statistieken/publicatiekalender/ wordt op kleine schermen een animatie weergegeven die niet kan worden gepauzeerd of gestopt. Deze animatie staat naast de tekst "Swipe onderstaande tabel om meer kolommen te zien". Het kan storend zijn voor mensen met een cognitieve beperking als een video, GIF of animatie op een website automatisch gaat spelen. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen. Daarom moet er een manier zijn waarmee bezoekers dit soort multimedia kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staat een skiplink, maar deze werkt niet goed. Wanneer een bezoeker deze skiplink activeert, wordt de pagina opnieuw geladen en begint de navigatie vanaf het begin van de pagina. Er moet een manier zijn om herhalende content die op elke pagina staat over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Zorg dat de skiplink werkt.
Hetzelfde probleem wordt waargenomen op de pagina's: https://www.dnb.nl/openbaar-register/?p=1&l=20 https://www.dnb.nl/openbaar-register/registerdetailpagina/?registerCode=WFTGO&relationNumber=B0163 https://statistiek.dnb.nl/ en https://www.dnb.nl/bezoekers-sitemap/.

Uitkomst: Onvoldoende

Bevindingen: PDF: Het PDF-document https://www.dnb.nl/media/whylcxvh/agenda-steven-maijoor-oktober-2024.pdf heeft de documenttitel "QRC" ingesteld in de bestandseigenschappen. Deze titel beschrijft de inhoud van het document onvoldoende.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staan zoekresultaten met paginering. Wanneer een bezoeker een knop binnen de paginering selecteert, wordt de volgende reeks resultaten geladen. De toetsenbordfocus verschuift echter naar de volgende pagineerknop in plaats van naar het eerste nieuw geladen artikel. Dit is niet correct. De focus moet direct naar het eerste nieuwe artikel gaan wanneer extra resultaten worden geladen. Hetzelfde probleem doet zich voor op de pagina https://www.dnb.nl/openbaar-register/?p=1&l=20.

Daarnaast bevindt zich op de pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ in het blok "Archief" een fout in de toetsenbordnavigatie. Na het activeren van de link "archief" komt de toetsenbordfocus terecht op een onzichtbare link, wat verwarrend is voor toetsenbordgebruikers. Dit probleem moet worden opgelost zodat de focus correct wordt geplaatst op een zichtbaar en interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Alleen elementen die zichtbaar zijn mogen dus toetsenbordfocus krijgen.

Op pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ onder het kopje "Veelgestelde vragen" staan tabs die bestaan uit links die secties met verborgen inhoud openen als een bezoeker op de betreffende link klikt. De focusvolgorde is niet logisch. Als een bezoeker een tabblad activeert door op de Enter-toets en vervolgens op Tab te drukken, gaat de focus niet naar de geopende sectie maar naar de volgende link in de zijkolom. Wanneer het tabblad wordt geactiveerd, moet de focus naar de inhoud van het bijbehorende tabblad gaan.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staan links met de tekst “Lees meer”. Deze tekst verklaart niet waar de link naartoe leidt. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), helpen niet bij het begrijpen welke bestemming deze links hebben. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de pagina titel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. Hetzelfde probleem wordt waargenomen op de pagina https://www.dnb.nl/openbaar-register/?p=1&l=20 . Onder het kopje "Downloads" staan de links met dezelfde zichtbare tekst: "Internetregister". Deze links downloaden verschillende bronnen. Twee links met dezelfde tekst die verschillende betekenis hebben, kunnen verwarrend zijn voor de gebruiker van een schermlezer. Het is niet duidelijk wat het verschil tussen deze links is.

Op pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ in het blok "Archief", na de link "archief" staat een onzichtbare link. Deze link heeft geen toegankelijke naam. Het doel van deze link is niet duidelijk.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepagina https://www.dnb.nl/, bevindt zich een vergrootglaspictogram dat fungeert als knop om het zoekveld te openen. Wanneer een bezoeker op deze knop klikt, verandert het vergrootglaspictogram in een "X"-pictogram. Dit gebeurt omdat de functie van de knop verandert: in plaats van het zoekveld te openen, sluit de knop nu het zoekveld. De toegankelijke naam van het "X"-pictogram is echter "Zoek", wat verwarrend is voor schermlezergebruikers. Hierdoor is niet duidelijk welke actie de "X"-knop uitvoert.

In de header, wanneer de website op kleine schermen wordt bekeken, staat een knop met drie horizontale lijnen die een navigatiemenu opent. In dit menu bevinden zich knoppen, zoals "Nieuws", die submenu’s openen. Wanneer een bezoeker op de knop "Nieuws" klikt, verschijnt in het geopende submenu nog een knop met een pijl-icoon en een zichtbaar tekst "Nieuws". De toegankelijke naam van deze knop is "Terug naar vorige pagina Nieuws", wat verwarrend is. De huidige situatie suggereert dat de gebruiker teruggaat naar een vorige pagina, terwijl het in werkelijkheid gaat om het hoofdmenu. Dit kan verwarring veroorzaken bij schermlezergebruikers, omdat "Nieuws" zowel het huidige menu-item als een optie in de vorige weergave is. Zie ook andere submenu’s, bijvoorbeeld op de homepage https://www.dnb.nl/.
Op de homepage https://www.dnb.nl/ staat een zoekveld onder het kopje "Goedemiddag! Waarmee kunnen we u op weg helpen?". De toegankelijke naam van dit invoerveld is "Goedemiddag! Waarmee kunnen we u op weg helpen? Uitgebreid zoeken". Deze naam omvat de tekst van de aangrenzende link "Uitgebreid zoeken". Verwijder de overbodige tekst.

Op de homepagina https://www.dnb.nl/ staat een kopje dat niet duidelijk de inhoud die volgt beschrijft. Het gaat om "Direct naar". Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina. Door deze kop weet een bezoeker dus eigenlijk nog steeds niks. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.
Hetzelfde probleem wordt waargenomen op pagina https://www.dnb.nl/betrouwbare-financiele-sector/toezicht-op-financiele-instellingen/. Zie de kop “Lees verder”.

Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staat boven de zoekresultaten staan twee select-element waarmee de zoekresultaten kunnen worden aangepast. Beide select-elementen hebben dezelfde toegankelijke naam: "Aantal resultaten per pagina". Een dergelijke toegankelijke naam beschrijft de functie van het select-element niet. Het eerste select-element verandert het aantal resultaten niet. Hetzelfde probleem wordt waargenomen op de pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 , wanneer deze wordt bekeken op kleine schermen. Er is een paginering die ook een select-element bevat. De toegankelijke naam van het select-element is "Ga naar

Advies: Het volgende wordt niet afgekeurd omdat de website ook zonder deze tool gebruikt kan worden. Op de pagina's van de website, bijvoorbeeld homepage https://www.dnb.nl/, staat een link "Lees voor" die de ReadSpeaker tool activeert. Wanneer de optie "Vergroot tekst" in het menu ReadSpeaker is geselecteerd en op de knop "Lees voor" wordt geklikt, verschijnt een werkbalk "Vergroot tekst". De werkbalk bevat een stopknop die zowel de werkbalk als de popupspeler sluit. Op dit moment is de toegankelijke naam van deze knop "Stop", wat de functionaliteit niet voldoende overbrengt.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staan twee select-elementen. Elk select-element heeft geen zichtbaar label, en de eerste optie fungeert als label. Bij het eerste select-element is de toegankelijke naam “Aantal resultaten per pagina”, terwijl de zichtbare tekst “Datum aflopend” is. Hierdoor kunnen bezoekers die gebruikmaken van spraaksoftware het element niet bedienen. Zij geven een commando door de zichtbare tekst uit te spreken. Het label moet daarom permanent zichtbaar zijn en terugkomen in de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. De toegankelijke naam moet de zichtbare tekst bevatten en deze het liefst vooraan plaatsen. De toegankelijke naam mag ook exact overeenkomen met de zichtbare tekst.

Hetzelfde probleem doet zich voor op de pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 wanneer deze op kleine schermen wordt bekeken. In de paginering staat een select-element waarvan de zichtbare tekst bijvoorbeeld “1 van 121” is. De toegankelijke naam van dit select-element is echter “Ga naar pagina”. Dit probleem is ook aanwezig op de pagina https://www.dnb.nl/openbaar-register/?p=1&l=20.

Op pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ staat, wanneer deze op kleine schermen wordt bekeken, een select-element onder het kopje “Veelgestelde vragen”. Dit select-element heeft geen zichtbaar label en de geselecteerde optie is niet opgenomen in de toegankelijke naam.

Op pagina https://www.dnb.nl/openbaar-register/?p=1&l=20 staat een zoekfunctie onder het kopje "Zoeken in het register". Er is een tekstveld om zoektermen in te voeren. De zichtbare tekst (de placeholder-tekst) is "Statutaire naam / handelsnaam". De toegankelijke naam van het invoerelement is "Zoeken in het register".

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepage https://www.dnb.nl/, bevindt zich een link waarmee bezoekers de taal van de website kunnen wijzigen tussen Engels en Nederlands. Het zichtbare label van deze link is in het Engels. Daarnaast wordt het aria-label-attribuut gebruikt om een toegankelijke naam toe te voegen met de tekst "Switch to English." Wanneer de taal van de pagina is ingesteld op Nederlands, wordt deze Engelse tekst echter door schermlezers uitgesproken volgens de Nederlandse uitspraakregels. Dit kan verwarrend zijn voor gebruikers die afhankelijk zijn van ondersteunende technologieën, omdat de tekst mogelijk niet goed wordt begrepen. Om dit probleem op te lossen, moet het lang-attribuut correct worden toegepast op het aria-label-attribuut, zodat schermlezers de tekst met de juiste uitspraakregels verwerken. Er is momenteel een href lang-attribuut aanwezig, maar dit is niet hetzelfde als lang-attribuut.

Op dezelfde manier, wanneer de taal van de pagina is ingesteld op Engels, is het zichtbare label van de link in het Nederlands en bevat het aria-label Nederlandse tekst: "Wissel naar Nederlands," die schermlezers uitspreken met behulp van Engelse uitspraakregels, wat hetzelfde probleem veroorzaakt.
Om dit probleem op te lossen, specificeer je de juiste taal voor de zichtbare tekst en de tekst binnen het aria-label door het lang="en" of lang="nl" attribuut toe te passen op het omringende HTML-element. Dit zorgt ervoor dat schermlezers de juiste uitspraakregels toepassen voor de toegankelijke naam.

Op pagina https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ is de taalswitch niet actief. Er is echter een visueel verborgen tekst die wordt aangekondigd door schermlezers: "This page is not available in English."

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/wet-open-overheid-woo/indienen-woo-verzoek/woo-formulier/ staat een formulier. Als het formulier wordt verzonden met lege velden of met onjuiste gegevens, verschijnen foutmeldingen met de tekst, bijvoorbeeld: "U bent verplicht dit veld in te vullen", "Vul hier de juiste gegevens in". Dit is een instructie, geen foutmelding.
Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepagina https://www.dnb.nl/, bevindt zich een vergrootglaspictogram waarmee het zoekveld wordt geopend. Dit invoerveld heeft geen permanent zichtbaar label. Hoewel het vergrootglaspictogram en de plaatshoudertekst "Uw zoekopdracht" als label kunnen dienen, hebben beide een te laag kleurcontrast met de achtergrond. Hierdoor is er in de praktijk geen goed zichtbaar label voor het zoekveld. Invoervelden moeten altijd een permanent zichtbaar label hebben dat voor alle gebruikers goed leesbaar is. Dit kan bijvoorbeeld door een expliciet <label>-element te koppelen aan het zoekveld en het visueel consistent te maken met de rest van de interface.

Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staat boven de zoekresultaten een select-element zonder label. Hierdoor weten bezoekers niet wat hier moet worden gekozen. De cijfers in de opties, zoals “10”, zijn niet voldoende informatief. Dit element moet een altijd zichtbaar label krijgen, zodat het duidelijk is wat de gebruiker selecteert.

Op pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ wordt hetzelfde probleem waargenomen wanneer deze op kleine schermen wordt bekeken. Onder de kop "Veelgestelde vragen" bevindt zich een select-element waarmee bezoekers categorieën van FAQ kunnen selecteren. Dit select-element heeft geen zichtbaar label dat het doel ervan aangeeft, waardoor gebruikers mogelijk niet begrijpen wat ze moeten kiezen. Een permanent zichtbaar label moet worden toegevoegd om de toegankelijkheid en bruikbaarheid te verbeteren.

Op pagina https://www.dnb.nl/openbaar-register/?p=1&l=20 doen zich vergelijkbare problemen voor onder het kopje "Zoeken in het register". Hier bevinden zich select-elementen die geen permanent zichtbaar label hebben. Daarnaast heeft het zoektekstveld bij weergave op kleine schermen ook geen permanent zichtbaar label. Dit kan verwarrend zijn voor gebruikers, vooral wanneer de placeholdertekst verdwijnt bij invoer. Om de toegankelijkheid te verbeteren, moeten alle select-elementen en zoekvelden worden voorzien van een permanent zichtbaar label. Dit kan worden bereikt door een <label>-element correct te koppelen met for="" aan de bijbehorende invoervelden of door een aria-label toe te voegen voor schermlezers.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website, bijvoorbeeld op de homepagina https://www.dnb.nl/, staat een vergrootglaspictogram waarmee een zoekveld wordt geopend. Het invoerveld is geïmplementeerd als een combobox-element. Er is een probleem geconstateerd met het attribuut aria-activedescendant. Wanneer het combobox-element focus krijgt en een bezoeker geen waarde invoert, wordt het attribuut aria-activedescendant op het invoerveld ingesteld op "result-item--1". Er is echter geen element in het DOM met deze ID. Wanneer een bezoeker gegevens invoert en de suggestielijst verschijnt, wordt bij navigatie met de pijltjestoets naar de eerste optie de waarde van aria-activedescendant niet correct ingesteld. Het attribuut aria-activedescendant moet dynamisch verwijzen naar de ID van de optie in de keuzelijst waarop op dat moment wordt gefocust. Schermlezers vertrouwen op dit attribuut om te identificeren welk item in de listbox momenteel is geselecteerd of waarop is gefocust. Met een ongeldige verwijzing krijgen gebruikers van ondersteunende technologieën niet de juiste feedback, wat verwarring veroorzaakt en de verwachte functionaliteit van het comboboxpatroon, zoals gedefinieerd in de https://www.w3.org/WAI/ARIA/apg/patterns/combobox/, doorbreekt. Controleer of alle ID’s waarnaar wordt verwezen door aria-activedescendant bestaan in het DOM en correct zijn toegewezen aan de overeenkomstige role="option"-elementen in de keuzelijst. Zorg ervoor dat het aria-activedescendant-attribuut dynamisch wordt bijgewerkt om te verwijzen naar de ID van het momenteel actieve role="option"-element. Hetzelfde probleem doet zich voor in het zoekveld onder de kop "Goedemiddag! Waarmee kunnen we u op weg helpen?" op de homepagina https://www.dnb.nl/.

Op pagina’s https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 en https://www.dnb.nl/algemeen-nieuws/achtergrond-2024/het-effect-van-een-groeiende-stapel-overheidsschuld-op-de-financiele-stabiliteit/ bevinden zich in een zijmenu links naar sociale media. In dit menu staat ook een knop met drie puntjes die een dialoogvenster opent. Dit dialoogvenster heeft geen toegankelijke naam, waardoor schermlezers niet correct kunnen aankondigen wat de functie van dit venster is.

Hetzelfde probleem doet zich voor bij het dialoogvenster dat wordt geopend wanneer een bezoeker op de knop "Cookie-instellingen" in de cookiebanner klikt. De cookiebanner wordt ook weergegeven wanneer een bezoeker de website voor het eerst opent, bijvoorbeeld op de homepage https://www.dnb.nl/. Dit dialoogvenster heeft geen toegankelijke naam en ook geen eigen role-attribuut, waardoor het voor gebruikers van ondersteunende technologieën niet duidelijk is wat het is. Om de toegankelijkheid te verbeteren, moet aan beide dialoogvensters een duidelijke toegankelijke naam worden toegekend met aria-labelledby of aria-label. Daarnaast moet de juiste role="dialog" worden toegevoegd, zodat schermlezers correct kunnen communiceren dat het om een dialoogvenster gaat.

Op pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ in het blok "Archief" staat na de link "archief" een onzichtbare link. Deze link heeft geen toegankelijke naam.

Op de pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ onder het kopje "Veelgestelde vragen" staan tabbladen die bestaan uit een zijkolom met links en secties met verborgen inhoud die kan worden geopend als een bezoeker op de bijbehorende link klikt. Deze functionaliteit ziet eruit en functioneert als een tablijst. Het tablist element heeft echter geen toegankelijke naam. Elke link in de zijkolom heeft zijn tabpanel. Deze tabpanel-elementen hebben ook geen toegankelijke namen. Hetzelfde probleem met tablist is te zien op pagina https://www.dnb.nl/openbaar-register/registerdetailpagina/?registerCode=WFTGO&relationNumber=B0163 . Het element tablist heeft geen toegankelijke naam.

Op pagina https://www.dnb.nl/contact-en-veelgestelde-vragen/ verschijnt onder het kopje "Veelgestelde vragen" een select-element wanneer de pagina op kleine schermen wordt weergegeven. Dit select-element heeft geen toegankelijke naam.

Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staan grafieken. Deze grafieken bevatten interactieve elementen. Dit zijn de elementen met het "i"-pictogram en met het pictogram met drie horizontale lijnen waarmee het contextmenu wordt geopend. Deze interactieve elementen hebben geen toegankelijke namen.
Het pictogram met de drie horizontale lijnen opent het menu. Dit menu bevat interactieve elementen die ook geen juiste rollen en toegankelijke namen hebben.

Op pagina https://www.dnb.nl/statistieken/dashboards/spaargeld-huishoudens/ staat een grafiek "Bijgeschreven rente op spaargeld". Deze grafiek bevat twee invoerelementen van het type datum en één select-element. Deze elementen hebben geen toegankelijke namen.

Advies: Het volgende wordt niet afgekeurd omdat de website ook zonder deze tool gebruikt kan worden. Op alle pagina’s van de website, bijvoorbeeld de homepage https://www.dnb.nl/, bevindt zich een link "Lees voor" die de ReadSpeaker-tool activeert. In de ReadSpeaker popup player is een knop met drie horizontale lijnen die een menu opent. In dit menu staan opties die dialoogvensters openen, zoals "Instellingen". Binnen deze dialoogvensters bevinden zich knoppen in de kop- en footer. Aan deze interactieve elementen wordt de role="button" toegewezen. Echter, de eerste rol van deze knoppen is "lijst", wat leidt tot een ongeldige HTML-structuur. Dit betekent dat het ul-element directe kinderen bevat die niet zijn toegestaan, omdat een ongeordende lijst (ul) uitsluitend li-elementen mag bevatten. Daarnaast activeert de volumeknop binnen deze afspeelknoppen een paneel met een volumeregelaar. Hoewel deze schuifregelaar correct de role="slider" heeft, ontbreekt een toegankelijke naam, waardoor schermlezers niet correct aankondigen wat de functie ervan is. Ditzelfde probleem doet zich voor bij de schuifregelaar voor leessnelheid. Bovendien heeft het dialoogvenster met tekstversie-instellingen, dat wordt geopend door te klikken op de knop met de tekst "Aa" en het tandwielpictogram, geen toegankelijke naam. Dit zorgt ervoor dat schermlezers geen context geven over de functie van dit dialoogvenster, wat de toegankelijkheid belemmert.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staan onder het zoekveld knoppen, zoals "Inflatie", waarmee bezoekers de zoekresultaten kunnen verfijnen. Wanneer op een knop wordt geklikt, worden de zoekresultaten bijgewerkt en verschijnt het bericht "We hebben X resultaten gevonden" met het nieuwe aantal resultaten. De pagina wordt daarbij niet opnieuw geladen. Hoewel dit bericht is opgenomen in een div-element met aria-live="polite", kondigt de schermlezer alleen het bijgewerkte nummer aan en niet de volledige zin. Dit gebeurt omdat de aria-live-regio al in de HTML aanwezig is voordat de update plaatsvindt, waardoor alleen het veranderde deel – het getal – door de schermlezer wordt herkend en uitgesproken. Deze gedeeltelijke aankondiging kan verwarrend zijn voor schermlezergebruikers, omdat zij mogelijk de context van de update niet begrijpen. Een oplossing kan zijn om het volledige bericht dynamisch te vervangen binnen de aria-live-regio of tijdelijk de aria-live-eigenschap te verwijderen en opnieuw toe te voegen bij de update, zodat de schermlezer de hele boodschap opnieuw aankondigt.

Op pagina https://www.dnb.nl/algemeen-nieuws/?p=1&l=10 staan filters om de zoekresultaten te verfijnen. Sommige filtercategorieën bevatten zoekvelden bijvoorbeeld "Onderwerp". Wanneer een bezoeker een waarde in het zoekveld invoert, worden de bijbehorende resultaten weergegeven. De pagina wordt niet herladen en de focus wordt niet naar de nieuwe inhoud gestuurd. Dit maakt de zoeksuggesties een statusbericht. Dit statusbericht wordt echter niet aangekondigd aan gebruikers van schermlezers.
Gebruik daarom bijvoorbeeld een aria-live-attribuut of voeg role="status".