Issues:
Content-audit van de website Zeeuwse Beheren Mijn Personeel

(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 de pagina (https://beherenmijnpersoneel-accp.apps.dezeeuwse.nl/index3.html) is een knop te vinden met het logo, deze leidt naar 'Werknemersgegevens'. Voor bezoekers die niet kunnen zien en hulpsoftware zoals een screenreader gebruiken, is niet duidelijk dat zich hier een logo bevindt en welke dat is. Hiermee is ook de functie van de knop onduidelijk, er wordt alleen 'knop' voorgelezen. Een oplossing zou zijn om de div met role="button" een naam te geven waarin het woord 'logo' en alle tekst die op het logo te zien is, terugkomt. Ook kan ervoor gekozen worden de afbeelding in HTML te plaatsen en deze via een alt-attribuut een naam te geven. Hieraan kan de functie van de knop worden toegevoegd zodat duidelijk is wat er gebeurt als de knop geactiveerd wordt. Zie ook succescriterium 4.1.2.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 2: Als de bezoekers navigeren tussen de verschillende menu-items, is visueel aan de styling (groene driehoek) ter herkennen welk menu-item de huidige pagina betreft. Voor bezoekers die niet kunnen zien, is deze informatie niet beschikbaar. Zorg dat het menu-item waar de visuele indicator bij staat, wordt voorgelezen als 'huidige pagina'. Doe dit bijvoorbeeld door het attribuut aria-current toe te voegen.

Bevinding 3: Op elke pagina zijn meerdere koppen (h2) te vinden die geen content bevatten. Bijvoorbeeld 'Autorijschool C. Roelse'. De functie van een kop is het beschrijven van bijbehorende content, en als dit laatste er niet is wordt deze functie niet uitgeoefend. Daarom mag dit niet als kop worden opgemaakt. Maak dit als gewone tekst (p) op en maak voor de styling gebruik van de stylesheet.

Bevinding 4: Op pagina 'Werknemersgegevens' staan boven de tabel met werknemersgegevens selectievakjes (checkboxes), bijvoorbeeld 'In dienst'. Visueel is duidelijk welk selectievakje bij welk label hoort, maar voor bezoekers die dit krijgen voorgelezen door hulpsoftware zoals een screenreader is dit niet duidelijk. Dit komt doordat de labels niet programmatisch aan de selectievakjes zijn gekoppeld. Los dit bijvoorbeeld op door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het selectievakje.

Bevinding 5: Op pagina 'Werknemersgegevens' kan in de tabel via 'Ziek melden' een dialoogscherm worden geopend. Hierin staan invoervelden, bijvoorbeeld 'Eerste ziektedag' en 'Percentage ziek %'. Deze labels zijn niet programmatisch aan de invoervelden gekoppeld, waardoor voor bezoekers die niet kunnen zien dit niet voorgelezen krijgen via hulpsoftware. Los dit bijvoorbeeld op door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld.

Bevinding 6: Op de pagina 'Organisatieprofiel' zijn de teksten 'Vestigingsadres' en 'Postadres' door styling (dikgedrukt) visueel herkenbaar gemaakt als kopteksten. Voor bezoekers die niet kunnen zien is dit via hulpsoftware niet te herkennen. Maak de teksten daarom op als kop op het juiste kopniveau. Dit komt op meerdere plekken voor, bijvoorbeeld ook in het dialoogscherm dat op pagina 'Werknemersgegevens' kan worden geopend via 'Ziek melden'. Daar gaat het bijvoorbeeld om 'Controleer de AO-status' en 'Gegevens ziekmelding'.

Bevinding 7: Advies: Op verschillende pagina's wordt niet op de juiste manier gebruik gemaakt van een koppenstructuur. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is een koppenstructuur belangrijk, omdat een lijst van koppen opgevraagd kan worden en op die manier genavigeerd kan worden. Het wordt niet op toegankelijkheid afgekeurd als de koppenstructuur niet goed is opgebouwd, maar het verbeteren hiervan zorgt dat de structuur van de content beter geïnterpreteerd kan worden. Zorg voor een goede koppenstructuur, die begint bij een kopniveau h1 voor de belangrijkste kop (titel van de pagina), kopniveau h2 voor de koppen, kopniveau h3 voor de tussenkoppen, etcetera. Sla hierbij geen koppen over.

Een aantal voorbeelden van een onjuiste koppenstructuur zijn:

• Op pagina 'Organisatieprofiel' worden koppen overgeslagen, na h1 komt h4 (nadat de onterecht als h2-koppen opgemaakte teksten hersteld worden)
• Op pagina 'Contactpersonen' springt het kopniveau van h1 naar h5. Ditzelfde gebeurt op pagina 'Verzekeringen'.

Bevinding 8: Advies: Als de bezoekers navigeren tussen de verschillende menu-items, is visueel aan de styling (groene driehoek) te herkennen welk menu-item de huidige pagina betreft. Hierin gaat iets mis als de bezoeker klikt op de knop met het logo. Dan opent de pagina 'Werknemersgegevens', maar blijft de incitator onder het menu item staan dat voor het laatst geopend was. Dit is geen toegankelijkheidsprobleem omdat dit geldt voor alle bezoekers. Het kan wel verwarring scheppen over op welke pagina de bezoeker zich bevindt, daarom is het goed om dit op te lossen. Zorg dat de indicator altijd op de juiste plek staat.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 9: Op pagina 'Organisatieprofiel' staat onder de kop 'Wilt u een wijziging aanbrengen?' een grijze (HEX #717171) tekst op een licht-perzikkleurige (HEX #FFF0E2) achtergrond. Hierbij is het contrast onvoldoende. De contrastverhouding is 4,3:1 waar deze minimaal 4,5:1 moet zijn.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 10: Op pagina 'Werknemersgegevens' kunnen de gegevens van de werknemers worden gesorteerd. Bijvoorbeeld op 'Naam'. Via een aria-label is hieraan de Engelstalige tekst 'sort Naam' toegevoegd. Dit kan onduidelijkheid scheppen, omdat de taal van de pagina Nederlands is en de tekst niet met de juiste uitspraak voorgelezen kan worden door hulpsoftware zoals een screenreader. Vertaal de teksten van de aria-labels naar het Nederlands. Ditzelfde doet zich voor bij het zoekveld dat kan worden gevonden door in de tabel op 'Details' te klikken, dan opent zich een pagina met gegevens over de betreffende werknemer en hier staat een sorteerknop met hetzelfde probleem bij 'Werknemers'.

Bevinding 11: Op pagina 'Werknemersgegevens' is onder de lijst met werknemers een paginering te vinden. Hierin staan Engelstalige teksten in aria-labels. De paginering is op dit moment niet actief. Op het moment dat de paginering wel actief is, moet de tekst van de aria-labels overeenkomen met de tekst van de pagina (Nederlands).

3.2 Voorspelbaar

3.2.4 Consistente identificatie (Niveau AA)

Informatie over succescriterium 3.2.4 Consistente identificatie

Bevinding 12: Pagina 'Werknemersgegevens' is te openen via het menu-item 'Werknemersgegevens. Dit is voor alle bezoekers duidelijk. Echter, dezelfde pagina is ook te openen via de knop waarin het logo te vinden is. Deze knop is niet te identificeren als link naar de pagina 'Werknemersgegevens'. Dit kan daarom verwarrend werken. Zorg dat de link naar de pagina 'Werknemersgegevens' overal op dezelfde manier te identificeren is.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 13: Op pagina 'Werknemersgegevens' bevindt zich een zoekveld. Hierin staat de placeholdertekst 'Zoeken'. Deze verdwijnt op het moment dat de bezoeker begint te typen, en is daarom niet voldoende als label voor dit veld. Zorg dat er een label buiten het veld wordt geplaatst en dat deze zichtbaar blijft. Ditzelfde doet zich voor bij het zoekveld dat kan worden gevonden door in de tabel op 'Details' te klikken, dan opent zich een pagina met gegevens over de betreffende werknemer en hier staat ditzelfde zoekveld.

Bevinding 14: Advies: Op pagina 'Werknemersgegevens' kan via de knop 'Ziek melden' een dialoogscherm worden geopend waarin velden kunnen worden ingevuld. Alle velden zijn verplicht, maar dit is niet direct te zien. Pas nadat op de knop 'Opslaan' wordt gedrukt wordt dit duidelijk. Omdat binnen het dialoogscherm wel de tekst 'Het is erg belangrijk dat u deze schadeaangifte juist en volledig doet.' staat, is aan te nemen dat het wel duidelijk is dat elk veld moet worden ingevuld. Daarom wordt dit niet op toegankelijkheid afgekeurd. Mogelijk zou dit wel nog duidelijker kunnen worden gemaakt door bij de verplichte velden bijvoorbeeld een asterisk (*) te plaatsen en te vermelden dat dit betekent dat het om verplichte velden gaat.

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 de pagina (https://beherenmijnpersoneel-accp.apps.dezeeuwse.nl/index3.html) is een knop te vinden met het logo, deze leidt naar 'Werknemersgegevens'. De knop heeft geen toegankelijke naam, waardoor bezoekers die afhankelijk zijn van hulpsoftware zoals een screenreader alleen 'knop' voorgelezen krijgen. Een oplossing zou zijn om de div met role="button" een naam te geven waarin het woord 'logo' en alle tekst die op het logo te zien is, terugkomt. Voeg hieraan toe wat de functie van de knop is, zodat duidelijk wordt wat er gaat gebeuren bij het activeren van den knop. Zie ook succescriterium 1.1.1.

Bevinding 16: Als op pagina 'Werknemersgegevens' een detailpagina van een werknemer wordt geopend (via de --> knop die 'Details' heet in de tabel ), is onder 'Werknemers' een aantal knoppen te vinden. Deze hebben geen naam. Via de knoppen kunnen detailpagina's van andere werknemers worden geopend, maar dit is voor bezoekers die niet kunnen zien niet duidelijk. De naam van de werknemer die hier zichtbaar is, wordt niet voorgelezen als de bezoeker via de tabtoets door de knoppen heen navigeert. Geef de knoppen een beschrijvende naam.

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

• Startpagina:
  https://beherenmijnpersoneel-accp.apps.dezeeuwse.nl/index3.html

Ondersteunende technieken

• HTML5
• 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.