Rapport:
Audit digitale toegankelijkheid website van CIAM app van de Goudse verzekering

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://inloggen.np.goudse.nl/goudse/login staat een logo met de tekst “de Goudse verzekeringen”. Het tekstalternatief van dit logo is echter “Goudse logo placeholder”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander het tekstalternatief zodat het woord 'logo' en de volledige tekst van het logo erin staat.

Op pagina https://inloggen.np.goudse.nl/goudse/passwordreset/ staat een logo bovenaan de pagina, waar het tekstalternatief niet de volledige zichtbare tekst bevat. Pas het tekstalternatief aan zodat deze het woord 'logo' en alle tekst die op de afbeelding te zien is bevat.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.htm staat onder de kop “Je gebruikers”, in de buurt van de tekst “Naam”, een informatieve afbeelding die als achtergrond is toegevoegd. Voor deze afbeelding is geen tekstalternatief beschikbaar. Een afbeelding die als achtergrond is toegevoegd aan een pagina, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door. Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Een andere oplossing is om de afbeelding via het img-element te plaatsen en de informatie in het alt-attribuut te zetten.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer is het logo bovenaan de pagina toegevoegd als achtergrondafbeelding. Een tekstalternatief ontbreekt. Hierdoor is het logo onzichtbaar voor schermlezers. Hetzelfde probleem geldt voor het logo in de footer van de site. Hierdoor is het logo niet toegankelijk voor bezoekers die de afbeelding niet kunnen zien. Logo’s geven informatie. Daarom moeten ze altijd voorzien zijn van een tekstalternatief. Je mag ze niet als achtergrond plaatsen, tenzij er een tekstalternatief is. Dit kan bijvoorbeeld opgelost worden door het logo als img-element te plaatsen en een alt-tekst toe te voegen die het woord 'logo' en alle tekst van het logo bevat.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat bij stap “2. Bedrijfsgegevens”, onder de kop “Gebruikersbeheer Klantportaal”, naast de tekst “1. Intro” een informatieve afbeelding die als achtergrondafbeelding is toegevoegd. Voor deze afbeelding is geen tekstalternatief beschikbaar. Een afbeelding die als achtergrond is toegevoegd aan een pagina, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door. Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Een andere oplossing is om de afbeelding via het img-element te plaatsen en de informatie in de alternatieve tekst zetten. Dit probleem komt ook voor bij andere stappen van het proces.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat bij stap “4. Communicatievoorkeur” een informatieve afbeelding met de tekst “aanbevolen”. Deze afbeelding is geplaatst via een img-element, maar het alt-attribuut ontbreekt. Zorg dat het alt-attribuut de tekst van de afbeelding krijgt, zodat schermlezers deze informatie kunnen voorlezen. Bij stap “5. Bevestigen” komt hetzelfde probleem voor met dezelfde afbeelding.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat een datatabel. De tabelopmaak ontbreekt in de HTML-structuur. Daardoor kan een schermlezer de relatie tussen de verschillende cellen niet begrijpen. Zorg ervoor dat tabellen altijd zijn voorzien van correcte semantische opmaak, zodat de informatie ook toegankelijk is voor bezoekers die hulpsoftware gebruiken.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer ontbreekt de juiste tabelopmaak bij de stap “3. Aanwijzen gebruikersbeheerder”, waardoor de relatie tussen de gegevens niet correct wordt voorgelezen door de schermlezers.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html zijn de pagineringsknoppen visueel gegroepeerd, maar deze groepering ontbreekt in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep knoppen (zoals de paginering) bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul-, ol- of een nav-element. Dit probleem komt vaker voor op deze pagina.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat in de sectie Veelgestelde vragen bij “1. Algemeen”, onder de vraag “Waarom kan een organisatie meerdere medewerkers als gebruikersbeheerder aanstellen?”, een tekstblok dat visueel bestaat uit meerdere alinea’s. In de code is deze tekst echter als één enkel span-element gemarkeerd. Zorg dat elke alinea in een eigen element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal elementen in de code. Zie ook pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html, onder “3. Tab Machtigingen”, vervolgens bij “3b. Je verstrekte machtigingen” en onder de vraag “Hoe kan ik een machtiging die ik heb gegeven verwijderen?”. Ook hier bestaat de visuele tekst uit meerdere alinea’s, maar in de code uit een element bestaat. Dit probleem komt ook voor op pagina https://gebruikersbeheer-accp.apps.goudse.nl/404, onder de kop “Sorry, er is iets misgegaan”. Zie ook pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat bij stap “5. Bevestigen”, onder de sectie “Samenvatting”.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat in de sectie “Mijn profiel” de tekst “Swink Adviseursportaal”. Deze tekst is een kop, maar is niet gemarkeerd als koptekst in de HTML. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Zet deze kop om in heading-elementen. Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html is dit probleem ook zichtbaar wanneer op “Andrikopoulos, Dimitris” wordt geklikt en “Portalen (6)” wordt geopend, of bij andere heading 3-elementen onder de kop “Rechten”. De teksten “De Goudse” en “De Zeeuwse” zijn koppen, maar heading-elementen ontbreken. Hetzelfde geldt voor de tekst “Let op” en “Organisatie” in het tabblad “Machtigingen”, bij zowel “Je ontvangen machtigingen” als “Je verstrekte machtigingen”. Ook deze teksten moeten als heading worden gemarkeerd, zodat ze correct worden herkend door hulpsoftware.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat in de sectie Veelgestelde vragen, bij “3. Tab Machtigingen”, een kop van niveau 3 die direct gevolgd wordt door een andere kop van hetzelfde niveau. Zie de koppen “3a. Je ontvangen machtigingen” en “Onze organisatie heeft een machtiging ontvangen..”, evenals bij “3b. Je verstrekte machtigingen” en de kop “Hoe kan ik een machtiging geven aan een andere ..”. Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Pas de koppenstructuur aan.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html verschijnt na het klikken op “Adviseursportaal, Swink” een kop van niveau 4 die direct gevolgd wordt door een kop van een hoger niveau. Dit gebeurt bij de teksten “Howden Nederland” en “Gegevens”. Een blinde bezoeker kan indruk krijgen dat content ontbreekt.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html verschijnt na het klikken op “Adviseursportaal, Swink” de kop “Howden Nederland”, gemarkeerd met een h4-element zonder dat er inhoud onder staat. Het kop-element is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. Deze tekst is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h4-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, gebruiken koppen om door de pagina te navigeren en de structuur van informatie te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken. Zorg dat de tekst die in een kop-element staat ook echt de functie van kop of tussenkop heeft. Verwijder het h4-element en gebruik een ander element, zoals een p-element. De gewenste stijl kan met CSS worden toegevoegd.

