Rapport:
Audit digitale toegankelijkheid website acc.yarden.nl/mijn-yarden.htm

Uitkomst: Onvoldoende

Bevindingen: Het logo, bijvoorbeeld op https://www.acc.yarden.nl/mijn-yarden.htm/, dat is geïmplementeerd met een svg-element, mist een tekstalternatief. Hierdoor weten bezoekers die de afbeelding niet kunnen zien niet wat er staat. Voeg een title-element, aria-label- of aria-labelledby-attribuut toe aan het svg-element van het logo waarin de volledige tekst van het logo is opgenomen.

Op alle pagina’s, bijvoorbeeld https://www.acc.yarden.nl/mijn-yarden.htm, ontbreekt bij de knop met een vraagtekenpictogram een tekstalternatief. Het SVG-pictogram in de knop heeft het attribuut aria-hidden="true", waardoor het wordt verborgen voor schermlezers. Hierdoor heeft de knop geen toegankelijke naam en is het voor gebruikers van hulpsoftware onduidelijk wat de functie van de knop is. Verwijder aria-hidden="true" van het SVG-pictogram om het beschikbaar te maken voor schermlezers, of voeg een aria-label aan de knop, aria-labelledby- of title-element toe aan de SVG om een betekenisvolle beschrijving van de functie te geven.

Op de loginpagina https://www.acc.yarden.nl/mijn-yarden.htm/ functioneert het oogpictogram in het invoerveld als een link, maar er ontbreekt een tekstalternatief. Deze afbeelding is dus interactief. Om deze link toegankelijk te maken, moet de afbeelding voorzien worden van een tekstalternatief die het doel van de link beschrijven. Zo weten bezoekers die gebruik maken van schermlezers waar de links naartoe leiden.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen, in de zijbalk naast de kop "Uitvaartwensen", is een decoratief svg-element aanwezig met de rol “img”. In deze zijkolom staan meerdere decoratieve iconen, maar ze zijn netjes verborgen voor hulpsoftware met aria-hidden=”true”. Voeg dit attribuut ook aan het icoon naast "Uitvaartwensen".

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De loginpagina https://www.acc.yarden.nl/mijn-yarden.htm/ bevat een formulier. Het label-element met “Wachtwoord” is niet expliciet gekoppeld aan het bijbehorende invoerveld. Het id dat in het label-element wordt genoemd, komt niet voor in de HTML. Label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door gebruik te maken van het for-attribuut in het label-element. In dit attribuut wordt het id opgenomen van het invoerveld waar het label bij hoort. Door deze koppeling leest een schermlezer het label voor wanneer een bezoeker direct naar het invoerveld navigeert. Hetzelfde wordt geconstateerd op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/two-fa-authenticate bij het label-element “Persoonlijke code”, op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens in het formulier “Contact” bij het label-element “Telefoonnummer”.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens staat een formulier waar de label-elementen niet expliciet gekoppeld zijn aan de bijbehorende invoervelden. Bijvoorbeeld de labels “Postcode”, “Huisnummer” en “Toevoeging” in het formulier “Verzekeringnemer”. Hetzelfde wordt geconstateerd op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag bij het label-element “Verzekerd bedrag” en andere elementen.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ toont het formulier foutmeldingen zoals “Vul uw relatienummer in.” en “Vul uw nieuwe wachtwoord in.” Schermlezers in "formuliermodus" slaan echter vaak de inhoud tussen invoervelden over, waardoor deze foutmeldingen mogelijk niet worden aangekondigd. De relatie tussen de foutmeldingen en de invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware deze meldingen niet doorgeven aan de bezoeker. Dit probleem kan worden opgelost door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van het foutbericht. Hetzelfde probleem doet zich voor in het dialoogvenster “Feedback” (te openen via de helpknop met het vraagteken-icoon rechtsonder op alle pagina’s), en ook op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens, in het formulier “Contact”, is er een groep keuzerondjes aanwezig, voorafgegaan door de tekst “Hoe wilt u polisbladen en wijzigingen ontvangen?”. Hoewel deze elementen visueel een groep vormen, is deze relatie niet vastgelegd in de HTML. Een soortgelijk probleem doet zich voor bij de invoervelden onder “Telefoonnummer”. Visueel horen deze elementen bij elkaar, maar die structuur ontbreekt in de HTML-code. Dit kan worden opgelost door de elementen op te nemen in een <fieldset>-element. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het <legend>-element worden gebruikt. Plaats daarin de tekst “Hoe wilt u polisbladen en wijzigingen ontvangen?”. Hetzelfde probleem komt ook voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag onder de tekst “Uitkering”, op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen/aanmaken onder de tekst “Burgerlijke staat” en op andere plaatsen.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468 is de tekst “Test Updategx1” niet gemarkeerd als kop. Blinde bezoekers hebben niets aan een (tussen)kop die er visueel uitziet als een kop, maar die niet als zodanig is gemarkeerd in de code. Via koppen kunnen gebruikers van hulpsoftware de inhoud van een pagina snel scannen of naar een specifieke sectie navigeren. Dit werkt alleen als de koppen daadwerkelijk als koppen zijn gecodeerd. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien een probleem met de structuur: de visuele structuur komt dan niet overeen met de semantische structuur in de code. Dit kan worden voorkomen door koppen altijd te markeren met het juiste HTML-element op het juiste niveau: <h1>, <h2>, <h3>, <h4>, <h5> of <h6>. In veel gevallen is dit niveau instelbaar via de content-editor in het CMS, waarbij de correcte HTML automatisch wordt toegepast. Een soortgelijk probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen op een klein scherm, bij de herhaalde tekst “Polisnummer”.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag zijn de volgende teksten foutief gemarkeerd met <strong> in plaats van met een kop-element: "Hoe werkt het aanpassen van mijn verzekerd bedrag?", "Aanpassen verdeling verzekerd bedrag", "Wanneer verandert mijn premie?" en andere soortgelijke titels. Het <strong>-element is niet bedoeld om koppen mee aan te duiden. Gebruik hiervoor altijd een kop-element zoals <h2>. Koppen structureren de inhoud en maken deze toegankelijk voor hulpsoftware. Het <strong>-element is enkel bedoeld om nadruk te geven aan een (deel van een) zin of woord, niet om hiërarchie in de inhoud aan te geven.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen/aanmaken wordt het <strong>-element gebruikt om het label van de checkbox-groep "Burgerlijke staat" te stijlen. Hetzelfde geldt voor “Nalatenschap”, “Medische gegevens” en andere groepen. Daarnaast zijn deze labels niet gekoppeld aan de groep die eronder staat. Dit kan worden opgelost door het strong-element te verwijderen en het gebruik te maken van een fielsdet en een legend-element.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen wordt op een klein scherm de kop van niveau 3 “Mijn Laatste Wensen uitvaartverzekering” direct gevolgd door een andere kop met dezelfde tekst en van hetzelfde niveau. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder dat er inhoud tussen staat, dan is minstens één van de koppen niet correct gebruikt. Dit kan verwarrend zijn voor gebruikers van hulpsoftware en verstoort de structuur van de pagina.

