Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Klimaatadaptatie Provincie Noord-Brabant

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Klimaatadaptatie Provincie Noord-Brabant
Datum 20 juni 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op klimaatadaptatiebrabant.nl
  • Alle PDF's op klimaatadaptatiebrabant.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: 81

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: Het logo van 'Provincie Noord-Brabant Hét platform voor klimaatadaptatie' op elke pagina heeft wel een alternatieve tekst 'logo', maar bevat niet de organisatienaam. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie en eventuele overige tekst in de afbeelding bevatten.

Bevinding 2: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staat een iframe met daarin een webpagina met rechtsboven een niet geladen afbeelding die linkt naar www.brabant.nl. Deze afbeelding heeft geen alternatieve tekst. De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten. Als de afbeelding als link dient kan er ook een beschrijvend linkdoel aan de alternatieve tekst toegevoegd worden.

Bevinding 3: Bij de verplichte velden in het formulier op pagina klimaatadaptatiebrabant.nl/contact staat een sterretje (*). Hulpsoftware leest dit niet altijd voor. Zorg voor een alternatieve tekst, of maak op een andere manier duidelijk welke velden verplicht zijn, bijvoorbeeld door een tekst boven het formulier te plaatsen “Alle invoervelden zijn verplicht”.

Bevinding 4: Op pagina klimaatadaptatiebrabant.nl/voorbeelden/overzicht staat een aantal iconen in een legenda. Deze afbeeldingen hebben geen tekst-alternatief en dit is ook niet nodig omdat het om een decoratieve afbeelding gaat. Maar de afbeelding heeft wel een leeg alt-attribuut (alt="") nodig, zodat hulpsoftware weet dat de afbeelding genegeerd kan worden.

Bevinding 5: Op pagina klimaatadaptatiebrabant.nl/actueel/landingspagina staan nieuwsberichten die bestaan uit een afbeelding, een kopje en een ‘lees meer’ link. Alle afbeeldingen zijn voorzien van alternatieve teksten die vaak onzinnig zijn of de onderstaande koptekst herhalen. Deze afbeeldingen zijn duidelijk decoratief omdat ze niets toevoegen aan de inhoud van het bericht. Laat de alt-attributen van deze afbeeldingen leeg om ze voor hulpsoftware te verbergen. Hiermee wordt ook de bevinding onder 1.3.2 opgelost.

Bevinding 6: Op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht staan afbeeldingen met onnodige alternatieve teksten. Bijvoorbeeld een afbeelding van betonnen blokken heeft de alternatieve tekst 'Bouwstenen klimaatadaptatie in omgevingsvisies.jpg'. Door de afbeelding als informatief aan te merken, valt deze bevinding ook onder 1.3.2 - Betekenisvolle volgorde.

Bevinding 7: Het probleem van decoratieve afbeeldingen met onnodige alt-teksten komt op meer plaatsen in de website voor. Bijvoorbeeld op de homepagina heeft een afbeelding in de carrousel boven aan de pagina de toegankelijke naam 'Zundert 5.jpg' en op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/hulpmiddelen-detail/526/Planologische-en-juridische-instrumenten-voor-klimaatbestendige-bedrijventerreinen-in-Oost-Brabant staat een afbeelding met de toegankelijke tekst 'Veldhoven - F Macke.png'.

Bevinding 8: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staat onder het tabblad 'Introductie' een afbeelding met tekst '7 ambities voor een waterrobuuste ...' en de afbeelding met de tekst 'wateroverlast, hitte, droogte en overstroming'. Deze afbeeldingen hebben een leeg alt-attribuut, terwijl ze informatief zijn. Voeg een alternatieve tekst toe om dit probleem op te lossen. Hetzelfde komt vaker in de website voor, op de pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staan onder andere drie foto's met teksten daaronder en een legenda van de kleuren van een kaart met tekst.

Bevinding 9: Op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht staan in de linker zijkolom onder 'Type' een aantal iconen die doormiddel van het pseudo-element ::before en de content property in de CSS op de pagina zijn gezet. Sommige hulpsoftware leest de gebruikte speciale karakters voor. NVDA leest het eerste icoon als 'Moersleutel'. Dit kan verwarrend zijn. Een oplossing kan zijn om het icoon in de html te plaatsen, bijvoorbeeld als img-element met een leeg alt-attribuut.

