Issues:
Content-audit digitale toegankelijkheid van website van AART planning app van de 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://aart-planning-accp.apps.dezeeuwse.nl/index.html is het logo bovenaan toegevoegd met CSS via het ::before pseudo-element en bevat het geen alt-tekst. Hetzelfde geldt voor het logo in de footer. 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. Het logo mag niet met CSS worden geplaatst, tenzij er een tekstalternatief is. Dit kan opgelost worden door het logo als img-element te plaatsen en een alt-tekst toe te voegen die de term 'logo' plus alle tekst van het logo bevat. Op pagina https://aart-planning-accp.apps.dezeeuwse.nl/404 staat hetzelfde probleem met het logo. Ook hier is het logo toegevoegd met CSS en ontbreekt een tekstalternatief.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 2: Op pagina https://aart-planning-accp.apps.dezeeuwse.nl/index.html, onder de koppen “Deze week”, “Volgende week” en “Verder”, is de lijst met afspraken correct gemarkeerd met een ul-element. Elk li-element heeft echter role=“button”, waardoor de rol van een lijst item is verdwenen. Dit doorbreekt de semantische structuur. Lijsten moeten correct worden gemarkeerd, zodat hulpsoftware de structuur kan begrijpen. Gebruik een ul-element of ol-element voor de lijst, en li voor de items. Als er interactieve functionaliteit nodig is, plaats dan een knop binnen het li-element in plaats van het hele lijstitem als knop te markeren. Zo blijft de semantiek intact en is de inhoud toegankelijk voor iedereen.

Bevinding 3: Op pagina https://aart-planning-accp.apps.dezeeuwse.nl/404 onder de kop “Sorry, er is iets misgegaan”, is een tekstblok met meerdere alinea’s onjuist gemarkeerd als één span-element. Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimte ertussen. Deze structuur moet ook in de code terugkomen. Zorg dat elke alinea in een eigen p-element wordt geplaatst. Het aantal visueel zichtbare alinea’s moet gelijk zijn aan het aantal p-elementen in de code.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 4: Op pagina https://aart-planning-accp.apps.dezeeuwse.nl/404 staat in een alinea de link "webmaster@goudse.com" die alleen met kleur verschilt van de statische tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers die mogelijk niet kunnen zien 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 te onderstrepen of door een kader toe te voegen.

2. Bedienbaar

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 5: Op pagina https://aart-planning-accp.apps.dezeeuwse.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 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.

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 6: Op pagina https://aart-planning-accp.apps.dezeeuwse.nl/404 ontbreekt het lang-attribuut (lang="nl") 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 dus “nl”.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 7: Op pagina https://aart-planning-accp.apps.dezeeuwse.nl/index.html ontbreekt in de footer een toegankelijke naam bij de knop met het logo “de Zeeuwse 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.dezeeuwse.nl/index.html
• Single Sign On:
  https://aart-planning-accp.apps.dezeeuwse.nl/404

Ondersteunende technieken

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