Rapport in PDF

Onderzoek toegankelijkheid werkenbijgroningen.nl versie 1.1

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, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom 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
30 juli 2024

Managementsamenvatting

Dit onderzoek is een hertoetsing van het onderzoek van 3 juli 2023. Uit dit onderzoek blijkt dat wordt voldaan aan 43 van de 55 criteria voor toegankelijkheid (38 van de 50 verplichte criteria). 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:

  • Overbodige alt-teksten bij afbeeldingen
  • Onjuist opgemaakte koppen
  • Knoppen zonder tekst

Naast de verplichte WCAG 2.1 criteria zijn ook de nieuwe WCAG 2.2 criteria op niveau A en AA onderzocht. Hierbij waren er geen bevindingen.

Scope van de evaluatie

Website naam
werkenbijgroningen.nl
Scope van de website
Alle pagina's op https://werkenbijgroningen.nl.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 55 van 55 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

contact

Uitkomst: Onvoldoende
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. Hertoetsing: er zijn beschrijvende alt-teksten toegevoegd, maar de afbeeldingen worden verborgen voor screenreaders d.m.v aria-hidden=”true”. Ook kan het woord ‘icoon’ in de alt-tekst weggelaten worden, want dit voegt niks toe. NB: Er staan ook alt-teksten op de e-mailadressen. Het alt-attribuut is niet bedoeld voor het link element. Het title-attribuut wordt slecht ondersteund door hulpsoftware. Een screenreadergebruiker krijgt deze tekst niet te horen.
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: Voldoende
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende
homepage

De promotievideo bevat veel verschillende beelden van
(werk)omgevingen. Voor bezoekers die de video niet kunnen zien, is er geen beschrijving. Er wordt bijvoorbeeld verteld: ‘Hier krijgt Groningen z’n ware gezicht. We doen veel en we zijn overal. Misschien wel meer dan je beseft. Hier… hier.. ook hier… zelf hier. Functies zijn veelzijdiger dan waar dan ook’. Het is niet duidelijk wat deze plekken zijn. Voeg in het transcript een bechrijving toe van de beelden, zodat het verhaal ook voor blinden en slechtzienden duidelijk is.
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

vacature (vervangende pagina)

Uitkomst: Onvoldoende

over ons

Uitkomst: Onvoldoende

contact-locaties (toegevoegde pagina)

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Hertoetsing: Het tekst-invoerveld om te zoeken in de header 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’.

vacature (vervangende pagina)

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.

over ons

Boven de slider staan buttons met als naam ‘vorige’ en ‘volgende’. 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.

contact-locaties (toegevoegde pagina)

De locaties zijn opgemaakt met het strong-element waardoor deze nu niet als kopjes te herkennen zijn voor screenreadergebruikers. Maak hier
(h2) kopelementen van.
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 vacature (vervangende pagina)

Uitkomst: Onvoldoende

vacature alert

Uitkomst: Onvoldoende
solliciteer direct op vacature (vervangende pagina)

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: Voldoende
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 vacature (vervangende pagina)

Uitkomst: Voldoende
solliciteer direct op vacature (vervangende pagina)

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

Hertoetsing:

  • In menu wordt de focus aangegeven met een lichtblauwe rand. Deze heeft een contrast van 1.4:1 met de achtergrond.
  • De schuifregelaars in de privacyinstellingen
    (1.7:1 en actief 2.1:1).
1.4.12: Tekstafstand
Hele sample

Uitkomst: Voldoende
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

vacature (vervangende pagina)

Uitkomst: Onvoldoende

solliciteer direct op vacature (vervangende pagina)

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. Hertoetsing: de focus komt nu niet meer op de links met ‘lees het verhaal van…’. Hierdoor is het niet meer mogelijk om het met toetsenbord deze links te activeren.

vacature (vervangende pagina)

Hertoetsing: onderaan de vacaturetekst staat een printknop. Deze is niet met het toetsenbord te bedienen. Ook de link ‘Terug naar alle vacatures’ daar direct onder is niet bereikbaar met het toetsenbord. De focus gaat na de downloadknop naar de social media knoppen, en daarna naar de verhalen.

solliciteer direct op vacature (vervangende pagina)

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: Onvoldoende

homepage

Uitkomst: Onvoldoende
homepage

Op deze pagina wordt gebruik gemaakt van een videospeler. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken. Bij deze Vimeo-videospeler kan dit opgelost worden door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. De bediening met deze toetsen wordt dan uitgeschakeld, maar het is dan nog wel mogelijk om de video te bedienen met het toetsenbord. Zie ook de Engelstalige pagina https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters.
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: Voldoende
2.4.3: Focus volgorde
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Hertoetsing: Na het activeren van een tab binnen de popup met privacyinstellingen gaat de focus niet meteen in het tabpanel, maar eerst naar de andere tabs. Het voorgeschreven gedrag bij tabs is dat de focus via de tabtoets meteen in het actieve panel komt en dat je met de pijltjestoetsen tussen de tabs kunt navigeren. Zorg dat de code voor tabs is opgemaakt volgens de specificatie, zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Voldoende

