Issues:
Audit digitale toegankelijkheid Easycruit Gemeente Zwolle

(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: Bij de verplichte velden in het formulier bij 'Stap 2: Persoonlijke gegevens' staat een sterretje (asterisk). Hulpsoftware leest dit niet altijd voor. Daarnaast worden er geen instructies geleverd over wat de asterisk betekent, waardoor onder andere bezoekers die het scherm niet kunnen zien niet weten dat dit verplichte velden zijn. Zorg voor een alternatieve tekst, of maak op een andere manier duidelijk welke velden verplicht zijn. Dit probleem doet zich op meerdere pagina's voor.

Bevinding 2: Op pagina 'Stap 2: Persoonlijke gegevens' staan twee iconen, van Dropbox en van Google Drive. Deze iconen hebben geen alternatieve tekst en daardoor ook geen toegankelijke naam (succescriterium 4.1.2). Het title-attribuut geldt niet als alternatieve tekst, omdat dit niet door alle hulpsoftware wordt ondersteund.

Bevinding 3: Advies:
Bij 'Stap 1: Privacybeleid' staan boven aan de pagina twee afbeeldingen die niet worden geladen. Van deze afbeeldingen kan daarom niet worden beoordeeld of zij een goede alternatieve tekst hebben. Beide afbeeldingen hebben de alternatieve tekst 'zwolle'. Houd er rekening mee dat screenreaders deze alternatieve teksten voorlezen.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 4: Bij 'Stap 2: Persoonlijke gegevens' staat een groep keuzerondjes met het label 'Ik wil graag een kopie van mijn sollicitatie ontvangen via e-mail:'. Deze keuzerondjes zijn nu niet gegroepeerd. Gebruik een fieldset en legend combinatie of een andere vergelijkbare techniek om dit probleem op te lossen.

Bevinding 5: Bij 'Stap 3: Diversen' staat een groep keuzerondjes met het label 'Hoe ben je geattendeerd op deze vacature? *'. Deze keuzerondjes zijn nu niet gegroepeerd. Gebruik een fieldset en legend combinatie of een andere vergelijkbare techniek om dit probleem op te lossen.

Bevinding 6: Bij onder andere 'Stap 2: Persoonlijke gegevens' en 'Stap 5: Controleer sollicitatie' staan knoppen met een vraagteken als label op de pagina. Deze knoppen werken niet wanneer gebruikers erop klikken of de knoppen activeren met het toetsenbord, er gebeurt namelijk niks. Gebruikers die het scherm niet (goed) kunnen zien weten niet dat deze knoppen niet werken, wat voor verwarring kan zorgen wanneer zij deze knoppen activeren. Zorg er daarom voor dat de knoppen niet worden voorgelezen door screenreaders of verwijder de knoppen van de pagina. Dit geldt ook voor de knoppen 'Uploaden' bij 'Stap 2: Persoonlijke gegevens'.

Bevinding 7: Bij 'Stap 5: Controleer sollicitatie' is de tekst 'Deze pagina geeft ... sollicitatieproces te voltooien.' opgemaakt in een h4-element. Hierdoor is deze tekst een kop voor de onderstaande content op de pagina en wordt de tekst meegenomen in een koppenlijst. Dit kan verwarrend zijn voor mensen die gebruik maken van screenreader. Zorg ervoor dat kop-elementen alleen gebruikt worden om koppen op te maken.

Bevinding 8: Advies: Op pagina 'Stap 1: Privacybeleid' wordt een tabel gebruikt voor de opmaak van de content. De tekst 'Je reageert op de vacature "Medewerker Klantcontact (KCC)"' staat bijvoorbeeld in een td-element. Het is niet aanbevolen om een tabel te gebruiken voor de opmaak van een pagina. Screenreaders zullen deze pagina mogelijk voorlezen alsof er meerdere (lege) tabellen op staan. Dit kan erg verwarrend zijn voor gebruikers van screenreaders. Gebruik CSS, role='presentation' op het tabel-element of een vergelijkbare techniek om dit probleem op te lossen. Dit probleem doet zich op meerdere pagina's voor.

Bevinding 9: Advies: Bij 'Stap 1: Privacybeleid' is in de hoofdtekst op de pagina gebruik gemaakt van het br-element om witruimte te creëren tussen de alinea's. Voor screenreadergebruikers kan het vervelend zijn wanneer dit element wordt gebruikt voor de opmaak van een pagina. Sommige screenreaders lezen dit element voor als 'leeg' of kondigen het element aan, wat aandacht kan wegnemen van de teksten die worden voorgelezen. Gebruik daarom meerdere paragrafen, CSS of <p> </p> om witruimte te creëren op een pagina.

Bevinding 10: Het is voor ziende bezoekers duidelijk bij welke stap de bezoeker momenteel is, omdat die stap er anders uit ziet. Deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien, bijvoorbeeld voor screenreadergebruikers. Voeg deze informatie toe, bijvoorbeeld met screenreader-only tekst.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 11: Bij 'Stap 2: Persoonlijke gegevens' is bij verschillende invoervelden gebruik gemaakt van het autocomplete-attribuut. Toch zijn er twee velden waar het autocomplete-attribuut de waarde 'off' heeft gekregen, het gaat hier om de velden 'Telefoon' en 'Mobiele telefoon'. Voor velden waarbij de input een telefoonnummer moet zijn is ook een waarde die moet worden ingevuld bij het autocomplete-attribuut. Deze kunnen gevonden worden in het overzicht op www.w3.org/TR/WCAG21/.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 12: Bij 'Stap 1: Privacybeleid' is het contrast van de tekst 'Alle velden met * moeten gevuld worden' (#333333) op de groene achtergrond (#539433) te laag. De contrastverhouding is hier 3,4:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 13: Bij 'Stap 1: Privacybeleid' is het contrast van de witte tekst 'Je reageert op de vacature "Medewerker Klantcontact (KCC)"' op de groene achtergrond (#539433) is te laag. De contrastverhouding is hier 3,7:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 14: Bij 'Stap 2: Persoonlijke gegevens' is het mogelijk om een bestand te uploaden. Wanneer een bestand is geüpload is de bestandsnaam te zien op de plek waar eerste de 'Bestand kiezen' knop stond. De kleur van de bestandsnaam (#84B819) heeft een te laag contrast op de achtergrond (#F7F7F7). De contrastverhouding is hier 2,2:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 15: Bij 'Stap 5: Controleer Sollicitatie' staat een groene tekst (#539433) 'Deze pagina geeft...' op een witte achtergrond. Deze kleurencombinatie heeft een te laag contrast. De contrastverhouding is hier 3,7:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 16: Bij 'Stap 5: Controleer Sollicitatie' is het contrast van de groene koppen (#539433) op de witte achtergrond (#f7f7f7) te laag. De contrastverhouding is hier 3,4:1, waar dit minimaal 4,5:1 moet zijn.

Bevinding 17: Het contrast van de rode asterisken (HEX #FF0000) op de groene achtergrond (HEX #539433) onderaan iedere pagina is te laag. De contrastratio is hier 1,1:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 18: Het contrast van de tekst 'Cookie settings' in de cookiemelding onderaan de pagina is te laag als de tekst focus heeft. De contrastratio van de blauwe tekst (HEX #489ED7) op de witte achtergrond is 2,9:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 19: Het contrast van de witte tekst in de knoppen 'Reject all' en 'Accept all cookies' in de cookiemelding onderaan de pagina is te laag als de knoppen focus hebben. De contrastratio van de witte tekst op de blauwe achtergrond (HEX #489ED7) is 2,9:1, waar dat minimaal 4,5:1 moet zijn. Dit geldt ook voor 'Allow all' en 'Confirm my choices' in het scherm dat bezoekers later kunnen openen om hun cookiesettings te wijzigen.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 20: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verschijnt bij 'Stap 1: Privacybeleid' een scrollbalk in de leesrichting (horizontaal) en is niet meer alle tekst leesbaar zonder te scrollen. Zorg dat teksten en functionaliteiten binnen het beeld blijven.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 21: Advies: In dit sollicitatieformulier is geen stijl gegeven aan de zichtbare focus die op elementen kan worden geplaatst. Hierdoor gebruiken browsers hun eigen standaard stijl voor de focus. Wanneer het formulier in de browser Firefox wordt geopend is het contrast van de standaard focus (#0060df) in deze browser te laag wanneer deze op de blauwe knoppen (#0075be) staat. De contrastverhouding is hier 1,1:1, terwijl dit minimaal 3:1 moet zijn voor niet-tekstuele content. Voor sommige gebruikers is het lastig wanneer zij de focus op de pagina niet kunnen zien en daardoor niet weten op welk element zij staan. De standaard focusstijl van browsers is niet af te keuren volgens de WCAG-eisen, toch raden wij aan om een eigen focusstijl toe te voegen met een voldoende hoge contrastratio om dit probleem op te lossen

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Bevinding 22: On hover verschijnt op de cookie-wijzigen functionaliteit de tekst 'Cookies Settings'. Deze tekst komt deels over de content van de pagina te staan. Over deze tekst moet gehoverd kunnen worden, en de tekst moet verwijderd kunnen worden door de focus te verplaatsen, bijvoorbeeld met Esc.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 23: Op pagina 'Stap 2: Persoonlijke gegevens' kunnen bezoekers een bestand uploaden uit Dropbox of Google Drive. Deze opties zijn wel bereikbaar en bedienbaar voor bezoekers die gebruik maken van een muis, maar niet voor bezoekers die over de pagina navigeren met een toetsenbord.

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 24: Bij 'Stap 1: Privacybeleid' ontbreekt een taalaanduiding van de inhoud van de pagina. Deze moet in de HTML-code worden opgegeven door middel van een lang-attribuut bij het HTML-element. Dit attribuut moet dan de landcode van de taal bevatten.
Geen van de geteste pagina's heeft een lang-attribuut in het HTML-element staan. Zorg ervoor dat dit bij elke pagina wordt aangepast.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 25: Bij 'Stap 1: Privacybeleid' staat een cookiemelding in beeld wanneer gebruikers voor het eerst op deze pagina komen. De cookiemelding is in het Engels en wijkt daarom af van de hoofdtaal van de pagina. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door aan de omliggende HTML-code een lang="en" toe te voegen.

Bevinding 26: De toegankelijke naam van de knop linksonder op de pagina bij 'Stap 1: Privacybeleid' is in een andere taal dan de hoofdtaal van de pagina. De toegankelijk naam van deze knop is namelijk in het Engels terwijl de meeste content op de pagina in het Nederlands is. Zorg ervoor dat de toegankelijke namen van bedienbare elementen in dezelfde taal zijn als de hoofdtaal van de pagina.

Bevinding 27: Bij elke stap van dit sollicitatieformulier staat linksonder een knop met de toegankelijke naam 'Open Preferences'. Als deze knop is geactiveerd verschijnt er een overlay op de pagina waarin uitleg staat over Cookies. De tekst in de overlay is in het Engels terwijl de hoofdtaal van de pagina Nederlands is. Daarom moet in de code een taalwisseling aangegeven worden. Dit kan door aan de omliggende html-code een lang="en" toe te voegen.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 28: Wanneer bezoekers op pagina 'Stap 2: Persoonlijke gegevens' het veld 'E-mail' niet goed invullen, verschijnt bovenaan de pagina de melding '* E-mailadres niet geldig'. Dit is geen voldoende foutidentificatie. Een foutmelding moet beschrijven welke fout is gemaakt en wáár die is gemaakt, bijvoorbeeld 'Het veld 'E-mailadres' is niet goed ingevuld, het ingevulde e-mailadres is niet geldig'.

Bevinding 29: Advies: Wanneer gebruikers in dit sollicitatieformulier verplichte velden leeg laten, krijgen zij geen foutmelding. Zorg dat gebruikers de mogelijkheid krijgen om fouten te verbeteren, zoals het vergeten in te vullen van een verplicht veld. Het geven van foutmeldingen bij het niet invullen van verplichte velden helpt gebruikers met slecht zicht en mensen met cognitieve beperkingen om het formulier goed op te sturen. Voeg daarom foutmeldingen toe die verschijnen wanneer gebruikers verplichte velden niet invullen.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 30: Als een formulier niet verzonden kan worden omdat één of meerdere formuliervelden niet goed ingevuld zijn, moet er een suggestie worden gegeven over hoe de bezoeker het veld wel goed moet invullen. Bij 'Stap 2: Persoonlijke gegevens' verschijnt een foutmelding wanneer gebruikers het veld 'E-mail' verkeerd invoeren. De foutmelding '* E-mailadres niet geldig' geeft niet aan hoe bezoekers de fout kunnen oplossen. Sommige mensen met cognitieve beperkingen hebben baat bij een suggestie voor een oplossing in de foutmelding. Dit helpt hen het formulier correct in te vullen. Voeg daarom een suggestie aan de foutmelding die gebruikers helpt het veld correct in te voeren.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 31: In de code van 'Stap 1: Privacybeleid' staan een aantal losse eindtags. Het gaat hier om een alleenstaande tr-eindtag, een td-eindtag, een table-eindtag en een tbody-eindtag. Webpagina's moeten goed kunnen laden en parsen zodat hulpsoftware de pagina's kan lezen, daarom mogen er geen fouten in de code staan. Verwijder de losse eindtags of voeg begintags toe.

Bevinding 32: In de code van 'Stap 5: Controleer Sollicitatie' komen dubbele id's voor, namelijk id="ec_wrapper_container". Dit kan problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 33: De vraagteken knoppen in het formulier bij 'Stap 2: Persoonlijke gegevens' hebben geen toegankelijke naam. Ook hebben deze knoppen de verkeerde rol, deze is momenteel link maar zou knop moeten zijn. Voor screenreadergebruikers is het belangrijk dat elementen een toegankelijk naam hebben en de juiste rol. Het is voor hen belangrijk om te weten wat een element gaat goed, een actie uitvoeren (knop) of de focus verplaatsen (link), zodat zij weten wat er op het scherm gaat gebeuren. Geef deze knoppen een toegankelijke naam met aria-label of een soortgelijke techniek, en voeg de juiste rol toe door het role-attribuut op de elementen te plaatsen.
Dezelfde knoppen staan ook op de pagina's bij 'Stap 4: Sollicitatie' en 'Stap 5: Controleer sollicitatie'.

Bevinding 34: De toegankelijke naam van de knoppen 'Bestand kiezen' bij 'Stap 2: Persoonlijke Gegevens' geeft niet genoeg informatie aan screenreadergebruikers. Wanneer zij met het toetsenbord naar deze knoppen navigeren horen deze gebruikers alleen 'Bestand kiezen' Dit geeft niet aan welk bestand (Foto of CV) zij moeten uploaden. Pas daarom de toegankelijke naam van deze knoppen aan door gebruik te maken van aria-label of een soortgelijke techniek.
Een knop met de toegankelijke naam 'Bestand kiezen' die niet duidelijk aangeeft welk bestand gebruikers moeten uploaden, staat ook op de pagina van 'Stap 4: Sollicitatie'.

Bevinding 35: De knoppen op pagina 'Stap 2: Persoonlijke gegevens' waarbij bezoekers een bestand kunnen uploaden uit Dropbox of Google Drive, hebben geen toegankelijke naam en rol.

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

• Easyrecruit Sollicitatieproces Gemeente Zwolle:
  https://ons.easycruit.com/intranet/zwolle_internet/vacancy/application/send/2818171/140227?iso=nl

Ondersteunende technieken

• SVG
• WAI-ARIA
• CSS
• HTML5
• ECMAScript 5
• DOM

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.