Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website werken bij gemeente Súdwest-Fryslân

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Werken bij gemeente Súdwest-Fryslân
Datum 19 augustus 2024
Scope van de website Binnen de scope van onderzoek valt:
  • Alle pagina's op werkenbij.sudwestfryslan.nl.
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 30

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Bevinding aangepast naar aanleiding van gedeeltelijke oplossing bevinding: Op pagina https://werkenbij.sudwestfryslan.nl/ staan onder de koptekst "Zo zet je koers voor de baan die precies bij jou past" 5 afbeeldingen om het sollicitatieproces uit te beelden. 4 van de 5 iconen hebben een correcte alternatieve tekst, maar het icoon voor 'beiden enthousiast' (met alt="Tweede icoon") omschrijft de afbeelding onvoldoende. Pas de alternatieve tekst van dit icoon aan, zodat gebruikers van hulpsoftware een duidelijke omschrijving te horen krijgen. Een soortgelijk probleem komt onder andere voor op pagina's https://werkenbij.sudwestfryslan.nl/vacatures/ en https://werkenbij.sudwestfryslan.nl/vacature/2-beleidsadviseurs-sociaal-domein-thema-publieke-gezondheid-1100880/ waar onderaan de pagina dezelfde iconen worden gebruikt.

Bevinding 2: Bevinding aangepast in verband met vervanging vacaturepagina: Op pagina https://werkenbij.sudwestfryslan.nl/vacature/co%c3%b6rdinator-wet-open-overheid-woo-1089628/ staat onderaan de pagina een foto van Martijn Crince. De alternatieve tekst van deze foto is "Foto van https://werkenbij.sudwestfryslan.nl/wp-content/uploads/sites/2/2023/07/m.crince-550x550.jpg". Deze tekst beschrijft de afbeelding niet. Het advies is om deze afbeelding en soortgelijke afbeeldingen op de overige vacaturepagina's een tekstalternatief met de naam van de persoon te geven.

Bevinding 3: Op pagina https://werkenbij.sudwestfryslan.nl/vacature/co%c3%b6rdinator-wet-open-overheid-woo-1089628/ staan boven de koptekst "Wat ga jij doen?" 3 iconen: een locatie icoon, een flexibel werken icoon en een pen icoon. Deze iconen hebben betekenis, maar hebben geen alternatieve tekst.
Een soortgelijk probleem zien we terug op pagina's https://werkenbij.sudwestfryslan.nl/vacature/2-beleidsadviseurs-sociaal-domein-thema-publieke-gezondheid-1100880/.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 4: Op de pagina https://werkenbij.sudwestfryslan.nl/onze-verhalen/de-baan-met-alleen-maar-voordelen/ is de eerste alinea vetgedrukt. Hier is het strong-element gebruikt om een hele alinea nadruk te geven, dat is niet de toegestaan. Het strong-element is bedoeld voor het benadrukken van een deel van een tekst. Maak gebruik van de stylesheet om een intro tekst in een visueel anders te tonen. Een soortgelijk probleem zien we op pagina https://werkenbij.sudwestfryslan.nl/onze-verhalen/het-visitekaartje-van-de-stad/.

Bevinding 5: Op de pagina https://werkenbij.sudwestfryslan.nl/onze-verhalen/trots-op-mijn-werk/ staat een quote cursief opgemaakt (Wij staan echt voor de medewerker; dat geeft het gevoel dat je ertoe doet in je werk.). Hier is het em-element gebruikt, dat is niet de bedoeling. Het em-element is bedoeld voor het benadrukken van een woord of deel van een tekst, gebruik de stylesheet om deze quote visueel anders te tonen.

Bevinding 6: Bevinding aangepast in verband met gedeeltelijk oplossen van bevinding: Op pagina https://werkenbij.sudwestfryslan.nl/onze-verhalen/de-baan-met-alleen-maar-voordelen/ zijn koppen zichtbaar in de tekst (met strong opgemaakt), deze zijn niet correct opgemaakt. Doordat het niet is toegestaan om een kop helemaal op te maken met strong is het advies om de strong-elementen te vervangen door bijvoorbeeld h2-elementen.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://werkenbij.sudwestfryslan.nl/ staat onder de kop "Wij zijn Súdwest-Fryslân." een link naar 1.000 deskundige collega’s. De blauwe (HEX #009FD2) kleur van de link op de witte achtergrond heeft een te laag contrastratio, namelijk 3.0:1. Hierdoor is de linktekst voor slechtzienden en kleurenblinden niet (goed) te lezen. Zorg dat de contrastratio minimaal 4.5:1 is

