Rapport:
Audit digitale toegankelijkheid website Nh1816

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/ is in de cookiebanner een logo zichtbaar met de volledige tekst “Usercentrics Cookiebot”. Het tekstalternatief van dit logo bevat echter alleen de tekst “Cookiebot - opens in a new window”. Dit betekent dat niet alle informatie die visueel wordt getoond ook beschikbaar is voor bezoekers die het logo niet kunnen zien. Pas het tekstalternatief aan zodat het de volledige tekst van het logo bevat: “Usercentrics Cookiebot”.

Op pagina https://www.nh1816.nl/ staat in de cookiebanner ook het logo van de website met de tekst “Nh1816 Verzekeringen”. Het tekstalternatief van dit logo is alleen “logo”. In de footer van de website staat hetzelfde logo, maar het tekstalternatief is daar “Footer logo”. In beide gevallen wordt de volledige tekst op het logo niet weergegeven in het tekstalternatief. Dit moet worden aangepast zodat het volledige tekstalternatief “Nh1816 Verzekeringen” bevat.

Op pagina https://www.nh1816.nl/klantenservice/schade-melden ontbreekt in het tekstalternatief van het logo onder “Klimaatneutraal schadeherstel” een deel van de zichtbare tekst. Het tekstalternatief moet de volledige zichtbare tekst van het logo bevatten.

Op pagina https://www.nh1816.nl/ heeft het logo bovenaan de pagina geen tekstalternatief. Als het alt-attribuut van een afbeelding leeg is (alt=””), wordt deze afbeelding genegeerd door schermlezers. Dit betekent dat bezoekers die afhankelijk zijn van hulpsoftware de inhoud van het logo niet voorgelezen krijgen. Voeg een alt-tekst toe met de volledige tekst van het logo, bijvoorbeeld “Logo Nh1816 Verzekeringen, ga naar de homepagina”, zodat ook deze gebruikers de inhoud van het logo begrijpen. Zie ook succescriteria 2.4.4 en 4.1.2.

Op pagina https://www.nh1816.nl/ staat onder de kop “Snel gevonden” een decoratieve afbeelding met als tekstalternatief “VerzekeringApp icoon”. Deze afbeelding herhaalt de informatie die al in de tekst onder de afbeelding staat. Daarom is het niet nodig om een tekstalternatief toe te voegen. Het alt-attribuut moet leeg worden gelaten (alt=””) om te voorkomen dat de informatie dubbel wordt voorgelezen.
Ditzelfde probleem komt voor in het gedeelte met nieuwsartikelen op dezelfde pagina en ook op pagina https://www.nh1816.nl/nieuws, waar de afbeeldingen onder de kop “Nieuws” zijn voorzien van overbodige tekstalternatieven.

Op pagina https://www.nh1816.nl/ boven de kop “Ledenvoordelen” is een decoratieve afbeelding aanwezig met de alt-tekst “kinderen wijzen naar modeltrein in spoorwegmuseum”. Omdat deze afbeelding geen extra informatie toevoegt aan de inhoud van de pagina, moet deze als decoratief worden gemarkeerd. Dit kan door het alt-attribuut leeg te laten (alt="").
Hetzelfde probleem is aanwezig onder de kop “Verzekeringen” op dezelfde pagina, op pagina https://www.nh1816.nl/404 met de afbeelding “sleepwagen tilt 404 pagina weg”, op pagina https://www.nh1816.nl/klantenservice/schade-melden bij artikelen zoals “Verlies of diefstal?” en op pagina https://www.nh1816.nl/uw-adviseur onder de kaart.

Op alle pagina’s van de website https://www.nh1816.nl/ ontbreken in de footer de tekstalternatieven bij de socialmedia-iconen die als links fungeren. Hierdoor zijn deze links niet toegankelijk voor bezoekers die hulpsoftware gebruiken, omdat de links geen inhoud hebben. Om dit op te lossen, moeten de afbeeldingen een tekstalternatief krijgen dat het doel van de link beschrijft, zoals aria-label="Ga naar onze Facebook-pagina" of aria-label="Volg ons op LinkedIn", zodat duidelijk is waar de link naartoe leidt. Dit probleem doet zich ook voor op kleine schermen bij een zwevende pijl-link.

Op pagina https://www.nh1816.nl/ staan bij weergave op een klein scherm bovenaan twee knoppen: één met een pictogram van drie horizontale strepen en één met een vergrootglas. Beide knoppen missen een tekstalternatief. Voeg een beschrijving toe via een aria-label of een visueel verborgen tekst die beschikbaar is voor schermlezers, zoals aria-label="Open menu" voor de menuknop en aria-label="Zoeken" voor de zoekknop.
Ditzelfde probleem komt voor in het navigatiemenu dat wordt geopend met de menuknop, waar het “x”-icoon wordt gebruikt om het menu te sluiten. Voeg hier bijvoorbeeld aria-label="Sluit menu" toe om de functie van de knop duidelijk te maken.

In het PDF-document op https://www.nh1816.nl/Files/Files.new/Corporate-Governance/Nh1816-Meldregeling-vermoeden-incidenten-en-misstanden-2024-v2.0.pdf staat op pagina 1 een logo dat als artefact is toegevoegd. Dit betekent dat het logo niet beschikbaar is voor schermlezers. Informatieve afbeeldingen moeten worden toegevoegd met een Figure-tag en voorzien van een alt-tekst die de afbeelding beschrijft, zoals “Nh1816 Verzekeringen logo”, zodat de informatie ook toegankelijk is voor bezoekers die de tekst laten voorlezen.

In het PDF-document op https://www.nh1816.nl/Files/Files.new/Corporate-Governance/Nh1816-Meldregeling-vermoeden-incidenten-en-misstanden-2024-v2.0.pdf ontbreken op pagina’s 12 en 13 alt-teksten bij afbeeldingen die zijn toegevoegd met een Figure-tag. Zonder alt-tekst wordt alleen “afbeelding” voorgelezen, wat onvoldoende informatie biedt. Als de afbeelding informatief is, moet een beschrijvende alt-tekst worden toegevoegd, zoals “Organisatiestructuur Nh1816” of “Stappenplan voor het melden van incidenten”. Als de afbeelding decoratief is, moet deze als artefact worden gemarkeerd, zodat deze wordt genegeerd door schermlezers. Op pagina 14 van hetzelfde document staat een informatieve afbeelding met een automatisch gegenereerde beschrijving: “Afbeelding met tekst, schermopname, software, Webpagina\n\nAutomatisch gegenereerde beschrijving (Rechthoek)”. Deze tekst geeft geen bruikbare informatie over de inhoud van de afbeelding. Vervang deze automatisch gegenereerde beschrijving door een specifieke, informatieve alt-tekst die duidelijk maakt wat er op de afbeelding te zien is, zoals “Schematische weergave van de interne meldstructuur bij Nh1816”.

Advies: op pagina 12 van hetzelfde PDF-document staat een informatieve afbeelding waarvan de tekstalternatieven meer dan 150 tekens bevatten. De alternatieve tekst wordt in één keer voorgelezen en kan niet worden gepauzeerd of teruggespoeld. Om de toegankelijkheid te vergroten, is het aan te raden om deze tekst beknopt te houden en te beperken tot maximaal 150 tekens. Als er meer informatie nodig is, kan deze beter apart in de tekst op de pagina worden opgenomen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/ledenvoordeel staat onder de kop “Ledenvoordelen” een video waarin op verschillende momenten teksten en logo’s in beeld verschijnen, bijvoorbeeld rond 0:09, 0:19, 0:58 en 1:51. In de video is voornamelijk muziek te horen, terwijl visueel verschillende locaties, scènes en mensen worden getoond. Dit betekent dat bezoekers die blind of slechtziend zijn belangrijke visuele informatie missen, zoals namen, functies, logo’s en teksten. Dit kan voor dit succescriterium worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen beschrijft.
Op pagina https://www.nh1816.nl/ledenvoordeel komen onder de kop “Nh1816-ledendagen” meer video’s voor met vergelijkbare inhoud en hetzelfde probleem. Ook deze video’s missen audiobeschrijving die belangrijke visuele informatie overbrengen aan bezoekers die deze niet kunnen zien. Voeg ook bij deze video’s audiobeschrijving of een media-alternatief toe, zodat alle bezoekers toegang hebben tot de volledige inhoud van de video’s, inclusief visuele context.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/ledenvoordeel voldoen de video’s niet aan succescriterium 1.2.5, dat vereist dat er een audiobeschrijving aanwezig is bij video’s. Dit criterium valt onder niveau AA. In de video’s is voldoende ruimte in de bestaande audiotrack om een audiobeschrijving toe te voegen. Daarom is een media-alternatief hier niet toegestaan als oplossing. Een audiobeschrijving is noodzakelijk om ervoor te zorgen dat bezoekers die de video’s niet of niet goed kunnen zien, toch toegang hebben tot de visuele informatie.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/ is in de cookiebanner het strong-element verkeerd gebruikt voor visuele opmaak. De labels “Noodzakelijk,” “Voorkeuren,” “Statistieken” en “Marketing” zijn geplaatst in een strong-element, waarschijnlijk om ze vetgedrukt te tonen. Het strong-element heeft echter een semantische betekenis en geeft extra nadruk aan belangrijke tekst. Gebruik in plaats daarvan CSS voor visuele opmaak, bijvoorbeeld door een klasse toe te voegen die de tekst vet maakt. Dit voorkomt dat schermlezers de tekst onterecht met extra nadruk voorlezen.
Hetzelfde probleem is aanwezig in de cookiebanner, als hier de link "Details tonen" wordt geactiveerd. Onder het tabblad "Toestemming" is het strong-element onjuist gebruikt voor puur visuele doeleinden. Vervang ook hier de strong-elementen door CSS om de juiste semantiek te behouden en de toegankelijkheid te verbeteren.
Op pagina https://www.nh1816.nl/nieuws/appverbod-op-de-fiets-handhaving-boetes-en-tips-voor-veilig-fietsen staat hetzelfde probleem onder de kop “Appverbod op de fiets: boete” bij teksten in de tabel, en onder de koppen “Handhaving en ervaringen tot nu toe” en “5 tips om veilig te fietsen”. Hier zijn ook strong-elementen gebruikt voor vetgedrukte tekst zonder extra nadruk op betekenis. Vervang deze strong-elementen door CSS om ervoor te zorgen dat de tekst correct wordt geïnterpreteerd door schermlezers.

