Rapport in PDF

Onderzoek toegankelijkheid website Werken bij Gemeente Groningen

Inleiding

Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?

Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.

Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, worden hiervan een of meer voorbeelden gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten structureel worden aangepakt.

De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).

Over deze evaluatie

Rapport auteur
Janita Top
Evaluatie opdrachtgever
Gemeente Groningen
Evaluatiedatum
3 juli 2023

Managementsamenvatting

Uit dit onderzoek blijkt dat wordt voldaan aan 33 van de 50 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

Positief is bijvoorbeeld dat de website goed werkt op mobiel, dat er geen afbeeldingen van tekst worden gebruikt en dat blokken met herhalende links bovenaan de pagina’s omzeild kunnen worden.

Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:

  • Onjuiste en overbodige alt-teksten bij afbeeldingen
  • Invoervelden zonder labels of met incorrect label
  • Onjuist opgemaakte koppen
  • Links zonder tekst

Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er bevindingen bij 1 succescriterium.

Scope van de evaluatie

Website naam
Werken bij Gemeente Groningen website
Scope van de website
Alle pagina's op https://werkenbijgemeentegroningen.acceptance.nowonline.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 50 van 50 WCAG 2.1 AA Success Criteria.

Gerapporteerd over 6 van 6 WCAG 2.2 AA Success Criteria.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

vacatures

Uitkomst: Onvoldoende

vacature coach werk & participatie

Uitkomst: Onvoldoende

vakgebied IT & Data

Uitkomst: Onvoldoende

over ons

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

homepage

Bovenaan de pagina staat een foto van mensen in een overleg. Deze heeft als alt-tekst ‘home’. Dat is geen goede beschrijving. Beschrijf wat er op de foto te zien is of laat de alt-tekst leeg wanneer de foto decoratief is. Dit komt op meerdere pagina’s voor met een headerafbeelding, zoals bijvoorbeeld bij de vacature van coach.

Onder de video staan cijfers met daarvoor iconen. Deze iconen lijken decoratief, maar hebben aria-labels zoals ‘ Ambitieuze collega's’ bij een icoon met een persoon en een boom. Dit is niet correct en voegt ook weinig toe. Beter is het om iconen als deze te verbergen voor hulpsoftware. Dit kan bijvoorbeeld door de svg op aria-hidden te zetten. Deze iconen staan ook op de pagina Over ons.

Bij de vakgebieden staan afbeeldingen met als alt-tekst de naam van het vakgebied. Wanneer deze afbeeldingen decoratief zijn, kan de alt-tekst beter leeg worden gelaten. De linkteksten bevatten hierdoor nu veel overbodige informatie, bijvoorbeeld de eerste link luidt ‘IT & Data IT & Data Meer informatie over IT & Data’. Deze bevinding geldt ook voor de afbeeldingen bij de uitgelichte vacatures. Dit komt op veel pagina’s voor. Zie screenshot 7.

Onderaan de pagina staat een foto van de Martinitoren en het Forum. Deze heeft als beschrijving ‘Blijf op de hoogte van nieuwe vacatures’. Geef een correcte beschrijving of laat de alt-tekst hier leeg.

vacatures

Bij de vacatures staan afbeeldingen met als beschrijving een herhaling van de vacaturetitel plus ‘image’. Dit voegt niks toe. Geef een goede beschrijving of laat de alt-teksten leeg.

vacature coach werk & participatie

Er staat een blokje met link naar het vakgebied. Hierbij staat een foto met als beschrijving ‘Maatschappelijk & Sociaal’. Dit voegt niks toe. Geef een goede beschrijving of laat de alt-tekst leeg.

Onder ‘Vragen over deze vacature?’ staat een foto van een medewerker met als beschrijving ‘contact us’. Geef in de alt-tekst aan welke medewerker op deze foto te zien is.

vakgebied IT & Data

De afbeeldingen bij de voorbeeldprojecten hebben als alt-tekst de titel van het project, en niet wat er op de foto te zien is. Dit komt op meerdere pagina’s voor.