Op pagina https://inloggen.np.goudse.nl/goudse/404 is de tekst “The page you’re looking for does not exist.” gemarkeerd met een h3-element om het lettertype groter te maken. Het kop-element is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. Deze tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Verwijder het h3-element en gebruik een ander element, zoals een p-element. De gewenste stijl kan met CSS worden toegevoegd.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat in een formulier een label met de tekst “Je polisnummer”. Dit label is niet expliciet gekoppeld aan het bijbehorende invoerveld. Label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat onder de kop “Inloggen” een lijst met drie items, maar deze lijst is niet correct opgemaakt in de HTML. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ul of ol gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Dit probleem komt ook voor op de pagina’s na inloggen, waar de verschillende stappen onder de kop “Gebruikersbeheer Klantportaal” worden getoond.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat een groep links met de teksten “Cookiebeleid”, “Privacy” en “Disclaimer”. Soms wordt deze groep vervangen door links met de tekst “Link”. Deze groep links is visueel gegroepeerd, maar deze structuur is niet terug te vinden in de HTML-code. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer wordt vanaf stap “2. Bedrijfsgegevens” een reeks stappen getoond als visuele volgorde, bijvoorbeeld “1. Intro”, “2. Bedrijfsgegevens”, “3. Aanwijzen gebruikersbeheerder”. Er is echter geen programmatische aanduiding welke stap op dat moment actief is. De actieve stap is alleen visueel gemarkeerd, en deze informatie is niet beschikbaar voor schermlezers of andere hulpsoftware. Hierdoor kunnen blinde en slechtziende bezoekers niet bepalen op welke stap zij zich bevinden, hoeveel stappen er zijn, of welke stappen al zijn afgerond. Dit maakt het moeilijk om de voortgang in het proces te begrijpen en kan leiden tot verwarring of desoriëntatie.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat bij stap “4. Communicatievoorkeur” een groep keuzerondjes. Deze radioknoppen hebben geen groepslabel. De individuele labels van de keuzerondjes geven onvoldoende informatie over de keuze die hier moet worden gemaakt. Voeg een groepslabel toe zodat duidelijk is waar de keuzemogelijkheden betrekking op hebben.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html verschijnt na het klikken op de knop “Toevoegen gebruiker” en het kiezen van de optie “Eigen organisatie” onder “Is werkzaam bij*”, bij de stap “Rechten verlenen” een alinea met de link “webmaster@goudse.com”. Deze link is alleen door middel van kleur te onderscheiden van de omringende tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende gebruikers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat. Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken, of door een kader toe te voegen.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat in een alinea de link “inkomen@goudse.com”. Ook hier is de link alleen door kleur te onderscheiden van de gewone tekst. Dit probleem doet zich ook voor bij stap “2. Bedrijfsgegevens” en stap “4. Communicatievoorkeur”. Zorg dat links in deze alinea’s niet alleen visueel met kleur worden aangeduid, maar ook op een andere manier duidelijk herkenbaar zijn als link.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html komt hetzelfde probleem voor in het tabblad “Machtigingen”. Na het klikken op de knop “Toevoegen machtiging” en het doorgaan naar het onderdeel “Selecteer de online functionaliteit(en) waar het om gaat”, staat in een alinea een link die alleen visueel door kleur herkenbaar is als link. Ook hier geldt dat links in de tekst op zijn minst op één andere manier te herkennen moeten zijn, bijvoorbeeld door onderstreping of een visueel kenmerk dat niet alleen van kleur afhankelijk is.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat in het head-element van de HTML-code het attribuut user-scalable=no. Dit voorkomt dat bezoekers de pagina kunnen inzoomen. Hierdoor wordt de toegankelijkheid beperkt, vooral voor slechtziende bezoekers die afhankelijk zijn van vergroting. Verwijder deze code.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat in het head-element van de HTML-code ook het attribuut user-scalable=no. Dit moet eveneens verwijderd worden, zodat bezoekers de inhoud van de pagina kunnen vergroten.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer is bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 200% een deel van de tekst bovenaan de pagina niet meer zichtbaar. Dit geldt voor de tekst “Text” aan de rechterkant van de header, die soms wordt weergegeven als “GHM Documentatie”. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels. Op dezelfde pagina treedt een soortgelijk probleem op bij stap 1 nadat op de knop “Verder” is geklikt. De tekst “Een ogenblik geduld alstublieft. Je gegevens worden opgehaald.” wordt dan deels afgesneden.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://inloggen.np.goudse.nl/goudse/login/ is bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400% de link “Terug naar goudse.nl” niet zichtbaar en niet bedienbaar. Als een bezoeker inzoomt, moet alles nog werken. Dit probleem doet zich ook voor op pagina https://inloggen.np.goudse.nl/goudse/passwordreset/. Zorg ervoor dat alle interactieve elementen ook bij 400% zoom binnen beeld blijven en goed te bedienen zijn.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/404 en op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/404 is hetzelfde probleem aanwezig met de link “Opnieuw proberen”. Bij een zoomniveau van 400% is deze link niet zichtbaar en daardoor niet toegankelijk. Zorg dat deze link ook bij hoge vergroting binnen het zichtbare deel van het scherm valt en gebruikt kan worden.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer, bij stap “3. Aanwijzen gebruikersbeheerder”, werkt een tooltip-element niet bij een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400%. Als een bezoeker inzoomt, moet alles nog werken. Zorg dat tooltips ook bij hoge vergroting zichtbaar en bruikbaar blijven.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer, bij stap “4. Communicatievoorkeur”, is het woord “Communicatievoorkeur” te breed en wordt niet afgebroken. Hierdoor loopt het woord buiten het scherm en ontstaat een horizontale scrollbar. Als een lang woord niet binnen beeld past bij een scherm van 320 pixels, moet het worden afgebroken. Er mag geen horizontale scrollbar komen. Los dit bijvoorbeeld op met de CSS-eigenschap word-break.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://inloggen.np.goudse.nl/goudse/login is het contrast van de toetsenbordfocus onvoldoende, waardoor deze voor sommige bezoekers niet (goed) zichtbaar is. Wanneer de knop met het oogicoon de toetsenbordfocus krijgt, verschijnt er een lichtblauwe rand (HEX #D4B0E4) om de knop. De contrastratio tussen deze rand en de witte achtergrond is slechts 1,9:1. Dit moet minimaal 3,0:1 zijn. Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen.