Op pagina https://www.nh1816.nl/ staat in het hoofdmenu in de header de link “Verzekeringen” die een submenu opent. In dit submenu staan groepen met links die worden voorafgegaan door beschrijvende teksten, zoals “Vervoer & mobiliteit”. Deze teksten functioneren als koppen die de structuur van de inhoud aangeven, maar ze zijn niet correct gemarkeerd als koppen in de HTML. Gebruik hiervoor h2- of h3-elementen om duidelijk te maken dat deze teksten bovenliggende koppen zijn. Hierdoor kunnen schermlezers de structuur van de pagina beter begrijpen, waardoor de navigatie voor gebruikers van hulpsoftware eenvoudiger wordt.

Op pagina https://www.nh1816.nl/ ontbreekt bij de link “Verzekeringen” het attribuut aria-controls, dat nodig is om de relatie tussen de link en het submenu dat ermee wordt geopend of gesloten correct aan te geven. Voeg het attribuut aria-controls toe aan deze link, zodat schermlezers en andere hulpsoftware kunnen herkennen welk submenu door deze link wordt bediend. Hiermee wordt de toegankelijkheid en navigatie-ervaring voor alle bezoekers verbeterd.

Op pagina https://www.nh1816.nl/ staat onder de kop “Snel gevonden” tekstblokken zoals “Schade melden”, “Adviseur aan het woord” en “VerzekeringApp” die onterecht gemarkeerd zijn met een h3-element. Deze teksten zijn geen echte koppen, omdat ze geen inleiding vormen voor de onderliggende inhoud, maar in plaats daarvan als links functioneren. Koppen zoals h3-elementen moeten alleen worden gebruikt voor teksten die echt de functie van kop of tussenkop hebben, omdat schermlezers op deze koppen vertrouwen om de structuur van een pagina te begrijpen en te navigeren. Vervang de h3-elementen door andere semantisch neutrale elementen, zoals span of div, en gebruik CSS voor de visuele opmaak.
Op pagina https://www.nh1816.nl/verzekeringen/autoverzekering onder “Snel gevonden”, op https://www.nh1816.nl/werkhoven-advies onder “Snel gevonden” en op https://www.nh1816.nl/ledenvoordeel onder “Nh1816-ledendagen” komt hetzelfde probleem voor. Ook hier moeten deze teksten worden aangepast, zodat alleen echte koppen in h2-elementen worden geplaatst.
Op pagina https://www.nh1816.nl/klantenservice/schade-melden is hetzelfde probleem aanwezig bij de tekst “Noodnummer: +31 88 112 1816”. Ook hier moet de structuur worden herzien om alleen echte koppen met h3-elementen te markeren.

Op pagina https://www.nh1816.nl/ staat in de footer een groep links naar sociale media die visueel als een groep wordt gepresenteerd, maar deze samenhang is niet terug te vinden in de HTML-structuur. Als voor ziende bezoekers duidelijk is dat deze links bij elkaar horen, moet deze relatie ook in de HTML-code aanwezig zijn. Neem deze links daarom op in een ul-element of een nav-element, zodat hulpsoftware en andere bezoekers begrijpen dat het om een samenhangende groep links gaat.

Op pagina https://www.nh1816.nl/ staat op kleine schermen een menuknop met drie horizontale lijnen waarmee het navigatiemenu wordt geopend. In dit menu zijn er secties met verborgen inhoud die geopend en gesloten kunnen worden. De teksten waarmee deze gedeelten in- en uitgeklapt worden, functioneren als koppen voor die delen, maar missen de juiste rol van kop. Markeer deze teksten met h2- of h3-elementen, zodat hulpsoftware en bezoekers begrijpen dat het om koppen gaat. Zorg ervoor dat deze koppen correct zijn gemarkeerd en dat hun rol als kop niet per ongeluk wordt overschreven door andere stijlen of scripts.
Op pagina https://www.nh1816.nl/mijn-polissen staan dezelfde problemen bij de accordeons onder “Veelgestelde vragen”. Dit geldt ook voor accordeons op pagina https://www.nh1816.nl/privacyverklaring, op https://www.nh1816.nl/verzekeringen/autoverzekering/ onder “Veelgestelde vragen” en op andere pagina’s. Markeer de teksten die accordeons openen en sluiten als koppen, zodat bezoekers die schermlezers gebruiken de structuur van de inhoud kunnen begrijpen en efficiënter door de pagina kunnen navigeren.

Op pagina https://www.nh1816.nl/contact staat bij een formulier de foutmelding “Het veld lijkt leeg of te kort.”. Schermlezers in de “form”-modus slaan vaak inhoud over die tussen invoervelden staat, waardoor de foutmelding mogelijk niet wordt voorgelezen. Dit komt doordat de relatie tussen de foutmelding en het invoerveld niet in de code is vastgelegd. Dit kan worden opgelost door bij het invoerveld het attribuut aria-describedby toe te voegen, dat verwijst naar het id van de bijbehorende foutmelding. Dit zorgt ervoor dat schermlezers de foutmelding correct aankondigen wanneer een invoerveld onjuist is ingevuld.
Op pagina https://www.nh1816.nl/werkhoven-advies is hetzelfde probleem aanwezig. Ook daar moeten de invoervelden worden voorzien van een aria-describedby-attribuut dat verwijst naar de bijbehorende foutmeldingen.

Op pagina https://www.nh1816.nl/404 staat een kop van het niveau h2 direct gevolgd door een andere kop van hetzelfde niveau, bijvoorbeeld de koppen “404” en “Helaas, deze pagina kunnen we niet (meer) vinden.”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder dat er inhoud tussen staat, betekent dit dat één van de koppen niet op de juiste manier is gebruikt. Koppen moeten altijd gevolgd worden door relevante inhoud, zodat de structuur logisch blijft voor alle bezoekers, inclusief gebruikers van schermlezers.
Dit probleem komt ook voor op pagina https://www.nh1816.nl/verzekeringapp bij de koppen “Veelgestelde vragen” en “Inloggen” en op pagina https://www.nh1816.nl/uw-adviseur bij de koppen “Adviseurs aan het woord” en “Lees de inspirerende verhalen.”.

Op pagina https://www.nh1816.nl/nieuws/appverbod-op-de-fiets-handhaving-boetes-en-tips-voor-veilig-fietsen staan koppen zoals “Appverbod op de fiets: argumenten”, “Handhaving en ervaringen tot nu toe” en “Appverbod op de fiets: boete” waarin zowel een kop als het strong-element worden gebruikt. Het strong-element heeft een semantische betekenis en mag niet alleen worden gebruikt om een visueel effect zoals vetgedrukte tekst te bereiken. Gebruik voor visuele nadruk in deze gevallen CSS in plaats van het strong-element, zodat de tekst correct wordt geïnterpreteerd door schermlezers.
Op pagina https://www.nh1816.nl/klantenservice/schade-melden komt hetzelfde probleem voor bij de kop “Noodnummer: +31 88 112 1816”. Ook hier moet het strong-element niet worden ingezet voor puur visuele nadruk, maar moet daarvoor CSS worden toegepast.

Op pagina https://www.nh1816.nl/mijn-polissen staat onder de kop “Veelgestelde vragen” in de sectie die geopend wordt door “Wat moet ik doen als ik niet kan inloggen in Mijn Polissen?” tekst zoals “1. u bent uw wachtwoord vergeten”, “2. u bent uw e-mailadres vergeten” en “3. hebt u geen verzekeringen bij Nh1816 Verzekeringen?” die onterecht met het strong-element zijn gemarkeerd in plaats van als een kop. Het strong-element is niet bedoeld om koppen mee te markeren. Gebruik in plaats daarvan koppen zoals h2 of h3, zodat de structuur en betekenis van de tekst duidelijk is voor hulpsoftware en bezoekers.
Op pagina https://www.nh1816.nl/contact komt hetzelfde probleem voor onder de kop “Contactgegevens” bij de tekst “Pers?”.
Op pagina https://www.nh1816.nl/werkhoven-advies is het woord “Kantoor” ook verkeerd gemarkeerd met een strong-element in plaats van met een kop-element. Pas deze markeringen aan om de structuur van de pagina correct weer te geven en de toegankelijkheid te verbeteren.

Op pagina https://www.nh1816.nl/privacyverklaring staat in de sectie die wordt geopend door “1. Voor wie is deze verklaring bestemd?” onder “1.2. Wat zijn persoonsgegevens?” een tekst die begint met “alle informatie over een geïdentificeerde …” waarin het em-element wordt gebruikt voor opmaakdoeleinden. Het em-element heeft echter een semantische betekenis en geeft aan dat de tekst extra nadruk krijgt. Dit element mag daarom niet alleen worden gebruikt om een visueel effect, zoals cursieve tekst, te bereiken. Voor puur visuele opmaak moet CSS worden toegepast.
Op dezelfde pagina komt dit probleem ook voor in de sectie die wordt geopend door “15. Welke rechten heeft u?” bij de tekst die begint met “Voordat een verzoek in behandeling …”.