Bevinding 10: Op pagina https://www.klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht heeft elk hulpmiddel een icoontje om het type aan te geven. Dit icoontje staat rechts tegenover het kopje van het hulpmiddel. Deze iconen hebben betekenis: leesmateriaal, online studie, etc. Deze informatie is niet aan een blinde bezoeker doorgegeven omdat deze iconen geen tekstalternatief hebben. Verplaats deze iconen uit de pseudo-elementen naar HTML-elementen en geef ze een alt-attribuut met correcte waarde. Andere oplossignen zijn mogelijk.

Bevinding 11: Op pagina klimaatadaptatiebrabant.nl/ik-ben-professional/landingspagina staan blokken met informatie met daarboven een afbeelding met een aantal iconen om schaalniveaus aan te geven. Wat de iconen betekenen is te vinden in de legenda. Blinden kunnen de iconen en de legenda niet zien. De informatie over het schaalniveau moet ook beschikbaar zijn voor blinden. De iconen zijn afbeeldingen zonder alt attribuut. Geef de iconen een alternatieve tekst door middel van een alt attribuut of op een andere manier om het schaalniveau aan te geven.

Bevinding 12: Op pagina klimaatadaptatiebrabant.nl/k/n442/news/view/4757/2775/extreem-weer-leidde-in-2022-tot-recordschade-van-886-miljoen-euro.html staat een infographic met tekst 'Schade door extreem weer'. Blinden kunnen de gegevens in dit figuur niet waarnemen. Plaats deze gegevens daarom bijvoorbeeld in een (verborgen) tabel op de pagina. Verander de alt-tekst van “Schade door extreem weer” naar “De uitgeschreven tekst staat onder de afbeelding”.

Bevinding 13:
Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staat een afbeelding met tekst. Alle afbeeldingen met tekst zijn informatief en hebben een tekstalternatief nodig. Boven deze afbeelding staat tekst: “In de afbeelding hieronder wordt het verschil tussen deze drie begrippen uitgelegd”, terwijl de afbeelding verborgen is voor hulpsoftware met een leeg alt-attribuut. Zorg voor de uitgeschreven tekst zodat een blinde gebruiker geen informatie mist.

1.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 14: Op pagina klimaatadaptatiebrabant.nl/voorbeelden/voorbeelden-detail/221/Waterbestendig-Sportpark-De-Neul wordt een video getoond. De video bevat een ondertiteling die niet exact overeenkomt met wat er gezegd wordt in de video. Op een aantal plekken staan onjuiste woorden, bijvoorbeeld op 0:33 minuten
'het slechte velden zijn wel de die al bij lichte regen bal'. Zorg dat de ondertiteling dezelfde informatie weergeeft als gezegd wordt in de video.

Bevinding 15: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater wordt een video vertoond. In de video komt gesproken woord voor, maar de ondertiteling ontbreekt. Zorg ervoor dat mensen met een auditieve beperking ook weten welke informatie in het audiospoor voorkomt door een ondertiteling aan de video toe te voegen.

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

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

Uitkomst: Onvoldoende

Bevinding 16: Op pagina klimaatadaptatiebrabant.nl/voorbeelden/voorbeelden-detail/221/Waterbestendig-Sportpark-De-Neul is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:22. Het gaat hier om de naam van een persoon die begint te spreken. Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5.

Bevinding 17: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staat een video waar het logo van de provincie Noord-Brabant aan het begin en eind in beeld komt. Als je dat niet kan zien mis je dat dit een video van de provincie is. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voiceover waardoor de audiodescriptie overbodig wordt.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 18: Op pagina klimaatadaptatiebrabant.nl/voorbeelden/voorbeelden-detail/221/Waterbestendig-Sportpark-De-Neul is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:22. Het gaat hier om de naam van een persoon die begint te spreken. Er ontbreekt een voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien niet weten wat er wordt getoond in de video. Maak voor deze en andere informatie gebruik van een extra audiospoor.

