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 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. Het <quote> element is niet een geldig HTML element. Gebruik voor quotes ofwel aanhalingstekens en/of het quote (<q>) of blockquote (<blockquote>) element om dit probleem op te lossen.

Bevinding 5: 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 6: 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 7: 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.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 8: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% hebben de witte teksten op de bruine achtergrond (HEX #bea279), zoals "Menu" en "Contact" in de footer een te laag contrast. Dat is 2,4:1 waar dat minimaal 4,5:1 moet zijn. Wanneer niet wordt ingezoomd heeft de witte tekst "Jij doet er toe" rechts in de header van elke pagina het zelfde probleem.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 9: Advies: Als op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/23701/ bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% verdwijnt bijna 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 10: De roze focusrand (HEX #ff3db1) heeft op verschillende achtergronden een te lage contrastwaarde. Bijvoorbeeld rondom het logo in de header (HEX #bea279) een waarde van 1,3:1, op de groene balk rond 'solliciteer' (HEX #b5d9cd) een waarde van 2,1:1 en in de footer (HEX #a69271) een waarde van 1,1:1. Dit moet minimaal 3:1 zijn.

Bevinding 11: 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 12: Op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/23701/ 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 13: Op de pagina https://werkenvoorleidschendam-voorburg.nl/vacature/23701/ 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.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 14: 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 15: Op elke pagina komt de focus eerst 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 eerst op het logo, vervolgens op het menu en daarna op de social media links komt.

Bevinding 16: 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 17: Bij navigatie met de tabtoets op de pagina https://werkenvoorleidschendam-voorburg.nl/over-ons/ is de focusvolgorde niet logisch. Eerst krijgt de uitklapbare tekst 'Salaris' en de daaronder liggende uitklapbare teksten focus, dan de social media links en de menu items boven aan de pagina etc. Zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert.

Bevinding 18: Nadat de Whatsapp link op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/23701/ 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 19: 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 20: 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 21: 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'.

Bevinding 22: Op de homepagina https://werkenvoorleidschendam-voorburg.nl/ staat een video waarvan de play knop geen naam heeft. 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. Hetzelfde probleem komt voor op pagina https://werkenvoorleidschendam-voorburg.nl/over-ons/

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Bevinding 23: De pagina https://werkenvoorleidschendam-voorburg.nl/vacature/23701/ 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.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 24: 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 25: Op pagina https://werkenvoorleidschendam-voorburg.nl/vacature/23701/ staat onder "Deel deze vacature" de link "Email". Deze link mist een href-attribuut en heeft daardoor geen juiste rol.

Bevinding 26: 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. Als op de link geklikt wordt verandert de status naar aria-expanded="true" maar als de accordeon gesloten wordt verandert aria-expanded niet mee. Geef in de code de status goed 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 27: Op de homepagina https://werkenvoorleidschendam-voorburg.nl/ staat een video waarvan de play knop geen naam heeft. 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. Hetzelfde probleem komt voor op pagina https://werkenvoorleidschendam-voorburg.nl/over-ons/

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/23701/
• 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/24561/
• 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.