Op pagina https://www.nh1816.nl/zoek-adviseur/adviseurs-aan-het-woord/mackus-financiele-dienstverlening is hetzelfde probleem aanwezig bij de tekst die begint met “Haar vader startte Mackus Financiële Dienstverlening …”. Op pagina https://www.nh1816.nl/ledenvoordeel staat onder de tekst “Nieuwsbrief ledenvoordelen” een formulier. Wanneer een bezoeker dit formulier succesvol verstuurt, verschijnt de tekst “Bedankt voor uw aanmelding op de ledennieuwsbrief…” die ook met het em-element is opgemaakt. In al deze gevallen moet het em-element vervangen worden door CSS voor puur visuele styling, zodat de semantische betekenis correct blijft.

Op pagina https://www.nh1816.nl/werkhoven-advies staat in het tabblad “Vraag offerte aan” een groep selectievakjes die visueel worden voorafgegaan door de tekst “Selecteer verzekeringen *”. Hoewel deze elementen samen een groep vormen, is die relatie niet vastgelegd in de HTML-code. Dit kan worden opgelost door de selectievakjes in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben, waarvoor het legend-element gebruikt kan worden. Plaats hierin de tekst “Selecteer verzekeringen *”, zodat hulpsoftware en bezoekers begrijpen dat deze elementen bij elkaar horen.

Op pagina https://www.nh1816.nl/ledenvoordeel komt een soortgelijk probleem voor bij radioknoppen in het formulier onder “Nieuwsbrief ledenvoordelen”. Deze radioknoppen hebben de groepsnaam “Aanhef *”, maar deze naam is niet programmatisch gekoppeld aan de groep. Ook hier moet een fieldset met legend worden gebruikt om de relatie tussen de groep en de naam duidelijk te maken.

Op pagina https://www.nh1816.nl/ledenvoordeel staat onder “Ledenvoordelen” een tekstblok met meerdere alinea’s dat verkeerdelijk als één p-element is gemarkeerd. Visueel zijn deze alinea’s duidelijk van elkaar gescheiden door witruimtes. Deze structuur moet ook in de HTML-code terugkomen. Zorg daarom dat elke alinea in een eigen p-element staat, zodat het aantal zichtbare alinea’s overeenkomt met het aantal p-elementen in de code.

Op pagina https://www.nh1816.nl/ledenvoordeel is de tekst “Nieuwsbrief ledenvoordelen” niet gemarkeerd als kop. Blinde bezoekers hebben weinig aan een kop die wel visueel als kop fungeert, maar niet als zodanig is gemarkeerd. Via koppen kunnen gebruikers van hulpsoftware de inhoud beter scannen en snel naar secties navigeren. Zet deze tekst daarom om in een koptekst, zoals h2 of h3, zodat de pagina-structuur voor iedereen duidelijk is.

In het PDF-document op https://www.nh1816.nl/Files/Files.new/Corporate-Governance/Nh1816-Meldregeling-vermoeden-incidenten-en-misstanden-2024-v2.0.pdf zijn meerdere koppen aanwezig die niet als kop zijn gemarkeerd, zoals “Meldregeling vermoeden incidenten en misstanden”, “2.2.1 Inbreuk op het Unierecht” en “2.2.2 Maatschappelijke misstand”. De visuele structuur van het document komt daardoor niet overeen met de structuur in de tags. Vervang de P-tags door de juiste H-tags, zodat de tag-structuur gelijk is aan de visuele structuur.

In het PDF-document op https://www.nh1816.nl/Files/Files.new/Corporate-Governance/Nh1816-Meldregeling-vermoeden-incidenten-en-misstanden-2024-v2.0.pdf op pagina 6 onder “4.2 Vastlegging van de interne (mondelinge) melding” staat een lijst die slechts met twee losse LI-tags is gemarkeerd. Inhoud die eruitziet als een lijst moet ook in de tags als een lijst zijn gemarkeerd, met een L-tag en de bijbehorende LI-tags. Dit zorgt ervoor dat blinde bezoekers dezelfde structuur ervaren als ziende bezoekers. Daarnaast kondigen schermlezers dan het aantal items in de lijst aan voordat ze de inhoud voorlezen. Dit probleem komt ook voor op pagina’s 7, 11 en 15.

Het PDF-document op https://www.nh1816.nl/Files/Files.new/VVP/VVP-Mackus-financiele-dienstverlening.pdf mist de benodigde structurele codes (tags), waardoor de inhoud ontoegankelijk is voor schermlezers. Hierdoor is ook een volledige controle op toegankelijkheid niet mogelijk. Dit probleem heeft betrekking op succescriteria die te maken hebben met de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Wanneer dit wordt opgelost, kan het zijn dat nieuwe toegankelijkheidsproblemen aan het licht komen die nu nog niet zijn ontdekt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/nieuws is de volgorde van de HTML-elementen in de nieuwsartikelen niet logisch opgebouwd. In de code staan de elementen nu in de volgorde: afbeelding, label (zoals “Nieuws”), datum, kop, tekst. De kop staat dus niet bovenaan, terwijl dit wel de structuur van het artikel aangeeft. Dit kan verwarrend zijn voor bezoekers die hulpsoftware gebruiken, omdat zij de inhoud niet in de juiste context horen. Dit probleem kan worden opgelost door de kop bovenaan te plaatsen in de code, gevolgd door de andere elementen die bij het artikel horen. De visuele volgorde op het scherm mag hiervan afwijken, zolang de code een logische structuur behoudt.

Op pagina https://www.nh1816.nl/nieuws/appverbod-op-de-fiets-handhaving-boetes-en-tips-voor-veilig-fietsen komt ditzelfde probleem voor bij de artikelen onder de kop “Laatste nieuws”. Ook hier staan de koppen niet bovenaan in de code, wat zorgt voor een inconsistente volgorde voor hulpsoftware.
Op pagina https://www.nh1816.nl/verzekeringen/autoverzekering/ is hetzelfde probleem aanwezig bij de artikelen onder de kop “Verzekeringen”. De kop staat in de code pas na andere elementen, zoals de afbeelding en de datum.
Op pagina https://www.nh1816.nl/klantenservice/schade-melden komt dit probleem ook voor bij de artikelen onder de kop “Schade melden”. Ook hier moeten de koppen bovenaan in de code worden geplaatst, zodat de inhoud logisch is opgebouwd voor bezoekers die hulpsoftware gebruiken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/contact bevat het formulier invoervelden voor persoonlijke gegevens zoals achternaam, e-mailadres en telefoonnummer. Deze velden missen het attribuut autocomplete. Het gebruik van dit attribuut maakt het voor browsers en hulpsoftware mogelijk om de velden automatisch in te vullen, wat het invulproces voor bezoekers vergemakkelijkt. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Dit is belangrijk voor de toegankelijkheid en gebruiksvriendelijkheid van het formulier. Een overzicht van verplichte waarden staat op https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Op pagina https://www.nh1816.nl/werkhoven-advies in de formulieren onder “Vraag advies”, “Vraag offerte aan” en “Bel me terug” ontbreken ook de vereiste autocomplete-attributen.
Op pagina https://www.nh1816.nl/klantenservice/schade-melden ontbreken deze attributen eveneens bij de invoervelden voor persoonlijke gegevens.
Op pagina https://www.nh1816.nl/ledenvoordeel is hetzelfde probleem aanwezig. Ook daar moeten de vereiste autocomplete-attributen worden toegevoegd.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/klantenservice/schade-melden staan in de alinea’s onder “Schade melden” en “Vraag stellen” links zoals “VerzekeringApp”, “Mijn-Polissen” en “verzekeringsadviseur”. Deze links zijn alleen te onderscheiden van gewone tekst door kleur. De contrastratio is daarbij onvoldoende. Hierdoor kunnen bezoekers met een visuele beperking of kleurenblindheid de links niet herkennen. Links in lopende tekst moeten daarom altijd ook op een andere manier herkenbaar zijn, bijvoorbeeld door onderstreping of een ander visueel kenmerk.
Op pagina https://www.nh1816.nl/ledenvoordeel komt hetzelfde probleem voor bij de links “Stichting Goede Doelen” en “ledenvoordeel@nh1816.nl”. Ook deze links zijn alleen door kleur herkenbaar. Pas de opmaak aan zodat de links ook zonder kleur duidelijk te herkennen zijn.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.nh1816.nl/ verschijnt bovenaan een zoekveld. Als er geen zoekresultaten zijn, worden meldingen zoals “De zoekopdracht gaf geen resultaten.” en “Bedoelt u:” weergegeven in lichtgrijze tekst (HEX #808080) op een witte achtergrond. De contrastratio is 3,9:1. Omdat deze tekst kleiner is dan 19 px, is de minimale vereiste contrastratio 4,5:1. De huidige combinatie voldoet hier niet aan.

Op alle pagina’s van de website https://www.nh1816.nl/ wordt de combinatie van oranje (HEX #E95E40) en wit gebruikt. De contrastratio is 3,4:1. Dit komt bijvoorbeeld voor bij de link “Mijn Polissen” bovenaan de pagina’s. In het hoofdmenu zijn er links die submenu’s openen, waarbij de actieve link witte tekst op een oranje achtergrond toont. Binnen deze submenu’s verandert de kleur van links naar oranje bij hover. Op pagina https://www.nh1816.nl/ gebeurt dit bij links zoals “Lees verder”, “Lees meer” en “Meer nieuws”. Op pagina https://www.nh1816.nl/contact gebeurt dit bij links zoals “Naar veelgestelde vragen”, de knop “Versturen”, de tekst “Contact” in het kruimelpad en inline links zoals “uw verzekeringsadviseur”. Deze tekst is kleiner dan 19 px en moet een contrastratio van ten minste 4,5:1 hebben, wat nu niet het geval is.

Op pagina https://www.nh1816.nl/ onder “VerzekeringApp, handig! Download de app direct” staat de link “veelgestelde vragen” in oranje (HEX #E95E40) op een lichtgrijze achtergrond (HEX #F1F1F1). De contrastratio is 3,0:1. Deze tekst is kleiner dan 19 px en voldoet dus niet aan de minimale vereiste van 4,5:1.
Dit probleem komt ook voor op andere pagina’s, zoals op https://www.nh1816.nl/contact onder “Contactgegevens”, op https://www.nh1816.nl/ledenvoordeel onder “Steun aan maatschappelijke partners” en “Vragen?”, en op https://www.nh1816.nl/verzekeringen/autoverzekering onder “Polisvoorwaarden”, “Wettelijke Aansprakelijkheid (WA)” en “WA + Beperkt Casco”.

Op pagina https://www.nh1816.nl/ onder de kop “Beste schadeverzekeraar van Nederland” staat een tekst in bruin (HEX #847270) op een lichtgrijze achtergrond (HEX #ECEBEA) met een contrastratio van 3,8:1. Omdat deze tekst kleiner is dan 19px, voldoet deze niet aan de vereiste contrastratio van 4,5:1.
Deze bruine kleur wordt ook op andere pagina’s gebruikt, zoals op https://www.nh1816.nl/contact onder “Contactgegevens” en “Openingstijden” op een lichtgrijze achtergrond (HEX #F1F1F1), met een ratio van 4,0:1. Hetzelfde probleem komt voor op https://www.nh1816.nl/ledenvoordeel onder “Steun aan maatschappelijke partners”, “Blijf op de hoogte!” en “Vragen?”, en op https://www.nh1816.nl/verzekeringen/autoverzekering onder “Polisvoorwaarden”, “Wettelijke Aansprakelijkheid (WA)” en “WA + Beperkt Casco”.

Op pagina https://www.nh1816.nl/contact verschijnt in het formulier de tekst “Bijlage” in lichtbruin (HEX #8F7F7A) op een witte achtergrond. De contrastratio is 3,8:1. Deze tekst is kleiner dan 19 px en moet dus een minimale contrastratio van 4,5:1 hebben.

