Issues:
Audit digitale toegankelijkheid website Werken voor gemeente Leidschendam-Voorburg

(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: Advies: op pagina https://werkenvoorleidschendam-voorburg.nl/ staan onderaan naast 'Waarom Leidschendam-Voorburg?' 3 iconen. Deze hebben een alt-tekst als "Icoon dat sfeervol werken symboliseert". Dit voegt geen informatie toe en beschrijft de afbeelding niet. Verberg decoratieve afbeeldingen met een leeg alt-attribuut. Dit komt op meerdere pagina's voor.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Bevinding 2: Advies: In de video op pagina https://werkenvoorleidschendam-voorburg.nl/ komt aan het eind de tekst "werkenvoorleidschendam-voorburg.nl" voor die niet uitgesproken wordt. Zo kunnen mensen die de video niet kunnen zien niet weten wat er wordt getoond in de video. Deze tekst bevat geen nieuwe informatie voor de bezoeker van deze website, maar zorg er altijd voor dat tekst in beeld ook op een andere manier beschikbaar is, in een transcript van de video of in een extra audiospoor.
Dit is vooral belangrijk wanneer deze video op andere kanalen wordt getoond, waardoor de URL essentiële informatie wordt.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 3: Advies: In de video op pagina https://werkenvoorleidschendam-voorburg.nl/ komt aan het eind de tekst "werkenvoorleidschendam-voorburg.nl" voor die niet uitgesproken wordt. Zo kunnen mensen die de video niet kunnen zien niet weten wat er wordt getoond in de video. Deze tekst bevat geen nieuwe informatie voor de bezoeker van deze website, maar zorg er altijd voor dat tekst in beeld ook te horen is in het audiospoor.
Dit is vooral belangrijk wanneer deze video op andere kanalen wordt getoond, waardoor de URL essentiële informatie wordt.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 4: Op pagina https://werkenvoorleidschendam-voorburg.nl/verhalen/diana/ is de quote “Ik kan niet alles oplossen, maar wel luisteren en betrokken zijn.” opgemaakt met het <em> element en de quote "Er wordt nooit zomaar iets besloten, ook al lijkt dat soms wel zo" met <strong> en <em>. Het strong- en em-element zijn bedoeld om nadruk te geven aan een of enkele woorden. Gebruik in plaats daarvan CSS om de tekst anders vorm te geven.

Bevinding 5: Op pagina https://werkenvoorleidschendam-voorburg.nl/verhalen/diana/ is in de code niet duidelijk dat de tekst "Er wordt nooit zomaar iets besloten, ook al lijkt dat soms wel zo" om een quote gaat. Gebruik voor quotes ofwel aanhalingstekens en/of het quote (<q>) of blockquote (<blockquote>) element om dit probleem op te lossen.

Bevinding 6: Op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/22024/ komt twee keer de kop "Meer informatie" (H4) voor. Dit komt doordat het sticky blok aan de linkerkant twee keer in de DOM staat en in beide gevallen zichtbaar is voor hulpsoftware. Hierdoor komen beide koppen in de koppenlijst, die gebruikers van hulpsoftware kunnen opvragen. Dit kan verwarrend zijn. Verberg daarom het blok dat niet visueel wordt getoond ook voor gebruikers van hulpsoftware met bijvoorbeeld display:none.

Bevinding 7: Op pagina https://werkenvoorleidschendam-voorburg.nl/over-ons/ staat onder de tekst 'Ontwikkeling' de koptekst 'Sijtwende Academie, GoodHabitz & coaching'. Deze is opgemaakt met het <strong>element in plaats van een kopelement. Geef deze tekst bijvoorbeeld een H4 element.

Bevinding 8: Advies: In de blokken op pagina https://werkenvoorleidschendam-voorburg.nl/verhalen/ zijn de functies van de medewerkers opgemaakt met het strong element. Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden. Als het strong element puur voor opmaak is gebruikt, moet de tekst met bijvoorbeeld CSS worden opgemaakt in plaats van het strong-element.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 9: Als de afspeelknop op de video op de home pagina https://werkenvoorleidschendam-voorburg.nl/ bij navigatie met behulp van het toetsenbord focus krijgt is dat te zien door een lichte kleurverandering van de knop. Slechtzienden en kleurenblinden kunnen dit mogelijk niet waarnemen. Zorg dat de focus niet alleen afhankelijk is van kleur om dit probleem op te lossen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 10: De contrastknop is in sommige situatie niet te gebruiken (zie 1.4.4) en geeft meer contrastproblemen dan in de 'gewone' versie. Het gaat bijvoorbeeld om de donkerblauwe links links "Vacatures" en "Verhalen" onder "Jij doet ertoe!" (Hex: 1A184A, contrastwaarde 1,3:1). Daarom worden hieronder enkel contrastproblemen beschreven in de 'gewone' versie.

Bevinding 11: De witte teksten op de bruine achtergrond (Hex: BEA279), zoals "Jij doet ertoe" en "Contact" in de footer hebben een te laag contrast. Dat is 2,4:1 waar dat minimaal 4,5:1 moet zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 12: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1.0" en "user-scale=0". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg.

Bevinding 13: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% verdwijnt de hoog contrast knop, waardoor deze niet gebruikt kan worden.

Bevinding 14: In een ingezoomde weergave is het logo niet meer (goed) zichtbaar: deze wordt heel klein. Daarnaast wordt de focusrand eromheen opgesplitst in twee kleine blokjes.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 15: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1.0" en "user-scale=0". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg.

Bevinding 16: Als op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/22024/ bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% verdwijnt alle content doordat de sticky header het volledige beeld vult. Bij lagere zoom-percentages is de content minder goed leesbaar doordat de sticky header een deel van het scherm vult.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 17: De contrastknop is in sommige situatie niet te gebruiken (zie 1.4.4) en geeft meer contrastproblemen dan in de 'gewone' versie. Het gaat bijvoorbeeld om de paarse kleur van de hoog contrast knop (Hex: 600040) op de zwarte achtergrond (1,6:1) en de focusranden. Daarom worden hieronder enkel contrastproblemen beschreven in de 'gewone' versie.

Bevinding 18: De grijzige focusrand (#5f5e7f) heeft op verschillende achtergronden een te lage contrastwaarde. Bijvoorbeeld rondom het logo in de header (#bea279) een waarde van 2,5:1, op de donkerblauwe menu-items (#1a184a) een waarde van 2,7:1 en in de footer (#a69271) een waarde van 2,0:1. Dit moet minimaal 3:1 zijn.

Bevinding 19: De groene knoppen "Lees verder" op pagina https://werkenvoorleidschendam-voorburg.nl/ hebben een te laag contrast met de witte achtergrond. De contrastverhouding is hier 1,5:1, waar dit minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 20: Op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/21881/ staat onder "Deel deze vacature" de link "Email". Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze link niet gebruiken. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord. Zie ook succescriterium 4.1.2.

Bevinding 21: In een smal venster minder dan 9890 pixels breed verschijnt er rechtsboven in de website op elke pagina een hamburgermenu. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen dit menu niet gebruiken. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

Bevinding 22: Op de pagina https://werkenvoorleidschendam-voorburg.nl/vacature/21881/ is de link "Meer informatie?" en de email link daar onder niet te bedienen door mensen die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets.

Bevinding 23: Op pagina https://werkenvoorleidschendam-voorburg.nl/over-ons/ staan onder "Meer over" en "Onze afdelingen" uitklapbare teksten die niet met behulp van het toetsenbord geopend kunnen worden. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 24: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Dit kan opgelost worden 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.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 25: Op elke pagina komt de focus na de hoog contrast- en groter lettertypeknoppen op de social media links, daarna op het menu en daarna op het logo. Houd zoveel mogelijk de visuele volgorde aan, zodat de volgorde logisch is. Zorg dat de focus na de hoog contrast- en groter lettertypeknoppen eerst op het logo, vervolgens op het menu en daarna op de social media links komt.

Bevinding 26: Op de pagina https://werkenvoorleidschendam-voorburg.nl/verhalen/ staan 11 blokken met medewerkers. Bij navigatie met het toetsenbord is de focus volgorde door de blokken is niet logisch. De focus verspringt niet van links naar rechts maar van boven naar beneden. Zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert.

Bevinding 27: Nadat de Whatsapp link op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/21881/ focus heeft gehad komt de focus op een verstopte Linkedin-, Facebook- en Whatsapp-link. Zorg dat achterliggende content "onzichtbaar" is voor hulpsoftware en niet bereikbaar is met het toetsenbord.

Bevinding 28: Advies: Op pagina https://werkenvoorleidschendam-voorburg.nl/ komen onder 'Onze verhalen' steeds 3 links voor: de afbeelding, de naam, en de knop 'Lees meer'. Hierdoor moet een toetsenbordgebruiker per artikel 3 keer de tabtoets gebruiken. Dit is erg hinderlijk. Kies ervoor om slechts één link te gebruiken (bijvoorbeeld de naam van de persoon), en vervolgens het klikbare gebied te vergroten met Javascript.
Dit komt op meerdere pagina’s voor, zoals op pagina https://werkenvoorleidschendam-voorburg.nl/over-ons/ onder ‘Onze mensen’.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 29: De links naar Facebook, Twitter en Instagram rechts boven aan elke pagina hebben geen naam. Dit komt doordat de <span>-teksten voor gebruikers van hulpsoftware zijn verborgen met display:none. Omdat de link geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een duidelijke linktekst toe om dit probleem op te lossen. Zie ook 4.1.2

Bevinding 30: Onderin de homepagina https://werkenvoorleidschendam-voorburg.nl/ staan links met de linktekst "Lees verder". Vermijd linkteksten als ‘Lees meer’ en ‘Klik hier’, 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. Als visueel duidelijk is waar de link bij hoort, hoeft deze aanvullende tekst niet visueel zichtbaar te zijn.

Bevinding 31: Advies: Het logo van de gemeente Leidschendam-Voorburg boven aan elke pagina heeft als alternatieve tekst "Werken voor Leidschendam-Voorburg". Hieraan zou het linkdoel kunnen worden toegevoegd, bijvoorbeeld 'Werken voor Leidschendam-Voorburg, naar de homepage'.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Bevinding 32: De pagina https://werkenvoorleidschendam-voorburg.nl/vacature/22024/ is maar op één manier te bereiken, via een link vanaf de vacatures pagina https://werkenvoorleidschendam-voorburg.nl/vacatures/. Zorg dat er nog een manier is om elke pagina te kunnen bereiken, bijvoorbeeld via een sitemap of zoekfunctie.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 33: Wanneer een foto van een medewerker onder "Onze verhalen" op pagina https://werkenvoorleidschendam-voorburg.nl/ focus heeft, is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 34: Op pagina https://werkenvoorleidschendam-voorburg.nl/ komen dubbele id's voor, bijvoorbeeld id="post-1868". 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 35: De links naar Facebook, Twitter en Instagram rechts boven aan elke pagina hebben geen naam. Dit komt doordat de <span>-teksten voor gebruikers van hulpsoftware zijn verborgen met display:none.

Bevinding 36: Wanneer een pagina in een ingezoomde weergave wordt bekeken, verschijnt een hamburgermenu. Deze knop heeft geen naam en mist ook een rol (button) en waarde (uitgeklapt of ingeklapt). Codeer de knop als <button>, geef deze een naam en voeg bijvoorbeeld het aria-expanded attribuut toe om dit probleem op te lossen.

Bevinding 37: Op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/21881/ staat onder "Deel deze vacature" de link "Email". Deze link mist een href-attribuut en heeft daardoor geen juiste rol.

Bevinding 38: Onderin pagina https://werkenvoorleidschendam-voorburg.nl/vacatures/ wordt gebruikgemaakt van uitvouwbare blokken (accordeons) zoals bij "Salaris". Voor ziende gebruikers is het duidelijk dat een tekstblok in- of uitgevouwen is. Voor screenreadergebruikers die blind of slechtziend zijn is dat niet zo. Geef in de code de status aan met aria-expanded of een vergelijkbare techniek, om dit probleem op te lossen.
Hetzelfde probleem komt op meer plaatsen voor, bijvoorbeeld op pagina https://werkenvoorleidschendam-voorburg.nl/over-ons/ onder ‘Over ons’ en ‘Onze afdelingen’.

Bevinding 39: Op pagina https://werkenvoorleidschendam-voorburg.nl/ is rechts naast "Waarom Leidschendam-Voorburg" drie tabellen gebruikt voor de opmaak van content. Een tabel mag gebruikt worden voor opmaak, maar het th-element mag daar niet in voorkomen. Verwijder de tabelkoppen en gebruik role=presentation om dit probleem op te lossen.

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

• Home:
  https://werkenvoorleidschendam-voorburg.nl/
• Vacatures:
  https://werkenvoorleidschendam-voorburg.nl/
• Vacature:
  https://werkenvoorleidschendam-voorburg.nl/vacature/22024/
• Verhalen:
  https://werkenvoorleidschendam-voorburg.nl/verhalen/
• Verhaal:
  https://werkenvoorleidschendam-voorburg.nl/verhalen/diana/
• Over ons:
  https://werkenvoorleidschendam-voorburg.nl/over-ons/
• Proclaimer:
  https://werkenvoorleidschendam-voorburg.nl/proclaimer/
• Vacature:
  https://werkenvoorleidschendam-voorburg.nl/vacature/21881/
• 404 pagina:
  https://werkenvoorleidschendam-voorburg.nl/bestaatniet

Ondersteunende technieken

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

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.