Op pagina https://inloggen.np.goudse.nl/goudse/login, wanneer de knop “Inloggen” de toetsenbordfocus krijgt, verandert de knop gedeeltelijk in lichtblauw en gedeeltelijk in blauw. De contrastratio tussen deze kleuren is 2,0:1. Dit is onvoldoende. Zorg ook hier dat het contrast minimaal 3,0:1 is, zodat toetsenbordgebruikers goed kunnen zien waar de focus zich bevindt. Zie ook pagina https://inloggen.np.goudse.nl/goudse/passwordreset/ met de knop “Inloggen”. De visuele aanduiding van de focus is niet goed zichtbaar door een te laag contrast. Pas de kleuren van de focusstijlen aan om te voldoen aan de minimale contrastratio van 3,0:1.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat een icoon met een “i” in een cirkel dat een tooltip opent wanneer een bezoeker met de muis over het icoon beweegt. De tooltip toont extra inhoud die zichtbaar wordt bij hover. Het is niet mogelijk om deze tooltip te sluiten met de Esc-toets. Zorg dat bezoekers de tooltip met de Esc-toets kunnen sluiten, zodat de inhoud toegankelijk is voor iedereen, ook voor bezoekers die gebruikmaken van een toetsenbord of hulpsoftware. Zie ook de tooltip bij stap “3. Aanwijzen gebruikersbeheerder”. Ook hier verschijnt bij het “i”-icoon een tooltip die niet afsluitbaar is met de Esc-toets. Pas de interactie aan zodat de tooltips op een toegankelijke manier kunnen worden gesloten.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html is het element “Mijn profiel” niet bedienbaar met het toetsenbord. Zorg dat menu’s met het toetsenbord kunnen worden geopend en gebruikt, en dat de informatie in deze menu’s toegankelijk is voor alle bezoekers. Bezoekers zonder muis moeten toegang hebben tot alle functionaliteit.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html werkt toetsenbordbediening niet onder “Machtigingen”, wanneer op de knop “Hockey Xperience WEERSELO” wordt geklikt. De rijen in de tabel, zoals “Z- Test applicatie Automatisch toewijzen”, zijn niet bedienbaar met het toetsenbord. Deze onderdelen moeten volledig toegankelijk zijn voor bezoekers die met het toetsenbord navigeren.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat een icoon met een “i” in een cirkel dat een tooltip activeert wanneer een bezoeker er met de muis overheen beweegt. Deze functionaliteit is niet beschikbaar voor bezoekers die alleen met het toetsenbord navigeren. Als de tooltip informatie of instructies bevat, dan moet die inhoud ook toegankelijk zijn voor bezoekers die alleen met het toetsenbord navigeren. Ook op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer doet dit probleem zich voor bij stap “3. Aanwijzen gebruikersbeheerder”. De tooltip die wordt geactiveerd door het “i”-icoon is niet toegankelijk voor toetsenbordgebruikers. Zorg dat deze informatie via toetsenbordnavigatie beschikbaar is.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html verschijnt na het klikken op de knop “Toevoegen gebruiker” een formulier. De sessie van dit formulier verloopt snel zonder voorafgaande waarschuwing. Zorg dat bezoekers de mogelijkheid hebben om deze tijdslimiet uit te zetten, aan te passen of te verlengen. Zo wordt voorkomen dat ingevoerde gegevens onverwacht verloren gaan.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html ontstaat hetzelfde probleem in het tabblad “Machtigingen” na het klikken op de knop “Toevoegen machtiging”. Ook hier verloopt de sessie van het formulier zonder voorafgaande melding. Bezoekers moeten controle hebben over de tijdslimiet om verlies van gegevens te voorkomen.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html doet dit probleem zich ook voor in het profielgedeelte, bijvoorbeeld bij “Swink Adviseursportaal”. De sessie verloopt daar eveneens zonder waarschuwing. Zorg dat bezoekers de sessie actief kunnen beheren door deze uit te zetten, te verlengen of aan te passen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html 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.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer ontbreekt eveneens een skiplink. Zonder deze mogelijkheid zijn gebruikers van hulpsoftware of toetsenbordnavigatie genoodzaakt om telkens door herhaalde inhoud te gaan. Zorg dat er een skiplink beschikbaar is om direct naar de hoofdinhoud te gaan. Deze link moet technisch als eerste focusbare element op de pagina staan en zichtbaar worden bij toetsenbordfocus.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://inloggen.np.goudse.nl/goudse/404 ontbreekt het title-element. 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 en wordt als eerste voorgelezen als de pagina wordt geopend. Met een duidelijke beschrijving kunnen gebruikers makkelijker navigeren tussen verschillende pagina’s. Voeg het title-element toe aan de pagina en zet er een duidelijke tekst in.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/404 staat in het title-element de tekst “Single Sign On”. Deze tekst is geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Deze tekst wordt bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina die de inhoud van de pagina beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html wordt na het klikken op de knop “Toevoegen gebruiker” en het kiezen van de optie “Eigen organisatie” extra invoervelden getoond. De toetsenbordfocus verplaatst zich echter niet naar het eerste nieuw getoonde artikel, maar naar de knop “Gebruikersbeheer”. En na het activeren van de knop “Gebruikersbeheer” springt de focus door naar de knop “Volgende”. Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis. Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks. Controleer ook de focusvolgorde op de andere stappen van het formulier.

Op pagina https://inloggen.np.goudse.nl/goudse/passwordreset/ landt de toetsenbordfocus bij het eerste bezoek aan de pagina op het invoerveld “E-mailadres”. De interactieve elementen boven dit invoerveld worden overgeslagen. Dit is geen logische focus volgorde omdat een bezoeker moet terug navigeren om andere elementen te verkennen.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html komt de toetsenbordfocus na het klikken op “Adviseursportaal, Swink” en daarna op de knop “Bewerken” terecht op een onzichtbaar interactief element. Dit probleem doet zich ook voor na elementen zoals “Offreren mijn personeel (2)”, “Gebruikersbeheer (1)” en “Lijfrenteverzekeringen (1)”. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Zorg dat verborgen elementen geen focus kunnen krijgen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat in de footer een knop met alleen een logo. Deze knop heeft geen toegankelijke naam. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft. Zorg dat hulpsoftware de functie van de knop correct kan overbrengen. Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat eenzelfde knop met een logo in de footer zonder toegankelijke naam. Ook hier is niet duidelijk wat de knop doet voor blinde bezoekers. Voeg ook hier beschrijvende tekst toe zodat de knop toegankelijk is.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html zijn pagineringsknoppen aanwezig met de zichtbare teksten “1”, “2”, “3”, “…” enzovoort. Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk wat deze knoppen doen. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft, bijvoorbeeld door aria-label="Ga naar pagina 2" toe te voegen. Dit probleem komt ook voor bij andere paginering op dezelfde site.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat onder de kop “Je gebruikers” een knop met de tekst “Naam”. Deze knop heeft als functie om gebruikers te sorteren, maar de toegankelijke naam is alleen “Naam”, wat de functie niet goed beschrijft. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staan meerdere knoppen met de zichtbare tekst “Link”, maar deze knoppen voeren verschillende functies uit. Uit de tekst is niet duidelijk wat het verschil is tussen deze links. Dit kan verwarrend zijn voor bezoekers met een schermlezer. Zorg dat de tekst past bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende teksten hebben.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://inloggen.np.goudse.nl/goudse/login is de toetsenbordfocus niet zichtbaar op het element “Inloggen”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren, moeten goed kunnen zien waar de focus zich bevindt. Zonder zichtbare focus is het niet duidelijk wanneer op Enter moet worden gedrukt om een knop of link te bedienen.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html is de toetsenbordfocus niet zichtbaar op verschillende knoppen, waaronder de knop “Adviseursportaal, Swink eoosten+swink@goudse.com Compleet”, de knop “Andrikopoulos, Dimitris dandrikopoulos+agent@goudse.com Compleet” en de knop “Aslan, Nurbanu ketentest+vlc@goudse.com Compleet”. Op dezelfde pagina, na het klikken op “Machtigingen”, is de toetsenbordfocus niet zichtbaar op knoppen zoals “Hockey Xperience WEERSELO”, “EEE Vormgeving ROTTERDAM” en “Bruijntjes B.V. AMSTELVEEN”. Op het tabblad “Je verstrekte machtigingen” op dezelfde pagina is de toetsenbordfocus niet zichtbaar op de knop “Howden Nederland B.V. ’S-HERTOGENBOSCH”.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html is de standaard toetsenbordfocus verwijderd van links en invoervelden. Er is geen alternatief visueel focusindicator toegevoegd. Bijvoorbeeld op het tabblad “Gebruikersbeheer”, na het klikken op “Adviseursportaal, Swink”, is de focus niet zichtbaar. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren, moeten goed kunnen zien waar de focus zich bevindt. Zonder zichtbare focus is het niet duidelijk wanneer op Enter moet worden gedrukt om een knop of link te bedienen. Verwijder outline:none of voeg een eigen toegankelijke focusindicator toe.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html, na het openen van “Machtigingen”, klikken op “Hockey Xperience WEERSELO” en vervolgens op “Z- Test applicatie”, wordt een dialoog geopend met een formulier. Boven een selectievakje staat het label “Alle gebruikers machtigen”, maar de toegankelijke naam is leeg. Dit probleem komt ook voor bij andere selectievakjes op deze website. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer bevat het formulier een invoerveld met daarboven het label “Je polisnummer”. De toegankelijke naam van dit veld is leeg. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer treedt dit probleem ook op bij stap “4. Communicatievoorkeur” waar keuzerondjes gebruikt worden. De zichtbare tekst boven deze radioknoppen is niet opgenomen in de toegankelijke naam. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/404 ontbreekt het lang-attribuut op het html-element. Ditzelfde probleem komt voor op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/404 en op pagina https://inloggen.np.goudse.nl/goudse/404. Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is. Zorg dat het lang-attribuut aanwezig is, en dat dit attribuut de taalcode bevat van de taal van de pagina.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://inloggen.np.goudse.nl/goudse/login hebben aria-label-attributen Engelse tekst. Bijvoorbeeld bij het logo bovenaan de pagina wordt de tekst “Goudse logo placeholder” gebruikt. Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina, in dit geval Nederlands. Vertaal de teksten van de aria-labels naar het Nederlands zodat ze correct worden uitgesproken.

