Rapport:
Audit digitale toegankelijkheid website NORA online

Uitkomst: Onvoldoende

Bevindingen: Het logo op https://www.noraonline.nl/wiki/NORA_online heeft als alt-tekst enkel "NORA". Dit is niet voldoende. De alt-tekst moet beschrijven dat het om een logo gaat. Omdat het logo in een link staat, en er geen linktekst aanwezig is zal de alt-tekst ook als linktekst dienst doen. Daarom moet ook het linkdoel vermeld worden (terug naar de homepagina).

Op pagina https://www.noraonline.nl/wiki/Laatste_wijzigingen_noraonline zijn secties aanwezig met verborgen inhoud. Het pijltje-icoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief. Daardoor is voor schermlezers niet duidelijk dat hier verborgen inhoud beschikbaar is. Deze informatie is niet beschikbaar via een attribuut aria-expanded of via verborgen tekst. Zie ook succescriterium 4.1.2.

Op pagina https://www.noraonline.nl/wiki/Kennisdeling bevat elke link onder de kop “Meer over dit onderwerp elders” een icoon dat aangeeft dat de link opent in een nieuw tabblad. Dit icoon heeft geen alternatief in tekst, waardoor een blinde bezoeker niet weet dat deze link een nieuwe browsertab zal openen. Dit is belangrijke informatie die als verborgen tekst beschikbaar moet zijn, zodat een schermlezer dit kan voorlezen.

Op pagina https://www.noraonline.nl/wiki/ISO_42010 staat onder de kop “ISO 42010” een afbeelding die functioneert als een link. Deze interactieve afbeelding heeft geen tekstalternatief. Daardoor heeft de link geen inhoud en is deze niet toegankelijk voor schermlezers. Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Op pagina https://www.noraonline.nl/wiki/ISO_42010 staat onder de kop “ISO 42010” een complexe afbeelding met lege alternatieve tekst. Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 tekens van de alternatieve tekst past. Deze informatie kan toegankelijk gemaakt worden door twee tekstalternatieven te bieden: een korte en een lange beschrijving. De korte beschrijving, meestal de alternatieve tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kan als tekst op de pagina zelf geplaatst worden, maar mag ook op een andere pagina of in een downloadbaar bestand staan.

Op pagina https://www.noraonline.nl/wiki/NORA_Gebruikersraad_2025-06-17 staan in de tekst onder de kop “Stand van zaken Actiepunten” drie pictogrammen van een vergrootglas die functioneren als links. De interactieve afbeeldingen hebben geen tekstalternatief, waardoor de links geen inhoud hebben. Dit is essentieel voor schermlezers. Voeg een tekstalternatief toe dat het linkdoel beschrijft, zodat de links toegankelijk worden.

Op pagina https://www.noraonline.nl/wiki/Eigenschap:Beschrijving ontbreekt bij meerdere pictogrammen met een plusteken, vergrootglas of oog een tekstalternatief. Deze pictogrammen functioneren als interactieve elementen, maar zonder alternatieve tekst missen de links inhoud. Dit maakt ze ontoegankelijk voor schermlezers.

Op pagina https://www.noraonline.nl/wiki/Ketensturing/De_wereld_van_ketens zijn secties met verborgen inhoud aanwezig. Het pijltje-icoon dat aangeeft dat er verborgen inhoud beschikbaar is, heeft geen duidelijke tekstalternatief. Schermlezers geven wel aan dat er sprake is van een uitklapbare sectie, maar geven niet weer om welke specifieke sectie het gaat. Daardoor is voor bezoekers die hulpsoftware gebruiken niet duidelijk welke inhoud wordt geopend.

Op pagina https://www.noraonline.nl/wiki/NORA_Vijflaagsmodel staat naast de kop “NORA Vijflaagsmodel” een complexe afbeelding waarvan de alternatieve tekst meer dan 500 tekens bevat. Deze afbeelding fungeert ook als een link, waardoor de alternatieve tekst wordt gebruikt als toegankelijke naam van de link. De alternatieve tekst moet beknopt zijn en alleen essentiële informatie bevatten. Deze tekst wordt in één keer voorgelezen en kan niet worden gepauzeerd of teruggespoeld. Het advies is om de alternatieve tekst niet langer dan 150 tekens te maken. Als een uitgebreidere beschrijving nodig is, kan deze beter apart worden geplaatst, bijvoorbeeld als tekst op de pagina.

