Issues:
Content-audit digitale toegankelijkheid website Klimaatplein Uitgeest
(Alleen de bevindingen)
Scope van de evaluatie
Naam website | Klimaatplein Uitgeest |
---|---|
Datum | 23 september 2024 |
Scope van de website |
Binnen de scope van het onderzoek valt:
|
Conformiteitsdoel | WCAG 2.1 niveau AA |
Uitgebreide toetsresultaten
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: In de header van elke pagina staat het logo van de gemeente Uitgeest dat linkt naar de homepagina van de website. De alternatieve tekst van het logo "Logo Uitgeest Klimaatplein" beschrijft de afbeelding niet. De tekst 'Gemeente Uitgeest' is visueel zichtbaar op het logo, maar komt niet terug in de alternatieve tekst. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie en eventuele overige tekst in de afbeelding bevatten en daarnaast een beschrijvend linkdoel als de afbeelding ook als link dient.
Bevinding 2: Het vergrootglas in de zoekbalk in de header op elke pagina is nu aangeduid als een informatieve SVG. Geef informatieve afbeeldingen met dit formaat het attribuut role="img" mee. Browsers begrijpen dan dat het om een afbeelding gaat. Omdat de afbeelding informatief is moet er een tekstalternatief aangeboden worden. Dat is dan mogelijk door het een title-element met een alternatieve tekst als eerste child-element toe te voegen. Anders dient deze SVG als decoratief te worden aangemerkt met aria-hidden=true. Dit geldt ook voor de "vorige" en "volgende" pijlen bij de paginering op https://klimaatplein.uitgeest.nl/zoeken?q=wet.
Bevinding 3: De infographic op https://klimaatplein.uitgeest.nl/subsidie-klimaat/ heeft geen toegankelijk alternatief. Complexe afbeeldingen als deze hebben een alt-tekst nodig en een uitgebreide beschrijving of ander toegankelijk alternatief. In de alt-tekst moet dan naar de uitgebreide beschrijving verwezen worden. Maar gezien het feit dat de gegevens in de infographic in een tabel staan, is het logisch dat een tabel gebruikt wordt. Vervang de afbeelding door een tabel.
Bevinding 4: Op https://klimaatplein.uitgeest.nl/inspiratieverhalen/klimaatburgemeesters/ hebben de foto's geen alt-tekst. Er is echter wel een onderschrift aanwezig, wat laat vermoeden dat de afbeeldingen niet decoratief zijn. In dat geval hebben de foto's beschrijvende alt-tekst nodig. Voeg dit toe. Dit speelt ook op https://klimaatplein.uitgeest.nl/kringloop-brengpunt/.
Bevinding 5: Niet alle afbeeldingen in de PDF https://klimaatplein.uitgeest.nl/fileadmin/buch/Isolatieprogramma_BCH.pdf hebben alternatieve tekst, zoals bijvoorbeeld het logo "Overmorgen" op de titelpagina. kaarten en diagrammen in het rapport en de afbeeldingen op de bijlagepagina's. Alternatieve tekst voor deze zaken zijn vereist. Laat deze toevoegen in het brondocument. De kaarten en diagrammen hebben daarnaast ook een uitgebreide beschrijving nodig omdat deze complexe afbeeldingen zijn. Onder complexe afbeeldingen vallen: grafieken; diagrammen en illustraties waar de tekst op de pagina er vanuit gaat dat de gebruiker de afbeelding kan zien en begrijpen.; kaarten die locaties tonen of andere informatie tonen zoals weerinformatie. In deze gevallen is een tweedelig tekstalternatief nodig: a) de korte omschrijving om de afbeelding te identificeren en (indien nodig) de locatie aan te geven van de uitgebreide beschrijving en b) de uitgebreide beschrijving, die alle belangrijke en essentiële informatie uit de afbeelding tekstueel weergeeft. Geef in de alt-tekst mee dat er een uitgebreide beschrijving aanwezig is. Creëer een paragraaf dat alle essentiële en belangrijke informatie uit de afbeelding bevat.
Bevinding 6: Er zijn afbeeldingen in de PDF https://klimaatplein.uitgeest.nl/fileadmin/buch/Isolatieprogramma_BCH.pdf met foutieve alt-tekst, zoals bijvoorbeeld in hoofdstuk 3 (Map Description automatically generated en Text Description automatically generated), hoofdstuk 5 (Image) en Bijlage 1 (Home with solid fill). Pas de alt-tekst aan zodat deze echt beschrijft wat de afbeelding of illustratie laat zien.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 7: Op elke pagina met een kruimelpad, is deze opgemaakt in een lijst. Doordat er echter role=presentation is gebruikt op het <ol>-element, wordt de rol van lijst eigenlijk weggehaald en hebben de lijst-items geen lijst meer waar ze onder vallen. Zorg ervoor dat hulpsoftware de structuur correct kan weergeven en verwijder het attribuut role=presentation.
Bevinding 8: De openingstijden op https://klimaatplein.uitgeest.nl/kringloop-brengpunt/ zijn niet opgemaakt in een tabel. Een tabel zal helpen de structuur en semantiek van de informatie over te brengen naar hulpsoftware. Zet deze gegevens in een tabel en vergeet geen kolomkoppen te gebruiken.
Bevinding 9: Op de pagina https://klimaatplein.uitgeest.nl/kringloop-brengpunt/ staat onder de kop een stuk tekst cursief. Hier is het em-element gebruikt, dat is niet de bedoeling. Het em-element is bedoeld voor het benadrukken van een woord of delen van een zin. Zorg dat de alinea via de stylesheet opgemaakt wordt of maak gebruik van het <i>-element.
Bevinding 10: Op de pagina https://klimaatplein.uitgeest.nl/tuin/groen-dak/ is een begrippenlijst aanwezig, maar niet als zodanig opgemaakt. Het is voor hulpsoftware belangrijk dat structuur en semantiek correct gebruikt wordt. Maak de begrippenlijst op als een description list.
Bevinding 11: Op https://klimaatplein.uitgeest.nl/energiebus-1/ is een tabel aanwezig. Bij deze tabel ontbreken echter de kolomkoppen. Hierdoor is de relatie tussen de verschillende kolommen en de context niet duidelijk voor bezoekers met een screenreader. Voeg kolomkoppen toe om dit op te lossen. Dit speelt ook op https://klimaatplein.uitgeest.nl/duurzame-ondernemers/.
Bevinding 12: Op https://klimaatplein.uitgeest.nl/energiebus-1/ staat onder de kop een stuk tekst in vet. Hier is het strong-element gebruikt om een heel stuk tekst nadruk te geven, dat is niet de bedoeling. Het em- en strong-element is bedoeld voor het benadrukken van kleine stukjes tekst. Maak gebruik van de stylesheet om een intro tekst in een vet lettertype te tonen. Dit speelt ook op https://klimaatplein.uitgeest.nl/beleid-en-documenten/ (onder de kop Opwarming van de aarde).
Bevinding 13: Op https://klimaatplein.uitgeest.nl/inspiratieverhalen/kringlooplandbouw/ is een lijst aanwezig, maar is niet als een lijst opgemaakt. Het is voor hulpsoftware belangrijk dat structuur en semantiek correct gebruikt wordt. Maak de lijst op als een genummerde lijst.
Bevinding 14: De PDF "https://klimaatplein.uitgeest.nl/fileadmin/buch/Ambitiedocument_Programma_Klimaat_2020.08.13.pdf" is niet gecodeerd (van tags voorzien). Dit betekent dat er de documentstructuur niet is te bepalen. Software kan daardoor bijvoorbeeld niet bepalen wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en ALT-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Bevinding 15: Niet alle zaken zijn correct getagd in de PDF https://klimaatplein.uitgeest.nl/fileadmin/buch/Isolatieprogramma_BCH.pdf, zoals het logo in de voettekst of subkoppen van het niveau "2.2.1. Van aardgasvrij in 2050 naar aantal isolatie-ingrepen". Ook zijn de koppen in hoofdstuk 5 en subkoppen zoals in "6.2. Programmalijn A – Ondersteunende activiteiten" als zodanig niet aangeduid. Zorg dat deze zaken correct getagd zijn.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 16: In de PDF op pagina https://klimaatplein.uitgeest.nl/fileadmin/buch/Isolatieprogramma_BCH.pdf wordt in kaarten en grafieken enkel op kleur gesteund, bijvoorbeeld op pagina 12. Gebruik naast kleur ook patronen om het verschil tussen de lijnen uit de legenda duidelijker te maken, zodat deze informatie toegankelijker is voor kleurenblinden. Dit geldt ook voor de grafieken in de PDF op pagina https://klimaatplein.uitgeest.nl/fileadmin/buch/Ambitiedocument_Programma_Klimaat_2020.08.13.pdf.
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 17: De volgende kleurencombinaties in de PDF op pagina https://klimaatplein.uitgeest.nl/fileadmin/buch/Ambitiedocument_Programma_Klimaat_2020.08.13.pdf geven problemen: geel (HEX #FDB912) en wit (contrastverhouding van 1,7:1), lichtblauw (HEX #84BAD0) en wit (contrastverhouding van 2,1:1), roze (#D57667) en wit (contrastverhouding van 3,2:1) plus groen (HEX #3EA068) en wit (contrastverhouding van 3,3:1) scoren onder de vereiste contrastverhouding voor gewone tekst (4,5:1) en grote tekst (3:1). Grote tekst wordt gedefinieerd als 18pt (24 CSS-pixels) met een normaal lettertypegewicht of 14pt (18,67 CSS-pixels) vette tekst (font-weight minstens 700).
1.4.5 Afbeeldingen van tekst (Niveau AA)
Informatie over succescriterium 1.4.5 Afbeeldingen van tekst
Uitkomst: Onvoldoende
Bevinding 18: Op pagina https://klimaatplein.uitgeest.nl/subsidie-klimaat/ staat een afbeelding met tekst, een tabel 'Subsidie Klimaatadaptatie'. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 19: De volgende kleurencombinaties in de PDF op pagina https://klimaatplein.uitgeest.nl/fileadmin/buch/Ambitiedocument_Programma_Klimaat_2020.08.13.pdf voor pictogrammen en illustraties geven problemen: geel (HEX #FDB912) en wit (contrastverhouding van 1,7:1), lichtblauw (HEX #84BAD0) en wit (contrastverhouding van 2,1:1) scoren onder de vereiste contrastverhouding van 3:1.
2. Bedienbaar
2.4 Navigeerbaar
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 20: De PDF op pagina https://klimaatplein.uitgeest.nl/fileadmin/buch/Ambitiedocument_Programma_Klimaat_2020.08.13.pdf heeft een documenttitel in de eigenschappen maar in de eigenschappen staat ingesteld dat de Bestandsnaam wordt getoond. Zorg dat niet de bestandsnaam maar de Documenttitel wordt getoond.
2.4.4 Linkdoel (in context) (Niveau A)
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Onvoldoende
Bevinding 21: De link naar de video op pagina https://klimaatplein.uitgeest.nl/kringloop-brengpunt/ bevat enkel een foto en geen linktekst. De foto heeft geen alternatieve tekst die de afbeelding beschrijft en daarmee de link linktekst geeft. Er is wel een title-attribuut aanwezig, maar het title-attribuut wordt niet door alle browsers en hulpsoftware even goed ondersteund en is daarom geen vervanging voor linktekst. Ook is de tekst 'Verwijst naar een externe website' geen beschrijving van het linkdoel. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Verzorg een linktekst of geef de afbeelding een alt-attribuut.
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 22: In de footer op elke pagina staat een link (Thermometer van je toekomst) dat in het title-attribuut aangeeft dat de link een externe website opent. Deze informatie wordt niet doorgegeven aan screenreadergebruikers omdat het title-attribuut overschreven wordt door de linktekst en het bijbehorende icoon geen alternatieve tekst heeft. Pas de linktekst aan (door een span element toe te voegen die visueel verborgen wordt) om deze informatie aan hulpsoftware door te geven.
Bevinding 23: De social media-knoppen om te delen op https://klimaatplein.uitgeest.nl/test hebben enkel een toegankelijke naam/linktekst door het title-attribuut. Het title-attribuut wordt niet door alle browsers en hulpsoftware even goed ondersteund en is daarom geen vervanging van het alt-attribuut of linktekst. Geef elk pictogram passende alt-tekst of verzorg linktekst.
Bevinding 24: Wanneer er iets wordt ingevuld in de zoekfunctie dan komt er een kruisje bij te staan om de zoekopdracht te wissen. Dit kruisje heeft geen toegankelijke naam.
Bevinding 25: Externe links hebben een title-attribuut aangeeft dat de link een externe website opent. Deze informatie wordt niet doorgegeven aan screenreadergebruikers omdat het title-attribuut overschreven wordt door de linktekst en het bijbehorende icoon geen alternatieve tekst heeft. Pas de linktekst aan (bijvoorbeelddoor een span element toe te voegen die visueel verborgen wordt) om deze informatie aan hulpsoftware door te geven. Dit probleem speelt op https://klimaatplein.uitgeest.nl/kringloop-brengpunt/, https://klimaatplein.uitgeest.nl/subsidie-klimaat/, https://klimaatplein.uitgeest.nl/tuin/groen-dak/, https://klimaatplein.uitgeest.nl/inspiratieverhalen/kringlooplandbouw/, https://klimaatplein.uitgeest.nl/beleid-en-documenten/, https://klimaatplein.uitgeest.nl/verhuizen-en-verbouwen/andere-financieringen/
Bevinding 26: De link naar de video op pagina https://klimaatplein.uitgeest.nl/kringloop-brengpunt/ bevat enkel een foto en geen linktekst. De foto heeft geen alternatieve tekst die de afbeelding beschrijft en daarmee de link linktekst geeft. Er is wel een title-attribuut aanwezig, maar het title-attribuut wordt niet door alle browsers en hulpsoftware even goed ondersteund en is daarom geen vervanging voor linktekst. Verzorg linktekst of geef de afbeelding een alt-attribuut.
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://klimaatplein.uitgeest.nl/ - 404-pagina:
https://klimaatplein.uitgeest.nl/test - Zoekresultaten:
https://klimaatplein.uitgeest.nl/zoeken?q=wet - Video:
https://klimaatplein.uitgeest.nl/kringloop-brengpunt/ - Thema's:
https://klimaatplein.uitgeest.nl/tuin - Infographic:
https://klimaatplein.uitgeest.nl/subsidie-klimaat/ - Groen dak:
https://klimaatplein.uitgeest.nl/tuin/groen-dak/ - Energiebus:
https://klimaatplein.uitgeest.nl/energiebus-1/ - Groen dak:
https://klimaatplein.uitgeest.nl/inspiratieverhalen/groen-dak-biedt-gezellig-uitzicht/ - Lokaal voedsel:
https://klimaatplein.uitgeest.nl/inspiratieverhalen/kringlooplandbouw/ - Duurzame ondernemers:
https://klimaatplein.uitgeest.nl/duurzame-ondernemers/ - Pagina PDF's:
https://klimaatplein.uitgeest.nl/beleid-en-documenten/ - PDF 1:
https://klimaatplein.uitgeest.nl/fileadmin/buch/Ambitiedocument_Programma_Klimaat_2020.08.13.pdf - PDF 2:
https://klimaatplein.uitgeest.nl/fileadmin/buch/Isolatieprogramma_BCH.pdf - Andere financieringen:
https://klimaatplein.uitgeest.nl/verhuizen-en-verbouwen/andere-financieringen/ - Klimaatburgemeesters:
https://klimaatplein.uitgeest.nl/inspiratieverhalen/klimaatburgemeesters/
Ondersteunende technieken
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.