Op pagina https://inloggen.np.goudse.nl/goudse/passwordreset/ bevatten aria-label-attributen Engelse tekst. Deze teksten moeten vertaald worden naar het Nederlands zodat schermlezers ze juist kunnen voorlezen volgens de ingestelde taal van de pagina.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/404 staat een titel “Single Sign on” in het Engels en mist een taalcode. Deze tekst wordt nu uitgesproken volgens de uitspraakregels van de primaire taal van de pagina, die is ingesteld op “nl” in het lang-attribuut op het html-element. De schermlezer moet echter overschakelen naar de taal van deze specifieke zin. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde, of vertaal deze zodat de taal overeenkomt met de taal van de overige content op de pagina. Als de tekst bijvoorbeeld in het Engels is, voeg dan lang="en" toe aan het element.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html verschijnt na het klikken op de knop “Toevoegen gebruiker”, het selecteren van “Eigen organisatie” en het klikken op “Volgende” een foutmelding in het formulier met de tekst “Dit is een verplicht veld”. Deze melding 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, zoals in: “Het veld is niet (goed) ingevuld”. Controleer ook de foutmeldingen die in andere stappen van dit formulier worden weergegeven.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staan selectievakjes zonder label. Deze elementen verschijnen na het openen van “Machtigingen”, klikken op “Hockey Xperience WEERSELO” en vervolgens op “Z- Test applicatie”. Doordat er geen visueel label aanwezig is, is het voor sommige bezoekers met een cognitieve beperking lastig om deze selectievakjes goed te gebruiken. Zorg ervoor dat elk selectievakje een visueel label krijgt dat aangeeft waar het vakje voor dient. Controleer ook de andere selectievakjes op deze website.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html staat in de footer een knop met een logo. Deze knop heeft geen toegankelijke naam. Zie ook pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop. Geef deze knop een toegankelijke naam die het doel van de knop beschrijft.