over ons

Onder ‘Een impressie van werken bij Groningen’ staan afbeeldingen met een lege alt-tekst. Deze foto’s zijn echter de content van een link. Voeg een beschrijvende alt-tekst toe. Zie ook 2.4.4.

contact

Bij de recruiters staan afbeeldingen van een envelop, telefoon en whatsapp. Deze afbeeldingen hebben een lege alt-tekst, maar geven wel informatie. Voeg hiervoor alt-teksten toe.

Onder 'Onze locaties' staat een kaart met daarin alle adressen. Er is hiervoor geen alternatieve tekst aanwezig voor wie de kaart niet kan zien. Zet bijvoorbeeld onder de kaart een lijst met adressen, of bied bij de kaart een link naar een pagina met in tekst alle adressen.

1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

Hele sample

Bevindingen:

(video niet beschikbaar)

1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

Hele sample

Bevindingen:

(video niet beschikbaar)

1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample

Uitkomst: Niet van toepassing

1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing

1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

vacatures

Uitkomst: Onvoldoende

vacature coach werk & participatie

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

vakgebieden

Uitkomst: Onvoldoende

verhalen

Uitkomst: Onvoldoende

verhaal van Oelviya

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

homepage

De koppenstructuur is niet helemaal correct. Zo zijn er de koppen ‘235.000+’, ‘5.500’ en ‘2’. Na deze koppen volgen paragrafen met 1 woord er in. Het is logischer om hier 3 paragrafen van te maken (dus geen kopopmaak), of 3 lijst items met daarboven een kop die aangeeft dat er statistieken worden gegeven. Anders vallen deze paragrafen onder de kop ‘Hier begint het’.

Onderaan de pagina staat ‘Contact’ als kopje met niveau 3. Hierdoor valt deze content onder de h2-kop ‘Blijf op de hoogte van nieuwe vacatures’. Op andere pagina’s kunnen dit weer andere h2-koppen zijn. Maak van ‘Contact’ daarom een kop op hoger niveau, zodat het niet onder andere content valt, maar op zichzelf staat.

Het tekst-invoerveld om een vacature te zoeken heeft geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar. Voeg een label-element of aria-label toe met bijvoorbeeld ‘zoekwoord’. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan. Omdat er geen rand omheen staat (het ziet er niet uit als een invoerveld), is het hier ook niet meteen duidelijk dat hier een tekst ingevoerd kan worden.

vacatures

Het tekst invoerveld om een vacature te zoeken heeft geen label.

vacature coach werk & participatie

De vacaturetekst bevat visueel veel tussenkopjes, zoals ‘Hier werk je aan mee’. Deze kopjes zijn in de code niet als kop opgemaakt, maar als strong-element. Screenreadergebruikers navigeren vaak via koppen, maar nu komen deze koppen niet in hun overzicht voor. Maak van deze tussenkopjes bijvoorbeeld h2- en h3-elementen.

solliciteer direct op coach werk & participatie

Onder de vraag ‘Waar ben jij nu werkzaam?’ worden de labels van alle checkboxes naar hetzelfde id verwezen. Hierdoor wordt door de screenreader bij elke checkbox ‘Als medewerker met een arbeidsovereenkomst bij de gemeente Groningen’ voorgelezen. Zorg dat elk label naar een eigen, uniek id verwijst van de checkbox. Zie ook 4.1.1.

vakgebieden

De koppenstructuur is niet helemaal correct. Er staat een h2-kop ‘Projecten waar we trots op zijn’ met daarna h2-koppen van de projecten. Deze horen dan op een niveau lager te staan.

In het hoofdmenu staat het attribuut ‘area-current’ om aan te geven welke link in het menu actief is. Dit is echter geen geldig attribuut, dit moet ‘aria-current’ zijn.

verhalen

In de paginatie is via de layout te zien op welke pagina je je bevindt, en wat de links zijn naar de andere pagina’s. Dit is voor hulpapparatuur niet af te leiden uit de code. Dit is eenvoudig op te lossen door aria-current=“page” toe te voegen aan het list item met class=“active”.

