Hercontrole digitale toegankelijkheid van website nrc.nl

#1 - Iframe kan niet met het toetsenbord worden bediend

De volgende bevinding is een advies, omdat het gaat om inhoud van derden die onder een uitzondering valt.

De homepage bevat iframes met advertenties die niet met het toetsenbord zijn te bedienen. Sommige bezoekers navigeren uitsluitend met een toetsenbord en gebruiken geen muis. Voor deze groep moeten alle interactieve onderdelen van de website bedienbaar zijn met het toetsenbord. Hieronder vallen onder andere links, knoppen, formulieren, keuzelijsten, tabbladen, iframes, sliders en accordeons.

Dit probleem komt onder andere voor op de pagina:

• https://www.nrc.nl/index/archief/;
• https://www.nrc.nl/nieuws/2025/09/19/amerikaanse-politiek-19-september-a4906609;
• https://www.nrc.nl/nieuws/2025/11/04/formatieblog-4-november-a4911826.

Oplossing:

Zorg ervoor dat alle interactieve elementen bedienbaar zijn met het toetsenbord.

#2 - Video speelt automatisch af en kan niet worden gestopt

De homepage bevat advertenties waarin video’s automatisch worden afgespeeld en niet kunnen worden gepauzeerd of gestopt.

Automatisch afspelende video’s kunnen storend zijn voor bezoekers met een cognitieve beperking. Bewegende inhoud kan voortdurend afleiden, waardoor het lezen van andere content op de pagina wordt bemoeilijkt.

Dit probleem komt onder andere voor op de pagina:

• https://www.nrc.nl/index/archief/;
• https://www.nrc.nl/nieuws/2025/09/19/amerikaanse-politiek-19-september-a4906609;
• https://www.nrc.nl/nieuws/2025/11/04/formatieblog-4-november-a4911826.

Extra toelichting: Er zijn vier succescriteria die altijd van toepassing zijn op alle inhoud van de pagina, ook op onderdelen die niet noodzakelijk zijn om aan de toegankelijkheidsregels te voldoen. Het niet naleven van deze succescriteria kan de werking en bruikbaarheid van de gehele pagina beïnvloeden.

Meer informatie hierover is te vinden op: (https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html).

Oplossing:

Zorg voor een mechanisme waarmee bezoekers automatisch afspelende multimedia kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die automatisch start, gelijktijdig met andere informatie wordt getoond en langer dan vijf seconden speelt.

#3 - Link heeft geen toegankelijke naam

Op de homepage staan aanklikbare artikelen. De bijbehorende links hebben geen toegankelijke naam en worden door schermlezers als lege links voorgelezen. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie van de link is.

Dit probleem valt onder succescriterium 4.1.2 (naam, rol, waarde). Daarnaast is succescriterium 2.4.4 van toepassing, omdat het doel van de link niet duidelijk is. Ook succescriterium 2.5.3 is van toepassing, omdat de zichtbare tekst niet voorkomt in een toegankelijke naam en de link daardoor niet kan worden bediend met spraakbediening.

Dit probleem komt onder andere voor op de pagina: https://www.nrc.nl/index/archief/.

Oplossing:

Dit probleem ontstaat doordat binnen een <a> element een <header> element wordt gebruikt. Door dit <header>-element te vervangen door een <div> element, kan de toegankelijke naam correct worden bepaald. Als je dit doet, krijgt de link een toegankelijke naam. Maar deze naam bestaat nu uit de hele tekst van de teaser en wordt dus heel lang. Een betere oplossing is het plaatsen van het <a> element binnen het <h3> element. Je kunt het klikgebiet met JS groter maken.

Op de volgende pagina staat een instructie om zelf te testen of een element een toegankelijke naam heeft: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/.

#4 - Kopniveaus zijn onjuist toegepast

Op de homepage staan artikelen waarin een kop van niveau 6 direct wordt gevolgd door een kop van een hoger niveau (h3)’. Dit is bijvoorbeeld te zien bij “Voetbal” en “FIFA-baas Infantino paait Trump op alle mogelijke manieren. Geeft hij hem nu ook een vredesprijs?”.

Dit probleem doet zich onder meer voor onder de koppen “Laatste nieuws”, “Meest gelezen” en “OPINIE & COLUMNS”.

Wanneer twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, is één van de koppen niet op correct toegepast. Direct onder een h3-element mag een h4-element of andere content volgen, maar niet opnieuween h3-element of een h2-element.

Dit probleem komt voor op de pagina: https://www.nrc.nl/index/archief/.

Oplossing:

Pas de kopstructuur aan, zodat de kop-elementen de inhoudsstructuur correct weergeven. De meest geschikte oplossing is het verwijderen van h6-elementen.