In het PDF-document op https://www.nh1816.nl/Files/Files.new/VVP/VVP-Mackus-financiele-dienstverlening.pdf staat op pagina 1 witte tekst op een oranje achtergrond (HEX #E48567) met een contrastratio van 2,7:1. Op pagina 2 is er witte tekst op een halftransparante oranje achtergrond (HEX #D27F5F) met een ratio van 3,0:1. De contrastratio moet minimaal 4,5:1 zijn.
Op pagina 1 staat oranje tekst (HEX #E07354) op een lichte oranje achtergrond (HEX #F9E4D9), zoals bij “Samen Betrokken”, “Daniëlle Korten” en “Trots”. De contrastratio is 2,5:1. Voor deze combinatie is een minimale ratio van 3,0:1 vereist, omdat het grote tekst is.

In het PDF-document op https://www.nh1816.nl/Files/Files.new/Corporate-Governance/Nh1816-Meldregeling-vermoeden-incidenten-en-misstanden-2024-v2.0.pdf staat op meerdere pagina’s oranje tekst (HEX #DC5034) op een witte achtergrond, zoals op pagina 1 onderaan en op pagina’s 3, 4 en andere. De contrastratio is 4,0:1. Deze moet minimaal 4,5:1 zijn.

In het PDF-document op https://www.nh1816.nl/Files/Files.new/Corporate-Governance/Nh1816-Meldregeling-vermoeden-incidenten-en-misstanden-2024-v2.0.pdf is op pagina 12 witte tekst op een blauwe achtergrond (HEX #28A6DF) geplaatst. De contrastratio is 2,8:1. Deze tekst voldoet niet aan de minimale vereiste van 4,5:1. Op pagina 13 en 14 van hetzelfde document staat witte tekst op een grijze achtergrond (HEX #A6A6A6) met een contrastratio van 2,4:1. Ook hier is het contrast onvoldoende en moet dit worden verhoogd tot minimaal 4,5:1.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/ staat bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% in de header een toegankelijkheidsknop die niet zichtbaar en daardoor ook niet bruikbaar is. In de footer staan onder “Over Nh1816”, “Verzekeringen” en “Snelle links” links die bij hetzelfde zoomniveau eveneens niet zichtbaar en niet te bedienen zijn. Ook wanneer bezoekers inzoomen op de pagina, moet alle inhoud zichtbaar blijven en goed werken. Zorg er daarom voor dat de toegankelijkheidsknop en de genoemde links in de footer bij een zoomniveau van 200% volledig zichtbaar en bruikbaar zijn.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/sitemap raken bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de volgende linkteksten gedeeltelijk buiten beeld of worden afgekapt: “Recreatiewoningverzekering”, “Pleziervaartuigenverzekering”, “Verkeersdeelnemersverzekering” en andere. Hierdoor zijn de teksten niet volledig leesbaar. Bij inzoomen tot 400% moet alle inhoud zichtbaar en leesbaar blijven.

Op pagina https://www.nh1816.nl/nieuws/appverbod-op-de-fiets-handhaving-boetes-en-tips-voor-veilig-fietsen komt hetzelfde probleem voor in de tabel onder de kop “Appverbod op de fiets: boete”. De tekst “Boete 2024” wordt deels afgekapt en is daardoor niet volledig leesbaar.

Op pagina https://www.nh1816.nl/werkhoven-advies wordt bij een zoomniveau van 400% op een schermresolutie van 1280 bij 1024 pixels in het tabblad “Vraag offerte aan” de tekst “Verkeersdeelnemers” en “Recreatiewoning” gedeeltelijk overlapt door het selectievakje. Hierdoor is de tekst moeilijk leesbaar of niet goed bruikbaar. Bij deze instellingen moet alle content zichtbaar blijven en moet de pagina correct functioneren, zonder dat elementen elkaar overlappen of buiten beeld vallen.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.nh1816.nl/ staat bovenaan een zoekveld. Wanneer een bezoeker begint te typen, verschijnt er in dit veld een knop met een “x”-icoon. Dit icoon heeft een grijze kleur (HEX #D3D3D3) op een witte achtergrond, met een contrastratio van 1,5:1. Door dit lage contrast is het icoon voor sommige bezoekers niet goed zichtbaar. Zorg dat de contrastratio minimaal 3,0:1 is, zodat het icoon voor iedereen waar te nemen is.

Op pagina https://www.nh1816.nl/ staan onder de kop “Beste schadeverzekeraar van Nederland” oranje sterren (HEX #E95E40) op een lichtgrijze achtergrond (HEX #E6E1DF). De contrastratio is 2,7:1. Omdat het om informatieve grafische elementen gaat, moet het contrast minimaal 3,0:1 zijn. Bezoekers moeten deze visuele elementen goed kunnen onderscheiden, ook met een visuele beperking.

Op alle pagina’s van de website https://www.nh1816.nl/ staat bovenaan een knop met een toegankelijkheidspictogram. Wanneer deze wordt geopend, verschijnt er een schakelknop naast de tekst “Dyslexie”. De witte kleur van de schakelknop op een lichtblauwe achtergrond (HEX #BFCBD9) heeft een contrastratio van 1,6:1. Wanneer de knop is ingeschakeld, verandert de achtergrond in groen (HEX #75C791), met een contrastratio van 2,0:1. De contrastratio van interactieve elementen zoals deze moet minimaal 3,0:1 zijn. Pas de kleuren aan zodat de schakelknop in beide toestanden voldoende contrast biedt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/ worden de koppen in nieuwsartikelen gedeeltelijk onzichtbaar of onleesbaar wanneer bezoekers de tekstweergave aanpassen volgens de richtlijnen uit het succescriterium voor tekstafstand. Dit kan gebeuren wanneer de afstand tussen regels, letters of woorden wordt vergroot, bijvoorbeeld door bezoekers met dyslexie. De tekst mag in dat geval niet wegvallen of overlappen. Dit probleem ontstaat doordat de containers waarin de tekst staat niet voldoende meeschalen met de aangepaste weergave. De oplossing is om de hoogte en breedte van deze containers responsief te maken, zodat de volledige inhoud zichtbaar en leesbaar blijft.
Op pagina https://www.nh1816.nl/nieuws komt hetzelfde probleem voor. Ook daar raken de koppen in nieuwsartikelen gedeeltelijk verborgen wanneer aangepaste tekstafstanden worden toegepast. De containers moeten ook daar worden aangepast om de tekst toegankelijk te houden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/werkhoven-advies staan naast de koppen “Nieuw” en “Schade” iconen die een tooltip activeren. Wanneer een bezoeker met de muis over het icoon beweegt, verschijnt er nieuwe inhoud in de vorm van een tooltip. Deze tooltip kan echter niet worden gesloten met de Escape-toets. Bezoekers moeten de mogelijkheid hebben om een tooltip met de Esc-toets te sluiten. Dit is belangrijk voor de toegankelijkheid, vooral voor toetsenbordgebruikers en mensen die gebruik maken van hulpsoftware. Zorg dat de tooltips met de Esc-toets kunnen worden afgesloten.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.nh1816.nl/ is er een zwevende link met de tekst “Kom in contact” die een zijbalkmenu opent wanneer erop wordt geklikt. Deze functionaliteit is niet toegankelijk voor bezoekers die geen muis gebruiken. Het dialoogvenster moet ook geopend kunnen worden met de spatiebalk of de Enter-toets, zodat het menu toegankelijk is voor toetsenbordgebruikers.

Op alle pagina’s zijn in de header, bij weergave op een klein scherm, knoppen zichtbaar met een pictogram van drie horizontale strepen en een vergrootglas. Deze knoppen zijn niet bedienbaar met het toetsenbord. Wanneer de knop met drie strepen wordt gebruikt om het menu te openen, verschijnt een sluitknop met een “X”-icoon. Ook deze knop is niet bedienbaar met het toetsenbord. Zie bijvoorbeeld https://www.nh1816.nl/. Alle interactieve knoppen moeten met het toetsenbord bereikbaar en bedienbaar zijn.

Op pagina https://www.nh1816.nl/werkhoven-advies staan naast de koppen “Nieuw” en “Schade” iconen die een tooltip activeren bij hover met de muis. Deze tooltips zijn niet toegankelijk voor bezoekers die alleen met het toetsenbord navigeren. Als de tooltip belangrijke informatie of instructies bevat, moet deze ook via het toetsenbord op te roepen en te sluiten zijn.

Op pagina https://www.nh1816.nl/ledenvoordeel onder “Ledenvoordelen” staat een video die afgespeeld kan worden. Het is echter niet mogelijk om deze video te stoppen met het toetsenbord. De bediening van de video moet volledig toegankelijk zijn voor toetsenbordgebruikers, zodat deze gestart en gestopt kan worden zonder muis. Ditzelfde probleem komt voor bij andere video’s op deze pagina.

Op pagina https://www.nh1816.nl/ledenvoordeel is de knop “Versturen” niet toegankelijk via het toetsenbord. Zorg dat deze knop bereikbaar is en geactiveerd kan worden met de Enter-toets of de spatiebalk, zodat bezoekers het formulier zonder muis kunnen verzenden.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/contact maakt het formulier gebruik van HTML5-validatie voor verplichte invoervelden. De foutmeldingen die hiermee worden weergegeven, worden niet door alle browsers en schermlezers op dezelfde manier ondersteund. Vaak verdwijnen ze snel of worden ze niet goed voorgelezen, waardoor bezoekers de fout niet opmerken of niet begrijpen wat er misgaat. Daarom moeten er altijd handmatig foutmeldingen aan het formulier worden toegevoegd, zodat deze consistent en toegankelijk worden weergegeven. Controleer of andere formulieren op de website ook alleen HTML5-validatie gebruiken, en voeg indien nodig aangepaste foutmeldingen toe.

Op pagina https://www.nh1816.nl/werkhoven-advies staat onder de kop “Reviews” een automatisch roterende carrousel. Door de automatische rotatie is de tijd om de tekst te lezen beperkt, wat een probleem oplevert voor bezoekers die meer tijd nodig hebben. Dit probleem kan worden opgelost door een pauzeknop toe te voegen waarmee de bezoeker zelf kan bepalen wanneer de carrousel wisselt. Daarmee wordt ook voldaan aan succescriterium 2.2.2.

Op pagina https://www.nh1816.nl/ledenvoordeel verschijnen foutmeldingen kort na het verzenden van het formulier, maar verdwijnen deze automatisch. Hierdoor krijgen sommige bezoekers niet genoeg tijd om de melding te lezen of te begrijpen. Foutmeldingen moeten zichtbaar blijven totdat de bezoeker er zelf voor kiest deze te sluiten. Voeg daarom een mogelijkheid toe om de melding handmatig te sluiten, zoals een sluitknop.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/werkhoven-advies staat onder de kop “Reviews” een carrousel die automatisch elke paar seconden een nieuwe slide toont. Deze carrousel kan niet worden gestopt, gepauzeerd of verborgen. Dit vormt een toegankelijkheidsprobleem, vooral voor mensen met een cognitieve beperking. De voortdurende beweging kan afleiden van de overige inhoud op de pagina en het lezen bemoeilijken. Bewegende, knipperende, scrollende of automatisch wisselende inhoud die automatisch start en langer dan vijf seconden actief is, moet te stoppen, pauzeren of verbergen zijn. Voeg daarom bedieningselementen toe waarmee bezoekers zelf de beweging kunnen stoppen of pauzeren.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.nh1816.nl/ ontbreekt een skiplink. Hiermee kunnen bezoekers vaste blokken met herhalende inhoud, zoals het navigatiemenu, overslaan en direct naar de hoofdinhoud van de pagina gaan. Dit is vooral belangrijk voor toetsenbordgebruikers en bezoekers die hulpsoftware gebruiken. Een skiplink moet de eerste link op de pagina zijn. De link mag standaard verborgen zijn, maar moet zichtbaar worden zodra deze focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina kunnen overslaan en direct naar de hoofdinhoud kunnen navigeren.

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.nh1816.nl/Files/Files.new/Corporate-Governance/Nh1816-Meldregeling-vermoeden-incidenten-en-misstanden-2024-v2.0.pdf is geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de PDF-metadata een documenttitel worden toegevoegd. Wanneer een PDF wordt geopend in een PDF-lezer zoals Adobe Acrobat of een browser, wordt standaard de bestandsnaam weergegeven. Als er een documenttitel is ingesteld, wordt deze in plaats daarvan getoond. Dit verhoogt de toegankelijkheid, omdat bezoekers met een beperking sneller kunnen beoordelen of het document relevant is. De titel kan worden ingesteld in de eigenschappen van het bronbestand of direct in het PDF-document.
Ditzelfde probleem komt voor in het PDF-document op https://www.nh1816.nl/Files/Files.new/VVP/VVP-Mackus-financiele-dienstverlening.pdf. Ook hier ontbreekt de documenttitel in de bestandseigenschappen. Voeg een duidelijke titel toe in de metadata van het bestand om de toegankelijkheid te verbeteren.

Uitkomst: Onvoldoende

Bevindingen: In het cookiedialoogvenster worden de tabbladen “Toestemming”, “Details” en “Over” weergegeven. Wanneer een bezoeker het tabblad “Details” activeert, verplaatst de toetsenbordfocus eerst naar een ander tabblad, zoals “Over” of “Toestemming”, voordat de bijbehorende inhoud wordt bereikt. Dit is niet de juiste focusvolgorde. De bediening van tabbladen moet zo werken dat de Tab-toets de focus op het actieve tabblad plaatst. Daarna moet het mogelijk zijn om met de pijltjestoetsen tussen de tabbladen te wisselen. Zodra een ander tabblad is geactiveerd, moet de volgende Tab-toets de focus direct naar de inhoud van dat tabblad verplaatsen.

Op alle pagina’s van de website https://www.nh1816.nl/ opent de link “Verzekeringen” bovenaan de pagina een submenu. Wanneer dit menu via het toetsenbord wordt geopend, verplaatst de focus eerst naar andere onderdelen van het hoofdmenu voordat de submenu-items worden bereikt. De volgorde van toetsenbordnavigatie is hierdoor onlogisch. De focus moet direct verplaatst worden naar de submenu-items zodra het submenu is geopend.

Op alle pagina’s van de website https://www.nh1816.nl/ bevat het hoofdmenu submenu’s. Wanneer deze submenu’s geopend worden, is het mogelijk om met het toetsenbord buiten het menu te navigeren, terwijl het submenu nog openstaat. Hierdoor komt de focus op elementen van de onderliggende pagina terecht. Dit moet worden voorkomen. De toetsenbordfocus moet binnen het geopende menu blijven, totdat de bezoeker dit zelf sluit met de sluitknop of met de Escape-toets. Een andere oplossing is om het menu automatisch te sluiten zodra de focus het menu verlaat.
Ditzelfde probleem doet zich voor bij kleinere schermen met de menu’s die worden geopend via de knoppen met drie horizontale strepen en het vergrootglasicoon in de header.

Op pagina https://www.nh1816.nl/contact is de volgorde van toetsenbordfocus in het formulier niet logisch. Bij de invoervelden is het tabindex-attribuut gebruikt met een waarde groter dan 0, waardoor ze uit de natuurlijke tabvolgorde worden gehaald. Dit verstoort de verwachte volgorde voor bezoekers die met de Tab-toets navigeren.
Ditzelfde probleem komt voor op pagina https://www.nh1816.nl/werkhoven-advies in de formulieren onder “Vraag advies”, “Vraag offerte aan” en “Bel me terug”, en op pagina https://www.nh1816.nl/klantenservice/schade-melden. De focusvolgorde moet aansluiten op de visuele opbouw van het formulier.

Op alle pagina’s van de website https://www.nh1816.nl/ komt de toetsenbordfocus na de link “Nieuws” in het hoofdmenu terecht op interactieve elementen die onzichtbaar zijn. De focus mag niet op verborgen links, knoppen of formulieren landen, omdat bezoekers deze per ongeluk kunnen activeren zonder dat ze zichtbaar zijn.

Op alle pagina’s van de website https://www.nh1816.nl/ brengt de link “Naar boven” de bezoeker terug naar het begin van de pagina. De toetsenbordfocus wordt daarbij echter niet verplaatst naar het eerste interactieve element bovenaan, maar gaat verder naar de footer. Dit is verwarrend voor bezoekers die alleen het toetsenbord gebruiken. Het activeren van de “Naar boven”-link moet de focus verplaatsen naar het eerstvolgende logische interactieve element aan het begin van de pagina, zodat bezoekers eenvoudig opnieuw kunnen beginnen met navigeren.

Uitkomst: Onvoldoende

Bevindingen: Op de website https://www.nh1816.nl/ ontbreekt bij het logo bovenaan de pagina een beschrijvende tekst over de bestemming van de link. Hierdoor is het voor bezoekers die hulpsoftware gebruiken niet duidelijk waar de link naartoe leidt. Dit kan worden opgelost door een alt-tekst aan de afbeelding van het logo toe te voegen, bijvoorbeeld “Logo Nh1816 Verzekeringen, ga naar de homepagina”, of door een tekst toe te voegen die alleen zichtbaar is voor schermlezers, bijvoorbeeld via een aria-label-attribuut.

Wanneer de website https://www.nh1816.nl/ op een klein scherm wordt bekeken, is er een zwevende link met icoon van een pijltje. Deze link bevat geen toegankelijke tekst en heeft daardoor geen herkenbaar linkdoel. Om dit op te lossen moet er inhoud aan de link worden toegevoegd, bijvoorbeeld via een aria-label. Zorg dat het doel van de link duidelijk is voor alle bezoekers.

Op pagina https://www.nh1816.nl/verzekeringen/autoverzekering/ staan onder de kop “Verzekeringen” meerdere links met de tekst “Lees meer”. Deze teksten beschrijven het linkdoel niet en kunnen verwarrend zijn, vooral voor mensen met een cognitieve beperking of voor bezoekers die gebruikmaken van schermlezers. Linkteksten zoals “Lees meer” moeten worden aangevuld met informatie over de bestemming, bijvoorbeeld “Lees meer over autoverzekeringen”. Als deze tekst visueel te lang is, kan het aanvullende deel visueel verborgen worden.

Op pagina https://www.nh1816.nl/ledenvoordeel hebben de links “Bekijk ledenvoordeel” onder “Museum BroekerVeiling € 6,-” en “Reddingmuseum Dorus Rijkers € 6,50” dezelfde tekst. Ook hier is de bestemming van de link niet voldoende duidelijk. De linktekst moet specifieker worden gemaakt, zodat bezoekers weten wat ze kunnen verwachten.
Op pagina https://www.nh1816.nl/uw-adviseur komt hetzelfde probleem voor bij de link “Lees meer” onder “Bekijk alle reviews”. Ook hier moet de linktekst specifieker worden gemaakt om het linkdoel duidelijk te maken.

Advies: in de footer van de website https://www.nh1816.nl/ ontbreken toegankelijke namen bij de socialmedia-iconen. Deze links hebben wel een title-attribuut, maar dit attribuut wordt mogelijk niet door alle hulpsoftware automatisch voorgelezen. Het is daarom beter om de afbeeldingen een goed tekstalternatief te geven, zoals voorgesteld bij succescriterium 1.1.1.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/werkhoven-advies staat onder de kop “Reviews” een carrousel met pijltjestoetsen voor navigatie. Deze knoppen hebben toegankelijke namen als “previous” en “next”. Deze namen geven echter onvoldoende informatie over de functie van de knoppen. Pas de toegankelijke namen aan naar bijvoorbeeld “vorige slide” en “volgende slide”, zodat bezoekers die hulpsoftware gebruiken precies begrijpen wat de knoppen doen.
Ditzelfde probleem komt voor op pagina https://www.nh1816.nl/verzekeringapp in de carrousel onder de kop “Functionaliteiten”. Ook daar moeten de toegankelijke namen van de pijltjestoetsen specifieker worden gemaakt.

Op pagina https://www.nh1816.nl/ wordt de kop “Snel gevonden” gebruikt boven een reeks links. Deze kop is te algemeen en geeft geen duidelijke informatie over de inhoud die volgt. Voor bezoekers die hulpsoftware gebruiken is dit problematisch, omdat zij de koppen gebruiken om snel door de pagina te navigeren en relevante informatie te vinden. Een algemene tekst zoals “Snel gevonden” geeft daarbij onvoldoende context. Vervang deze kop door een meer specifieke aanduiding die beschrijft wat voor soort inhoud of links volgt, zoals “Populaire pagina’s” of “Belangrijke onderwerpen”.
Ditzelfde probleem komt voor op pagina https://www.nh1816.nl/werkhoven-advies, op pagina https://www.nh1816.nl/verzekeringen/autoverzekering en op andere pagina’s van de website. Ook daar wordt de kop “Snel gevonden” gebruikt op een manier die geen duidelijke structuur of betekenis toevoegt. Pas deze koppen aan om de toegankelijkheid te verbeteren.

Pagina https://www.nh1816.nl/ledenvoordeel bevat een iframe met het formulier “Nieuwsbrief ledenvoordelen”. Het title-attribuut van deze iframe is nu “Newsletter”. Deze titel is te algemeen en geeft onvoldoende informatie over de inhoud en functie van het iframe. Een betere omschrijving zou zijn: “Formulier voor aanmelden nieuwsbrief ledenvoordelen”. Hiermee is het voor bezoekers die schermlezers gebruiken meteen duidelijk wat ze kunnen verwachten.

Op alle pagina’s van de website https://www.nh1816.nl/ staat bovenaan een knop met een toegankelijkheidspictogram die een schakelknop opent. Deze schakelknop heeft visueel het label “Dyslexie”. Wanneer een bezoeker echter alleen met het toetsenbord navigeert en de focus op deze schakelknop komt, wordt de labeltekst weergegeven als “e”. Deze aanduiding is onduidelijk en geeft geen informatie over de functie van de knop. Bezoekers die gebruik maken van een toetsenbord of hulpsoftware moeten op basis van de labeltekst kunnen begrijpen wat de knop doet. Zorg daarom dat de schakelknop een toegankelijke naam krijgt die correct en volledig beschrijft waarvoor de knop dient, bijvoorbeeld via een aria-label of door het label correct zichtbaar te maken voor alle hulpmiddelen. De labeltekst moet duidelijk maken dat het gaat om een functie voor dyslexievriendelijke weergave.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website https://www.nh1816.nl/ is de toetsenbordfocus niet zichtbaar op interactieve elementen zoals links, knoppen en invoervelden. Dit vormt een toegankelijkheidsprobleem voor bezoekers die met het toetsenbord navigeren. De focus moet altijd visueel zichtbaar zijn, zodat duidelijk is welk element op dat moment actief is. Zonder zichtbare focus weten bezoekers niet waar ze zich op de pagina bevinden en kunnen zij knoppen of links niet op het juiste moment activeren. Zorg ervoor dat alle focusbare elementen een goed zichtbare focusstijl krijgen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner op de website https://www.nh1816.nl/ staat een logo met de zichtbare tekst “Usercentrics Cookiebot”, dat tevens een link is. De toegankelijke naam van deze link is echter “Cookiebot - opens in a new window” en wordt opgegeven via een aria-label. Omdat deze toegankelijke naam afwijkt van de zichtbare tekst, werkt de link niet goed met spraakbedieningssoftware. Bezoekers die deze systemen gebruiken, spreken de tekst uit die zij visueel waarnemen. Als de toegankelijke naam hiervan afwijkt, herkent het systeem het commando niet. Zorg er daarom voor dat de zichtbare tekst “Usercentrics Cookiebot” ook voorkomt in de toegankelijke naam, bij voorkeur vooraan. Een betere toegankelijke naam zou bijvoorbeeld zijn: “Usercentrics Cookiebot – opent in een nieuw venster”.

Bovenaan de website https://www.nh1816.nl/ staat een logo met de zichtbare tekst “Nh1816 Verzekeringen”, dat ook fungeert als link. De toegankelijke naam van deze link bevat deze zichtbare tekst niet. Voor goede toegankelijkheid — met name voor bezoekers die gebruik maken van schermlezers of stemgestuurde systemen — moet de toegankelijke naam de zichtbare tekst bevatten, bij voorkeur aan het begin. Idealiter is de toegankelijke naam identiek aan de zichtbare tekst: “Nh1816 Verzekeringen”. Zo kunnen bezoekers de link ook activeren via spraakopdrachten en is de bestemming van de link duidelijk voor iedereen.

Op alle pagina’s van de website https://www.nh1816.nl/ staat bovenaan een knop met een toegankelijkheidspictogram die een schakelknop opent. Naast deze knop wordt visueel de tekst “Dyslexie” weergegeven. De toegankelijke naam van deze schakelknop is echter leeg. Omdat de zichtbare tekst “Dyslexie” niet voorkomt in de toegankelijke naam, is het element niet bruikbaar met spraakgestuurde systemen. Bezoekers die de knop willen activeren door de zichtbare tekst uit te spreken, zullen geen resultaat krijgen omdat het systeem de knop niet herkent. Zorg er daarom voor dat de zichtbare tekst “Dyslexie” onderdeel is van de toegankelijke naam, bij voorkeur aan het begin. Dit kan door een correcte aria-label toe te voegen, of door de tekst op een toegankelijke manier te koppelen aan de knop. Zo blijft de functie van het element duidelijk en bedienbaar voor iedereen.

Op meerdere pagina’s van de website https://www.nh1816.nl/ zijn interactieve elementen aanwezig waarbij de toegankelijke naam (aria-label) niet overeenkomt met de zichtbare tekst of er sterk van afwijkt. De aria-label overschrijft andere naamgevingsmethoden, zoals zichtbare tekst of gekoppelde labels. De zichtbare tekst moet altijd deel uitmaken van de toegankelijke naam, bij voorkeur aan het begin. Als dat niet gebeurt, kunnen bezoekers die spraakgestuurde systemen gebruiken de elementen niet activeren, en ontstaat er verwarring voor gebruikers van schermlezers. Voorbeelden van dit probleem zijn.

Op https://www.nh1816.nl/ onder de kop “Altijd zorgeloos op de fiets” staat een link met de zichtbare tekst “Lees verder”, maar de toegankelijke naam is “lees meer informatie over de Nh1816 Fietsverzekering”. Onder de kop “Ledenvoordelen” staat een link “Lees meer” met de toegankelijke naam “Bekijk alle ledenvoordelen van Nh1816 verzekeringen”. Onder “Verzekeringen” staat bij het onderdeel “Auto” een link “Lees meer” met als toegankelijke naam “Bekijk de autoverzekering”. Op https://www.nh1816.nl/contact heeft de link “Naar veelgestelde vragen” de toegankelijke naam “Bekijk antwoorden op veelgestelde vragen”.

Op https://www.nh1816.nl/zoek-adviseur/adviseurs-aan-het-woord/mackus-financiele-dienstverlening heeft de link “Lees meer” de toegankelijke naam “Lees het artikel in VVP”. Deze toegankelijke namen verschillen te veel van de zichtbare tekst. Zorg ervoor dat de zichtbare tekst wordt opgenomen in de toegankelijke naam, bijvoorbeeld: “Lees meer – bekijk de autoverzekering” of “Lees het artikel in VVP – lees meer”, waarbij de zichtbare tekst vooraan staat. Dit maakt de elementen herkenbaar en bedienbaar voor alle bezoekers, ook voor wie spraakbediening of hulpsoftware gebruikt.

Op pagina https://www.nh1816.nl/ staat een kaart met een zoekbalk. De zichtbare tekst bij deze zoekbalk is “Vind een adviseur in de buurt”, maar de toegankelijke naam van het invoerveld is “Address”, afkomstig van het aria-label. De zichtbare tekst komt dus niet voor in de toegankelijke naam. Hierdoor is de functie van het veld niet duidelijk voor bezoekers die hulpsoftware of spraakbediening gebruiken. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en plaats deze tekst bij voorkeur vooraan. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst: “Vind een adviseur in de buurt”.
Ditzelfde probleem komt voor op de pagina’s https://www.nh1816.nl/verzekeringen/autoverzekering/ en https://www.nh1816.nl/verzekeringen/stacaravanverzekering bij de zoekbalk op de kaart. Ook daar moet de toegankelijke naam worden aangepast zodat deze overeenkomt met de zichtbare tekst. Zo wordt de zoekfunctie op de kaart voor alle bezoekers duidelijk en toegankelijk.

Op pagina https://www.nh1816.nl/werkhoven-advies staat in het tabblad “Vraag offerte aan” een formulier met invoervelden. Bij het veld “Naam *” is de tekst visueel aanwezig als label, maar de toegankelijke naam van het veld is leeg. Dit betekent dat bezoekers die gebruik maken van schermlezers of spraakbesturing geen informatie krijgen over de betekenis van het veld. Ditzelfde probleem komt ook voor bij andere invoervelden in dit formulier. In het tabblad “Bel me terug” ontbreekt eveneens een toegankelijke naam bij de velden “Naam” en “Telefoonnummer”, en bij het select-element “Waar gaat uw vraag over?”. Ook hier is de zichtbare tekst niet opgenomen in de toegankelijke naam. Zorg dat de zichtbare tekst van elk invoerveld deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst. Dit kan door gebruik te maken van een correct gekoppeld label-element of door het gebruik van het attribuut aria-labelledby. Zo wordt de functie van elk veld duidelijk voor alle bezoekers, ook voor wie hulpsoftware gebruikt.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In het PDF-document op https://www.nh1816.nl/Files/Files.new/VVP/VVP-Mackus-financiele-dienstverlening.pdf is in de metadata geen taal ingesteld. Het is belangrijk om de documenttaal correct in te stellen, zodat hulpsoftware zoals schermlezers de inhoud met de juiste uitspraakregels kan voorlezen. Als de taal ontbreekt, kunnen woorden verkeerd worden uitgesproken of verkeerd worden geïnterpreteerd. De taalinstelling kan worden toegevoegd via de bestandseigenschappen van het PDF-document. Hiermee wordt de toegankelijkheid voor anderstalige of slechtziende bezoekers verbeterd.

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner op de website https://www.nh1816.nl/ heeft het logo de alternatieve tekst “Cookiebot - opens in a new window”. Deze tekst is in het Engels, terwijl de rest van de pagina in het Nederlands is. Omdat schermlezers de tekst uitspreken volgens de hoofdtaal van de pagina, wordt de uitspraak verkeerd. Dit kan worden opgelost door de tekst naar het Nederlands te vertalen, bijvoorbeeld: “Cookiebot – opent in een nieuw venster”. Een andere oplossing is om het logo een lang-attribuut te geven waarin wordt aangegeven dat de tekst in het Engels is geschreven.

Op pagina https://www.nh1816.nl/search?q=nh staat onder de zoekresultaten een paginering met aria-label-attributen in het Engels, zoals “Current Page, Page 1” en “Go to page 2”. Omdat deze labels door schermlezers in het Nederlands worden uitgesproken, klinken ze onnatuurlijk of verwarrend. Vertaal deze labels naar het Nederlands, bijvoorbeeld: “Huidige pagina, pagina 1” en “Ga naar pagina 2”.
Ditzelfde probleem komt voor op pagina https://www.nh1816.nl/nieuws in de paginering onder de nieuwsartikelen. Een vergelijkbaar probleem doet zich voor op pagina https://www.nh1816.nl/verzekeringapp bij de bolletjesnavigatie van de carousel onder “Functionaliteiten”.

Op pagina https://www.nh1816.nl/werkhoven-advies staat in het tabblad “Bel me terug” een formulier met een foutmelding bij het invoerveld “Telefoonnummer *”. Deze foutmelding luidt: “It seems that your mobile number is not indicated or too short”. Omdat de rest van de website in het Nederlands is, moet ook deze melding vertaald worden naar het Nederlands. Bijvoorbeeld: “Het lijkt erop dat uw telefoonnummer niet is ingevuld of te kort is”. Zo blijft de taal consistent en begrijpelijk voor alle bezoekers.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/contact wordt in het formulier HTML5-validatie gebruikt. Wanneer het formulier wordt verzonden met lege of onjuist ingevulde velden, verschijnen standaard foutmeldingen die door de browser worden gegenereerd. Deze foutmeldingen worden niet door alle browsers en schermlezers op een consistente of toegankelijke manier weergegeven. In sommige gevallen zijn ze te kort, onduidelijk of worden ze helemaal niet uitgesproken door hulpsoftware. Om dit op te lossen, moeten eigen foutmeldingen worden toegevoegd aan het formulier. Deze foutmeldingen moeten duidelijk aangeven wat er fout is gegaan, welke velden dit betreft en moeten voor iedereen goed zichtbaar en hoorbaar zijn.
Ditzelfde probleem is aanwezig op de pagina’s https://www.nh1816.nl/werkhoven-advies en https://www.nh1816.nl/klantenservice/schade-melden, waar ook gebruik wordt gemaakt van HTML5-validatie zonder aanvullende foutmeldingen. Controleer of er nog andere formulieren op de website zijn die dit probleem hebben en voeg ook daar toegankelijke foutmeldingen toe.

Op pagina https://www.nh1816.nl/contact toont het formulier foutmeldingen zoals: “Het veld lijkt leeg of te kort.” Deze melding is vormgegeven als een instructie, maar niet als een duidelijke foutmelding. Een goede foutmelding moet expliciet aangeven dat er een fout is gemaakt, benoemen om welk veld het gaat, en beschrijven wat er mis is. Vaak wordt daarbij een ontkenning gebruikt, zoals: “Het veld is niet (goed) ingevuld” of “Het veld mag niet leeg zijn”. Zorg ervoor dat foutmeldingen consequent als foutmeldingen worden geformuleerd, zodat bezoekers direct begrijpen wat er misgaat en welke actie nodig is om het op te lossen. Dit maakt de website duidelijker en beter bruikbaar voor iedereen, ook voor bezoekers die hulpsoftware gebruiken.
Ditzelfde probleem komt voor op pagina’s https://www.nh1816.nl/werkhoven-advies en https://www.nh1816.nl/klantenservice/schade-melden, waar vergelijkbare instructieve meldingen worden gebruikt in plaats van echte foutmeldingen.
Een vergelijkbare situatie is te zien op pagina https://www.nh1816.nl/ledenvoordeel, waar foutmeldingen zoals “Het veld 'Aanhef' is verplicht” worden weergegeven. Ook dit is een instructie en geen foutmelding. Een betere formulering zou zijn: “U heeft geen aanhef geselecteerd” of “Het veld ‘Aanhef’ is niet ingevuld”.

Uitkomst: Onvoldoende

Bevindingen: In de formulieren op pagina's https://www.nh1816.nl/contact en https://www.nh1816.nl/werkhoven-advies wordt bij de verplichte velden een asterisk "*" getoond. Nergens binnen de formulieren staat vermeld dat dit betekent dat deze velden verplicht zijn. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: "Velden met een sterretje (*) zijn verplicht".
Dit probleem komt ook in andere formulieren voor.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de website https://www.nh1816.nl/ ontbreekt bij het logo bovenaan de pagina een toegankelijke naam. Het logo is ook een link, maar zonder toegankelijke naam is het voor bezoekers die een schermlezer gebruiken niet duidelijk wat het doel van de link is. Hierdoor is de link niet bruikbaar voor deze groep. Geef de link een toegankelijke naam die het doel beschrijft, bijvoorbeeld via een alt-tekst bij een afbeelding binnen de link, een aria-label of een visueel verborgen tekst. Een correcte toegankelijke naam zou bijvoorbeeld zijn: “Logo Nh1816 Verzekeringen, ga naar de homepagina”.
Een vergelijkbaar probleem komt ook voor in de footer, waar socialmedia-iconen staan. Deze links bevatten geen toegankelijke namen, waardoor het voor hulpsoftware niet duidelijk is waar de links naartoe leiden.
Daarnaast is er op kleine schermen een 'sticky' link met een pijltje (bijvoorbeeld een terug-naar-boven-link). Ook deze link heeft geen toegankelijke naam en is daardoor niet bruikbaar met hulpsoftware. Voeg hier een toegankelijke naam toe, bijvoorbeeld via aria-label="Naar boven". Zorg ervoor dat alle interactieve elementen een duidelijke toegankelijke naam hebben die beschrijft wat de functie of bestemming is. Zo wordt de website beter bruikbaar en begrijpelijk voor alle bezoekers.

Op alle pagina’s van de website https://www.nh1816.nl/ opent de link “Verzekeringen” in het hoofdmenu een submenu. In dit submenu zijn teksten zoals “Vervoer & mobiliteit”, “Wonen” en “Reizen & Recreatie” verkeerd gemarkeerd als links. Ze zijn opgemaakt met a-elementen, maar de href-attributen zijn leeg. Deze elementen zijn geen echte links, omdat ze geen duidelijke bestemming hebben en nergens naartoe leiden. Dit kan verwarrend zijn voor bezoekers die gebruik maken van schermlezers of met het toetsenbord navigeren. Voor hen lijkt het alsof de link actief is, terwijl er niets gebeurt bij activering. Zorg ervoor dat deze teksten correct worden gemarkeerd als koppen, bijvoorbeeld met een h2- of h3-element. Als het de bedoeling is dat deze teksten alleen de inhoud groeperen of aanduiden, gebruik dan géén a-element zonder geldige bestemming. Zo blijft de structuur van het menu duidelijk en begrijpelijk voor alle bezoekers.

Op een klein scherm bevat de header van de website https://www.nh1816.nl/ een knop met een vergrootglasicoon. Deze knop opent een paneel met een zoekveld. In dit venster staat een “x”-knop waarmee het zoekpaneel gesloten kan worden. Deze knop heeft echter geen toegankelijke naam. Een bezoeker die hulpsoftware gebruikt, hoort hierdoor niet wat de functie van de knop is. Het is dan niet duidelijk dat de knop bedoeld is om het venster te sluiten. Voeg daarom een toegankelijke naam toe aan de knop, bijvoorbeeld met aria-label="Sluit zoekvenster". Ditzelfde probleem komt ook voor bij de “x”-knop in het paneel dat geopend wordt via de link “Contact” in de sticky footer. Ook daar ontbreekt een beschrijvende naam. Geef deze knop bijvoorbeeld het attribuut aria-label="Sluit contactvenster". Zo wordt de functie van beide knoppen duidelijk voor alle bezoekers, ook voor wie hulpsoftware gebruikt.

Op alle pagina’s van de website https://www.nh1816.nl/ staat bovenaan een knop met een toegankelijkheidspictogram die een schakelknop opent met de zichtbare tekst “Dyslexie”. Deze schakelknop heeft echter geen toegankelijke naam. Doordat de toegankelijke naam leeg is, weten bezoekers die een schermlezer gebruiken niet wat de functie van de knop is. Ook is de knop niet bruikbaar met hulpsoftware, omdat de zichtbare tekst niet wordt herkend. Zorg dat de zichtbare tekst “Dyslexie” is opgenomen in de toegankelijke naam van de knop, bij voorkeur aan het begin. Dit kan bijvoorbeeld door een aria-label="Dyslexie" toe te voegen aan het knop-element. Zo wordt de knop correct voorgelezen en is deze bedienbaar voor alle bezoekers.

Op pagina https://www.nh1816.nl/ staat in de header een navigatiemenu met links die submenu’s openen, zoals "Verzekeringen". In de huidige code staat niet aangegeven of een submenu open of gesloten is. Als er een link staat waarmee bezoekers een submenu kunnen openen of sluiten, moet hulpsoftware kunnen herkennen of dat submenu zichtbaar of verborgen is. Hiervoor kan het attribuut aria-expanded gebruikt worden. Dit attribuut werkt echter alleen zolang de link de focus heeft. Zodra de focus verplaatst wordt, moet een verborgen tekst toegevoegd worden die aangeeft of het submenu open of gesloten is. Op kleine schermen staat hetzelfde probleem bij deze navigatielinks.

Op pagina https://www.nh1816.nl/ staat op kleine schermen in de header een menuknop met drie horizontale lijnen waarmee bezoekers het navigatiemenu kunnen openen. Deze knop heeft op dit moment geen toegankelijke naam en ook niet de juiste toegankelijke rol. Hierdoor herkennen hulpsoftware, zoals schermlezers, deze knop niet als knop. De knop moet de rol "knop" krijgen omdat deze een actie uitvoert: het openen of sluiten van het menu. Zonder de juiste rol kunnen schermlezers de knop niet goed herkennen, wat de toegankelijkheid vermindert. Verder is het belangrijk dat deze knop een duidelijke, toegankelijke naam krijgt, die aangeeft wat de knop doet. De naam moet ook dynamisch aangepast worden, bijvoorbeeld van "menu openen" naar "menu sluiten", afhankelijk van de toestand van het menu.
Op pagina https://www.nh1816.nl/ staat hetzelfde probleem met de knop met een icoon van een vergrootglas en met de "x"-knop in het menu dat geopend wordt door de knop met drie horizontale lijnen.

Op pagina https://www.nh1816.nl/ledenvoordeel staat in het formulier onder "Nieuwsbrief ledenvoordelen" de knop "Versturen". Deze knop heeft momenteel niet de juiste toegankelijke rol. Elk HTML-element heeft standaard een bepaalde rol, waardoor duidelijk is wat de functie van het element is, bijvoorbeeld informatie geven of invoer ontvangen. Schermlezers en andere hulpsoftware moeten de juiste rol van elk element kennen, zodat ze het correct kunnen gebruiken en aan bezoekers uitleggen wat het doet. Zorg daarom dat de knop "Versturen" de juiste rol "knop" krijgt, zodat hulpsoftware de functie van de knop duidelijk kan communiceren aan bezoekers.

Op pagina https://www.nh1816.nl/verzekeringen/autoverzekering/ staan onder de kop "Verzekeringen" links die geen toegankelijke naam hebben. Elke link op een webpagina moet een duidelijke en beschrijvende toegankelijke naam hebben. Dit helpt hulpsoftware zoals schermlezers om bezoekers goed uit te leggen waar de link naar verwijst of wat er gebeurt wanneer bezoekers de link activeren. Zorg ervoor dat deze links een toegankelijke naam krijgen, zodat het voor alle bezoekers duidelijk is wat de functie van elke link is.

Op pagina https://www.nh1816.nl/werkhoven-advies staat in het tabblad "Vraag offerte aan" een aantal invoervelden zonder toegankelijke naam. Hierdoor is het voor blinde en slechtziende bezoekers die hulpsoftware gebruiken niet duidelijk wat zij moeten invullen. Invoervelden moeten altijd voorzien zijn van een duidelijke, toegankelijke naam die uitlegt wat er ingevuld moet worden. Koppel daarom bijvoorbeeld een label-element aan elk invoerveld om een duidelijke, toegankelijke naam toe te voegen.

Op pagina https://www.nh1816.nl/werkhoven-advies staat hetzelfde probleem in het tabblad "Bel me terug" bij de invoervelden "Naam" en "Telefoonnummer". Ook deze velden moeten voorzien worden van een duidelijke en beschrijvende toegankelijke naam, bijvoorbeeld door gebruik van gekoppelde label-elementen.

Op pagina https://www.nh1816.nl/werkhoven-advies staat in het tabblad "Bel me terug" een select-element met het label "Waar gaat uw vraag over?". Dit select-element heeft momenteel geen toegankelijke naam. Hierdoor herkennen schermlezers en andere hulpsoftware niet waar dit element precies voor bedoeld is. Select-elementen moeten altijd een toegankelijke naam hebben die duidelijk maakt wat bezoekers moeten selecteren. Zorg er daarom voor dat het select-element een toegankelijke naam krijgt, bijvoorbeeld door het bestaande label-element goed aan het select-element te koppelen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.nh1816.nl/ledenvoordeel staat onder "Nieuwsbrief ledenvoordelen" een formulier dat na het verzenden de statusmelding "Gegevens zijn succesvol opgeslagen." toont zonder dat de pagina opnieuw geladen wordt. De toetsenbordfocus wordt daarbij niet verplaatst naar deze melding. Hierdoor wordt de melding niet automatisch voorgelezen door hulpsoftware zoals schermlezers. Om ervoor te zorgen dat schermlezers dit bericht automatisch aankondigen zodra het verschijnt, moet extra code toegevoegd worden aan de melding. Voeg hiervoor het attribuut aria-live="polite" of role="status" toe aan de melding. Meer informatie over het juiste gebruik van role="status" staat op https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.