Op pagina https://gebruikersbeheer-accp.apps.goudse.nl/index3.html heeft de knop met het label “Mijn profiel” niet de juiste toegankelijke rol. Elk HTML-element heeft standaard een rol die aangeeft wat het element doet en hoe hulpsoftware ermee om moet gaan. Schermlezers en andere hulpsoftware moeten de correcte rol van elk element kennen om deze goed te kunnen interpreteren. Zorg ervoor dat deze knop de juiste toegankelijke rol heeft, zodat de functie ervan duidelijk is voor bezoekers die hulpsoftware gebruiken.

Op https://gebruikersbeheer-accp.apps.goudse.nl/index3.html missen de knoppen “Z- Test applicatie Automatisch toewijzen” en anderen onder “Machtigen” ook de juiste toegankelijke rol. Deze knoppen moeten correct gecodeerd zijn zodat schermlezers en andere hulpsoftware ze kunnen herkennen en beschrijven als knoppen.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer staat in de footer een link met het logo die gecodeerd is als een knop met role="button". Het element verwijst naar een andere locatie, wat betekent dat het gedrag past bij een link, niet bij een knop. De rol van link moet worden gebruikt. De rol van knop is bedoeld voor elementen die een actie uitvoeren, zoals het openen van een menu of het verzenden van een formulier.

Op pagina https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer, bij stap “3. Aanwijzen gebruikersbeheerder”, ontbreekt een toegankelijke naam bij het element onder “Gebruikersbeheerder”. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat het doel van dit element is. Invoervelden moeten altijd een toegankelijke naam hebben die beschrijft wat ingevuld of geselecteerd moet worden. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door het te koppelen aan een label-element.

Op https://controle-gebruikersbeheer-accp.apps.goudse.nl/link/ondernemer treedt dit probleem ook op bij stap “4. Communicatievoorkeur”. De keuzerondjes “Ik wil mijn documenten digitaal ontvangen” en “Ik wil mijn documenten per post ontvangen” hebben geen toegankelijke naam. Hierdoor is het voor bezoekers die een schermlezer gebruiken niet duidelijk waar deze opties voor dienen. Invoervelden moeten altijd een toegankelijke naam hebben die beschrijft wat het veld betekent of doet. Geef deze radioknoppen dus een toegankelijke naam, bijvoorbeeld door het label-element goed te koppelen.

Uitkomst: Niet aanwezig