verhaal van Oelviya

Bovenaan de pagina staat een quote. Deze is opgemaakt als h3-kop, maar dit is geen kop. Hier kan beter een blockquote element voor gebruikt worden.

contact

Boven de slider staan buttons met als naam ‘previous’ en ‘next’. Deze buttons hebben als attribuut role=”presentation”. Hiermee worden eigenschappen verborgen voor hulpsoftware. NVDA (screenreader op Windows) leest de buttons nu niet voor. Haal deze rol weg op elementen die focus krijgen en dus wel beschikbaar moeten zijn.

1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Voldoende

1.3.3: Zintuiglijke eigenschappen
Hele sample

Uitkomst: Voldoende

1.3.4: Weergavestand
Hele sample

Uitkomst: Voldoende

1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

vacature alert

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.

vacature alert

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld.

1.4 Onderscheidbaar
Success Criterium Uitkomst Bevindingen
1.4.1: Gebruik van kleur
Hele sample

Uitkomst: Voldoende

1.4.2: Geluidsbediening
Hele sample

Uitkomst: Niet van toepassing

1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Onvoldoende

vacatures

Uitkomst: Onvoldoende

vacature coach werk & participatie

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

verhalen

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Een aantal elementen op de website zitten qua contrast onder deze waarden.

vacatures

De placeholder tekst in het zoekveld (3.7:1 vanwege opacity van 0.56)

vacature coach werk & participatie

De grijze links in de breadcrumb (2.82:1)

solliciteer direct op coach werk & participatie

De bijlageknop in de hover state (3.3:1). Zie screenshot 9.

verhalen

De tekst van de links naar de verhalen (wit op transparant rood, 3.4:1). Zie screenshot 3.

1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Voldoende

1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Voldoende

1.4.10: Reflow
Hele sample

Uitkomst: Voldoende

solliciteer direct op coach werk & participatie

Uitkomst: Niet getoetst

solliciteer direct op coach werk & participatie

Opmerking: wanneer je bent ingezoomd op 300% of 400% is er nog erg weinig content zichtbaar door zowel een sticky header als een sticky footer. Zie screenshot 5. Overweeg aanpassingen in het design om het voor slechtzienden beter bruikbaar te maken.

1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

vacatures

Uitkomst: Onvoldoende

vacature coach werk & participatie

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Een aantal elementen op de website zitten qua contrast onder deze waarden.

vacatures

De randen van de invoervelden bij de filters (1.7:1)

vacature coach werk & participatie

De twitter-link (2.5:1) en de whatsapp-link (2:1) om te delen De whatsapp-link om contact op te nemen met de recruiter (2:1) (NB: op de contactpagina worden ook whatsapp-iconen gebruikt, welke wel voldoen, deze hebben een contrast van 7.6:1.)

solliciteer direct op coach werk & participatie

De randen van de invoervelden (1.7:1).

1.4.12: Tekstafstand
Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

contact

Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is niet alle tekst meer goed leesbaar. E-mailadressen worden voor een deel afgesneden. Zie screenshot 6. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html

1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het submenu bij Over ons dat bij hover verschijnt, kan alleen worden gesloten door de muis te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

homepage

Je kunt met het toetsenbord bij de links in de slider met verhalen, maar op focus zijn de teksten niet meer leesbaar. Er komt een soort filter overheen te liggen. Zie screenshot 2.

solliciteer direct op coach werk & participatie

De visuele CAPTCHA is niet met het toetsenbord te bedienen.(De audio CAPTCHA wel, maar voor bezoekers die deze niet kunnen horen en geen muis kunnen gebruiken, is er nu geen alternatief.)

2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Voldoende

2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Niet van toepassing

2.2 Genoeg tijd
Success Criterium Uitkomst Bevindingen
2.2.1: Timing aanpasbaar
Hele sample

Uitkomst: Niet van toepassing

2.2.2: Pauzeren, stoppen, verbergen
Hele sample