Op deze pagina staat een instructie om zelf koppen op een webpagina te testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

#5 - Tekst kleiner dan 24px heeft onvoldoende kleurcontrast

Op de homepage staat onder de kop “Laatste nieuws” grijze tekst (#8C8C8C) op een witte achtergrond, bijvoorbeeld “KOPERDIEFSTAL”. De contrastratio is te laag: 3,4:1.

Dit probleem doet zich voor onder de kop “NIEUWSTE AFLEVERINGEN NRC-PODCASTS” bij de datumteksten, bijvoorbeeld “29 nov 2025”. Deze bevinding is alleen van toepassing in het lichte thema van de browser. In de donkere modus komt dit probleem niet voor.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt. Daarom moet het contrast minimaal 4,5:1 zijn.

Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#6 - Toegankelijke namen van knoppen zijn onvoldoende duidelijk

Op de homepage wordt onder de kop “NIEUWSTE AFLEVERINGEN NRC-PODCASTS” een carrousel gebruikt met knoppen om tussen slides te wisselen. De toegankelijke namen geven onvoldoende informatie over de functie van de knoppen.

Dit probleem komt onder andere voor op de pagina:

• https://www.nrc.nl/over-ons/ onder de kop “Beloftes van NRC”;
• https://www.nrc.nl/index/archief/;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-2-a4912961.

Oplossing:

Pas de toegankelijke namen aan, bijvoorbeeld naar “vorige slide” en “volgende slide”.

Daarnaast kan de caroussel als een aparte regio worden gemarkeerd, zodat duidelijk is dat alle knoppen binnen deze regio bij de carrousel horen. Dit kan door een aria-label toe te voegen aan het section-element.

<section id="XXX" aria-label="Carrousel – NIEUWSTE AFLEVERINGEN NRC-PODCASTS">

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit: Op dit moment hebben deze knoppen geen toegankelijke naam, wat niet voldoet aan succescriterium 4.1.2. Geef deze knoppen een toegankelijke naam die de functie duidelijk beschrijft.

#7 - Knoptekst kleiner dan 24px heeft onvoldoende kleurcontrast

Op de homepage staan knoppen met witte tekst “Volg” op een blauwe achtergrond (#3081D1). De contrastratio is te laag: 4:1.

Dit probleem komt voor op de pagina: https://www.nrc.nl/nieuws/2020/07/12/de-grote-hittegids-met-deze-tips-kom-je-warme-dagen-door-a4897365.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt. Daarom moet het contrast minimaal 4,5:1 zijn.

Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#8 - Tekst is onvolledig leesbaar bij zoom tot 200%

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 x 1024 pixels en tot 200% wordt ingezoomd, raakt de tekst van nieuwsartikelen deels buiten beeld, bijvoorbeeld onder de kop “Laatste nieuws”.

Oplossing:

Zorg ervoor dat alle inhoud leesbaar blijft tot 200% zoom op een schermresolutie van 1280 x 1024 pixels.

#9 - Animatie speelt automatisch af en kan niet worden gepauzeerd

Op de homepage staat onder de kop “Niet te missen” een animatie die automatisch wordt afgespeeld en niet kan worden gepauzeerd of gestopt.

Automatisch afspelende animaties kunnen storend zijn voor bezoekers met een cognitieve beperking. Bewegende inhoud leidt af van andere informatie op de pagina.

Oplossing:

Zorg voor een mechanisme waarmee automatisch afspelende multimedia kunnen worden gestopt, gepauzeerd of verborgen. Dit geldt voor alle bewegende content die automatisch start en langer dan vijf seconden speelt.

#10 - lang-attribuut ontbreekt

Op deze pagina ontbreekt het lang-attribuut op het html-element. Hierdoor kan voorleessoftware de pagina niet in de correcte taal voorlezen.

Dit probleem komt onder andere voor op de pagina:

• https://login.nrc.nl/create?service=https://www.nrc.nl/login/;
• https://login.nrc.nl/create.

Oplossing:

Zorg ervoor dat het lang-attribuut aanwezig is op het html-element en dat dit attribuut de juiste taalcode bevat, bijvoorbeeld lang=”nl”.

#11 - Logo heeft geen tekstalternatief

Het logo bovenaan de pagina heeft geen tekstalternatief.

Dit probleem hangt ook samen met:

• succescriterium 4.1.2, omdat de link geen toegankelijke naam heeft;
• succescriterium 2.4.4, omdat het doel van de link niet duidelijk is;
• succescriterium 2.5.3, omdat de zichtbare tekst niet in een toegankelijke naam voorkomt en de link daardoor niet met de stem kan worden bediend.

Dit probleem komt onder ander voor op de pagina:

• https://login.nrc.nl/create?service=https://www.nrc.nl/login/;
• https://login.nrc.nl/create;
• https://www.nrc.nl/the-new-york-times/ met twee logo’s boven de footer.

Oplossing:

Dit logo is een SVG-afbeelding. Voeg een title-element met zichtbare tekst van het logo toe aan de SVG-afbeelding. Er zijn andere oplossingen mogelijk.

#12 - Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut

In het formulier staan invoervelden die persoonsgegevens verzamelen(bijvoorbeeld e-mail). Ze hebben netjes het attribuut autocomplete gekregen, maar de waarde is onjuist: “on”.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben met de juiste waarde (“name”, “tel”, “email” en meer). Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren, bijvoorbeeld door de velden automatisch in te vullen.

Dit probleem komt onder andere voor op de pagina:

• https://login.nrc.nl/create?service=https://www.nrc.nl/login/;
• https://login.nrc.nl/create.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld.

Meer informatie over autocomplete en welke waarden moeten worden gebruikt, is te vinden op: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

#13 - Tekst kleiner dan 24px heeft onvoldoende kleurcontrast

Op deze pagina staat een knop met witte tekst “Inloggen” op een groene achtergrond (#57923A). De contrastratio is te laag: 3,8:1.

Dit probleem komt voor op de pagina:

• https://login.nrc.nl/create?service=https://www.nrc.nl/login/ met de knop “Verder”; *https://login.nrc.nl/create met “Start met lezen”.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt., Daarom moet het contrast minimaal 4,5:1 zijn.

Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#14 - Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de link “Inloggen” en de link om met Google in te loggen.

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar de focus zich bevindt. Anders is niet duidelijk wanneer een element met Enter kan worden geactiveerd. Dit probleem komt onder andere voor op de pagina:

• https://login.nrc.nl/create?service=https://www.nrc.nl/login/;
• https://login.nrc.nl/create bij “Start met lezen”.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen. Op deze pagina staat een instructie om de focuszichtbaarheid te testen: https://properaccess.nl/hoe-test-ik-focus-zichtbaarheid/.

#15 - fieldset-element wordt onjuist gebruikt

Op deze pagina staat een formulier waarvan elk element (invoervelden en de knop “Inloggen”) in een afzonderlijk fieldset-element is geplaatst. Dit element wordt hier gebruikt voor groepering, maar deze elementen vormen geen afzonderlijke groepen. Het element wordt daardoor gebruikt voor een ander doel dan waarvoor het is bedoeld en kan gebruiker van een schermlezerin verwarring brengen.

Dit probleem komt onder andere voor op de pagina:

• https://login.nrc.nl/create?service=https://www.nrc.nl/login/;
• https://login.nrc.nl/create,
• https://www.nrc.nl/contact/.

Oplossing:

Verwijder de fieldset-elementen en gebruik in plaats daarvan een div.

#16 - Foutmelding in een andere taal

Er is geen taalattribuut op deze pagina. 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.

Wanneer lang=”nl” aan deze pagina wordt toevoegd, ontstaat het volgende probleem: de foutmelding in het formulier is in het Engels (“required on emailAddress”), terwijl alle overige inhoud van de pagina in het Nederlands is.

Oplossing:

Vertaal deze foutmelding naar het Nederlands.

#17 - Tekst kleiner dan 24px heeft onvoldoende kleurcontrast

Op deze pagina verschijnt bij het invoeren van een nieuw wachtwoord rode tekst (#FF0000) op een witte achtergrond, bijvoorbeeld “te kort”. De contrastratio is te laag: 4:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt. Daarom moet het contrast minimaal 4,5:1 zijn.

Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#18 - Meldingen worden niet aangekondigd door hulpsoftware

Op deze pagina verschijnt bij het invoeren van een nieuw wachtwoord een tekst, bijvoorbeeld “te kort”. Hulpsoftware kondigt deze melding niet aan.

Wanneer de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen gebruikers van een schermlezer geen melding.

Oplossing:

Voeg aria-live="polite" toe aan de melding. De melding wordt dan automatisch voorgelezen zodra deze verschijnt.

#19 - Instructie bij invoerveld is niet altijd zichtbaar

Op deze pagina heeft het invoerveld “Wachtwoord” een bijbehorende instructie in de placeholdertekst “Kies een wachtwoord (min. 6 tekens)”. Deze instructie verdwijnt echter zodra er tekst wordt ingevoerd.

Oplossing:

Verplaats de instructie, zodat deze altijd zichtbaar is naast het invoerveld.

#20 - Lijstcontainer heeft onjuiste rol

Op deze pagina staat een knop “Toon filters” die de filters opent. Onder “Periode” zijn filters met keuzerondjes in lijsten geplaatst, maar het ouderelement van de lijst heeft niet de juiste rol.

Oplossing:

De li-elementen zijn in dit geval overbodig. Er is al een groepering aangebracht met een fieldset en legend.

#21 - Randen van selectievakjes en keuzerondjes hebben onvoldoende contrast

Op deze pagina staat een knop “Toon filters” die de filters opent. De randen van alle selectievakjes en keuzerondjes zijn grijs (#C2C2C2) op een lichtgrijze achtergrond (#F4F4F4). De contrastratio is te laag: 1,6:1.

Oplossing:

De randen van interactieve elementen, zoals invoervelden, moeten minimaal een contrast van 3,0:1 hebben ten opzichte van de achtergrond.

#22 - Rand van select-element heeft onvoldoende contrast bij toetsenbordfocus

Op deze pagina staat een keuzelijst (select-element) “Meest relevant”. Wanneer dit element toetsenbordfocus krijgt, is de contrastverhouding tussen de grijze rand (#D0D0D0) en de witte achtergrond 1,5:1.

Oplossing:

De randen van interactieve elementen, zoals invoervelden, moeten minimaal een contrast van 3,0:1 hebben ten opzichte van de achtergrond.

#23 - Bewegende content kan niet worden gestopt, gepauzeerd of verborgen

Op deze pagina staat onder de kop “NRC is meer dan ooit noodzakelijk” een animatie die om de paar seconden een nieuwe afbeelding toont. Deze animatie kan niet worden gestopt, gepauzeerd of verborgen. Bewegende content kan storend zijn voor bezoekers met een cognitieve beperking. Bewegende inhoud kan afleiden terwijl andere tekst op de pagina wordt gelezen.

Oplossing:

Zorg ervoor dat er een manier is waarmee bewegende content kan worden gestopt, gepauzeerd of verborgen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan vijf seconden speelt.

#24 - Koptekst gebruikt voor tekst die geen kop is

Op deze pagina wordt een kop van niveau 2 direct gevolgd door een andere kop van hetzelfde niveau. Zie bijvoorbeeld “NRC informeert waar noodzakelijk, duidt waar nuttig, en onthult waar nodig. We dienen lezers en luisteraars die bereid zijn om na te denken.” en “Onze journalistiek”. De tweede tekst is inhoudelijk geen kop.

Dit probleem komt onder andere voor op de pagina:

• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-1-a4913685 bij “Kendra Jansen (24 jaar) ‘Mijn oudere collega’s nemen zelf vaak hun computer mee’” en “Election Speech Bubble”;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-2-a4912961 bij “Vraag” en “Sluiten privacy en geld verdienen elkaar uit, of kunnen ze ook samengaan?”.

Oplossing:

Verwijder het tweede h2.

#25 - em-element is gebruikt voor opmaak

Op deze pagina wordt het em-element misbruikt voor opmaakdoeleinden, bijvoorbeeld in de sectie met verborgen inhoud “Hoe gaat NRC om met fouten in artikelen en podcasts?” bij de tekst “Correctie (datum, tijd): in een eerdere versie van dit artikel stond x. Dat is onjuist. Dat is hierboven aangepast.”

Het em-element heeft een semantische waarde en geeft aan dat tekst nadruk krijgt. Het element is daarom niet geschikt om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken. Het <i>-element kan worden gebruikt om tekst cursief te maken.

#55 - Navigatie heeft geen toegankelijke naam

Op deze pagina staat bovenaan extra sticky navigatie. Het doel van deze navigatie is niet duidelijk voor gebruikers van een schermlezer.

Oplossing:

Geef, wanneer een pagina meer dan één nav-element bevat, elke navigatie een eigen naam. Daardoor kan gemakkelijker tussen navigatiegebieden worden genavigeerd. Zie deze techniek: https://www.w3.org/WAI/WCAG22/Techniques/html/H97.

#26 - Kop-element gebruikt voor tekst die geen kop is

De tekst “De gratis NRC-app biedt je het laatste nieuws … volgonderwerp(en).” op deze pagina is geen kop, maar is onjuist met een h3-element opgemaakt om de lettergrootte te vergroten.

Het kop-element (h3) is niet betekenisvol gebruikt, maar om een visueel effect te creëren. De tekst die als kop is gemarkeerd, is inhoudelijk geen kop, omdat er geen inhoud onder staat. Kop-elementen zijn bedoeld om structuur te geven aan informatie op een pagina. Gebruikers van schermlezers vertrouwen op koppen om te navigeren en de opbouw van de pagina te begrijpen. Kop-elementen zijn daarom niet bedoeld voor uitsluitend visuele opmaak.

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element. De gewenste stijl kan met CSS worden toegevoegd.

Op deze pagina staat een instructie om koppen op een webpagina te testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

#27 - Logo heeft geen alternatieve tekst

Op deze pagina staan onder de kop “Download de NRC-app:” links met logo’s zonder tekstalternatieven. Wanneer het alt-attribuut van een afbeelding leeg is (alt=""), wordt de afbeelding genegeerd door schermlezers. Een lege alt-tekst geeft aan dat de afbeelding decoratief is en geen informatie overdraagt. In dit geval zijn de logo’s echter informaties en maken zij deel uit van een link. Hierdoor:

• Krijgen de links geen toegankelijke naam (succescriterium 4.1.2);
• Is het doel van de links onvoldoende duidelijk(succescriterium 2.4.4);
• kunnen de links niet met spraakbediening worden geactiveerd ((succescriterium 2.5.3).

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo beschrijft.

#28 - Onvoldoende kleurcontrast bij grote tekst

Op deze pagina staat onder de kop “Rubriek Uit het archief” witte tekst, bijvoorbeeld “In de jaren vijftig en zestig heette het ‘baldadigheid’: vuurwerkoverlast was er altijd, de vraag om een vuurwerkverbod ook”, op een zwart-witafbeelding. Door variaties in de achtergrondkleur (bijvoorbeeld grijs (#CFCFCF)) is de contrastratio te laag(1,6:1).

Oplossing:

Omdat de tekst is groter dan 24px,moet het contrast minimaal 3,0:1 zijn. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#29 - Knop met alleen afbeelding bevat geen toegankelijke naam

Op deze pagina staan onder de kop “Rubriek Uit het archief” knoppen met driepuntjes-icoon zonder tekstalternatief. Wanneer een knop uitsluitend uit een afbeelding bestaat, moet de afbeelding de functie van de knop beschrijven.

Oplossing:

Voeg de beschrijving toe via een alt-tekst bij het img-element, een title-element bij een svg , een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit: Op dit moment hebben al deze knoppen dezelfde toegankelijke naam, “Delen”, maar een verschillende functie (SC 2.4.6). Voeg de artikeltitel toe aan het woord “Delen”, bijvoorbeeld “Delen - Wie gingen Rutte voor in de gang naar de Koning?”.

#30 - strong-element onjuist gebruikt in koppen

In koppen zoals “Oud nieuws” en “Over het archief” wordt het strong-element gebruikt binnen “heading”-elementen. Het strong-element heeft een semantische betekenis en mag niet uitsluitend worden gebruikt voor visuele opmaak.

Dit probleem komt onder andere voor op de pagina”

• https://www.nrc.nl/nieuws/2020/07/12/de-grote-hittegids-met-deze-tips-kom-je-warme-dagen-door-a4897365, bijvoorbeeld bij “Zo houd je jezelf koel op een warme dag” en andere;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-1-a4913685 bij “Kendra Jansen (24 jaar)”;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-2-a4912961 bij “Sibil-la Ensemble”.

Oplossing:

Verwijder het strong-element en gebruik CSS om de gewenste opmaak toe te passen.

#31 - HTML5 foutmeldingen zonder aanvullende validatie

Het formulier maakt gebruik van standaard HTML5-validatie. Deze foutmeldingen verschillen per browser en worden niet altijd volledig of toegankelijk voorgelezen. Bovendien verdwijnen ze automatisch.

Oplossing:

Implementeer eigen foutmeldingen die consistent, volledig en toegankelijk zijn.

#32 - Link heeft geen toegankelijke naam

Op deze pagina staat een digitale versie van de krant. Elke kolom bevat links, waarvan sommige geen toegankelijke namen hebben. Hierdoor is voor gebruikers van een schermlezer onduidelijk wat de bestemming of de functie van de link is. Dit probleem hangt ook samen met succescriterium 2.4.4, omdat de doelen van de links niet duidelijk zijn.

Oplossing:

Geef de links een toegankelijke naam, bijvoorbeeld via linktekst, een aria-label of een andere techniek. Op deze pagina staat een instructie om toegankelijke namen te testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/.

#33 - Toetsenbordfocus verplaatst niet naar dialoogvenster

Op deze pagina verschijnt tijdens het scrollen door de krant een modaal dialoogvenster om een abonnement af te sluiten. De toetsenbordfocus wordt niet automatisch in het dialoogvenster geplaatst wanneer het opent.

Oplossing:

Zorg ervoor dat de focusvolgorde logisch blijft door de toetsenbordfocus bij het openen naar het dialoogvenster (of het eerste focusbare element daarin) te verplaatsen.

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit: Op dit moment komt de toetsenbordfocus correct in het dialoogvenster te staan wanneer het opent. De focus kan echter het dialoogvenster verlaten en naar andere elementen op de pagina gaan terwijl het dialoogvenster open is. De toetsenbordfocus moet binnen het dialoogvenster blijven totdat de bezoeker het sluit.

#34 - strong-element is gebruikt voor opmaak

Op deze pagina verschijnt tijdens het scrollen door de krant een modaal dialoogvenster. In dit dialoogvenster wordt het strong-element gebruikt voor opmaak, bijvoorbeeld in de link “Al abonnee? Inloggen”.

Het strong-element heeft een semantische betekenis: het geeft aan dat tekst extra nadruk krijgt. Gebruik dit element daarom niet uitsluitend voor een visueel effect (vetgedrukte tekst).

Dit probleem komt voor op de pagina:

• https://www.nrc.nl/nieuws/2025/09/19/amerikaanse-politiek-19-september-a4906609;
• https://www.nrc.nl/nieuws/2020/07/12/de-grote-hittegids-met-deze-tips-kom-je-warme-dagen-door-a4897365 bij links zoals “Zo houd je jezelf koel op een warme dag”;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-1-a4913685 bij bijvoorbeeld “Zijn ouders waren anti-apartheidsadvocaten”.

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet weer te geven. Een alternatief is het gebruik van een <b>-element voor uitsluitend visuele opmaak.

#35 - Status van uitklapknop wordt niet programmatisch doorgegeven

Op deze pagina staat boven elke kop een knop met een geluidsicoon. Deze knop opent en sluit de speler om het artikel te beluisteren. Hoewel de open of gesloten status visueel duidelijk is, wordt deze niet programmatisch aan schermlezers doorgegeven.

Dit probleem komt onder andere voor op de pagina:

• https://www.nrc.nl/nieuws/2025/11/04/formatieblog-4-november-a4911826?t=1764772650;
• https://www.nrc.nl/nieuws/2020/07/12/de-grote-hittegids-met-deze-tips-kom-je-warme-dagen-door-a4897365 bij de knop “Luister”;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-2-a4912961 bij de knop “Luister”.

Oplossing:

Dit is op te lossen door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de extra inhoud wordt geopend en gesloten.

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit: Op dit moment is het aria-expanded-attribuut niet toegevoegd aan de knop die de audiospeler opent en sluit, maar aan een niet-interactieve container. Dat is onjuist.

#36 - Knoppen met iconen hebben geen toegankelijke namen

Op deze pagina staan afbeeldingen met een knop om deze in volledig scherm te openen, bijvoorbeeld onder de kop “Asielaanvragen”. In deze modus zijn er knoppen met iconen zonder toegankelijke naam, zoals de knoppen “i”, “x”, “+” en “−”. Hierdoor is voor gebruikers van een schermlezer onduidelijk wat de bestemming of functie van de knop is.

Dit probleem komt onder andere voor op de pagina:

• https://www.nrc.nl/nieuws/2025/11/04/formatieblog-4-november-a4911826?t=1764772650;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-1-a4913685.

Oplossing:

Geef de knoppen een toegankelijke naam, bijvoorbeeld via knoptekst, een aria-label of een andere techniek. Op deze pagina staat een instructie om toegankelijke namen te testen: https://properaccess.nl/sc-4-1-2-wat-betekent-naam-rol-waarde/.

#37 - Linkteksten met tijdsaanduiding zijn onvoldoende beschrijvend

Op deze pagina staan onder de koppen “Amerikaanse politiek” en “Lees verder” links naar artikelen. Deze links bevatten teksten, zoals “16 minuten geleden”, “1 uur geleden” en vergelijkbare tijdsaanduidingen. Deze teksten beschrijven de bestemming van de link niet en kunnen tot ambiguïteit leiden, onder andere voor gebruikers van schermlezers.

Dit probleem hangt ook samen met succescriterium 2.5.3, omdat de zichtbare tekst niet in de toegankelijke naam voorkomt en de links daardoor niet met spraakbediening kunnen worden bediend.

Dit probleem komt onder andere voor op de pagina:

• https://www.nrc.nl/nieuws/2025/11/04/formatieblog-4-november-a4911826?t=1764772650;
• https://www.nrc.nl/nieuws/2020/07/12/de-grote-hittegids-met-deze-tips-kom-je-warme-dagen-door-a4897365 onder “Slim Leven” en “Lees verder”;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-1-a4913685 onder “Lees verder”.

Oplossing:

Maak duidelijk waar de link naartoe leidt, bijvoorbeeld door (een deel van) de artikelkop aan de linktekst of toegankelijke naam toe te voegen.

#38 - Animatie kan niet worden gepauzeerd of gestopt

#39 - Foutmelding niet programmatisch beschikbaar

Op deze pagina verschijn in het spel, na het selecteren van vier verkeerde woorden en het klikken op de knop met het vinkje, een schudanimatie. Deze animatie geeft aan dat de combinatie woorden onjuist is. De informatie is niet programmatisch beschikbaar en daardoor niet toegankelijk voor gebruikers van schermlezers. Een vergelijkbaar probleem treedt op bij het selecteren van de juiste woorden: visueel verschijnt een groep met de correcte woorden.

Oplossing:

Er is geen kant-en-klare oplossing op basis van deze beschrijving. Dit vraagt om een brainstormsessie.

#40 - Statusbericht met correcte antwoorden niet automatisch aangekondigd

Op deze pagina, in het spel, verschijnt bij het selecteren van vier correcte woorden een groep met een titel en de correcte woorden. Dit is een statusbericht dat automatisch door schermlezers moet worden aangekondigd wanneer het verandert. De benodigde code om deze functionaliteit te activeren ontbreekt echter. Dit probleem komt voor onder de tekst “Pogingen resterend”, bij het aantal resterende pogingen.

Oplossing:

Statusberichten moeten automatisch worden voorgelezen door schermlezers zodra ze verschijnen of veranderen. Dit is op te lossen door een aria-live-attribuut aan de melding toe te voegen.

#41 - Tot 400% zoom zorgt voor wegvallende content

Wanneer deze pagina wordt bekeken bij een schermresolutie van 1280 x 1024 pixels en ingezoomd tot 400%, verdwijnt het artikel gedeeltelijk onder de kop “Onzichtbare watervervuiling” en de knop “Mail de redactie”.

Dit probleem komt voor op de pagina:

• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-1-a4913685;
• https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-2-a4912961.

Oplossing:

Zorg ervoor dat alle nog werkt en leesbaar is tot 400% zoom op een scherm van 1280 x 1024 pixels.

#42 - Alinea’s zijn onjuist gemarkeerd

Op deze pagina, boven “Agno player”, is een tekstblok met twee alinea’s onjuist gemarkeerd als één p-element. Visueel bestaat de tekst uit meerdere alinea’s (tekstblokken met witruimte ertussen). Deze structuur moet ook in de code aanwezig zijn. Dit probleem komt voor op de pagina: https://www.nrc.nl/nieuws/2024/12/21/testpagina-voor-digitale-toegankelijkheid-deel-2-a4912961 boven de tekst “Meer weten over digitale … Zaken en Koninkrijksrelaties.”

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat visueel zichtbaar is, moet overeenkomen met het aantal p-elementen in de code.

#43 - Video bevat tekst of logo’s zonder alternatief

Op deze pagina wordt onder de kop “Agno player” een video weergegeven. De video bevat tekst en logo’s op verschillende momenten (bijvoorbeeld rond 0:01). Er is geen media-alternatief of audiodescriptie beschikbaar. Hierdoor is de visuele informatie (tekst en logo’s) niet toegankelijk voor blinde gebruikers.

Oplossing:

Voor succescriterium 1.2.3 kan dit worden opgelost met een geschreven tekst (media-alternatief). Voor succescriterium 1.2.5 is dat niet voldoende; hiervoor moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

#44 - aria-label op div is niet toegestaan

Op deze pagina, onder de kop “Waar zijn de bolwerken van BBB?”, staat een interactieve kaart met een legenda. Deze legenda heeft een aria-label-attribuut met de tekst “Category legend with 5 items. The items are < 2%, 2%–2%, 2%–3%, 3%–5% and ≥ 5%.” Het aria-label-attribuut mag echter niet worden gebruikt in een div-element. Het wordt dan niet voorgelezen. Dit probleem doet zich voor bij de kaart zelf.

Oplossing:

Dit is op te lossen met een alternatief dat wél wordt ondersteund, bijvoorbeeld door een tekstueel element toe te voegen (eventueel visueel verborgen).

#45 - Legenda gebruikt alleen kleur om informatie over te dragen

Op deze pagina, onder de kop “Waar zijn de bolwerken van BBB?”, staat een kaart met een legenda. In de kaart wordt alleen kleur gebruikt om informatie te geven. Zie bijvoorbeeld het groen in de legenda. Deze kaart is niet bedoeld voor navigatie en valt daardoor onder de uitzondering van de wet.

Alleen als kleuren zichtbaar zijn en goed van elkaar te onderscheiden, is duidelijk welke balk / lijn bij welke categorie hoort.

Oplossing:

Gebruik naast kleur ook een extra onderscheid, zoals arcering, patronen of datalabels.

#46 - Kaart heeft geen tekstalternatief

Op deze pagina staat een kaart zonder een tekstalternatief. Deze kaart is niet bedoeld voor navigatie en valt daardoor onder de uitzondering van de wet.

Overheidsorganisaties hoeven kaarten en kaarttoepassingen niet toegankelijk te maken als ze niet nodig zijn voor navigatie. Er is echter één uitzondering op deze regel: de informatie die op de kaart wordt getoond, moet ook in tekst op de pagina staan.

Oplossing:

Zorg ervoor dat de informatie die met de kaart wordt overgedragen, ook in tekst op de pagina voorkomt.

#47 - Onvoldoende kleurcontrast legenda-elementen

Op deze pagina, onder de kop “Waar zijn de bolwerken van BBB?”, staat een kaart met een legenda. Sommige kleuren hebben een lage contrastverhouding, bijvoorbeeld lichte tinten groen op een witte achtergrond, zoals (#85BB79). De contrastverhouding is 2,2:1. Deze kaart is niet bedoeld voor navigatie en valt daardoor onder de uitzondering van de wet.

Oplossing:

Zorg ervoor dat het contrast tussen de informatie-elementen op de kaart en de legenda minimaal 3,0:1 is. Controleer daarbij alle gebruikte kleuren

#48 - title van iframe is niet beschrijvend

Op deze pagina, onder de kop “Flourish”, staat een iframe. Het title-attribuut “Interactive or visual content” beschrijft niet de inhoud en het type van het iframe. Iframe-elementen moeten een duidelijke, unieke beschrijving hebben (meestal via het title-attribuut) waarin staat welk type inhoud wordt getoond (bijvoorbeeld een tabel, een podcast of een video) en waar de inhoud over gaat.

Oplossing:

Geef het iframe-element een uniek en beschrijvend ‘title’-attribuut waarin zowel het type als het onderwerp terugkomt, bijvoorbeeld:

<iframe title=”Tabel - Olympische Spelen…”> 

#49 - Tabel met data is niet als tabel gecodeerd

Op deze pagina, onder de kop “Flourish”, staat een iframe met een datatabel. De tabelmarkup ontbreekt. Daardoor kan een schermlezer de relatie tussen de verschillende cellen niet begrijpen.

Oplossing:

Zorg ervoor dat tabellen met gegevens met de juiste HTML-code worden gemarkeerd. Meer informatie over tabellen is te vinden op: https://www.w3.org/WAI/tutorials/tables/.

#50 - Afbeelding mist alt-attribuut

Op deze pagina, onder de kop “Flourish”, staat een iframe met afbeeldingen. Deze afbeeldingen zijn toegevoegd met een img-element, maar het alt-attribuut ontbreekt.

Een img-element moet altijd een alt-attribuut hebben. Bij decoratieve afbeeldingen is de juiste waarde alt="" en moet een passende alternatieve tekst worden toegevoegd.

Oplossing:

Voeg het alt-attribuut toe aan elk img-element. Laat de waarde leeg bij decoratieve afbeeldingen (alt=””) en voeg een beschrijvende alternatieve tekst toe bij informatieve afbeeldingen.

#51 - Lege kop

Op deze pagina, onder de kop “Olympische Spelen”, staat een lege h3-kop. Dit kan een probleem veroorzaken voor schermlezergebruikers die navigeren via de lijst met koppen.

Oplossing:

Verwijder de lege kop of voeg een betekenisvolle tekst toe.

#52 - Knoppen met pictogrammen hebben geen tekstalternatief

Op deze pagina, onder de header, staat extra navigatie met knoppen met pijliconen. Deze iconen hebben geen tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst de functie van de knop beschrijven. Dit probleem hangt ook samen met succescriterium 4.1.2, omdat de knoppen geen toegankelijke namen hebben. Dit probleem komt voor onder de kop “Zoomstory” bij een interactieve afbeelding met knoppen.

Oplossing:

Voeg de beschrijving toe via een alt-tekst bij het img-element,een title-element bij een svg , een aria-label of een visueel verborgen tekst die beschikbaar is voor schermlezers.

#53 - Audio heeft geen transcriptie

Op deze pagina, onder de kop “Luister ook / Audio”, staat een audiobestand zonder transcriptie. Er moet een alternatief beschikbaar zijn voor bezoekers die het geluid niet kunnen horen: een volledige transcriptie.

Oplossing:

Voeg een transcriptie toe bij het audiobestand. Dit kan direct op de pagina (eventueel visueel verborgen met een mogelijkheid om de tekst te tonen), op een aparte pagina of in een toegankelijke pdf, mits de link ernaartoe direct bij het audiobestand staat.

#54 - Animatie kan niet worden gepauzeerd of gestopt

Op deze pagina, bij de kop “Een speciaal decembercadeau: kies één e-book uit drie,” staat een animatie van roterende boekomslagen die automatisch afspeelt en niet kan worden gepauzeerd of gestopt. Dit probleem doet zich voor op de pagina https://www.nrc.nl/regio/ onder de kop “Begin direct met lezen”.

Oplossing:

Zorg ervoor dat er een mogelijkheid is de animatie te 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 vijf seconden speelt.