In het pdf-document op https://www.noraonline.nl/images/noraonline/4/4a/Opzet_en_Werking_NORA_Gebruikersraad_v1-1.pdf staan op pagina 1 en pagina 5 informatieve afbeeldingen zonder tekstalternatief. Op pagina 1 gaat het om een afbeelding met teksten in verschillende kleuren, en op pagina 5 om het logo met de tekst “NORA Gebruikerstag”. Afbeeldingen die met de figure-tag zijn geplaatst, moeten altijd voorzien zijn van een beschrijving in de vorm van een alt-tekst. De figure-tag is bedoeld voor informatieve afbeeldingen en schermlezers lezen de alt-tekst voor. Zonder deze alt-tekst wordt alleen “afbeelding” voorgelezen, waardoor blinde bezoekers het gevoel kunnen krijgen dat ze inhoud missen. Voeg alt-teksten toe aan deze informatieve afbeeldingen.

In het pdf-document op https://www.noraonline.nl/images/noraonline/4/4a/Opzet_en_Werking_NORA_Gebruikersraad_v1-1.pdf is op alle pagina’s een logo aanwezig dat is toegevoegd als artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een figure-tag worden geplaatst en voorzien zijn van een alt-tekst die de afbeelding duidelijk beschrijft. Voeg het logo op de eerste pagina toe met een figure-tag en een beschrijvende alt-tekst.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina’s van de website is in het hoofdmenu het attribuut role=“menu” toegepast op een ul-element, terwijl de menu-opties zijn geplaatst in li-elementen. Door het overschrijven van de rol van het ul-element kunnen toegankelijkheidsproblemen ontstaan. Schermlezers geven normaal gesproken aan dat het om een lijst gaat en hoeveel items er in de lijst staan. Als de lijststructuur niet correct is opgebouwd met de juiste rolverdeling tussen ouder- en kindelementen, kunnen schermlezers deze informatie niet meer goed overbrengen aan bezoekers die hulpsoftware gebruiken. De rol is semantisch ook niet correct, zie verder succescriterium 4.1.2.

Op pagina’s van de website zijn in de footer teksten zoals “Referentiearchitectuur”, “Kennismodel” en “Kennisdeling” visueel vormgegeven als kop, maar in de HTML-code niet gemarkeerd met een echt kop-element. Bezoekers die hulpsoftware gebruiken hebben niets aan een kop die er alleen uitziet als kop, maar niet correct is gemarkeerd. Via koppen kunnen gebruikers van hulpsoftware snel door de pagina navigeren, maar dit werkt alleen als de koppen ook als zodanig in de code staan. Als de visuele structuur niet overeenkomt met de semantische structuur in de HTML, wordt de inhoud onduidelijk. Dit kan worden voorkomen door koppen altijd te markeren met het juiste HTML-element op het juiste kopniveau, bijvoorbeeld h2 of h3. Meestal is dit instelbaar via de content-editor in het CMS. De juiste HTML-code wordt dan automatisch toegepast.

Op pagina https://www.noraonline.nl/wiki/NORA_online is de tekst “Eerste bijeenkomsten” visueel vormgegeven als kop, maar niet als kop gemarkeerd in de HTML. Bezoekers die hulpsoftware gebruiken, hebben niets aan een kop die er alleen uitziet als kop. Via echte koppen kunnen zij snel navigeren of de structuur van de pagina begrijpen. Zet deze kop om in een heading-element zodat de inhoud toegankelijk wordt.

Op pagina https://www.noraonline.nl/wiki/NORA_Vijflaagsmodel zijn de teksten “Basisinformatie & verdieping” en “Overzichten” visueel opgemaakt als kop, maar niet gemarkeerd met heading-elementen. Deze koppen zijn niet toegankelijk voor bezoekers die schermlezers gebruiken. Zet ze om in heading-elementen zodat de inhoud van de pagina ook voor hulpsoftware goed te scannen en te navigeren is. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://www.noraonline.nl/wiki/Kennisdeling bij de koppen “Binnen dit onderwerp” en “Basisinformatie & verdieping

Op pagina https://www.noraonline.nl/index.php?title=Speciaal:Zoeken&profile=advanced&search=werk&fulltext=1 is een groep invoervelden aanwezig met de knoppen “Alle” en “Geen”, voorafgegaan door de tekst “Selecteren”. Deze elementen zijn visueel gegroepeerd, maar de relatie is niet op de juiste manier gedefinieerd in de HTML. Gebruik hiervoor een fieldset en legend-constructie.