Uitkomst: Niet van toepassing

2.3 Toevallen en fysieke reacties
Success Criterium Uitkomst Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample

Uitkomst: Voldoende

2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.1: Blokken omzeilen
Hele sample

Uitkomst: Voldoende

2.4.2: Paginatitel
Hele sample

Uitkomst: Onvoldoende

vakgebied IT & Data

Uitkomst: Onvoldoende

vakgebied IT & Data

De pagina heeft als titel ‘Vakgebieden’, net als de overzichtpagina met alle vakgebieden. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Nu is het niet duidelijk dat er een aparte themapagina is geopend.

2.4.3: Focus volgorde
Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je het (mobiele) menu opent, gaat de focus niet naar het eerste (bovenste) item, maar naar de onderste items (open sollicitatie en vacature-alert). Daarna springt de focus weer omhoog in het menu. Dit is verwarrend voor ziende toetsenbordgebruikers. Zorg dat de visuele volgorde en de focusvolgorde overeenkomen.

2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

vacature coach werk & participatie

Uitkomst: Niet getoetst

over ons

Uitkomst: Onvoldoende

verhalen

Uitkomst: Niet getoetst

homepage

Onder Verhalen staat een slider met links naar verhalen. Deze links hebben allemaal dezelfde linktekst, namelijk ‘Meer informatie over Verhalen’. Hierdoor is het doel van deze links niet duidelijk. Wanneer het aria-label op deze links wordt weggehaald, zijn de linkteksten wel uniek. Zie screenshot 7.

vacature coach werk & participatie

Opmerking: onder ‘Neem contact op met Sanne Tuitman’ staan de links in het Engels, zoals ‘ send mail us’. Dit is mogelijk niet voor iedereen duidelijk. Dit geldt ook voor de links naar social media aan de rechterkant van de pagina.

over ons

Onder ‘Een impressie van werken bij Groningen’ staan links met afbeeldingen zonder tekst. Doordat deze afbeeldingen geen alt-tekst hebben, is de link leeg. Zie ook 1.1.1

verhalen

Opmerking: in de links naar de verhalen staat een aria-label met ‘Lees verder button’. Dit is verwarrend, want het is geen button maar een link. Dat dit een link is wordt ook al voorgelezen door screenreaders. De link luidt nu: ‘Link Tobias Tobias Senior Klantadviseur Werk en inkomen Lees verder button’. Het is beter om dit aria-label te verwijderen. Ook het aria-label op de svg ‘Meer informatie Arrow’ kan beter worden weggelaten.

2.4.5: Meerdere manieren
Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Voor pagina’s anders dan vacatures (bijvoorbeeld arbeidsvoorwaarden) zijn er geen andere manieren om deze te vinden dan via het hoofdmenu. Een deel van de bezoekers kan gemakkelijker navigeren via een (algemene) zoekfunctie of een sitemap dan via een menu, bijvoorbeeld  omdat het lastig is deze ingezoomd of via een screenreader te gebruiken. Bied naast het hoofdmenu nog een tweede optie aan, bijvoorbeeld een algemene zoekfunctie.

2.4.6: Koppen en labels
Hele sample

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

contact

De labels bij de buttons in de slider staan in het Engels (‘next’ en ‘previous’). Dit is mogelijk niet voor alle bezoekers duidelijk. Geef buttons en links op Nederlandse pagina’s Nederlandse namen. Dit komt op meerdere plekken in de website voor.

2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Onvoldoende

over ons

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De focus op de menuknop (beschikbaar vanaf 150% ingezoomd) is niet zichtbaar. Hierdoor is het niet duidelijk dat het menu met het toetsenbord geopend kan worden. Voeg hiervoor bijvoorbeeld een outline toe.

over ons

Onder ‘Een impressie van werken bij Groningen’ staan links van foto’s. De focus op deze links is niet zichtbaar. Voeg hiervoor bijvoorbeeld een outline toe.

2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.1: Aanwijzergebaren
Hele sample

Uitkomst: Niet van toepassing

2.5.2: Aanwijzerannulering
Hele sample

Uitkomst: Voldoende

2.5.3: Label in naam
Hele sample

Uitkomst: Voldoende

2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet van toepassing

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina
Hele sample

Uitkomst: Voldoende

3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Niet van toepassing

3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Voldoende

3.2.2: Bij input
Hele sample

Uitkomst: Voldoende

3.2.3: Consistente navigatie
Hele sample

Uitkomst: Voldoende

3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende

3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Voldoende

3.3.2: Labels of instructies
Hele sample

Uitkomst: Voldoende

solliciteer direct op coach werk & participatie

Uitkomst: Niet getoetst

solliciteer direct op coach werk & participatie

Opmerking: Bij het veld ‘Waar ben jij nu werkzaam?’ staat geen sterretje, maar na verzenden komt er wel een foutmelding dat dit verplicht is. Geef dit bij voorkeur van tevoren aan.

3.3.3: Foutsuggestie
Hele sample

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

vacature alert

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Bij de velden voor CV en Motivatiebrief staat een onduidelijke melding. Is dit een fout of niet?

De melding: “Bestand bijlagetest.pdf Label voor [Tekst succesvol toegevoegd] niet aanwezig. Je kunt het bovenstaande bestand eenvoudig vervangen door hierboven een nieuw bestand toe te voegen. Toch het bestand verwijderen? Klik hier Label voor [Tekst bestand verwijderen stuk 2] niet aanwezig.pdf, .doc of .docx. Max. bestandsgrootte 2,5 MB.”

Na invullen van het verplichte veld en verzenden komt er een 404 pagina. Dit gebeurt ook als ik de bijlagen opnieuw toevoeg. Het lukt niet om het formulier in te zenden.

vacature alert

Wanneer er geen vakgebied is gekozen (er staat geen sterretje bij) komt er de volgende foutmelding:

“Er zijn een aantal velden niet correct ingevuld. Corrigeer onderstaande velden en probeer het opnieuw: Label voor [onbekende fout] niet aanwezig”

Het is niet duidelijk hoe dit op te lossen. Ook als ik een vakgebied selecteer blijf ik deze foutmelding krijgen. Het lukt niet om het formulier in te zenden.

3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet van toepassing

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

solliciteer direct op coach werk & participatie

Het id ‘ QuestionId271732’ wordt voor meerdere checkboxes gebruikt. Hierdoor kan hulpsoftware dit niet goed interpreteren. Zorg ervoor dat elk id maar een keer gebruikt wordt op de pagina.

4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

vacature coach werk & participatie

Uitkomst: Niet getoetst

over ons

Uitkomst: Onvoldoende

contact

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

In het hoofdmenu staat na ‘Over ons’ een knop om het submenu te openen. Deze knop heeft als naam ‘dropdown image’. Dit is geen passende beschrijving. Maak hiervan bijvoorbeeld ‘submenu’.

vacature coach werk & participatie

Opmerking: de ‘like button’ (welke opgemaakt is als link) doet nu nog niks, maar let er op dat wanneer deze actief wordt, deze status niet alleen visueel maar ook in tekst aan hulpsoftware wordt doorgegeven. Hetzelfde geldt voor eventuele statusberichten (4.1.3) die worden getoond na het liken.

over ons

Boven de slider met de foto’s staan buttons in de vorm van een cirkel. Twee hiervan hebben de naam ‘slide to other’, één ervan heeft geen naam. Buttons moeten altijd aangeven aan hulpsoftware wat de functie is. Zie screenshot 8.

In de slider staan links met afbeeldingen zonder naam. Doordat deze afbeeldingen geen alt-tekst hebben, is de link leeg. Zie ook 1.1.1

contact

Onder 'Onze locaties' staat een kaart met daarop de locaties aangegeven met buttons. Deze buttons hebben geen correcte naam voor hulpsoftware. Zie screenshot 1. Zorg voor een toegankelijke kaart of geef een alternatief in de vorm van een lijst met locaties bij de kaart.