Het PDF-document “202206161309070138” (gedownload vanaf https://www.acc.yarden.nl/mijn-yarden.htm/overzicht) bevat geen structurele codes, waardoor de inhoud ontoegankelijk is voor schermlezers. Bovendien kunnen wij het PDF-bestand hierdoor niet volledig onderzoeken. Dit betreft alle succescriteria die samenhangen met de codelaag van de PDF, zoals semantische koppen, leesvolgorde en alternatieve teksten bij afbeeldingen. Zodra dit wordt opgelost, kunnen er mogelijk andere toegankelijkheidsproblemen aan het licht komen die nu nog niet zichtbaar zijn. Hetzelfde geldt voor het PDF-document “Mijn Laatste Wensen uitvaartverzekering - versie 2” (gedownload vanaf https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ ontbreekt in een formulier met het invoerveld "Wachtwoord", het attribuut voor automatisch aanvullen. Invoervelden voor persoonlijke informatie zoals het wachtwoord moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het wachtwoord moet bijvoorbeeld autocomplete="current-password" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Hetzelfde probleem wordt waargenomen op pagina's: https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0, https://www.acc.yarden.nl/mijn-yarden.htm/gegevens invoervelden in formulieren, die worden geopend met de knop "Wijzigen".

Uitkomst: Onvoldoende

Bevindingen: Onderaan op alle pagina's, bijvoorbeeld https://www.acc.yarden.nl/mijn-yarden.htm/, staat een helpknop met een vraagpictogram. Deze knop opent nog twee knoppen. De knop met de tekst "Hulp nodig?" opent een dialoogvenster met een sluitknop. Als de knop Sluiten (X) toetsenbordfocus krijgt of als de muis over deze knop wordt bewogen, verandert alleen de kleur van de knop. Het contrast tussen de initiele staat en focus is 1,7:1. Hetzelfde geldt voor de knop Sluiten (X) in het dialoogvenster "Feedback". Een soortgelijk probleem doet zich voor in het dialoogvenster “Hulp nodig?” met de links “040 232 21 22”, “E-mail via contactformulier” en “Onafhankelijke adviseur”. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, bijvoorbeeld https://www.acc.yarden.nl/mijn-yarden.htm/, is het contrast van de tekst wanneer op de pagina wordt ingezoomd, onder de toegestane minimum. Het contrast is 1,2:1. Dit moet 4,5:1 zijn voor gewone tekst en 3,0:1 voor koppen.

Op alle pagina’s bevindt zich een helpknop met een vraagteken-icoon. Wanneer deze knop wordt geopend, verschijnen er twee extra knoppen. De knop met de tekst “Hulp nodig?” opent een modaal dialoogvenster. De knop “VERSTUUR” binnen dit venster heeft een onvoldoende kleurcontrast. De witte tekst op een oranje achtergrond (HEX-kleurcode #F07F0A) heeft een contrastverhouding van slechts 2,7:1. Dit is lager dan de vereiste minimale verhouding van 4,5:1 voor standaardtekst. Het contrast moet minimaal 4,5:1 zijn.
Dit probleem doet zich ook op andere pagina’s voor. Voorbeelden hiervan zijn: op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/, de knop “MIJN YARDEN-ACCOUNT AANMAKEN”. Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/two-fa-authenticate, de knoppen “CONTROLEER CODE” (niet uitgeschakeld) en “VERSTUUR NIEUWE CODE”. Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens, de knop “AANVRAGEN” in het onderdeel "Account"

Op meerdere pagina’s van de website https://www.acc.yarden.nl/mijn-yarden.htm/ wordt de kleur bruin gebruikt, in combinatie met andere kleuren met te weinig contrast. Onderstaand volgen enkele voorbeelden, maar dit overzicht is niet uitputtend. Onderaan op alle pagina’s bevindt zich een helpknop met een vraagteken-icoon. Deze opent onder andere een modaal dialoogvenster via de knop “Hulp nodig?”. In dit venster staat bruine tekst (HEX-kleurcode #9C928F), zoals “Maandag t/m vrijdag van 8.00 tot 17.00 uur.” op een witte achtergrond. De kleurcontrastverhouding bedraagt slechts 3,0:1. Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn.
Deze kleurcombinatie komt ook op andere pagina’s voor, bijvoorbeeld: op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/ bij teksten zoals “Relatienummer” en “Wachtwoord”. Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/two-fa-authenticate bij de tekst “Persoonlijke code”. Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0, bij de tekst “Vul onderstaande gegevens … Uw polisnummer vindt u op uw polisblad.” en andere. Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht, bij de tekst “Voor- en achternaam” en andere velden.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht staat bruine tekst (HEX #988D88) zoals “Omschrijving", “Factuurdatum", “Factuurbedrag" en “Status” op een lichtgrijze achtergrond (HEX #F5F3F1). De kleurcontrastverhouding is te laag: slechts 2,9:1. Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn.
Een soortgelijk probleem komt voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag, bij teksten als “Verzekerde”, “Uitvaartkosten vergoeden” en “Geld”.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht staat grijze tekst (HEX #888786) “Bekijk hier het overzicht van uw producten bij Yarden” op een lichtgrijze achtergrond (HEX #F0EEEB). De contrastverhouding is 3,1:1. Omdat deze tekst kleiner is dan 19px, moet het contrast ook hier minimaal 4,5:1 zijn.
Ditzelfde probleem wordt ook waargenomen op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens bij de tekst “Bekijk en wijzig hier uw persoonlijke gegevens van uw Yarden account”, en op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/contact bij de tekst “Wilt u op een andere manier contact opnemen? Klik dan op de rode button rechtsonder”.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag een grijze link (HEX #968C86) met de tekst “Terug naar verzekering details” op een lichtgrijze achtergrond (HEX #F0EEEB). De kleurcontrastverhouding is te laag: 2,8:1.

In het PDF-document “Mijn Laatste Wensen uitvaartverzekering - versie 2”, gedownload vanaf https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468, staat op pagina 1 witte tekst “Mijn Laatste Wensen uitvaartverzekering” op een lichtbruine achtergrond (HEX #E0D7CF). De contrastverhouding is slechts 1,4:1. Het contrast moet minimaal 3,0:1 zijn.
In hetzelfde document, eveneens op pagina 1, staat lichtbruine tekst (HEX #D8CEC4) “ON.0029.SEP18” op een witte achtergrond. De kleurcontrastverhouding is 1,6:1, wat onder de vereiste minimumwaarde ligt. Hier moet het contrast minimaal 4,5:1 zijn. Dit probleem komt ook voor op andere pagina’s van hetzelfde document, bijvoorbeeld bij de tekst “28 november 2018” en het totaal aantal pagina’s.
Op pagina 7 van hetzelfde PDF-document staan tabellen met bruine tekst (HEX #6C5F56) in de rijen, op een lichtbruine achtergrond (HEX #D8CEC4). De contrastverhouding is 4,0:1. Voorbeelden zijn teksten als “3 tot 11 jaar”, “35%” en “> 26 jaar”. Zorg ervoor dat het contrast minimaal 4,5:1 bedraagt.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ hebben de linkteksten “Ik weet mijn relatienummer niet” en “Wachtwoord vergeten” onvoldoende kleurcontrast wanneer de muis erover beweegt (hover). De tekst krijgt dan de kleur (HEX #17AAE6), wat resulteert in een contrastverhouding van slechts 2,6:1. Dit ligt onder de vereiste minimumwaarde van 4,5:1 voor normale tekst. Interactieve elementen moeten in alle toestanden voldoende contrast hebben, dus ook in hover-toestand. Zorg ervoor dat de link of knop ook bij hover minimaal een contrast van 4,5:1 heeft met de achtergrond.
Een soortgelijk probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/two-fa-authenticate bij de links “Wijzig telefoonnummer”, “Terug naar inloggen” en “Klantenservice”, en op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0 bij de links “Terug naar inloggen” en “Klantenservice”. Ook op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht is dit het geval bij de links “Bekijk de polis”, “Betaal” en “Download” wanneer deze de focus hebben of wanneer de muis erover beweegt.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht staan blauwe links (HEX #1077A1) met de tekst “Bekijk alle verzekeringen” en “Bekijk alle facturen” op een lichtgrijze achtergrond (HEX #F0EEEB). De kleurcontrastverhouding is 4,3:1. Aangezien deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 bedragen.

In het PDF-document “202206161309070138”, gedownload via https://www.acc.yarden.nl/mijn-yarden.htm/overzicht, staat op een witte achtergrond rode tekst (HEX #FA7F72) met de tekst “YardenAccept”. De kleurcontrastverhouding is slechts 2,5:1. Het contrast moet minimaal 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen/aanmaken wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, wordt de knop “OPSLAAN” afgedekt door de sticky footer. Als een bezoeker inzoomt, moet alle functionaliteit behouden blijven. Belangrijke bedieningselementen, zoals knoppen, mogen niet verborgen raken.

Wanneer dezelfde pagina wordt bekeken op een resolutie van 1280 bij 1024 pixels en met 200% zoom, raakt ook tekst in het zijpaneel gedeeltelijk buiten beeld. Het gaat onder andere om teksten zoals “Persoonlijke gegevens”, “Voor overlijden”, “Voor overlijden” en andere elementen. Als een bezoeker inzoomt, moet alle inhoud goed leesbaar blijven en mag er geen informatie verloren gaan of buiten beeld vallen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0 wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, overlapt de stap “Uw gegevens” de stap “Controle gegevens”. Als een bezoeker inzoomt, moet alle informatie goed leesbaar blijven en mogen elementen elkaar niet overlappen. Een vergelijkbaar probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens, in het formulier “Account” (na het openen van de sectie “Wijzigen”), waar de link “Annuleren” de knop “Aanvragen” overlapt.

Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag overlapt de tekst “Premie” een keuzerondje. Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen/aanmaken overlapt een invoerveld het label “Tussenvoegsel”.

Uitkomst: Onvoldoende

Bevindingen: Onderaan alle pagina’s bevindt zich een helpknop met een vraagteken-icoon. Wanneer deze knop via het toetsenbord focus krijgt, wordt de knop visueel benadrukt door een donkerblauwe rand (HEX #40809F). De contrastverhouding tussen deze rand en de blauwe achtergrondkleur van de knop (HEX #57AED9) is echter minder dan 3,0:1. Dit is onvoldoende. De focus-indicator moet minimaal een contrast van 3,0:1 hebben met de achtergrond. Door het lage contrast is het voor mensen met een visuele beperking of kleurenblindheid moeilijk of zelfs onmogelijk om te zien waar de toetsenbordfocus zich bevindt. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen. Een vergelijkbaar probleem doet zich voor bij de knoppen “Hulp nodig?” en “Feedback”, die worden geopend via dezelfde helpknop. Zie hiervoor de pagina https://www.acc.yarden.nl/mijn-yarden.htm/.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/, onder de kop “Log in op Mijn Yarden”, bevinden zich invoervelden. De bruine randkleur van deze velden (HEX #CEC2B7) heeft een contrastverhouding van slechts 1,7:1 met de witte achtergrond van de pagina. Dit voldoet niet aan de minimumeis van 3,0:1 voor de randen van interactieve elementen zoals invoervelden. Een vergelijkbaar probleem komt voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/contact, bij de rand van een checkbox.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/contact, onder het onderdeel “Bestanden uploaden”, verschijnt na het uploaden van een bestand een X-icoon als informatieteken. De witte iconen op een lichtoranje achtergrond (HEX #F9C093) hebben een contrastverhouding van slechts 1,6:1. Dit is lager dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen. Zorg dat informatieve iconen altijd een kleurcontrast van minimaal 3,0:1 hebben.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen/aanmaken bevindt zich naast het veld “Geboorteplaats” een invoerveld met een grijze rand (HEX #D6D6D6) op een witte achtergrond. De contrastverhouding tussen deze rand en de achtergrond is slechts 1,5:1. Ditzelfde probleem doet zich voor bij andere velden op de pagina, zoals checkboxes onder de tekst “Burgerlijke staat”. Ook hier geldt dat randen van interactieve elementen een minimaal contrast van 3,0:1 moeten hebben met de achtergrond om goed zichtbaar te zijn voor alle gebruikers.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag wordt het bedrag onder het kopje "Verzekerd bedrag" gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ zijn de links met de tekst “Ik weet mijn relatienummer niet” en “Wachtwoord vergeten” niet toegankelijk via het toetsenbord. De bezoeker kan via deze links naar een andere locatie navigeren of een pop-upvenster openen, maar dit werkt niet wanneer er alleen met het toetsenbord wordt genavigeerd. Zorg ervoor dat alle links en interactieve elementen ook met de Enter-, Return- of spatietoetsen bediend kunnen worden. Alleen dan zijn ze bruikbaar voor mensen die geen muis gebruiken.
Een soortgelijk probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0 bij de link “Terug naar inloggen”, op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht bij de links in de zijbalk, tooltip-iconen en de links in de tabel onder de kop “Uw recente facturen”, en op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens bij de radiobuttons in het formulier “Contact” en andere interactieve elementen. Alle gebruikers moeten zonder muis kunnen navigeren en acties kunnen uitvoeren. Interactieve componenten die niet met het toetsenbord te bedienen zijn, vormen een drempel voor mensen met een motorische beperking of die werken met spraak- of schermleessoftware.

Op alle pagina’s, wanneer ingezoomd, verandert de zijkolom in een navigatie onderaan de pagina. Deze navigatie kan niet met het toetsenbord worden bediend. Zie https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De sessie in het persoonlijke account wordt automatisch beëindigd zonder voorafgaande waarschuwing. Bezoekers moeten de mogelijkheid hebben om een dergelijke tijdslimiet uit te zetten, aan te passen of te verlengen. Zonder waarschuwing kan dit leiden tot verlies van gegevens of frustratie, met name voor gebruikers die meer tijd nodig hebben om taken af te ronden. Zie hiervoor de pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0 bevindt zich een formulier waarin de verificatiemethode reCAPTCHA wordt gebruikt. Wanneer het selectievakje is aangevinkt maar de verzendknop nog niet is ingedrukt, verschijnt na enige tijd de melding “Verificatie verlopen. Vink het selectievakje opnieuw aan.” Dit duidt op de aanwezigheid van een tijdslimiet. Dit kan problematisch zijn voor bezoekers die meer tijd nodig hebben vanwege een beperking, of doordat zij gebruik maken van ondersteunende technologie. In dergelijke gevallen moeten bezoekers de mogelijkheid hebben om de tijdslimiet uit te schakelen, aan te passen of te verlengen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.acc.yarden.nl/mijn-yarden.htm/ ontbreekt een skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ is het title-element leeg.
Dit element moet op elke pagina aanwezig zijn en unieke tekst bevatten die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Deze tekst wordt getoond in de tab van de browser. Met een duidelijke beschrijving kunnen gebruikers makkelijker navigeren tussen verschillende pagina’s. Plaats een tekst in het title-element die de inhoud van de pagina beschrijft.
Zie ook https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0, https://www.acc.yarden.nl/mijn-yarden.htm/two-fa-authenticate.

Verschillende pagina's hebben dezelfde tekst in het titel-element van de pagina: "Inloggen Yarden | Verzekeringen & facturen bekijken en aanpassen". Bijvoorbeeld pagina's https://www.acc.yarden.nl/mijn-yarden.htm/overzicht, https://www.acc.yarden.nl/mijn-yarden.htm/gegevens, https://www.acc.yarden.nl/mijn-yarden.htm/contact. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat elke pagina een unieke title-tekst heeft die de inhoud van de pagina nauwkeurig beschrijft.

Het PDF-document "202206161309070138" (gedownload van https://www.acc.yarden.nl/mijn-yarden.htm/overzicht) 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.

Het PDF-document “Mijn Laatste Wensen uitvaartverzekering - versie 2” (gedownload via https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468) heeft in de bestands­eigenschappen de titel "Microsoft Word - YRD18-0284 Voorwaarden LUV 20180926.ON.0029.SEP18.docx" ingesteld. Deze titel beschrijft de inhoud van het document niet op een duidelijke of betekenisvolle manier. De titel van een PDF-document moet het onderwerp of doel van het document duidelijk beschrijven. Hierdoor kunnen bezoekers snel en makkelijk bepalen of het document relevant is. Dit kan worden opgelost door dit aan te passen in de bestandseigenschappen van het bronbestand of van het PDF-document.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ komt de toetsenbordfocus na het activeren van de knop "MIJN YARDEN-ACCOUNT AANMAKEN" terecht op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare links, knoppen of formuliervelden. Als dat wel gebeurt, kunnen bezoekers per ongeluk een actie uitvoeren zonder visuele aanwijzing, wat verwarrend en ontoegankelijk is.
Een soortgelijk probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens, na het activeren van de knop “Wijzigen” naast de kop “Verzekeringnemer”, en ook bij de knop “Wijzigen” naast de kop “Contact”. Dit gedrag komt ook voor op andere pagina’s.

Onderaan op alle pagina’s bevindt zich een helpknop met een vraagteken-icoon. Wanneer deze knop wordt aangeklikt, verschijnen er twee extra knoppen. Echter, na het aanklikken van de helpknop wordt de toetsenbordfocus niet verplaatst naar de nieuw weergegeven knoppen, maar naar andere elementen op de pagina. Dit resulteert in een onlogische focusvolgorde. Zorg ervoor dat de toetsenbordfocus direct naar de nieuw zichtbare knoppen verplaatst wordt zodra de helpknop is geactiveerd. Zie hiervoor de pagina https://www.acc.yarden.nl/mijn-yarden.htm/.

De helpknop opent ook het dialoogvenster “Hulp nodig?”, evenals het venster “Feedback”. In beide gevallen wordt de toetsenbordfocus bij het openen van het dialoogvenster niet automatisch naar het dialoogvenster verplaatst. Dit zorgt voor verwarring bij toetsenbordgebruikers en gebruikers van hulptechnologie. Zorg dat de focusvolgorde logisch blijft door deze automatisch te verplaatsen naar de nieuwe inhoud bij het openen van het venster.

De hulpknop opent twee extra knoppen. De knop met de tekst "Hulp nodig?" opent een modaal dialoogvenster. Op dit moment kan de toetsenbordfocus echter ontsnappen uit het geopende dialoogvenster en zich verplaatsen naar de onderliggende pagina. Ditzelfde probleem doet zich voor bij het dialoogvenster “Feedback”. Bij dit soort modale vensters moet de toetsenbordfocus correct worden ingesteld. Wanneer het venster actief is, moet de focus binnen het venster blijven. Het mag niet mogelijk zijn om via Tab of Shift+Tab naar elementen buiten het dialoogvenster te navigeren. De focus mag pas het venster verlaten wanneer de bezoeker op de sluitknop klikt of op de ESC-toets drukt. Een alternatieve oplossing is om het venster automatisch te sluiten wanneer de focus het verlaat.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht blijft de toetsenbordfocus hangen op de link "Bekijk de polis" in plaats van zich logisch terug te bewegen naar het vorige element bij gebruik van Shift+Tab. Zorg ervoor dat de focus zich op een logische en voorspelbare manier verplaatst, in beide richtingen — zowel met de Tab-toets als met Shift+Tab.
Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/facturen opent een link met “Bekijk facturen” een dialoogvenster. De focus komt in dit venster terecht en na het doorlopen van alle knoppen, kan de focus dit venster verlaten. Dit is niet de bedoeling. Zorg ervoor dat de focus binnen dit venster blijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ werkt het oogicoon in het wachtwoordveld als een link. Deze link bevat echter geen content en heeft daardoor geen herkenbaar linkdoel. Om dit op te lossen moet de link voorzien worden van betekenisvolle inhoud. Dit kan bijvoorbeeld door een beschrijvende tekst toe te voegen binnen het <a>-element, of door gebruik te maken van een aria-label. Zorg dat alle links een duidelijk en begrijpelijk linkdoel hebben, zodat ook gebruikers van schermlezers begrijpen waar de link voor dient.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ bevindt zich in het wachtwoordveld een link met een oogicoon om het wachtwoord te tonen of te verbergen. De toegankelijke naam van deze link verandert echter niet wanneer de functie verandert. Daardoor krijgen bezoekers die schermlezers gebruiken geen feedback over de actuele functie van de knop. Zorg ervoor dat de toegankelijke naam van de link dynamisch wordt aangepast op basis van de huidige status (bijvoorbeeld: “Toon wachtwoord” wanneer het verborgen is, en “Verberg wachtwoord” wanneer het zichtbaar is).

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht staan in de tabel onder de kop “Uw recente facturen” meerdere links met dezelfde tekst “Download”. Deze linktekst beschrijft niet duidelijk wat er precies wordt gedownload, wat verwarring veroorzaakt — vooral bij gebruikers met cognitieve beperkingen of schermlezers. Datzelfde geldt voor de linktekst “Betaal”. Linkteksten die vaker op dezelfde pagina voorkomen of te algemeen zijn (zoals “Download” of “Klik hier”) geven onvoldoende informatie over de bestemming of functie. Zorg dat voor elke link duidelijk is waar deze naartoe leidt, bijvoorbeeld door de naam van het document of het factuurnummer toe te voegen. Als deze informatie visueel al beschikbaar is, kan de extra tekst ook alleen voor schermlezers beschikbaar worden gemaakt met behulp van visueel verborgen technieken zoals aria-label of sr-only-klassen. Een soortgelijk probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468, waar meerdere links met dezelfde onduidelijke tekst worden weergegeven.

Uitkomst: Onvoldoende

Bevindingen: Er is maar één manier om alle pagina's op deze website te vinden en dat is de links op de pagina’s. Zorg ervoor dat er een andere manier is om elke pagina te bereiken. Elke pagina op de website moet op minimaal twee manieren bereikbaar zijn. Bijvoorbeeld via een zoekfunctie, sitemap, links op de homepage of links in de footer.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens komen meerdere knoppen voor met dezelfde zichtbare tekst “Wijzigen”. Elke knop voert echter een andere actie uit, zoals het bewerken van verschillende onderdelen van de persoonlijke gegevens. Ditzelfde probleem doet zich voor bij de knoppen “WIJZIGING OPSLAAN” en “Annuleren”, die ook in meerdere contexten voorkomen maar verschillende functies hebben. Voor schermlezergebruikers kan dit verwarrend zijn, omdat het niet duidelijk is welke knop welke bewerking uitvoert. Zorg ervoor dat elke knop een unieke tekst of toegankelijke naam krijgt die de specifieke actie beschrijft. Op die manier kunnen gebruikers met ondersteunende technologie de verschillende functies goed van elkaar onderscheiden.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/contact verschijnt er een knop met een X-icoon nadat een document is geüpload. Deze knop verwijdert het geüploade document, maar de toegankelijke naam is enkel “X”, wat geen duidelijke beschrijving geeft van de functie. Voor blinde of slechtziende gebruikers is het daardoor niet duidelijk wat deze knop doet. Voeg een beschrijvende tekst toe, zoals “Document verwijderen” of “Verwijder bestand”, zodat de functie van de knop ook voor schermlezers begrijpelijk is.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/facturen staan meerdere knoppen met dezelfde tekst “Betaal” en “Download”. Geef deze knoppen meer content zodat duidelijk wordt welke facturen worden betaald en gedownload.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.acc.yarden.nl/mijn-yarden.htm/ is de toetsenbordfocus niet zichtbaar op de volgende elementen: het logo “YARDEN” en de link “Terug naar yarden.nl”, de navigatie in de zijkolom. De toetsenbordfocus moet altijd duidelijk zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord bereikbaar zijn. Bezoekers die met het toetsenbord navigeren moeten visueel kunnen waarnemen waar de focus zich bevindt. Als de focus niet zichtbaar is, weten zij niet welk element op dat moment actief is en dus ook niet wanneer zij bijvoorbeeld op Enter moeten drukken om een knop of link te activeren. Ditzelfde probleem wordt ook waargenomen op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0.

De focus op de links op alle pagina’s van de website is alleen zichtbaar als een subtiele verandering van de tekstkleur. Er wordt aangeraden om deze verandering duidelijker te maken.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina staat in het logo de tekst: "YARDEN". De toegankelijke naam van deze link is "Terug naar home". De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Zie pagina https://www.acc.yarden.nl/mijn-yarden.htm/.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s ontbreekt het lang-attribuut op het <html>-element. Zie bijvoorbeeld de pagina https://www.acc.yarden.nl/mijn-yarden.htm/. Als dit attribuut niet aanwezig is, kan schermleessoftware de pagina niet in de juiste taal voorlezen. De software weet dan niet wat de primaire taal van de content is en gebruikt mogelijk verkeerde uitspraakregels. Dit kan de begrijpelijkheid ernstig verminderen voor gebruikers die afhankelijk zijn van voorleessoftware. Zorg ervoor dat het lang-attribuut aanwezig is en de juiste taalcode bevat die overeenkomt met de taal van de pagina (bijvoorbeeld lang="nl" voor Nederlands).

In de metadata van het PDF-document “Mijn Laatste Wensen uitvaartverzekering - versie 2” (gedownload via https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468) is de taalinstelling niet opgegeven. Het is belangrijk om ook in PDF-documenten de taal in te stellen. Hiermee kan hulpsoftware zoals schermlezers de inhoud correct voorlezen met de juiste uitspraakregels. De taal kan worden ingesteld via de documenteigenschappen in het bewerkingsprogramma waarmee de PDF is gemaakt of bewerkt.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/contact wordt bij een fout in het formulier het bericht "Kies het onderwerp van uw bericht" weergegeven. Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Geen berichtonderwerp geselecteerd".

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0 is een invoerveld aanwezig voor de “Geboortedatum”. Dit veld accepteert slechts één specifiek datumformaat, maar de instructie over het vereiste formaat wordt alleen weergegeven via de placeholdertekst in het veld. Omdat de placeholder verdwijnt zodra de bezoeker begint te typen, is deze instructie niet permanent zichtbaar op de pagina. Hierdoor moeten bezoekers verschillende schrijfwijzen uitproberen om te ontdekken welke notatie geaccepteerd wordt. Dit is voor veel bezoekers ontoegankelijk, vooral voor mensen met cognitieve beperkingen of gebruikers van schermlezers. Zorg ervoor dat de instructie over het juiste invoerformaat altijd zichtbaar is, bijvoorbeeld door deze naast of boven het veld als gewone tekst te tonen.
Een vergelijkbaar probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens, in het formulier “Contact” bij het invoerveld voor het telefoonnummer, en ook in het formulier “Betalen” bij het invoerveld voor het IBAN-nummer.

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.acc.yarden.nl/mijn-yarden.htm/contact bevat een formulier. Bij het uploaden van een bestand verschijnt de foutmelding “Ongeldig bestandstype. Bestand wordt niet geüpload.” Deze melding geeft echter geen enkele toelichting over wat er wél verwacht wordt van de gebruiker. In plaats van alleen “Ongeldig bestandstype. Bestand wordt niet geüpload.” moet de foutmelding duidelijke instructie bevatten over welk bestandsformaat wel is toegestaan, bijvoorbeeld: “Alleen PDF- of JPG-bestanden zijn toegestaan.” Geef bruikbaar en concreet advies in foutmeldingen, zodat bezoekers begrijpen wat zij moeten doen om hun invoer te corrigeren. Dit vergroot de toegankelijkheid en voorkomt frustratie, vooral bij mensen met een cognitieve beperking of beperkte digitale vaardigheden.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Onderaan op alle pagina’s bevindt zich een helpknop met een vraagteken-icoon. Deze knop heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat het doel of de functie van deze knop is. Geef deze knop een toegankelijke naam die duidelijk beschrijft wat de actie is, bijvoorbeeld met behulp van een aria-label. Zie hiervoor de pagina https://www.acc.yarden.nl/mijn-yarden.htm/.

Wanneer de helpknop wordt geopend, bijvoorbeeld op https://www.acc.yarden.nl/mijn-yarden.htm, verschijnen er twee extra knoppen. De knop met de tekst "Hulp nodig?" opent een dialoogvenster. Dit dialoogvenster heeft momenteel geen correcte ARIA-role en geen toegankelijke naam. Ditzelfde probleem doet zich voor bij het dialoogvenster dat wordt geopend via de knop “Feedback”. Doordat er geen role="dialog" en geen aria-label is toegevoegd, kunnen schermlezers niet aangeven dat het om een dialoogvenster gaat, noch welke inhoud het venster bevat. Dit kan opgelost worden door aan het dialoogvenster een role="dialog" toe te voegen en een beschrijvend aria-label, zoals aria-label="Hulpvenster met contactmogelijkheden" of iets soortgelijks dat de inhoud van het venster goed samenvat.
Een vergelijkbaar probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht bij i-iconen die informatievensters openen, en op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens waar de knop “Wijzigen” naast het onderdeel “Account” een venster opent zonder correcte toegankelijkheidskenmerken.

De dialoogvensters die via “Hulp nodig?” en “Feedback” worden geopend bevatten een sluitknop zonder toegankelijke naam. Hierdoor is het voor schermlezergebruikers niet duidelijk wat de functie van de knop is. Voeg ook hier een toegankelijke naam toe aan de knop, bijvoorbeeld met een aria-label="Sluit venster" of een visueel verborgen tekstlabel.

Onderaan op alle pagina’s bevindt zich een helpknop met een vraagteken-icoon. Wanneer deze knop wordt aangeklikt, verschijnen er twee extra knoppen en verandert het icoon van een vraagteken in een X. In de code wordt echter niet aangegeven wat de status van de knop is, oftewel of de extra knoppen zichtbaar of verborgen zijn. Wanneer een knop content toont of verbergt, moet hulpsoftware kunnen vaststellen of die content zichtbaar is. Dit kan worden gerealiseerd met het attribuut aria-expanded. Dit attribuut geeft aan of het gerelateerde gedeelte geopend (true) of gesloten (false) is. Let wel: aria-expanded werkt alleen zolang de focus op de knop blijft. Als de focus verplaatst wordt, kan aanvullende statusinformatie worden weergegeven via verborgen tekst (aria-live of visueel verborgen elementen) om de status van de helpknop voor schermlezers te verduidelijken. Zie hiervoor de pagina https://www.acc.yarden.nl/mijn-yarden.htm/.

De helpknop opent twee extra knoppen, waarvan de knop “Hulp nodig?” een modaal dialoogvenster opent. Dezelfde functionaliteit is aanwezig bij de knop “Feedback”. In de code is echter niet aangegeven dat het hier om een knop gaat die een dialoogvenster activeert. Om dit op te lossen, moet aan de knop het attribuut aria-haspopup="dialog" worden toegevoegd. Dit attribuut informeert schermlezers dat het klikken op de knop leidt tot het openen van een dialoogvenster. De open- of geslotenstatus van het venster kan worden aangegeven met aria-expanded="true" of aria-expanded="false", afhankelijk van de staat van het venster.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ ontbreekt bij het invoerveld onder “Wachtwoord” een toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die gebruik maken van een schermlezer niet duidelijk wat ze in het veld moeten invullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Dit kan bijvoorbeeld door een label-element aan het veld te koppelen, of door gebruik van aria-label of aria-labelledby. Een vergelijkbaar probleem doet zich voor in het tekstvak binnen het “Feedback”-dialoogvenster (dat geopend wordt via de helpknop rechtsonder op alle pagina’s), op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/two-fa-authenticate bij het invoerveld onder “Persoonlijke code”, op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen/aanmaken bij het invoerveld naast “Geboorteplaats”, en op andere vergelijkbare velden op de site.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ werkt het oogicoon in het invoerveld als een link. Deze link heeft echter geen toegankelijke naam. Hierdoor begrijpen bezoekers die gebruik maken van een schermlezer niet wat het doel of de functie van deze link is. Geef deze link een toegankelijke naam die duidelijk beschrijft wat de actie is, bijvoorbeeld met behulp van een aria-label zoals “Toon wachtwoord” of “Verberg wachtwoord”.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/overzicht functioneren de i-icoon-elementen als knoppen, maar zij hebben niet de correcte toegankelijke rol. Deze iconen openen een informatievenster, maar schermlezers geven niet aan dat het om klikbare elementen gaat. Ook de X-icoon-elementen die gebruikt worden om een venster te sluiten, hebben niet de juiste rol. Hierdoor weten blinde gebruikers niet dat zij op deze elementen kunnen klikken, waardoor de informatie die ermee geopend of gesloten kan worden, niet toegankelijk is. Zorg dat deze elementen correct als knoppen worden gemarkeerd met role="button" of door gebruik te maken van een semantisch correct <button>-element. Dit geldt ook voor de pagina https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/gegevens ontbreekt bij de keuzelijst onder het veld “Telefoonnummer” de juiste toegankelijke rol. Elk interactief HTML-element moet voorzien zijn van de correcte semantiek, zodat hulpsoftware begrijpt wat het element doet en hoe ermee omgegaan kan worden. De rol bepaalt of het element bijvoorbeeld een knop, link, selectielijst of checkbox is. Alleen als deze rol correct wordt toegepast, kunnen schermlezers de juiste informatie over het element geven aan de gebruiker. Een soortgelijk probleem doet zich voor op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/uitvaartwensen/aanmaken. Daar bevat het zijmenu interactieve elementen die niet correct zijn gemarkeerd, en onder onderdelen zoals “Burgerlijke staat”, “Uitvaart regelen” en “Nalatenschap” is een groep elementen visueel opgemaakt als checkboxes, maar zij hebben niet de juiste semantische rol. Hierdoor is het voor schermlezers niet duidelijk dat deze elementen selecteerbaar zijn en wat hun functie is. Zorg dat elk element dat eruitziet en functioneert als een interactief onderdeel ook programmatechnisch als zodanig is gemarkeerd met de juiste rol en eigenschappen.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/facturen opent een knop met het label "Betaal" een modaal dialoogvenster. Dit dialoogvenster heeft niet de juiste ARIA-rol. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat. Dit kan opgelost worden door role="dialog" aan het dialoogvenster toe te voegen.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/facturen opent een knop met het label "Betaal" een modaal dialoogvenster. De knop “Betalen” geeft niet aan dat er een dialoogvenster wordt geopend. Dit kan worden opgelost door ARIA-attributen te gebruiken, bijvoorbeeld aria-haspopup.

Uitkomst: Onvoldoende

Bevindingen: De pagina https://www.acc.yarden.nl/mijn-yarden.htm/ bevat een formulier waarin bij invoerfouten een foutmelding verschijnt, zoals “Onjuiste combinatie…”. Deze foutmelding is op dit moment niet gemarkeerd als een statusbericht. Wanneer een bezoeker een fout maakt, verschijnt de melding wel op het scherm, maar de toetsenbordfocus blijft op de knop ‘Versturen’ staan. Hierdoor missen gebruikers van schermlezers de melding, omdat deze niet automatisch wordt voorgelezen. Dit kan worden opgelost door het attribuut aria-live="polite" toe te voegen aan het element waarin de foutmelding verschijnt. Hierdoor wordt de melding automatisch voorgelezen zodra deze in beeld komt, zonder dat het nodig is om de toetsenbordfocus te verplaatsen. Zie ook het formulier op https://www.acc.yarden.nl/mijn-yarden.htm/verzekeringen/ACC13017468/verzekerd-bedrag.

Op pagina https://www.acc.yarden.nl/mijn-yarden.htm/ worden foutmeldingen onder de velden weergegeven wanneer deze leeg zijn gelaten of onjuiste gegevens bevatten. Ook hier geldt dat deze meldingen niet de focus krijgen op het moment dat ze verschijnen, waardoor schermlezers ze niet aankondigen. Voeg daarom ook hier aria-live="polite" toe aan de foutmeldingen zodat ze direct hoorbaar worden voor gebruikers van hulpsoftware.
Eenzelfde probleem wordt waargenomen op andere pagina’s, zoals: https://www.acc.yarden.nl/mijn-yarden.htm/account-aanmaken/0, https://www.acc.yarden.nl/mijn-yarden.htm/gegevens, en https://www.acc.yarden.nl/mijn-yarden.htm/contact.

Op de pagina https://www.acc.yarden.nl/mijn-yarden.htm/contact wordt bij succesvolle verzending van een formulier het bericht “Bericht verzonden” getoond, zonder dat de pagina wordt herladen. Echter, dit bericht krijgt geen focus en wordt ook niet als statusbericht gemarkeerd in de code. Hierdoor wordt het niet automatisch aangekondigd door schermlezers. Ook in dit geval moet het bericht worden voorzien van het attribuut aria-live="polite" of role="status". Zo kunnen schermlezers het bericht automatisch en direct voorlezen zodra het verschijnt, zonder extra handelingen van de gebruiker.