Op pagina https://www.noraonline.nl/wiki/Architectuur_beschrijven_binnen_overheidsprojecten staat onder de kop “Wanneer pas je een PSA in een Agile omgeving toe?” een blok tekst dat visueel bestaat uit twee alinea’s met witruimte ertussen, maar in de HTML is dit als één p-element gemarkeerd. De visuele structuur moet overeenkomen met de semantische structuur. Zorg dat elke visuele alinea een apart p-element heeft in de code.

Op pagina https://www.noraonline.nl/wiki/Laatste_wijzigingen_noraonline is de tekst “Lijst met afkortingen” gemarkeerd met een strong-element in plaats van een kop-element. Het strong-element is bedoeld om nadruk te geven aan een woord of een deel van een zin, maar niet om structuur aan te brengen in een tekst. Een kop moet altijd worden gemarkeerd met een kop-element zoals h2. Alleen dan herkent hulpsoftware de tekst als kop en wordt de structuur van de pagina duidelijk voor schermlezers.

Op pagina https://www.noraonline.nl/wiki/Speciaal:GebruikerAanvragen verschijnt een foutmelding die buiten het form-element wordt geplaatst. Hierdoor is de melding niet gekoppeld aan het formulier en wordt deze mogelijk niet opgemerkt door hulpsoftware. Dit kan worden opgelost door de foutmelding binnen het form-element te plaatsen. Daarnaast kan de foutmelding worden gekoppeld aan het invoerveld met behulp van een aria-describedby-attribuut.

Op pagina https://www.noraonline.nl/wiki/Jaarplan_NORA_2025 staan meerdere tabellen waarin gegevenscellen zoals “Totaal bemensing” en “Totaal” onjuist zijn gemarkeerd met een th-element. Deze cellen bevatten gewone gegevens en zijn geen kolom- of rijnamen. Dit is niet correct en verstoort de relatie tussen de koppen en de gegevens in de tabel, waardoor schermlezers de structuur verkeerd interpreteren. Gebruik voor deze cellen het td-element.

In het pdf-document op https://www.noraonline.nl/images/noraonline/4/4c/Statistieken_-_mei_2025.pdf ontbreken structurele codes, waardoor de inhoud niet toegankelijk is voor schermlezers. Hierdoor is het niet mogelijk het document volledig te onderzoeken. Dit betreft alle succescriteria die samenhangen met de codelaag in pdf’s, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, kunnen er nieuwe toegankelijkheidsproblemen aan het licht komen die nu nog niet zichtbaar zijn.

In het pdf-document op https://www.noraonline.nl/images/noraonline/4/4a/Opzet_en_Werking_NORA_Gebruikersraad_v1-1.pdf zijn de koppen “Opzet en werking NORA Gebruikersraad” en “Visiestuk over de rol en positie van de Gebruikersraad binnen de NORA Familie” niet gemarkeerd als koppen. De visuele structuur komt daardoor niet overeen met de tagstructuur van het document. Vervang de p-tag door een h-tag, zodat de structuur in de tags gelijk is aan de visuele structuur.

In het pdf-document op https://www.noraonline.nl/images/noraonline/4/4a/Opzet_en_Werking_NORA_Gebruikersraad_v1-1.pdf is de volgende tekst in de footer niet getagd: “Opzet en Werking NORA Gebruikersraad / Nadeem Taverne en Sandra van Dalen”. Dit deel van het document kan hierdoor niet worden onderzocht. Het betreft succescriteria die afhankelijk zijn van de pdf-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, kunnen er nieuwe toegankelijkheidsproblemen zichtbaar worden die nu nog niet te constateren zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_Vijflaagsmodel komt ditzelfde probleem voor bij de link “architectuur”. De tooltip die aan deze link is gekoppeld, staat niet direct na de link in de code. De bijbehorende inhoud staat telkens onderaan in de code in plaats van direct na de link. Op andere pagina’s van de website komen soortgelijke situaties voor. Als de tooltip-inhoud niet in de buurt van de activerende link staat, kunnen bezoekers die hulpsoftware gebruiken de informatie moeilijk vinden of begrijpen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/Speciaal:GebruikerAanvragen staat een formulier met invoervelden voor persoonlijke informatie zoals gebruikersnaam, e-mailadres en naam. Deze invoervelden missen het autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren, bijvoorbeeld door de velden automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waarin persoonlijke informatie moet worden ingevuld. 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: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online verandert de achtergrondkleur van het logo van blauw naar geel wanneer het logo toetsenbordfocus krijgt. In die situatie heeft de witte tekst “NORA” onvoldoende contrast ten opzichte van de gele achtergrond (HEX #FFE76B). De contrastverhouding is 1,2:1. Omdat deze tekst groter is dan 24px, moet het contrast minimaal 3,0:1 zijn.

Op pagina https://www.noraonline.nl/wiki/NORA_online staan in de footer koppen zoals “Referentiearchitectuur”, “Kennismodel” en “Kennisdeling”. Deze teksten hebben een vergelijkbaar contrastprobleem omdat ze minder dan 24px groot zijn. Voor teksten kleiner dan 24px is een minimale contrastverhouding van 4,5:1 vereist. Ditzelfde probleem geldt voor opties in het mobiele menu.
Op pagina https://www.noraonline.nl/wiki/Nieuws_%26_Agenda staan onder de kop “Nieuws & Agenda” de links “versie” en “werkruimte”. Ook hier is het contrast tussen de witte tekst en de gele achtergrond onvoldoende.

Op pagina https://www.noraonline.nl/wiki/Nieuws_%26_Agenda staat naast de koppen “Nieuws”, “Agenda” en “Laatste wijzigingen” een link “bewerken”. Wanneer deze link toetsenbordfocus krijgt, is de contrastverhouding tussen de grijze tekst (HEX #686B6D) en de gele achtergrond (HEX #FFE76B) te laag: 4,3:1. Omdat de tekst kleiner is dan 24px en niet vetgedrukt is, moet het contrast minimaal 4,5:1 zijn. Dit komt ook voor op o.a. https://www.noraonline.nl/wiki/NORA_Vijflaagsmodel en https://www.noraonline.nl/wiki/Architectuur_beschrijven_binnen_overheidsprojecten geldt het voor de “bewerken”-links.

Op pagina https://www.noraonline.nl/wiki/Eigenschap:Beschrijving staan rechts van de tekst “vorige 20” de nummers “20”, “50” en andere getallen, evenals de tekst “Filter”. Deze elementen zijn blauw (HEX #007BFF) op een witte achtergrond. De contrastverhouding is 4,0:1 en dat is te laag. Deze tekst is 19px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Dit kmt nder andere ook voor op pagina’s https://www.noraonline.nl/wiki/NORA_online, https://www.noraonline.nl/wiki/Nieuws_%26_Agenda en https://www.noraonline.nl/wiki/Bouw_diensten_modulair.

In het PDF-document op https://www.noraonline.nl/images/noraonline/4/4a/Opzet_en_Werking_NORA_Gebruikersraad_v1-1.pdf op pagina 1 staan teksten in verschillende kleuren op een witte achtergrond. De contrastratio is bij sommige van deze teksten te laag. Bijvoorbeeld, het groene woord “MARA” (HEX #A8C971) heeft een ratio van 1,9:1 en het grijze woord “LIDA” (HEX #A0A1A2) heeft een ratio van 2,6:1. Sommige andere teksten hebben een vergelijkbaar probleem. Omdat het hier om grote tekst gaat, moet de contrastratio minimaal 3,0:1 zijn.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In het pdf-document op https://www.noraonline.nl/images/noraonline/4/4a/Opzet_en_Werking_NORA_Gebruikersraad_v1-1.pdf, op pagina 1, staat een afbeelding met ingesloten tekst. Een afbeelding met tekst erin is voor veel bezoekers ontoegankelijk. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online is bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de placeholder-tekst in het zoekveld in de header slechts gedeeltelijk zichtbaar. Als een bezoeker inzoomt, moet alles nog werken.

Op pagina https://www.noraonline.nl/wiki/NORA_online is onderaan de pagina naast de afbeelding van een persoon en de tekst “Contact:” het e-mailadres afgekapt bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400%. Dit probleem doet zich voor op alle pagina’s met dit soort sectie, wanneer het e-mailadres of de tekst te lang is. Andere voorbeelden zijn te vinden op pagina’s https://www.noraonline.nl/wiki/Kennisdeling en https://www.noraonline.nl/wiki/Architectuur_beschrijven_binnen_overheidsprojecten.

Op pagina https://www.noraonline.nl/wiki/Gebruiker:Peterm is bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de link naar het LinkedIn-profiel onder de kop “Alle contactinformatie” slechts gedeeltelijk zichtbaar. Zorg dat alle tekst leesbaar is op kleine schermen.

Op pagina https://www.noraonline.nl/wiki/Bestand:Statistieken_-_mei_2025.pdf zijn bij een schermbreedte van 320px twee kolommen in de tabel onder de kop “Bestandsgeschiedenis” onzichtbaar: “Gebruiker” en “Opmerking”. Zorg dat alle informatie zichtbaar is op kleine schermen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online staat onder de kop “Eerste bijeenkomsten:” een zoekveld met het label “Zoekopdracht”. De contrastverhouding tussen de grijze rand van dit invoerveld en de witte achtergrond is 1,4:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond. Ditzelfde probleem is aanwezig bij hetzelfde zoekveld op pagina https://www.noraonline.nl/wiki/Nieuws_%26_Agenda onder de kop “Agenda” en boven tabellen op pagina https://www.noraonline.nl/wiki/Bouw_diensten_modulair_op.

Op pagina https://www.noraonline.nl/wiki/NORA_online staat onder de kop “Eerste bijeenkomsten” een tabel met sorteerfunctie. De sorteerpijlen naast de kolomnamen hebben een te lage contrastratio. Ze zijn grijs (HEX #DCDCDC) op een witte achtergrond, wat resulteert in een contrastverhouding van 1,4:1. Informatieve en interactieve elementen moeten een contrastverhouding van minimaal 3,0:1 hebben. Ditzelfde probleem is aanwezig bij een vergelijkbare tabel op pagina https://www.noraonline.nl/wiki/Nieuws_%26_Agenda onder de kop “Agenda” en bij tabellen op pagina https://www.noraonline.nl/wiki/Bouw_diensten_modulair_op.

Op pagina https://www.noraonline.nl/wiki/NORA_Gebruikersraad_2025-06-17 staan onder de kop “Stand van zaken Actiepunten” drie iconen met een vergrootglas die functioneren als links. De kleur van deze iconen is grijs (HEX #CCCCCC) op een witte achtergrond met een contrastverhouding van 1,6:1. Dezelfde lage contrastverhouding geldt ook wanneer de iconen toetsenbordfocus krijgen. Zorg dat het contrast minimaal 3,0:1 is. Dit komt ook voor op https://www.noraonline.nl/wiki/Eigenschap:Beschrijving.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pages van de website, bijvoorbeeld op pagina https://www.noraonline.nl/wiki/NORA_online, blijven de skiplinks onzichtbaar, zelfs als ze toetsenbordfocus krijgen. Skiplinks kunnen standaard verborgen zijn, maar zichtbaar worden zodra ze toetsenbordfocus krijgen. Hierdoor kunnen bezoekers die met het toetsenbord navigeren de skiplink zien en gebruiken. Pas de CSS van de skiplink aan zodat deze zichtbaar wordt op het moment dat de toetsenbordfocus erop komt.

Uitkomst: Onvoldoende

Bevindingen: Het pdf-document https://www.noraonline.nl/images/noraonline/4/4c/Statistieken_-_mei_2025.pdf heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel ingesteld worden. Als een pdf geopend wordt in een pdf-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de pdf-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het pdf-document.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online komt de toetsenbordfocus onderaan de pagina na de link “Help, ik wil ondersteuning!” terecht op een lege link: <a href="https://social.overheid.nl/@nora" rel="me"></a>. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Verwijder de link of geef deze linktekst.

Op veel pagina’s, waaronder https://www.noraonline.nl/wiki/NORA_online, staat onderaan een uitklapbare sectie “Toon meer details”. Deze sectie met verborgen inhoud heeft een probleem met de focusvolgorde. Wanneer het blok wordt geopend, gaat de toetsenbordfocus niet naar de interactieve elementen binnen dit paneel. In plaats daarvan springt de focus direct naar de link “Verberg details” die de sectie weer sluit. Dit zorgt voor verwarring bij bezoekers die met het toetsenbord navigeren. Zorg dat klikbare items in een accordeonsectie toetsenbordfocus krijgen als de sectie is geopend.

Op pagina https://www.noraonline.nl/wiki/Speciaal:GebruikerAanvragen is de focusvolgorde niet logisch. Een van de invoervelden op de pagina is verwijderd uit de natuurlijke tabvolgorde door gebruik van een tabindex-attribuut met waarde groter dan 0. Het invoerveld onder de tekst “Om te beoordelen dat…” heeft tabindex=1 en krijgt daardoor als eerste toetsenbordfocus. Dit is een probleem voor bezoekers die met de tab-toets navigeren. Daardoor klopt de volgorde niet meer. Zorg ervoor dat de toetsenbordfocus logisch is als met het toetsenbord wordt genavigeerd. Verwijder het tabindex-attribuut of zet de waarde op 0 om de natuurlijke en consistente volgorde te herstellen.

