Issues:
Content-audit digitale toegankelijkheid van website CIAM app van Zeeuwse verzekering

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer is het logo bovenaan de pagina geïmplementeerd als achtergrondafbeelding. Hierdoor is het logo niet zichtbaar voor schermlezers. Ditzelfde probleem komt voor bij het logo in de footer. Omdat logo’s informatie geven, moeten ze altijd voorzien zijn van een tekstalternatief. Bezoekers die de afbeelding niet kunnen zien, zoals gebruikers van schermlezers, hebben anders geen toegang tot deze informatie. Logo’s mogen niet als achtergrond worden geplaatst, tenzij er een tekstalternatief beschikbaar is. Plaats het logo daarom als img-element in de HTML en voeg een alt-tekst toe met het woord 'logo' en alle tekst die in het logo staat. Zo wordt de informatie ook toegankelijk voor bezoekers die geen visuele toegang hebben tot de afbeelding.

Bevinding 2: Op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer staat bij stap “4. Communicatievoorkeur” een informatieve afbeelding met de tekst “aanbevolen”. Deze afbeelding is toegevoegd met een img-element, maar het alt-attribuut ontbreekt. Bovendien is de afbeelding verborgen voor schermlezers door het gebruik van role="presentation". Ditzelfde probleem komt voor bij stap “5. Bevestigen”, waar dezelfde afbeelding wordt gebruikt. Een img-element moet altijd een alt-attribuut hebben. Alleen als het om een decoratieve afbeelding gaat die geen betekenis overbrengt, mag dit attribuut leeg zijn (alt=""). Bij een informatieve afbeelding zoals deze moet het alt-attribuut een duidelijke beschrijving geven van de inhoud, bijvoorbeeld alt="aanbevolen".

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 3: Op pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/ opent de knop “Mijn profiel” een venster met de tekst “Swink Adviseursportaal”. Deze tekst fungeert als kop, maar is niet gemarkeerd als heading-element. Ditzelfde probleem komt voor op een andere plek binnen dezelfde omgeving: in het tabblad “Gebruikersbeheer” onder “Je gebruikers”, wanneer er op een gebruiker zoals “Adviseursportaal, Swink” wordt geklikt en vervolgens het accordeon “Rechten” wordt uitgeklapt, bijvoorbeeld bij “Offreren mijn personeel (2)”. In deze sectie zijn de teksten “De Goudse” en “De Zeeuwse” bedoeld als kop, maar deze zijn niet gemarkeerd als heading-element. Blinde bezoekers hebben niets aan een visueel opvallende tekst die bedoeld is als kop, maar technisch niet als kop is gemarkeerd. Gebruikers van hulpsoftware vertrouwen op heading-elementen om snel door de inhoud van een pagina te navigeren. Zet daarom deze teksten om in correcte heading-elementen, zoals h2 of h3. Ditzelfde probleem komt ook voor op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer, bij stap “3. Aanwijzen gebruikersbeheerder”. Daar is de tekst “Gebruikersbeheerder toevoegen” bedoeld als kop, maar deze is niet als zodanig gemarkeerd. Ook deze tekst moet worden omgezet in een heading-element zodat de structuur van de pagina duidelijk is voor alle bezoekers.

Bevinding 4: Op pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/, in het tabblad “Gebruikersbeheer”, verschijnt na het klikken op de knop “Toevoegen gebruiker”, en vervolgens de keuze “Andere organisatie” bij “Is werkzaam bij*” en het klikken op de knop “Naar machtigingen”, het venster “Machtiging toevoegen”. In dit venster is de tekst “Een andere vestiging van je eigen organisatie” gemarkeerd met een h4-element, maar er staat geen inhoud onder. Het h-element is hier niet betekenisvol gebruikt. De tekst fungeert niet als kop, maar wordt door het gebruik van het heading-element wel als zodanig geïnterpreteerd. Kop-elementen zijn bedoeld om structuur te geven aan de pagina en helpen gebruikers van schermlezers om de inhoud te overzien en snel te navigeren. Als er geen inhoud onder de kop staat, wordt de opbouw onduidelijk. Verwijder daarom het h-element rond deze tekst en gebruik in plaats daarvan een ander element, zoals een p-element. Zo blijft de structuur van de pagina logisch en toegankelijk.

