Onderzoek toegankelijkheid website Werken bij Gemeente Groningen

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.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Bevindingen:

(video niet beschikbaar)

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Bevindingen:

(video niet beschikbaar)

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

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.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

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.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

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.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

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.

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

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

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.

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

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

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.

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.

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.

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.

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.

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.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

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.

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.

Hele sample

Uitkomst: Niet van toepassing

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.

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.

Hele sample

Uitkomst: Niet van toepassing

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.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing