Issues:
Audit digitale toegankelijkheid website van AART planning app van de Goudse 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://aart-planning-accp.apps.goudse.nl/index.html is het logo bovenaan toegevoegd met CSS via het ::before-pseudo-element en bevat het geen alternnatieve tekst. Ditzelfde geldt voor het logo in de footer. Hierdoor is het logo niet toegankelijk voor bezoekers die de afbeelding niet kunnen zien. Logo’s dragen informatie over en moeten daarom altijd voorzien zijn van een tekstalternatief. Een logo mag niet met CSS worden toegevoegd, tenzij er op een andere manier een toegankelijk alternatief aanwezig is. De beste oplossing is om het logo als een img-element in de HTML te plaatsen en een alt-tekst toe te voegen die de term 'logo' plus de volledige tekst van het logo bevat. Ditzelfde probleem doet zich ook voor op de pagina https://aart-planning-accp.apps.goudse.nl/404. Ook daar moet het logo als afbeelding met een alt-tekst worden toegevoegd, zodat het toegankelijk is voor alle bezoekers.

Bevinding 2: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html staat in de footer de zichtbare tekst “©De Goudse”. Deze tekst wordt echter niet opgenomen in de HTML, maar alleen via CSS toegevoegd. Daardoor wordt de tekst niet voorgelezen door schermlezers en missen bezoekers die niet kunnen zien belangrijke informatie. Zorg dat de tekst ook in de inhoud van de pagina staat, bijvoorbeeld met <p>©De Goudse</p> in de HTML, zodat deze informatie voor iedereen toegankelijk is.

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://aart-planning-accp.apps.goudse.nl/index.html is de lijst met afspraken onder de koppen “Deze week”, “Volgende week” en “Verder” correct gemarkeerd met een ul-element. Elk li-element in deze lijst heeft echter role="button", waardoor de lijstitems zijn oorspronkelijke rol verliezen. De structuur van een lijst klopt niet meer. Lijsten moeten correct worden gemarkeerd, zodat hulpsoftware de structuur correct kan interpreteren. Gebruik daarom alleen li-elementen voor de items. Als er interactieve functionaliteit nodig is, plaats dan een knop binnen het li-element in plaats van het hele li-element als knop te markeren. Zo blijft de semantiek van de lijst behouden en is de inhoud toegankelijk voor iedereen.

Bevinding 4: Op pagina https://aart-planning-accp.apps.goudse.nl/404 staat onder de kop “Sorry, er is iets misgegaan” een tekstblok dat visueel bestaat uit meerdere alinea’s. In de code staat deze tekst in één enkele span-element. Daardoor krijgt een blinde bezoeker een andere structuur voorgelezen en kan hij niet van alinea naar alinea navigeren. Zorg dat elke alinea in een afzonderlijk p-element wordt geplaatst. Het aantal visueel zichtbare alinea’s moet gelijk zijn aan het aantal p-elementen in de code, zodat de inhoud voor iedereen begrijpelijk en toegankelijk is.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 5: Op pagina https://aart-planning-accp.apps.goudse.nl/404 staat de link “webmaster@goudse.com” alleen met kleur aangegeven. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Als bezoekers de kleuren niet kunnen onderscheiden, kunnen ze niet zien dat er een link in de tekst staat. Zorg dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze te onderstrepen of door een kader toe te voegen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 6: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html staat de grijze tekst “Geen resultaten gevonden” (HEX#717171) op een blauwe achtergrond (HEX#ECF1F3) wanneer er geen tijdsloten beschikbaar zijn. De contrastratio is 4,3:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 7: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html staat in de head van de HTML-code maximum-scale=1 en user-scalable=no. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen. Verwijder deze code.

Bevinding 8: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html is de tekst in de header “Aart-Planning Acceptatie” niet zichtbaar wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 9: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html verschijnt er een horizontale scrollbar wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, en ook bij een schermresolutie van 320 pixels breed. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed voor verticale inhoud of 256 CSS-pixels hoog voor horizontale inhoud. Zorg ervoor dat de tekst binnen het scherm past. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.

Bevinding 10: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html is de tekst in de header “Aart-Planning Acceptatie” niet zichtbaar wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%. Zorg dat alles nog werkt en leesbaar is als ingezoomd wordt tot 400% op een scherm van 1280 bij 1024 pixels.

Bevinding 11: Op pagina https://aart-planning-accp.apps.goudse.nl/404 is de tekst op de knop “Opnieuw proberen” niet zichtbaar wanneer de pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%. Zorg dat alles nog werkt en leesbaar is als ingezoomd wordt tot 400% op een scherm van 1280 bij 1024 pixels.

2. Bedienbaar

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 12: Op pagina https://aart-planning-accp.apps.goudse.nl/404 is de titel "Single Sign On" 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 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.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 13: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html bevatten knoppen onder de koppen “Deze week”, “Volgende week” en “Verder” onleesbare tekens in de toegankelijke naam, zoals een vierkant symbool. De naam van knoppen mag geen symbolen bevatten zoals vierkantjes en underscores. Deze karakters maken de functie van de knop onduidelijk. Verwijder de niet-leesbare karakters. Zorg dat de knoptekst duidelijk en beschrijvend is.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 14: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html is de toetsenbordfocus niet zichtbaar op knoppen met afspraken onder de koppen “Deze week”, “Volgende week” en “Verder”, en ook niet op het logo in de footer. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

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 15: Op pagina https://aart-planning-accp.apps.goudse.nl/404 ontbreekt het lang-attribuut op het html-element. 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. Zorg dat het xml:lang-attribuut en het lang-attribuut dezelfde waarde hebben, en dat die waarde gelijk is aan de taal van de content. In dit geval “nl” in plaats van “en”.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 16: Op pagina https://aart-planning-accp.apps.goudse.nl/index.html ontbreekt in de footer een toegankelijke naam bij de knop met het logo “de Goudse verzekeringen”. Wanneer een knop bestaat uit een afbeelding, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de knop. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop. Voeg de beschrijving toe via een alt-tekst bij het img-element, een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.

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

• Afspraak plannen:
  https://aart-planning-accp.apps.goudse.nl/index.html
• Single Sign On:
  https://aart-planning-accp.apps.goudse.nl/404

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• 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.