Bevinding 5: Op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer, bij de stap “Inloggen”, is een lijst aanwezig met drie items. Deze lijst is echter niet voorzien van de juiste markering. Datzelfde probleem doet zich voor bij stap “3. Aanwijzen gebruikersbeheerder”, in het tooltipvenster dat verschijnt wanneer er met de muis over het “i”-icoon naast “Aanwijzen gebruikersbeheerder(s)” wordt bewogen. Een lijst zonder correcte markup is niet toegankelijk voor schermlezers. Bezoekers die hulpsoftware gebruiken, krijgen dan niet te horen dat het om een lijst gaat, en hoeveel items deze bevat. Dit maakt de structuur en samenhang van de informatie minder duidelijk. Zorg dat opsommingen correct zijn gemarkeerd met een ul- of ol-element, waarbij elk onderdeel in een li-element staat. Zo wordt de lijst op een toegankelijke manier gepresenteerd voor alle bezoekers.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 6: Op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer, in het tabblad “Gebruikersbeheer”, klopt de leesvolgorde van de informatie binnen de layout-tabel onder de kop “Je gebruikers” niet. Een schermlezer leest eerst alle koppen achter elkaar en pas daarna de bijbehorende gegevens. Visueel is de structuur duidelijk, maar voor bezoekers die een schermlezer gebruiken is deze opbouw verwarrend. Zorg dat de informatie op een logische manier wordt gepresenteerd, ook voor hulpsoftware. Dit kan worden opgelost door de gegevens op te maken als een echte tabel met th- en td-elementen, of door gebruik te maken van tussenkopjes om de structuur van de inhoud duidelijk te maken. Zo wordt de informatie in een begrijpelijke volgorde aangeboden aan iedereen.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 7: Op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer, bij de stap “Inloggen”, staat een alinea met de link “inkomen@goudse.com”. In deze alinea wordt uitsluitend kleur gebruikt om de link te onderscheiden van de gewone tekst. De kleurcontrastverhouding tussen de linkkleur en de omringende tekst is bovendien onvoldoende. Ditzelfde probleem komt ook voor bij stap “2. Bedrijfsgegevens” en stap “4. Communicatievoorkeur”. Links mogen niet alleen door kleur worden onderscheiden van andere tekst. Er moet een extra visueel kenmerk worden toegevoegd, zoals een onderstreping, zodat ook bezoekers met kleurenblindheid of een visuele beperking het verschil kunnen waarnemen. Zorg dat links goed herkenbaar zijn, zowel visueel als technisch, en dat ze voldoen aan de minimale contrasteisen. Hetzelfde probleem is gevonden op de volgende pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/404 en https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/404 met de link "webmaster@goudse.com".

Bevinding 8: Op pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/, in het tabblad “Gebruikersbeheer”, verschijnt bij de stap “Rechten verlenen” een alinea met de link “webmaster@goudse.com”, nadat de knop “Toevoegen gebruiker” is gebruikt, de optie “Eigen organisatie” is geselecteerd en de twee formulieren zijn ingevuld. In deze alinea wordt uitsluitend kleur gebruikt om de link te onderscheiden van gewone tekst.

