Issues:
Audit digitale toegankelijkheid Werknemersportaal BMP Goudse

(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: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com bevindt zich naast de algemene navigatiebalk een logo van de Goudse verzekeringen in een div element. 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. Hieraan kan de functie van de knop worden toegevoegd zodat duidelijk is wat er gebeurt als de knop geactiveerd wordt. Er kan voor gekozen worden om de afbeelding in HTML te plaatsen en het middels een alt attribuut van tekst te voorzien.

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: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com volgen meerdere kop-elementen (H) elkaar op, wat niet is toegestaan. Koppen zijn bedoeld als beschrijving/benaming van onderliggende content. Gebruikers van hulpsoftware vragen de koppenstructuur op, om efficient door pagina's te navigeren. In het onderdeel "Organisatieprofiel" is bijvoorbeeld de voorgenoemde tekst een kopniveau H1. Dit wordt opgevolgd door drie individuele H2 koppen, te weten "The Phone House Epe B.V.", "." en "8021636". Maak de laatstgenoemden anders op, plaats ze allen in een enkele kop of maak gebruik van opties die CSS biedt voor styling. Problemen met de koppenstructuur doen zich op meerdere pagina's voor, advies is om een goede structuur te hanteren, die begint bij een kopniveau H1 voor de belangrijkste kop (titel van de pagina), kopniveau H2 voor de koppen, kopniveau H3 voor de tussenkoppen, etc.

Bevinding 4: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in het onderdeel "Organisatieprofiel" het formulierproces "Koppeling salarispakket via VCSW". Onder de visuele kop "Welk salarispakket gebruikt u?" staan een viertal checkboxes met visuele labels. De labels zijn niet als zodanig aan de checkboxes gekoppeld in HTML. Zorg dat for= en id= attributen op de corresponderende paren gebruikt wordt, zodat schermleessoftware de invoermogelijkheden correct aan haar gebruikers kan weerleggen. Dit probleem doet zich op meerdere plekken voor.

Bevinding 5: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in het onderdeel "Organisatieprofiel" het formulierproces "Koppeling salarispakket via VCSW". In de tweede stap van het proces staan een reeks checkboxes en radiobuttons. Voeg hier een fieldset & legend combinatie toe zodat hulpsoftware het label en de individuele opties goed kan groeperen.

Bevinding 6: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in het onderdeel "Organisatieprofiel" het formulierproces "Koppeling salarispakket via VCSW". Er is een statusbalk aanwezig dat visueel aangeeft in welke stap de bezoeker zich op dat moment bevindt, door die stap donkerder aan te geven dan anderen. Zorg dat dit ook voor blinde bezoekers duidelijk is, bijvoorbeeld door een aria-live region aan de onderdelen toe te voegen.

Bevinding 7: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in het onderdeel 'Organisatieprofiel' tekst dat 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'.

Bevinding 8: Advies: 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. 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.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 9: Indien men door de omgeving op beheren-mijn-perso100-accp.mendixcloud.com navigeert op een schermstand van 1080x1024px, ontstaan vanaf 125% problemen met de leesbaarheid van content. Platte tekst, buttons en links staan over elkaar heen, bijvoorbeeld de visuele pagina titel en de buttons "koppel mijn salarispakket" tot "Toevoegen werknemer" in het onderdeel "Werknemersgevevens". Zorg dat tekst goed leesbaar blijft bij herschaling. Zie tevens SC 1.4.10.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 10: Indien men door de omgeving op beheren-mijn-perso100-accp.mendixcloud.com navigeert op een schermstand van 1080x1024px en zoom, ontstaan meerdere reflowproblemen. Bijvoorbeeld op een schaal van 200% op de pagina "Ziekmeldingen", waar de algemene navigatiebalk geheel uit beeld verdwijnt en waarvan de knop "Download werknemer overzicht" slechts nog een deel van de omranding zichtbaar is. Zorg voor een goede reflow op de pagina's zodat alles goed leesbaar blijft. Zie tevens SC 1.4.4.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 11: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in de navigatiebalk een het profiel van de gebruiker. Dit element kan niet bereikt worden met het toetsenbord. Zorg dat dit ook focusbaar wordt, zodat toetsenbordgebruikers dit kunnen uitvouwen en de uitlogfunctie kunnen bedienen.

Bevinding 12: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in het onderdeel "Werknemersgegevens" een blauwe tooltip met de tekst "Als u een jaar selecteert, ziet u een overzicht van werknemers die in dat premievaststellingsjaar in dienst waren". De tooltip heeft geen toetsenbordfocus waardoor het voor toetsenbordgebruikers niet bereikbaar is. Hierdoor ontbreekt voor hun informatie. Zorg dat de tooltip ook de focus ontvangt en correct met het toetsenbord in- en uitklapbaar is. Dergelijke tooltips zonder focus worden op meer plaatsen gebruikt, bijvoorbeeld binnen het onderdeel "Verzekering(en)".

Bevinding 13: Indien men de omgeving op beheren-mijn-perso100-accp.mendixcloud.com in een kleiner schermformaat bezoekt of met zoom bekijkt, ontstaat een verticale scrolbalk. Het is echter niet met het toetsenbord mogelijk om in die situaties de onderkant van de pagina te bereiken. Dit kan een probleem vormen voor de functionaliteit van de website, bijvoorbeeld in het onderdeel "Verzekering(en)". Zorg dat de scrollbare regions (in dit onderdeel betreft het het div element met class="mx-name-container6 col-content") ook middels het toetsenbord te navigeren zijn.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Bevinding 14: Advies: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com kan men binnen het onderdeel "Werknemersgegevens" een personeelslid selecteren om op zijn/haar persoonlijke pagina te komen. Indien men in een dergelijk onderdeel op de spatiebalk drukt, wordt de beginpagina geladen. Daar dit geen letter, leesteken, cijfer of symbool betreft is het onder dit criteria niet afkeurbaar. Het is echter sterk aan te raden om ervoor te zorgen dat de huidige pagina geladen blijft bij gebruik van de spatietoets.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 15: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Bezoekers die de website met toetsenbord bedienen en/of hulpsoftware moeten op elke pagina langs dezelfde onderdelen gaan voordat ze bij de inhoud van de pagina zijn. Dit kan je oplossen door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 16: Indien men binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com middels het toetsenbord door het navigatiemenu navigeert, komt de focus op drie lege (visueel onzichtbare) tabs doordat er op de betreffende div elementen data-focusindex="0" is geplaatst. Dit is problematisch voor toetsenbordgebruikers die niet weten waar de focus op dat moment op staat. Laat deze elementen weg uit de focus volgorde door ze goed te verbergen of te verwijderen.

Bevinding 17: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com in het onderdeel "Werknemersgegevens" krijgen interactieve elementen in de gegevenstabel tweemaal de focus indien toetsenbordgebruikers middels de tabtoets achteruit navigeren. Door role=button te gebruiken zijn de elementen al inherent focusbaar, in samenhang met het gebruik van tabindex op de cellen veroorzaakt deze gedupliceerde handeling. Zorg ervoor dat interactieve elementen op de correcte wijze focus ontvangen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 18: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com ontvangen diverse functionaliteiten toetsenbordfocus, echter is dit niet of niet goed zichtbaar. Zo is het onder andere niet duidelijke wanneer de focus staat op de algemene menu items ("Werknemergegevens" tot "Organisatieprofiel"). In het onderdeel "Werknemergegevens" staan een reeks knoppen zoals "Toevoegen werknemer", waarbij het contrast enigszins wijzigt. Zorg in alle gevallen voor een goede focusrand om de visuele link of knop heen, ten behoeve van het oriëntatie vermogen van toetsenbordgebruikers.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 19: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com is de taalinstelling Nederlands (lang="nl-NL"). Er wordt op diverse plaatsen gebruik gemaakt van paginering in het Nederlands, zoals in het onderdeel "Contactpersonen beheren" onder "Openstaande verzoeken". Elders hebben de visueel identieke pagineringselementen echter Engelse teksten, bijvoorbeeld in het onderdeel "Ziekmeldingen". Zorg dat overal dezelfde taal gehanteerd wordt als de website inhoud.

Bevinding 20: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat op meerdere plekken content in visuele tabellen, bijvoorbeeld in het onderdeel "Werknemersgegevens". Bij "Naam" staat hier een sorteerknop met de alternatieve tekst "sort Naam". Zorg dat al het woordgebruik in het alt attribuut Nederlands is, zodat schermleessoftware het correct voorleest.

3.2 Voorspelbaar

3.2.4 Consistente identificatie (Niveau AA)

Informatie over succescriterium 3.2.4 Consistente identificatie

Bevinding 21: 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 22: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in het onderdeel "Werknemersgegevens" 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 23: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com staat in het onderdeel "Werknemersgegevens" de knop "Ziek melden" dat een formulier in een dialoogvenster opent. Hier zijn alle velden verplicht, en worden de foutmeldingen getrapt getoond. Zorg dat er een instructie in het formulier staat dat alle velden verplicht zijn.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 24: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com bevindt zich naast de algemene navigatiebalk een logo van de Goudse verzekeringen in een div element. Dit is tevens een knop dat de bezoeker terugbrengt naar het onderdeel "Werknemersgegevens" indien men in een andere zit. De knop is niet van een toegankelijke naam voorzien, waardoor gebruikers van schermleessoftware niet weten wat de button doet. Voorzie de button van een toegankelijke naam. Zie tevens SC 1.1.1 over het logo.

Bevinding 25: Binnen de omgeving op beheren-mijn-perso100-accp.mendixcloud.com bevindt zich in het onderdeel "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://beheren-mijn-perso100-accp.mendixcloud.com

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.