Bevinding 19: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staat een video waar het logo van de provincie Noord-Brabant aan het begin en eind in beeld komt. Als je dat niet kan zien mis je dat dit een video van de provincie is. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voiceover waardoor de audiodescriptie overbodig wordt.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 20: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staan vier tabbladen die zijn opgemaakt als items in een lijst. De lijst items hebben een role='presentation' waardoor ze niet langer lijstitems zijn. Hulpsoftware kan daardoor de lijst niet goed voorlezen. Verwijder deze aria-code.

Bevinding 21: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staat onder 'Effect op de grondwaterstand in het voorjaar (GVG):' een groep selectievakjes (checkboxes). Boven deze groep staat de tekst 'Doel bereikt: stijgt met 10 of 35 cm als drinkwaterwinning '. Deze tekst is nu niet gekoppeld aan de groep selectievakjes. Gebruik een combinatie van fieldset en legend of een andere vergelijkbare techniek om dit probleem op te lossen. Dit probleem komt op meerdere plaatsen voor in deze pagina.

Bevinding 22: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater is bijvoorbeeld de zin ‘Wat zijn de oplossingsrichtingen om het grondwater te laten stijgen en waar hebben stijgingen effect?’ opgemaakt met het em-element. Het em-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Daarom mag dit element niet worden gebruikt voor de opmaak van tekst. Hetzelfde komt vaker in de website voor, bijvoorbeeld op dezelfde pagina de zin 'Wat zie je in de kaartmodule?'.

Bevinding 23: Op pagina https://www.klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater zijn koppen opgemaakt met het strong-element, bijvoorbeeld 'Verschil tussen droog weer, droogte en verdroging' of 'Onttrekkingen kunnen leiden tot natuurschade'. Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Ook mag dit element niet worden gebruikt als visuele kop, omdat het niet dezelfde betekenis heeft als een kop (bijvoorbeeld h2 of h3).

Bevinding 24: Op de pagina www.klimaatadaptatiebrabant.nl/ik-ben-een-inwoner/subsidie-overzicht staat een datatabel. De koppen in deze tabel zijn opgemaakt met het strong-element, in plaats van met het th-element. Daardoor is de relatie tussen de koppen en datacellen voor screenreadergebruikers niet duidelijk. Zorg ervoor dat tabellen goed zijn opgemaakt en gebruik voor tabelkoppen altijd het th-element.

Bevinding 25: De PDF 'Planologische en juridische instrumenten voor klimaatbestendige bedrijventerreinen in Oost-Brabant' is niet gecodeerd (van tags voorzien). Dit betekent dat er de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriterium 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 26: Advies: De koppenstructuur, bijvoorbeeld op de homepagina is niet logisch. Er zijn 4 koppen van niveau 1 en de kop niveau 2 'Samen maken we Brabant klimaatbestendig!' is ne een onderdeel van de kop niveau 1 'Veldhoven vangt water op in klimaatadaptief pilotproject Hoogepat'. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Gebruikelijk is om te beginnen met kop niveau 1 met de titel van de pagina en steeds één kop niveau lager te nemen. Zorg voor een logische koppenstructuur. Dit geldt voor elke pagina op de website.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 27: Op pagina klimaatadaptatiebrabant.nl/actueel/landingspagina staan nieuwsberichten die bestaan uit een afbeelding, een kopje en een ‘lees meer’ link. Alle afbeeldingen zijn voorzien van alternatieve teksten. De alternatieve teksten worden alleen aan informatieve afbeeldingen gegeven. Voor de informatieve afbeeldingen is de volgorde van content belangrijk. In de HTML zou zo’n afbeelding onder de koptekst moeten staan. Laat de alt-attributen van deze afbeeldingen leeg om ze voor hulpsoftware te verbergen.
Dit probleem komt op meerdere plekken voor.