2. Bedienbaar

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 9: Op pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/404 staat in het title-element van de pagina de tekst “Single Sign On”. Deze titel geeft geen duidelijke beschrijving van de inhoud van de pagina. Bezoekers begrijpen hierdoor niet waar de pagina over gaat. Hetzelfde probleem staat op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/404. In het title-element van elke pagina moet een duidelijke en beschrijvende tekst staan die de inhoud van de pagina samenvat, bij voorkeur gevolgd door de naam van de organisatie. Deze titel verschijnt in de tab van de browser en helpt bezoekers bij het oriënteren en navigeren tussen openstaande pagina’s. Zorg dat het title-element aangeeft dat het om een foutpagina gaat, zoals: “Pagina niet gevonden – De Goudse”. Zo is meteen duidelijk wat er op de pagina te vinden is en bij welke organisatie de pagina hoort.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 10: Op alle pagina’s van https://gebruikersbeheer-accp.apps.dezeeuwse.nl/index3.html staat in de footer het logo dat werkt als een knop. De zichtbare tekst komt niet voor in de toegankelijke naam van deze knop. Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst. Zie ook https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 11: Op pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/404 is de primaire taal Nederlands, maar het lang-attribuut op het html-element is onjuist ingesteld op "en". Schermlezers gebruiken deze taalcode om de uitspraakregels toe te passen. Als deze code verkeerd is, wordt de inhoud niet met de juiste uitspraak voorgelezen, wat de tekst minder goed te begrijpen maakt. Zorg dat de taal correct wordt aangegeven met lang="nl" op het html-element. Dit maakt de pagina beter toegankelijk voor bezoekers die hulpsoftware gebruiken. Ditzelfde probleem is ook aanwezig op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/404. Ook daar moet het lang-attribuut worden aangepast naar lang="nl".

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 12: Op pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/404 is de titel van de pagina “Single Sign On”, terwijl de rest van de pagina in het Nederlands is geschreven. Ditzelfde probleem komt ook voor op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/404. Er ontbreekt de taalswitch. De beste oplossing in deze situatie is echter geen taalswitch, maar het aanpassen van de titel. Pas de titel aan naar een duidelijke Nederlandse beschrijving van de inhoud, zoals bijvoorbeeld: “Pagina niet gevonden – De Goudse”. Hierdoor wordt de inhoud beter begrepen en sluit de titel beter aan bij de verwachtingen van Nederlandstalige bezoekers.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 13: Op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer, bij de stap “Inloggen”, worden in het formulier foutmeldingen getoond zoals “Vul hier uw polisnummer in” en “Vul hier uw verificatiecode in”. Ditzelfde soort foutmelding verschijnt ook bij stap “2. Bedrijfsgegevens” en bij stap “3. Aanwijzen gebruikersbeheerder” in het venster dat opent na het klikken op de knop “Gebruikersbeheerder toevoegen”. Deze meldingen zijn instructies, geen foutmeldingen. Een goede foutmelding moet duidelijk maken dat er een fout is gemaakt en aangeven waar de fout zit. Vaak bevat een goede foutmelding een ontkenning, zoals: “Het veld is niet ingevuld” of “De invoer is ongeldig”. Zorg dat foutmeldingen worden herschreven zodat ze duidelijk maken dat er iets mis is gegaan, bijvoorbeeld: “Het polisnummer is niet ingevuld” of “De verificatiecode is niet (goed) ingevuld”. Zo begrijpen bezoekers wat het probleem is en hoe ze het kunnen oplossen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 14: Op pagina https://gebruikersbeheer-accp.apps.dezeeuwse.nl/, in het tabblad “Gebruikersbeheer”, opent de knop “Filteren” een venster met invoervelden. Bij de velden “Voornaam”, “Achternaam”, “Gebruikersnaam” en “E-mailadres” geldt de instructie dat er minimaal 3 tekens moeten worden ingevoerd. Deze instructie is echter alleen zichtbaar wanneer de bezoeker te weinig tekens invoert en op de knop “Zoeken” klikt. De melding “Dit veld heeft minimaal 3 karakters nodig.” verschijnt dan als foutmelding. Instructies mogen niet alleen via foutmeldingen worden gegeven. Ze moeten vooraf zichtbaar en toegankelijk zijn voor alle bezoekers, ook voor mensen die geen foutmelding te zien krijgen. Verplaats deze instructie daarom naar een vaste plek in de buurt van het betreffende invoerveld, zodat deze altijd beschikbaar is voor iedereen. Ditzelfde probleem komt ook voor in een ander formulier dat geopend kan worden via de volgende stappen: in het tabblad “Gebruikersbeheer” op de knop “Toevoegen gebruiker” klikken, daarna bij “Is werkzaam bij*” de optie “Andere organisatie” kiezen, vervolgens op de knop “Naar machtigingen” klikken, de optie “Een andere organisatie” selecteren, en in het venster “Zoekfunctie” het formulier openen. Ook daar verschijnt de foutmelding “Dit veld heeft minimaal 3 karakters nodig.” pas ná het indienen, terwijl de instructie vooraf zichtbaar moet zijn. Zorg dat deze instructie ook daar vooraf zichtbaar is bij het invoerveld.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 15: Op alle pagina’s ontbreekt bij het logo in de footer, dat tevens een knop is, een toegankelijke naam. Dit veroorzaakt problemen voor bezoekers die stembediening gebruiken. Zij geven commando’s op basis van zichtbare tekst. Als die tekst niet voorkomt in de toegankelijke naam van het element, werkt het spraakcommando niet. Voor hulpsoftware is het niet mogelijk de naam van dit element af te leiden. Zorg daarom dat de toegankelijke naam de zichtbare tekst bevat. Zet de zichtbare tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies overeenkomen met de zichtbare tekst. Dit probleem komt onder andere voor op pagina’s zoals https://gebruikersbeheer-accp.apps.dezeeuwse.nl/ en https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer.

Bevinding 16: Op pagina https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer, bij de stap “Inloggen”, ontbreekt bij het invoerveld onder “Je polisnummer” een toegankelijke naam. Ditzelfde probleem komt voor bij stap “3. Aanwijzen gebruikersbeheerder”, bij het invoerveld met het vergrootglasicoon. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in het veld moeten invullen.
Invoervelden moeten altijd een toegankelijke naam hebben die beschrijft waarvoor het veld bedoeld is. Dit kan bijvoorbeeld door een label-element te koppelen aan het invoerveld met behulp van het for-attribuut. Zo kunnen alle bezoekers begrijpen wat er in het veld moet worden ingevoerd.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

• Home – gebruikersbeheer:
  https://gebruikersbeheer-accp.apps.dezeeuwse.nl/
• Pagina niet gevonden:
  https://gebruikersbeheer-accp.apps.dezeeuwse.nl/404
• Home – controle gebruikersbeheer:
  https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/link/ondernemer
• Sorry, er is iets misgegaan – controle gebruikersbeheer:
  https://controle-gebruikersbeheer-accp.apps.dezeeuwse.nl/404

Ondersteunende technieken

• HTML5
• CSS
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.