Bevinding 8: Op pagina https://werkenbij.sudwestfryslan.nl/vacature-alert/ staat een rode (HEX #D52B1E) asterisk (verplicht sterretje) op een lichtblauwe (HEX #D9EBF7) achtergrond. Deze asterisk heeft een te laag contrast. De contrastverhouding is 4:1 waar dit 4,5:1 moet zijn.

Bevinding 9: Op de vacaturepagina’s https://werkenbij.sudwestfryslan.nl/vacature/2-beleidsadviseurs-sociaal-domein-thema-publieke-gezondheid-1100880/ en https://werkenbij.sudwestfryslan.nl/vacature/co%c3%b6rdinator-wet-open-overheid-woo-1089628/ is nog een contrastprobleem te vinden: bij ‘Persoonlijke gegevens’ (HEX #154273) en ‘Uploads’ (HEX #767676) in het blauwe vlak ‘Solliciteer voor..’ (HEX #00B1EB). De daar gemeten contrasten zijn 4,1:1 en 1,8:1.

Bevinding 10: Op de vacaturepagina’s https://werkenbij.sudwestfryslan.nl/vacature/2-beleidsadviseurs-sociaal-domein-thema-publieke-gezondheid-1100880/ en https://werkenbij.sudwestfryslan.nl/vacature/co%c3%b6rdinator-wet-open-overheid-woo-1089628/ ontstaat een contrastprobleem als het formulier niet goed ingevuld wordt; de labeltekst bij de foutieve velden wordt rood en is dan niet meer goed leesbaar door onvoldoende contrast met de blauwe achtergrond (HEX #D52B1E met #00B1EB en contrast 2,0:1).

Bevinding 11: Op pagina https://werkenbij.sudwestfryslan.nl/onze-verhalen/ komen bij elke witte kop en tekst op de afbeeldingen contrastproblemen voor. Ook bij inzoomen. Dit komt ook op de homepagina https://werkenbij.sudwestfryslan.nl/ voor waar witte tekst op afbeeldingen staat.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 12: Wanneer je op pagina https://werkenbij.sudwestfryslan.nl/vacature/co%c3%b6rdinator-wet-open-overheid-woo-1089628/ naar 175% en verder inzoomt, komen bij het formulier aan de rechterkant van de pagina de labels en de velden over elkaar heen te staan. Op het moment dat een gebruiker dan gegevens invult zijn die gegevens en het label beide niet (goed) zichtbaar.

Bevinding 13: Wanneer je op pagina https://werkenbij.sudwestfryslan.nl/?s=vacature bij een normale schermgrootte tot 200% ingezoomd wordt dan verdwijnt
een deel van de content volledig, namelijk de zoekresultaten "Je hebt gezocht op "vacature" en er zijn 4 resultaten gevonden". Dat geld als een verlies van informatie. Het is de bedoeling dat de stylesheet die gebruikt wordt bij inzoomen dezelfde informatie bevat.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 14: Wanneer de menu items (Home, Vacatures, Onze verhalen etc.) op pagina https://werkenbij.sudwestfryslan.nl/ (in de header) toetsenbordfocus hebben, is dat zichtbaar door een blauwe (HEX #BAE3F0) focusrand. De contrastverhouding tussen de focusrand en de lichtgrijze (HEX #F8F9FA) achtergrond is 1.3:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast. Doordat dit het menu in de header betreft, komt dit ook voor op de andere pagina's.