4.1.3: Statusberichten
Hele sample

Uitkomst: Niet van toepassing

WCAG 2.2 (extra)

2 Bedienbaar

2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.11: Focus Not Obscured (Minimum) (AA)
Hele sample

Uitkomst: Onvoldoende

Solliciteer direct op coach werk & participatie

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Solliciteer direct op coach werk & participatie

Wanneer je met het toetsenbord direct naar de inhoud gaat, is vanwege de sticky header (vanaf 150% ingezoomd) de focus op de breadcrumb links niet zichtbaar. Dit kan worden opgelost door een margin in de CSS toe te voegen zodat de items bij focus wel getoond worden. Zie ook https://www.w3.org/WAI/WCAG22/Techniques/css/C43

Contact

Wanneer je bent ingezoomd vanaf 150%, is er een contactblok zichtbaar in het midden. Wanneer je vanaf de pijlknoppen daarheen gaat, gaat de focus vaak naar links binnen blokken die buiten beeld staan. Soms zie je dan nog een klein deel van een focusrand (maar niet de tekst), en soms zie je de link in het geheel niet. Dit maakt het erg lastig om met het toetsenbord naar de gewenste links per recruiter te gaan. Zorg dat de links in focus altijd ook in het zichtbare (midden)gedeelte staan. Zie screenshot 4.

2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.7: Dragging Movements (AA)
Hele sample

Uitkomst: Niet van toepassing

2.5.8: Target Size (Minimum) (AA)
Hele sample

Uitkomst: Voldoende

3 Begrijpelijk

3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.6: Consistent Help (A)
Hele sample

Uitkomst: Voldoende

3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.7: Redundant Entry (A)
Hele sample

Uitkomst: Niet van toepassing

3.3.8: Accessible Authentication (Minimum) (AA)
Hele sample

Uitkomst: Niet van toepassing

Sample met getoetste webpagina's

  1. homepage - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/
  2. vacatures - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/vacatures
  3. vacature coach werk & participatie - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/vacatures/coach-werk--participatie-test-281012
  4. solliciteer direct op coach werk & participatie - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/vacatures/coach-werk--participatie-test-281012/solliciteren
  5. vacature alert - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/vacature-alert
  6. vakgebieden - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/vakgebieden
  7. vakgebied IT & Data - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/vakgebieden/it--data
  8. over ons - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/over-ons
  9. arbeidsvoorwaarden - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/over-ons/arbeidsvoorwaarden
  10. verhalen - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/verhalen
  11. verhaal van Oelviya - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/verhalen/3047-oelviya
  12. contact - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/contact
  13. vacatures zoeken - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/vacatures?zoekterm=test&Vakgebied=
  14. random pagina 1: young professionals - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/over-ons/word-jij-onze-nieuwe-young-professional
  15. random pagina 2: verhaal van Sil - https://werkenbijgemeentegroningen.acceptance.nowonline.nl/verhalen/3049-sil

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek:

Screenshots

kaart met pointers
Figuur 1: de knoppen met locaties hebben geen toegankelijke naam
vervaagde teksten
Figuur 2: wanneer de focus op de links komt, wordt de tekst onleesbaar
tekstoverlay boven de foto met naam en functie
Figuur 3: het contrast van de tekst is te laag
klein deel van focusrand net binnen beeld
Figuur 4: de focus op links van recruiters valt deels of geheel buiten beeld
sticky header en footer
Figuur 5: door de sticky header en footer is er maar weinig content zichtbaar
afgebroken emailadressen in contactblokken
Figuur 6: bij het aanpassen van tekstafstanden worden de e-mailadressen afgebroken
linklijst van VoiceOver
Figuur 7: de links bevatten veel overbodige herhalende teksten; de link 'Meer informatie over verhalen' komt meerdere keren voor op de pagina
webinspector bij button
Figuur 8: een button zonder naam voor hulpsoftware
hover state van bijlage knop
Figuur 9: in de hover state is het contrast van blauw/wit te laag