Bevinding 28: Op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht staan afbeeldingen met onnodige alternatieve teksten. Bijvoorbeeld een afbeelding van betonnen blokken heeft de alternatieve tekst 'Bouwstenen klimaatadaptatie in omgevingsvisies.jpg'. Laat hier de alt-attributen leeg.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 29: Op elke pagina in het hoofdmenu is een roze tekst (HEX #FBE5E5) op een rode achtergrond (HEX #DD0000). Deze tekst heeft een te laag contrast. De contrastverhouding is 4,3:1 waar dit 4,5:1 moet zijn.

Bevinding 30: Als het formulier op pagina https://www.klimaatadaptatiebrabant.nl/contact verzonden wordt, terwijl nog niet alle verplichte velden ingevuld zijn, verschijnt er een foutmelding 'Dit veld is verplicht' in rode tekst (HEX #E62424) op licht grijze achtergrond (HEX #F9F9F9). Deze tekst heeft een te laag contrast. De contrastverhouding is 4,3:1 waar dit 4,5:1 moet zijn. Deze rode tekstkleur (#e62424) is gebruikt in sterretjes om aan te geven dat invoervelden verplicht zijn. Deze sterretjes zijn als tekst toegevoegd en moeten daarom voldoen aan de minimale contrasteisen die voor tekst gelden.

Bevinding 31: Bovenaan veel pagina's is een kruimelpad, bijvoorbeeld op pagina klimaatadaptatiebrabant.nl/voorbeelden/voorbeelden-detail/221/Waterbestendig-Sportpark-De-Neul. Het contrast van de grijze tekst 'Voorbeelden' en 'Voorbeelden' (HEX ##828282) op de lichtgrijze achtergrond (HEX ##F9F9F9) is te laag. De contrastverhouding is 3,7:1 waar dit minstens 4,5:1 moet zijn. Ook de contrastverhouding van de tekst 'Waterbestendig Sportpark De Neul' die iets donkerder is (HEX #757575) op dezelfde achtergrond is te laag, 4,4 waar dit minstens 4,5 moet zijn.

Bevinding 32: Op de zoekresultaten pagina klimaatadaptatiebrabant.nl/zoeken?q=water staan de volledige links naar de pagina's in groene tekst (HEX #008B00) op lichte achtergrond (HEX #F9F9F9). Deze tekst heeft een te laag contrast. De contrastverhouding is 4,3:1 waar dit minstens 4,5:1 moet zijn.
Op de pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staan een aantal roze tabbladen (HEX #FFBFBF) met grijze tekst (HEX #765c5c). Deze tekst heeft een te laag contrast. De contrastverhouding is 3,9:1 waar dit minstens 4,5:1 moet zijn.

Bevinding 33: Op pagina klimaatadaptatiebrabant.nl/k/n442/news/view/4757/2775/extreem-weer-leidde-in-2022-tot-recordschade-van-886-miljoen-euro.html staat onder de titel een datum. De lichtgrijze tekst (HEX #8E8E8E) op bijna witte achtergrond (HEX ##F9F9F9) heeft een te laag contrast. De contrastverhouding is 3,1:1 waar dit minstens 4,5:1 moet zijn.

Bevinding 34: Op pagina klimaatadaptatiebrabant.nl/k/n442/news/view/4757/2775/extreem-weer-leidde-in-2022-tot-recordschade-van-886-miljoen-euro.html staat boven elk artikel van 'Meer nieuws' een datum. De lichtgrijze tekst (HEX #8E8E8E) op witte achtergrond heeft een te laag contrast. De contrastverhouding is 3,3:1 waar dit minstens 4,5:1 moet zijn.

Bevinding 35: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staan afbeeldingen met tekst erop waar het kleurcontrast onvoldoende is. Zie bijvoorbeeld “Kaarten doelbereik maatregel”: 2,2:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 36: Op pagina klimaatadaptatiebrabant.nl/actueel/landingspagina staan onder 'Agenda' de data in witte tekst op blauwe achtergrond (HEX #009AD8). Deze tekst heeft een te laag contrast. De contrastverhouding is 3,2:1 waar dit minstens 4,5:1 moet zijn.

Bevinding 37: Op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/hulpmiddelen-detail/526/Planologische-en-juridische-instrumenten-voor-klimaatbestendige-bedrijventerreinen-in-Oost-Brabant staat de lichtblauwe tekst 'Gratis beschikbaar' (HEX #009DDE) op lichte achtergrond (HEX #F9F9F9). Deze tekst heeft een te laag contrast. De contrastverhouding is 2,9:1 waar dit minstens 4,5:1 moet zijn.

Bevinding 38: Op pagina https://www.klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht staan selectievakjes. Als een vakje niet in aangevinkt, heeft het een grijze rand. Het kleurcontrast is 2,2:1. Dit moet minimaal 3,0:1 zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 39: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staat onder het tabblad 'Introductie' een afbeelding met tekst '7 ambities voor een waterrobuuste ...' en de afbeelding met de tekst 'wateroverlast, hitte, droogte en overstroming'. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeeldingen komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina. Hetzelfde komt vaker op de website voor. Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staan onder andere drie foto's met teksten daaronder en een legenda van de kleuren van een kaart met tekst.

Bevinding 40: Op pagina klimaatadaptatiebrabant.nl/k/n442/news/view/4757/2775/extreem-weer-leidde-in-2022-tot-recordschade-van-886-miljoen-euro.html staat een infographic met tekst 'Schade door extreem weer'. 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.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 41: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op de homepagina een deel van de tekst buiten beeld. Bijvoorbeeld bij de tekst onder 'Samen maken we Brabant klimaatbestendig!'. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken. Vermijd overigens de scrollbalk in de leesrichting (horizontaal).

Bevinding 42: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest een deel van de content onder de onderdelen die altijd in beeld blijven staan zoals de twee headers en de tabbladen en de tabblad navigatie. Er blijft bijvoorbeeld op het tabblad 'Achtergrond klimaatstresstest' geen ruimte over om de content te kunnen lezen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 43: Op de kaart op pagina klimaatadaptatiebrabant.nl/voorbeelden/overzicht staan witte icoontjes 'Strategie/uitvoeringsagenda' op een lichtoranje achtergrond (HEX #FFA200). De contrastverhouding van de afbeelding met de achtergrond is 2:1, waar dat minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het icoon moeilijk te herkennen en te koppelen aan het zwart op witte icoon in de legenda. Maak gebruik van een kleurencombinatie met voldoende contrast.

Bevinding 44: Op de homepagina staat onder 'Uitgelicht' een carrousel. Onderin staan vier bolletjes die een link zijn waarmee de verschillende pagina's van de carrousel getoond kunnen worden. Sommige bolletjes hebben een lichtgrijze kleur, andere is rood. De afbeeldingen hebben steeds wisselende kleuren en zorgen voor onvoldoende kleurcontrast. Geeft deze bolletjes een rand om het contrast te vergroten.

Bevinding 45: De invoervelden op deze website hebben een lichtgrijze rand (#ccc). Zie bijvoorbeeld klimaatadaptatiebrabant.nl/contact. Deze kleur heeft onvoldoende kleurcontrast, namelijk 1,6:1. Dit moet minimaal 3,0:1 zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 46: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% en bezoekers de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven voor dit succescriterium dan verdwijnt op de homepagina een deel van de content buitenbeeld. Bijvoorbeeld bij de tekst onder 'Samen maken we Brabant klimaatbestendig!'. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken. Zorg ervoor dat informatie beschikbaar en leesbaar blijft, ook wanneer bezoekers een eigen tekstopmaak toepassen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 47: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staan de tabs 'Achtergrond klimaatstresstest', 'Resultaten per thema' en 'Resultaten op de kaart'. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze knoppen niet bedienen waardoor een groot gedeelte van de content voor hen niet beschikbaar is. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

2.1.2 Geen toetsenbordval (Niveau A)

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Uitkomst: Onvoldoende

Bevinding 48: Als op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest op een element onder het tabblad' Introductie' focus heeft, is het niet mogelijk om weer bij de 'Introductie' of één van de andere tabbladen terecht te komen met gebruik van de tab-toets of de shift-tab toetsencombinatie.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 49: Op de pagina https://www.klimaatadaptatiebrabant.nl/voorbeelden/voorbeelden-detail/221/Waterbestendig-Sportpark-De-Neul wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 50: 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. Elke pagina bevat wel een skiplink (een mechanisme om naar een ander deel van de pagina te springen), maar de skiplink is niet op elke pagina zichtbaar wanneer de skiplink focus heeft en het is niet de eerste link van de pagina.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 51: De PDF 'Planologische en juridische instrumenten voor klimaatbestendige bedrijventerreinen in Oost-Brabant' heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 52: Als met behulp van het toetsenbord het menu in de rechterbovenhoek geopend is verwacht je naar het eerste menu-item te gaan. In plaats daarvan krijgt het eerste actieve element in de webpagina focus. Bijvoorbeeld op de pagina klimaatadaptatiebrabant.nl/klimaatwarenhuis-detail/291/Geveltuin---foto is dat de link in het kruimelpad 'Klimaatwarenhuis'. Deze link is door het geopende menu buiten beeld. Zorg er voor dat als een venster geopend wordt de focus binnen dat venster terecht komt en daar blijft totdat het venster gesloten wordt.

Bevinding 53: Als op de voorpagina de items onder 'Nieuws uit Brabant' focus krijgen is het eerste item dat focus krijgt het onderste item en verloopt de focus volgorde van onder naar boven. Zorg voor een logische focus volgorde door de pagina van links naar rechts, van boven naar onder. Zie klimaatadaptatiebrabant.nl/.

Bevinding 54: Als op elke pagina de link 'Over ons' links in de onderste balk van de footer focus heeft is het volgende element dat focus krijgt het eerste item uit het uitklapbare menu, ook als het menu niet uitgeklapt is, ook als de menuknop niet op de pagina staat omdat het hoofdmenu zichtbaar is. Dit is verwarrend, zorg voor een logische focus volgorde.

Bevinding 55: Advies: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest komt de focus regelmatig op de knop 'Sectiekoppeling kopiëren'. Deze knop doet het niet en levert alleen een alert: 'Sorry! Oeps, dit kon niet gekopieerd worden'. Zorg er voor dat elementen die geen functie hebben geen focus kunnen krijgen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 56: Op elke pagina staat het logo van de provincie Noord-Brabant. De onderliggende link heeft geen tekst en bevat alleen een afbeelding met beschrijving “logo”. Dit is onvoldoende om deze link een linkdoel te geven. Zorg voor een duidelijk beschrijvende linktest die het doel beschrijft. Dat kan als een verborgen span-element of als een correcte alternatieve tekst van het logo.

Bevinding 57: Op de homepagina staan links met de linktekst 'Lees verder'. Vermijd linkteksten als ‘Lees verder’ 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. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina klimaatadaptatiebrabant.nl/ik-ben-een-inwoner/subsidie-overzicht bij de linktekst 'Link' en op pagina klimaatadaptatiebrabant.nl/voorbeelden/overzicht bij de linktekst 'Meer informatie' onder elke placeholder op de kaart.

Bevinding 58: Op de homepagina staat onder 'Uitgelicht' een carrousel. Onderin staan vier bolletjes die een link zijn waarmee de verschillende pagina's van de carrousel getoond kunnen worden. Deze links hebben geen tekst en daardoor geen linkdoel. Omdat de link geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk wat de link doet. Voeg een duidelijke linktekst toe om dit probleem op te lossen.

Bevinding 59: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staat een iframe met daarin een webpagina met rechtsboven een niet geladen afbeelding die linkt naar www.brabant.nl. De linktekst 'Logo link' geeft het doel van de link niet goed weer. Vermeld dat de link naar de website van de provincie Noord-Brabant gaat. Rechtsonder deze pagina staan twee links om de inhoud te delen en de inhoud in een nieuw venster te openen. Deze links hebben geen linkdoel.

Bevinding 60: Op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht staat een lijst met hulpmiddelen. Onderaan elk item staat een link naar het hulpmiddel. Deze links hebben geen naam. 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, bijvoorbeeld de titel van het hulpmiddel. Hetzelfde komt vaker afbeelding voor in de website, bijvoorbeeld in het iframe op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest bij de link naar '#n-UCVnnz' en de link naar 'https://noord-brabant.maps.arcgis.com/apps/MapSeries/index.html?appid=d5fc9f501b234e1f9f32b07be74620e2' recht onderaan de pagina.

Bevinding 61: Op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht staan blokken tekst met een afbeelding die dienen als link naar een pagina over het betreffende hulpmiddel. In de tekst kunnen links voorkomen naar andere websites, maar als een bezoeker op de link geklikt wordt toch de hulpmiddelen pagina getoond. Dit is verwarrend. De link 'rapport Bouwstenen klimaatadaptatie Omgevingsvisies' geeft niet de PDF van het rapport maar een webpagina 'Bouwstenen klimaatadaptatie in Omgevingsvisies'. Zorg er voor dat de links goed werken of laat ze weg uit de tekst. Bij navigatie met behulp van het toetsenbord gaan de links wel naar het juiste doel.

Bevinding 62: Op pagina klimaatadaptatiebrabant.nl/zoeken?q=water wordt rechts bovenaan gebruikgemaakt van paginering. De linknaam is onvoldoende voor screenreadergebruikers. Zo is de linknaam '1' bij pagina 1, '2' bij pagina 2, enzovoorts. Vul deze links aan door er het woord 'pagina ' voor te zetten. Deze tekst kan visueel verborgen worden.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Voldoende

Bevinding 63: Het volgende wordt niet afgekeurd omdat kaarten onder de uitzondering vallen. Toch kan het aanpassen van deze bevinding de toegankelijkheid van deze pagina verbeteren. Op pagina klimaatadaptatiebrabant.nl/voorbeelden/overzicht staat een kaart met knoppen in de vorm van locatie ballonnen met daarin een icoon. In de legenda staat de betekenis van het icoon, bijvoorbeeld 'uitgevoerde maatregel'. Blinden kunnen de iconen niet zien en weten nu niet bij welke categorie de knop hoort. Geef deze informatie mee, bijvoorbeeld door de categorie in de naam van de knop te verwerken.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 64: Elke pagina bevat wel een skiplink (een mechanisme om naar een ander deel van de pagina te springen), maar de skiplink is niet zichtbaar op homepagina en nieuwsberichten wanneer de skiplink focus heeft. Zorg ervoor dat ook ziende gebruikers die met het toetsenbord navigeren de skiplink kunnen bedienen.

Bevinding 65: Op elke pagina zijn de eerste 5 elementen die focus krijgen verborgen zodat niet te zien is welk element focus heeft. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door alleen zichtbare elementen focus te geven.

Bevinding 66: Als op de homepagina de carrousel 'Uitgelicht' focus heeft kunnen elementen die niet in beeld zijn focus krijgen. Het is dan niet zichtbaar welk element in de webpagina focus heeft. Zorg er voor dat alleen zichtbare elementen focus hebben.

Bevinding 67: Op pagina klimaatadaptatiebrabant.nl/voorbeelden/overzicht is het niet zichtbaar als de selectievakjes onder 'Legenda' focus hebben. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://www.klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht bij de selectievakjes onder 'Type' en 'Thema'.

Bevinding 68: Als op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest het tabblad 'Introductie' 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.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 69: Op elke pagina staat links boven het logo van de provincie Noord-Brabant. De onderliggende link heeft geen naam en is hierdoor niet te bedienen met spraaksoftware. Indien de tekst op dit logo wordt toegevoegd aan de naam van deze link is het mogelijk om de visuele tekst op het logo te gebruiken om deze link te bedienen.

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 70: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest staat een iframe met daarin een website 'Klimaatstresstest provincie Noord-Brabant'. De taalaanduiding van de pagina in deze website is Engels terwijl de site Nederlandstalig is. Zorg voor de juiste taalcodering in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest. Hetzelfde probleem komt op meerdere plaatsen voor in de website, bijvoorbeel op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 71: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staat bijvoorbeeld onder 'Effect op de grondwaterstand in het voorjaar (GVG):' een groep selectievakjes (checkboxes). Zodra een checkbox is aangevinkt, bijvoorbeeld '50% minder wordt' ververst de pagina direct en komt de focus op de eerste checkbox 'helemaal stopt'. Dit is verwarrend en mogelijk desoriënterend voor sommige bezoekers. Maak gebruik van een knop waarmee bezoekers zelf het filteren controleren of gebruik asynchrone JavaScript-functionaliteit die de selectie aanpast. Gebruik bij dit laatste ook een "live-region" waar je aan de bezoeker duidelijk maakt dat er iets is gewijzigd (via hulpsoftware). Dit probleem komt op meerdere plaatsen voor in deze pagina.

Bevinding 72: Het aanvinken van selectievakjes leidt tot een contextwijziging op pagina https://www.klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht. Na het aanvinken van een checkbox verandert de inhoud van de pagina. Dit mag alleen als een bezoeker van tevoren wordt gewaarschuwd.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 73: Op pagina klimaatadaptatiebrabant.nl/contact staat een formulier. Wanneer bezoekers een formulierveld niet of niet goed invullen, verschijnt de foutmelding 'Dit veld is verplicht'. Een goede foutidentificatie vermeldt welke fout gemaakt is en waar de fout gemaakt is. Bijvoorbeeld 'Het veld naam is niet ingevuld’.

Bevinding 74: Het formulier op pagina https://www.klimaatadaptatiebrabant.nl/contact maakt in het invoerveld 'E-mailadres' alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan de tekst grootte niet aangepast worden zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 75: Op pagina www.klimaatadaptatiebrabant.nl/contact is een formulier waar bij de verplichte velden een * wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een sterretje (*) zijn verplicht'.

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 76: Op pagina klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht#content staat een extra zoekveld om hulpmiddelen te zoeken. Het veld heeft geen toegankelijke naam. Een bezoeker die gebruikmaakt van een screenreader krijgt niet te horen om welk veld het gaat. Geef dit veld een naam bijvoorbeeld door middel van aria-label.

Bevinding 77: Op pagina www.klimaatadaptatiebrabant.nl/hulpmiddelen/overzicht staat een lijst met hulpmiddelen. Onder aan elk item staat een link naar het hulpmiddel. Deze links hebben geen naam. Omdat de link geen naam 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, bijvoorbeeld de titel van het hulpmiddel. Hetzelfde komt vaker voor in de website, bijvoorbeeld in het iframe op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest bij de link naar '#n-UCVnnz'.

Bevinding 78: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest is een website via een iframe geplaatst. Daar ontbreekt het title-attribuut. Plaats het title-attribuut in dit iframe met een goede omschrijving van de inhoud van het iframe, bijvoorbeeld "Klimaatstresstest provincie Noord-Brabant". Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater.

Bevinding 79: Op pagina klimaatadaptatiebrabant.nl/klimaatverhalen/grondwater staan meerdere afbeeldingen in een div met role='button', bijvoorbeeld een afbeelding over droog weer, droogte en verdroging. Deze knoppen hebben geen naam. Een bezoeker die gebruik maakt van een screenreader krijgt niet te horen wat er gebeurt als op de knop geklikt wordt. Geef de knop een toegankelijke naam, bijvoorbeeld door middel van aria-label. Hetzelfde komt vaker voor op de website, bijvoorbeeld bij afbeeldingen op de pagina klimaatadaptatiebrabant.nl/klimaatverhalen/klimaatstresstest.

Bevinding 80: Op de homepagina staat onder 'Uitgelicht' een carrousel. Onderin staan vier bolletjes die een link zijn waarmee de verschillende pagina's van de carrousel getoond kunnen worden. Deze links hebben geen naam. Voeg een duidelijke linktekst toe om dit probleem op te lossen.

Bevinding 81: Als het formulier op pagina https://www.klimaatadaptatiebrabant.nl/contact verzonden wordt terwijl nog niet alle verplichte velden ingevuld zijn, verschijnt er boven het formulier een foutmelding. Deze foutmelding kan worden afgesloten met een knop met een kruisje erop. Deze knop heeft geen juiste rol om aan hulpsoftware te vertellen dat dit een knop is. Gebruik hier een standaard HTML element ‘button’. Er zijn andere oplossingen mogelijk.

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: 2024-11-22 15:52:37 v2.4-011