Bevinding 15: Op pagina https://werkenbij.sudwestfryslan.nl/ is bij de knoppen "Lees het hele verhaal" en "Lees meer verhalen" heeft de lichtgrijze (HEX #C2C2C1) focusrand op de witte achtergrond een te laag contrastratio, nl. 1.7:1, waar dit minimaal 3:1 moet zijn.
In de footer op elke pagina komt een vergelijkbaar probleem voor: hier heeft de knop "Bezoek www.sudwestfryslan.nl" een grijze (HEX #A1A1A2) focusrand bij toetsenbordfocus. De witte knop veranderd dan naar lichtgrijs (HEX #D3D4D5), waardoor de contrastratio tussen knop en focusrand 1.7:1 is, waar dit minimaal 3:1 moet zijn. De achtergrondkleur van de pagina waar de knop op staat is grijs (HEX #6F6F6E) en ook hier is de focusrand mogelijk niet goed zichtbaar: de contrastratio is hier 1.9:1.

Bevinding 16: Op pagina https://werkenbij.sudwestfryslan.nl/?s=vacature staat een zoekbalk. Het contrast van de lichtgrijze (HEX #DEE2E6) rand op de witte achtergrond is te laag. De contrastverhouding is hier `1.3:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.

Bevinding 17: Wanneer de zoekbalk op pagina https://werkenbij.sudwestfryslan.nl/?s=vacature toetsenbordfocus heeft, is dat zichtbaar door een blauwe focusrand. De contrastverhouding tussen de lichtblauwe (HEX #BFE7F4) focusrand en de witte achtergrond is 1.3:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. De knop ernaast heeft ook een probleem met de zichtbaarheid van de toetsenbordfocus. Maak gebruik van een kleurencombinatie met voldoende contrast of gebruik de standaard focusindicator van de browser.

Bevinding 18: Wanneer je op pagina https://werkenbij.sudwestfryslan.nl/ inzoomt naar 200% verandert het menu naar de mobiele versie. Wanneer de menu items toetsenbordfocus hebben, is dat zichtbaar door een blauwe focusrand. De contrastverhouding tussen de lichtblauwe (HEX #BFE7F4) focusrand en de witte achtergrond is 1.3:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.

Bevinding 19: De knoppen ‘Lees meer’ op pagina https://werkenbij.sudwestfryslan.nl/vacatures/ krijgen een lichtgrijze focusrand met onvoldoende contrast. Er staat wel óók een donkergrijze rand met voldoende contrast om de knop heen, maar deze hoort bij de knop en verschijnt niet pas bij focus.

Bevinding 20: Op pagina https://werkenbij.sudwestfryslan.nl/ staat de knop ‘Scroll naar boven’ indien deze knop focus krijgt heeft de lichtblauwe (HEX #00B1EB) rand een contrast van 2,0:1 met de grijze achtergrond (HEX #6F6F6E) van de footer. Dit probleem komt op alle pagina's. Dit element kan ook op een andere achtergrond staan als het focus krijgt, op dat moment moet de locatie van de toetsenbordfocus ook visueel duidelijk zijn.

Bevinding 21: Na het inzoomen naar 300% op pagina https://werkenbij.sudwestfryslan.nl/ is er een contrastprobleem bij de ‘ < ‘ en ‘ > ‘ iconen onder de kop 'Zo zet je koers voor de baan die precies bij jou past'. Ook het blauwe bolletje dat aangeeft welke slide actief is (weer net andere tint blauw) heeft onvoldoende contrast. De actieve knoppen moeten voldoende contrast hebben net als alle bollen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 22: Bevinding aangepast naar aanleiding van het deels oplossen van de bevinding: Op pagina https://werkenbij.sudwestfryslan.nl/vacature-alert/ staan de velden 'Vakgebied' en 'Opleidingsniveau'. Wanneer je deze (in Chrome) met het toetsenbord bediend, dan moet je twee maal op enter drukken om de lijst te kunnen openen. Dat komt doordat de gebruikte code niet volgens de specificatie is. Zorg ervoor dat de lijst opengevouwen wordt als éénmaal op enter gedrukt wordt nadat de focus naar het element is gebracht.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 23: 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.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 24: De paginatitel op pagina https://werkenbij.sudwestfryslan.nl/ (Kapitein in eigen carrière - Werken bij Súdwest-Fryslân) is gevuld, maar deze beschrijft de inhoud van de pagina onvoldoende. Omdat dit de homepagina van de website is, zou in de paginatitel ook ergens 'Home' moeten hebben om de pagina te herkennen als homepage.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://werkenbij.sudwestfryslan.nl/ in de header (komt terug op elke pagina) staat een zoekicoon. Wanneer je hierop klikt klapt er een zoekbalk met zoekknop uit en verschuift het menu. Om te voldoen aan de eisen van dit succescriterium moet de toetsenbordfocus eerst naar die nieuw veschenen content. De toetstenbordfocus gaat nu door naar de unieke inhoud van de pagina. Dit probleem komt op alle pagina's voor, de homepage is hier als voorbeeld gebruikt.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 26: Op pagina https://werkenbij.sudwestfryslan.nl/vacatures/ staan links met de linktekst "Lees meer". Vermijd linkteksten als ‘Lees meer’, zulke teksten beschrijven het linkdoel niet. Zorg dat linkteksten duidelijk beschrijven waar de link naartoe gaat, bijvoorbeeld door de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 27: Op pagina https://werkenbij.sudwestfryslan.nl/vacature-alert/ staan formuliervelden met de zichtbare teksten 'Vakgebied' en 'Opleidingsniveau'. Naast die visuele labels staan nu in de code twee knoppen met de naam "Geen voorkeur Geen voorkeur". De tekst van het zichtbare label komt nu niet terug in de naam van het onderdeel. De geselecteerde optie is "Geen voorkeur" dat is niet de naam van het invoerveld. Het is niet toegestaan om andere interactieve componenten te nesten binnen een knop, ook als die knop gemaakt is met behulp van role="button".

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 28: Wanneer je op pagina https://werkenbij.sudwestfryslan.nl/ inzoomt naar 300% en hoger veranderen de iconen onder koptekst "Zo zet je koers voor de baan die precies bij jou past" in een mobiele carousel. Het pagination element onder de iconen + tekst heeft een Engelstalig aria label namelijk aria-label="Go to slide 1". Dit geldt ook voor de overige pagination bolletjes. (Slide 1 t/m 5).
Gebruikers van hulpsoftware horen hier Engelse tekst wat mogelijk verwarrend is.
Een soortgelijk probleem zien we terug op alle pagina's met deze zelfde iconen, bijvoorbeeld https://werkenbij.sudwestfryslan.nl/vacature/co%c3%b6rdinator-wet-open-overheid-woo-1089628/ en https://werkenbij.sudwestfryslan.nl/vacature/2-beleidsadviseurs-sociaal-domein-thema-publieke-gezondheid-1100880/.

Bevinding 29: Op het moment dat er op een van de pagina's wordt ingezoomd komt er linksboven een hamburgermenu-knop in beeld. De naam van die knop is nu ‘toggle navigation’. De naam van deze knop is in het Engels en voldoet niet aan dit succescriterium, het advies is de waarde van het aria-label aan te passen naar een Nederlandse tekst.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 30: Op pagina https://werkenbij.sudwestfryslan.nl/vacature-alert/ staan de velden Vakgebied en Opleidingsniveau. De tekst "Geen voorkeur" wordt in beide gevallen dubbel voorgelezen, omdat hier een title en een span met "Geen voorkeur" wordt gebruikt. Het is niet toegestaan om binnen een knop andere interactieve elementen te gebruiken. Het feit dat deze knop in de code wordt gemaakt door het gebruik van role="button", maakt hiervoor niet uit. Verschillende browsers en soorten hulpsoftware gaan met deze fout verschillend om, wat het reproduceren van problemen complex kan maken. Op dit moment is de naam en rol van de verschillende selecteerbare opties niet beschikbaar bij het gebruik van NVDA in Chrome en Firefox. Die software geeft nu bij elke optie 'leeg' aan. Een oplossing in html bestaat uit een select-element met het attribuut multiple, die oplossing heeft beperkingen op de visuele styling van deze onderdelen en heeft geen invoerveld voor tekst om resultaten te filteren. Een andere optie is om hier een los dialoogvenster te gebruiken en in dat venster staat dan een filterbare lijst met selectievakjes. Het is niet mogelijk om al deze functionaliteit in één complexe component van de gebruikersinterface te plaatsen.

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

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-01-29 21:19:24 v2.4-011