Als de website op een klein scherm wordt bekeken, verschijnt er een menuknop bovenaan de pagina. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers uit het mobiele menu navigeren met het toetsenbord. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online staat na de link “Help, ik wil ondersteuning!” een onzichtbare link zonder inhoud. Deze link heeft daardoor geen herkenbaar linkdoel. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element. Of verwijder de link.

Op pagina https://www.noraonline.nl/wiki/ISO_42010 staat onder de kop “ISO 42010” een afbeelding die functioneert als een link. Het alt-attribuut van deze afbeelding is leeg (alt=""). Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn mogelijk.

Op pagina https://www.noraonline.nl/wiki/NORA_Gebruikersraad staan onder de kop “Lijst van deelnemers (A t/m G)” cards van deelnemers. Elke kaart bevat links met dezelfde linktekst “Profiel op LinkedIn” die verwijzen naar verschillende bestemmingen. Ditzelfde probleem geldt voor links met een “i”-icoon en de tekst “Vergroten”. Er zijn dus meerdere links aanwezig met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.

Op pagina https://www.noraonline.nl/wiki/NORA_Gebruikersraad_2025-06-17 staan in de tekst onder de kop “Stand van zaken Actiepunten” drie iconen met een vergrootglas die functioneren als links. Deze iconen hebben geen alternatieve tekst. Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn mogelijk. Op pagina https://www.noraonline.nl/wiki/Eigenschap:Beschrijving komt hetzelfde probleem voor bij meerdere iconen zoals het plusteken, het vergrootglas en het oog. Ook deze iconen functioneren als links zonder alternatieve tekst en hebben dus geen herkenbaar linkdoel.

Op pagina https://www.noraonline.nl/wiki/NORA_online hebben veel links een title-attribuut. Voor sommige links herhaalt dit attribuut exact de zichtbare linktekst, bij andere links bevat het overbodige tekst die geen extra informatie biedt aan gebruikers van hulpsoftware. Voorbeelden zijn de link “NORA Familie heeft na verbouwing de sleutels weer in handen” met als title “Nieuws:Nieuwsbericht-00005”, de link “nieuwsbericht over de livegang” met als title “Nieuwsbericht-00001” en de link “Waarom staan er opeens katten op noraonline?” met exact dezelfde tekst als title. Voegt een title-attribuut geen nieuwe informatie toe aan de linktekst? Dan kan dit beter achterwege worden gelaten. Dit vermindert herhalingen en het lezen van overtollige informatie voor schermlezergebruikers. Op pagina https://www.noraonline.nl/wiki/Nieuws_%26_Agenda is hetzelfde probleem aanwezig bij de links in de tabel onder “Nieuws”. Op pagina https://www.noraonline.nl/wiki/Laatste_wijzigingen_noraonline geldt dit ook voor de links onder de kop “Recente wijzigingen”. Dit probleem komt voor op meerdere pagina’s van de website.

Advies. Op pagina https://www.noraonline.nl/wiki/NORA_Vijflaagsmodel staat naast de kop “NORA Vijflaagsmodel” een afbeelding die dient als link. Deze link heeft een toegankelijke naam van meer dan 500 tekens. Geef de link een naam die het doel ervan op een beknopte manier beschrijft. Op pagina https://www.noraonline.nl/wiki/Kennisdeling staat een vergelijkbare afbeelding met hetzelfde probleem.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online staat onder de kop “Eerste bijeenkomsten” een select-element dat bestaat uit een knop “Exporteren” en een invoerveld van het type checkbox. Wanneer een bezoeker met het toetsenbord navigeert, komt de focus na de knop op het invoerveld terecht, maar deze focus is niet zichtbaar. 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 op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen. Ditzelfde probleem komt voor bij hetzelfde veld op pagina https://www.noraonline.nl/wiki/Nieuws_%26_Agenda onder de kop “Agenda” en boven tabellen op pagina https://www.noraonline.nl/wiki/Bouw_diensten_modulair_op.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online staat onder de kop “Eerste bijeenkomsten” een select-element dat bestaat uit een knop “Exporteren” en een invoerveld. De toegankelijke naam van het invoerveld is leeg. De zichtbare tekst “Exporteren” is niet opgenomen in de toegankelijke naam van dit veld. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan. Ditzelfde probleem komt voor bij hetzelfde veld op pagina https://www.noraonline.nl/wiki/Nieuws_%26_Agenda onder de kop “Agenda” en boven tabellen op pagina https://www.noraonline.nl/wiki/Bouw_diensten_modulair_op.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de metagegevens van de pdf op https://www.noraonline.nl/images/noraonline/4/4c/Statistieken_-_mei_2025.pdf is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/ISO_42010, onder het kopje "verschillen tussen de versies van 2011 en 2022", staat een lijst met zinnen in het Engels. De juiste taalcode ontbreekt. Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer moet hier echter op de taal van deze zin overschakelen. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Als de tekst bijvoorbeeld in het Engels is, voeg je `lang="en"` toe aan het element.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/Speciaal:GebruikerAanvragen staat onder de tekst die begint met "Om te beoordelen dat..." een invoerveld zonder label. Dit heeft impact op bezoekers met screenreaders. Gebruik het label-element om dit invoerveld een label te geven, geassocieerd met for en id.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de website wordt in het hoofdnavigatiemenu het attribuut role="menu" gebruikt op een ul-element dat standaard navigatielinks bevat. Deze rol is niet bedoeld voor navigatiemenu's van websites, maar voor bestandsmenu's van online applicaties als Microsoft Word of Google Docs. Verwijder het attribuut role="menu" en gebruik de standaard HTML-structuur met nav-, ul- en a-elementen voor voorspelbaar en toegankelijk gedrag.

Op pagina https://www.noraonline.nl/wiki/NORA_online staat onder de kop “Nieuws & Agenda” een tabel met knoppen om de resultaten te sorteren. Deze knoppen hebben geen naam, geen juiste rol en geven geen informatie over de sorteertoestand. Dit heeft impact op screenreaders en spraakbesturing. Voeg een knop toe met een label die het attribuut aria-sort heeft. Meer informatie over het toegankelijk maken van sorteerbare tabellen is te vinden op https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/. Een vergelijkbaar probleem is aanwezig bij de sorteerknoppen op pagina https://www.noraonline.nl/wiki/Bouw_diensten_modulair_op in de tabel onder de kop “Alle implicaties bij dit architectuurprincipe” en https://www.noraonline.nl/wiki/Nieuws_%26_Agenda onder de kop “Agenda”.

Op pagina https://www.noraonline.nl/wiki/NORA_online staan onder de tabel “Eerste bijeenkomsten” pagineringslinks. Alle links hebben een onjuiste role=“null”. Deze rol moet worden verwijderd. Ditzelfde probleem komt voor bij de pagineringslinks onder vergelijkbare tabellen op pagina’s https://www.noraonline.nl/wiki/Nieuws_%26_Agenda en https://www.noraonline.nl/wiki/Bouw_diensten_modulair_op.

Op pagina https://www.noraonline.nl/wiki/NORA_online komt na de link “Help, ik wil ondersteuning!” de focus terecht op een lege link: <a href="https://social.overheid.nl/@nora" rel="me"></a>. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of verwijder de link. Zorg dat alle links een duidelijk linkdoel hebben.

Op https://www.noraonline.nl/wiki/NORA_online staat bij de tabel een keuzelijst "Exporteren". In de code is dit een button en is er een checkbox genest. De checkbox heeft geen label, omdat het label-element geen waarde heeft. Zet de lijst buiten het label-element en geef deze een waarde, of gebruik een native select-element. Dit komt ook voor bij de tabel op bijvoorbeeld https://www.noraonline.nl/wiki/Nieuws_%26_Agenda.

Op pagina's zoals https://www.noraonline.nl/wiki/NORA_online staat een zijbalk "Op deze pagina" met een inhoudsopgave. Hierin wordt gebruikgemaakt van aria-hidden op de items. Dit element bevat focusbare elementen. Sommige browsers zetten alsnog de focus in dat gebied. Zet aria-hidden ook op de links in dat blok.

Onderaan veel pagina’s, zoals op pagina https://www.noraonline.nl/wiki/NORA_online, staat een uitklapbare sectie “Toon meer details”. Het section-element in deze sectie gebruikt de attributen aria-expanded en aria-live, maar aria-expanded mag niet gebruikt worden op een section-element. Het attribuut aria-expanded moet worden geplaatst op een interactief element zoals een button of een link waarmee de bezoeker de sectie kan openen of sluiten. Het attribuut aria-live=“polite” werkt alleen wanneer de inhoud dynamisch verandert en heeft geen effect bij statische of vooraf geladen inhoud (en mag dus verwijderd worden). Verkeerd gebruik van ARIA-attributen kan leiden tot verwarring bij hulpsoftware en verminderde toegankelijkheid. Omdat deze sectie bedoeld is als een accordeonpaneel, is het beter om een button te gebruiken met de attributen aria-controls en aria-expanded, zoals beschreven in de WAI-ARIA Authoring Practices.

Op pagina https://www.noraonline.nl/index.php?title=Speciaal:Zoeken&profile=advanced&search=werk&fulltext=1 staat onder de kop “Zoeken” een zoekveld zonder toegankelijke naam. Hierdoor is het element niet toegankelijk. Geef het select-element een toegankelijke naam.

Op pagina https://www.noraonline.nl/wiki/Laatste_wijzigingen_noraonline staat onder de kop “Recente wijzigingen” een opmaaktabel. In de tabel staan secties met verborgen inhoud. De pijltjesknoppen waarmee deze secties worden uitgeklapt of ingeklapt hebben geen toegankelijke rol en geen toegankelijke naam. Hierdoor werkt het aria-expanded-attribuut dat is toegevoegd aan het span-element niet zoals verwacht. Gebruik het button-element in plaats van een span element en zet het aria-expanded attribuut daarop. Het tabindex-attribuut kan dan verwijderd worden.

Op pagina https://www.noraonline.nl/wiki/ISO_42010 staat onder de kop “ISO 42010” een afbeelding die functioneert als link, maar deze link heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft.

Op pagina https://www.noraonline.nl/wiki/Speciaal:GebruikerAanvragen ontbreekt bij het invoerveld onder de tekst die begint met “Om te beoordelen dat…” een toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.

Op https://www.noraonline.nl/wiki/Speciaal:GebruikerAanvragen zijn twee fieldset-elementen aanwezig met lege legend-elementen. Dit geldt voor het invoerveld “Uw naam” en voor het veld onder de tekst “Om te beoordelen dat…”. Deze fieldset-elementen groeperen geen invoervelden en zijn daardoor overbodig.

Op https://www.noraonline.nl/wiki/Speciaal:GebruikerAanvragen heeft het invoerveld “Om te beoordelen dat…” geen label. Voeg een label toe en associeer het met for en id.

Op pagina https://www.noraonline.nl/wiki/NORA_Gebruikersraad_2025-06-17 staan in de tekst onder de kop “Stand van zaken Actiepunten” drie iconen met een vergrootglas die functioneren als links. Deze iconen hebben geen alternatieve tekst en daardoor hebben de bijbehorende links geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft. Dit komt ook voor op https://www.noraonline.nl/wiki/Eigenschap:Beschrijving met iconen zoals het plusteken, het vergrootglas en het oog. Ook deze iconen functioneren als links zonder alternatieve tekst en hebben dus geen toegankelijke naam.

Op pagina https://www.noraonline.nl/wiki/Ketensturing/De_wereld_van_ketens zijn er secties met verborgen inhoud. De knoppen waarmee deze secties worden geopend of gesloten hebben geen duidelijke toegankelijke naam. Geef de knoppen toegankelijke namen, zodat gebruikers van hulptechnologieën kunnen begrijpen welke specifieke sectie ze openen of sluiten.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.noraonline.nl/wiki/NORA_online staat onder de kop “Eerste bijeenkomsten” een tabel met een zoekveld. Wanneer er tekst wordt ingevoerd, worden de resultaten in de tabel aangepast en verschijnt er een melding zoals “Weergave 1 tot 4 van 4 resultaten” zonder dat de pagina opnieuw wordt geladen. Deze melding is een statusbericht, maar wordt niet automatisch voorgelezen door schermlezers omdat deze geen toetsenbordfocus krijgt. Dat zou wel moeten gebeuren. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen. De code die dit mogelijk maakt is nog niet toegevoegd. Dit kan worden opgelost door het aria-live-attribuut aan de melding toe te voegen. Ditzelfde probleem doet zich voor op andere pagina’s met vergelijkbare tabellen, zoals op https://www.noraonline.nl/wiki/Nieuws_%26_Agenda en https://www.noraonline.nl/wiki/Bouw_diensten_modulair_op.