homepage

Uitkomst: Voldoende

vacature (vervangende pagina)

Uitkomst: Voldoende

verhalen

Uitkomst: Voldoende
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. Opmerking hertoetsing: de links hebben nu unieke teksten. Wel staat in elke link nog de tekst ‘pijl rechts’, welke overbodig is. De link luidt nu bijvoorbeeld: ‘Lees het verhaal van Tobias Pijl rechts’.

vacature (vervangende pagina)

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. Hertoetsing: de links zijn nog steeds enigszins cryptisch, zoals “envelop open’. Bij afbeeldingen in een link is het beter om een lege alt-tekst te gebruiken of een alt-tekst die de functie beschrijft en niet het icoon zelf, zoals ‘pijl’.

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. Hertoetsing: het woord button is nu weggelaten, maar er staat nog wel ‘pijl rechts’ in alle links.
2.4.5: Meerdere manieren
Hele sample

Uitkomst: Voldoende
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. Hertoetsing: in de slider is het aangepast, maar bijvoorbeeld in de lightbox op de pagina ‘Over ons’ staan de knoppen nog in het Engels.
2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende
homepage

Bovenaan in de header staat een play-knop voor de video. De focus hierop is niet zichtbaar.
2.4.11: Focus Not Obscured (Minimum)
Hele sample

Uitkomst: Voldoende
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
2.5.7: Dragging Movements
Hele sample

Uitkomst: Niet van toepassing
2.5.8: Target Size (Minimum)
Hele sample

Uitkomst: Voldoende

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.2.6: Consistent Help
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
3.3.3: Foutsuggestie
Hele sample

Uitkomst: Niet van toepassing
3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet van toepassing
3.3.7: Redundant Entry
Hele sample

Uitkomst: Niet van toepassing
3.3.8: Accessible Authentication (Minimum)
Hele sample

Uitkomst: Niet van toepassing

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

vacature (vervangende pagina)

Uitkomst: Onvoldoende

contact

Uitkomst: Voldoende
Hele sample

Bevindingen:

Hertoetsing: de knoppen om meer informatie uit te klappen in de cookiemelding
(bijvoorbeeld het pijltje onder ‘prestatie’) hebben geen naam. Het is hierdoor voor gebruikers van hulpsoftware niet duidelijk waar deze knoppen voor zijn.

vacature (vervangende pagina)

Hertoetsing: wanneer de link om de vacature als favoriet op te slaan is geactiveerd, wordt de status alleen visueel aangepast
(de kleuren van het hart icoon worden omgedraaid). Dit wordt niet aan hulpsoftware wordt doorgegeven. Dit kan bijvoorbeeld worden opgelost door er een button van te maken en het attribuut ‘aria-pressed’ toe te voegen.

contact

Onder 'Onze locaties' staat een kaart met daarop de locaties aangegeven met buttons. Deze buttons hebben geen correcte naam voor hulpsoftware. Zorg voor een toegankelijke kaart of geef een alternatief in de vorm van een lijst met locaties bij de kaart. Hertoetsing: er is een skiplink toegevoegd naar een pagina met locaties. Daarmee is er een alternatief geboden. Het is echter makkelijk te missen dat deze link er is, omdat deze alleen op focus zichtbaar is. Advies: maak deze link altijd zichtbaar.
4.1.3: Statusberichten
Hele sample

Uitkomst: Niet van toepassing

Sample met getoetste webpagina's

  1. homepage - https://werkenbijgroningen.nl
  2. vacatures - https://werkenbijgroningen.nl/vacatures
  3. vacature (vervangende pagina) - https://www.werkenbijgroningen.nl/vacatures/beleidsmedewerker-bor-en-co%c3%b6rdinator-dieren-323513
  4. solliciteer direct op vacature (vervangende pagina) - https://www.werkenbijgroningen.nl/vacatures/beleidsmedewerker-bor-en-co%c3%b6rdinator-dieren-323513/solliciteren
  5. vacature alert - https://werkenbijgroningen.nl/vacature-alert
  6. vakgebieden - https://werkenbijgroningen.nl/vakgebieden
  7. vakgebied IT & Data - https://werkenbijgroningen.nl/vakgebieden/it--data
  8. over ons - https://werkenbijgroningen.nl/over-ons
  9. arbeidsvoorwaarden - https://werkenbijgroningen.nl/over-ons/arbeidsvoorwaarden
  10. verhalen - https://werkenbijgroningen.nl/verhalen
  11. verhaal van Oelviya - https://werkenbijgroningen.nl/verhalen/3047-oelviya
  12. contact - https://werkenbijgroningen.nl/contact
  13. vacatures zoeken - https://werkenbijgroningen.nl/vacatures?zoekterm=test&Vakgebied=
  14. contact-locaties (toegevoegde pagina) - https://www.werkenbijgroningen.nl/Contact-locaties
  15. random pagina 1: young professionals - https://werkenbijgroningen.nl/over-ons/word-jij-onze-nieuwe-young-professional
  16. random pagina 2: verhaal van Sil - https://werkenbijgroningen.nl/verhalen/3049-sil

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: