Issues:
Audit digitale toegankelijkheid website De Toekomst van Brabant

(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: Op pagina https://detoekomstvanbrabant.nl/podcast/ staat een afbeelding met de tekst 'Koffiedik Kijken. De Toekomst van Brabant. Podcast.'. Deze afbeelding heeft geen alternatieve tekst en dit is ook niet nodig omdat de tekst op de afbeelding elders op de pagina staat. Maar de afbeelding heeft wel een leeg alt-attribuut (alt="") nodig, zodat hulpsoftware weet dat de afbeelding genegeerd kan worden. Hetzelfde komt op meer plaatsen in de website voor, bijvoorbeeld op pagina https://detoekomstvanbrabant.nl/traineepogramma/ bij de foto bij 'Waarom data trainee worden?'.

Bevinding 2: Op pagina https://detoekomstvanbrabant.nl/contact/ staat afbeelding van envelopjes die linken naar het e-mail adres van de contactpersoon. Het icoon wordt door middel van het pseudo-element :before en de content property in de CSS op de pagina gezet. Op deze manier kan het zijn dat het icoon wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. De content property is alleen geschikt voor het toevoegen van puur decoratieve content. Een oplossing kan zijn om het icoon in de html te plaatsen, bijvoorbeeld als img-element of svg met tekst-alternatief.

Bevinding 3: Op pagina https://detoekomstvanbrabant.nl/vacaturegeneralisten/ staan drie afbeeldingen van punten op een dobbelsteen om de drie onderdelen van de selectie aan te geven. Daf afbeeldingen zijn verborgen voor hulpsoftware en mensen die een eigen css gebruiken bij het bekijken van de website, omdat ze doormiddel van css als achtergrond aan een div zijn toegevoegd. Zorg dat zichtbare informatie ook voor blinden beschikbaar is. Een oplossing kan zijn om de afbeeldingen in de html te plaatsen als img-element met tekst-alternatief. Hetzelfde komt vaker voor op de website, bijvoorbeeld op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/ bij de afbeeldingen van de drie opleidingsfasen.

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)

Bevinding 4: Op de homepagina wordt een video getoond. Deze video heeft een automatisch gegenereerde ondertiteling. Op een aantal plekken staan onjuiste woorden. Bijvoorbeeld op 1:47 'en aan giechel aan zijn die zitten'. Ook ontbreekt de interpunctie waardoor de zinnen moeilijk te begrijpen zijn. Maak een goede ondertiteling. Hetzelfde komt in meer video's op de website voor, bijvoorbeeld in de video op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/ op 0:31: 'Waardigheden'.

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

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

Bevinding 5: Op de homepagina is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 1:46 en 2:40. 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 6: De video op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/ is niet te volgen voor mensen die de video niet kunnen zien. Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm te zien is. 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.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 7: Op de homepagina is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 1:46 en 2:40. 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 8: De video op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/ is niet te volgen voor mensen die de video niet kunnen zien. Er ontbreekt een voiceover die vertelt wat er op het scherm te zien is. 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.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 9: Op pagina https://detoekomstvanbrabant.nl/traineepogramma/ staan een aantal veelgestelde vragen in een div met de rol tablist. Een tablist is een lijst met tab elementen die elk geassocieerd is met een tabpanel door middel van aria-labelledby. Een tabpanel kan geen direct child zijn van een tablist zoals hier het geval is. Zorg voor een correct gebruik van ARIA code.

Bevinding 10: Op pagina https://detoekomstvanbrabant.nl/vacaturegeneralisten/ zijn zinnen/koppen opgemaakt met het b-element, bijvoorbeeld 'Wat ga je doen?'. Dit element mag niet worden gebruikt als visuele kop, omdat het niet dezelfde betekenis hebben als een kop (bijvoorbeeld h2 of h3).

Bevinding 11: Op pagina https://detoekomstvanbrabant.nl/trainees-op-bezoek-bij-waterschap-aa-en-maas/ zijn zinnen/koppen opgemaakt met het strong-element, bijvoorbeeld 'Het werkbezoek'. Het strong- en em-element zijn bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Ook mogen deze elementen niet worden gebruikt als visuele kop, omdat ze niet dezelfde betekenis hebben als een kop (bijvoorbeeld h2 of h3). Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://detoekomstvanbrabant.nl/even-gluren-bij-de-buren/.

Bevinding 12: Op de homepagina staan onder de kop van niveau 2 'Podcasts en blogs' drie koppen van niveau 4, onder andere de kop 'Sitemap'. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Nu lijkt het of Sitemap een onderdeel van 'Podcasts en blogs' is, sitemap moet een kop van niveau 2 zijn. Zorg voor een goede koppenstructuur die de hiërarchie van de inhoud van de pagina goed weer geeft en waarbij geen kopniveaus worden overgeslagen. Hetzelfde komt op meer pagina's in de website voor, bijvoorbeeld op pagina https://detoekomstvanbrabant.nl/blog/ waar de kop 'Sitemap' onder 'Beukenhof' valt.

Bevinding 13: Op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/ staan onder het kopje “Een greep uit de trainingen” zes titels van de cursussen. Er staat geen content onder deze titels. Tocht zijn ze als kopjes van niveau 4 opgemaakt. Dit kan verwarrend zijn voor een blinde gebruiker die content onder een kopje verwacht. Verander deze h4 elementen in p-elementen of gebruik een lijst (ul en li).

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 14: Op pagina https://detoekomstvanbrabant.nl/solliciterendata/ is een formulier waar de bezoeker onder andere het eigen e-mailadres kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 15: De link in de lopende tekst op pagina https://detoekomstvanbrabant.nl/fout met de linktekst 'hier', is alleen herkenbaar doordat hij een andere kleur heeft. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk niet herkennen dat het om links gaat. Zorg ervoor dat hyperlinks in lopende tekst ook herkenbaar zijn aan minimaal één andere eigenschap, bijvoorbeeld door ze te onderstrepen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 16: Op veel pagina's, bijvoorbeeld op de homepagina onder 'Traineeprogramma overheid' is een grijze tekst (HEX #8D8D8D) op een lichtgrijze achtergrond (HEX #EEEEEE). Deze tekst heeft een te laag contrast. De contrast verhouding is 2,9:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 17: Op de pagina https://detoekomstvanbrabant.nl/contact/ is een rode tekst (HEX #E63737) op een lichtgrijze achtergrond (HEX #EEEEEE). Deze tekst heeft een te laag contrast. De contrast verhouding is 3,6:1 waar dit minimaal 4,5:1 moet zijn. Hetzelfde geldt voor de witte tekst op rode achtergrond in de knop 'Solliciteren'. Deze kleurencombinatie komt vaker voor in de website, bijvoorbeeld op pagina https://detoekomstvanbrabant.nl/vacaturegeneralisten/.

Bevinding 18: Op de pagina https://detoekomstvanbrabant.nl/traineepogramma/ is een rode tekst 'Lees meer' (HEX #E63737) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrast verhouding is 4,2:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 19: Als het formulier op pagina https://detoekomstvanbrabant.nl/solliciterendata/ niet volledig is ingevuld verschijnen er foutmeldingen in rode tekst- (HEX #DC3232) op grijze achtergrond (HEX#0C2C30). Deze tekst heeft een te laag contrast. De contrast verhouding is 3,2:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 20: Op de homepagina is het contrast van de grijze tekst (HEX #333333) op de grijze achtergrond (HEX #0C2C30) op de knop 'Blog's' te laag als de knop toetsenbordfocus heeft. De contrastverhouding is hier 1,2:1, waar dit minimaal 3:1 moet zijn.

Bevinding 21: Het contrast van de grijze menu-items (HEX #A4A4A4) op de witte achtergrond op elke pagina is te laag als je er met je muis overheen gaat (hover). De contrastverhouding is hier 2,5:1, waar dit minimaal 3:1 moet zijn.

Bevinding 22: Advies: In de footer van elke pagina heeft de tekst van de links op de roze achtergrond (HEX ##FFF2F0) een te laag contrast. In de code staat een contrastrijke kleur (HEX #0F373C) maar omdat het font een erg dunne lijn heeft is in de praktijk de kleur een stuk lichter door het anti-alias algoritme van de Chrome browser en in mindere mate de Firefox browser. Als niet wordt ingezoomd is in Chrome de contrastverhouding rond de 2:1 waar dit minimaal 4,5:1 moet zijn. Omdat het mogelijk is om de tekst te vergroten waarbij de juiste contrastwaarden gehaald kunnen worden is dit een advies. Overweeg om een font met een dikkere lijn te gebruiken.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 23: Wanneer bij een schermgrootte van1280x1024px ingezoomd wordt tot 400%dan verdwijnt op elke pagina in de footer een deel van het e-mail adres 'detoekomstvanbrabant@brabant.nl' buiten beeld, dat gebeurt ook bij de hoofdcontent van pagina https://detoekomstvanbrabant.nl/contact/. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken. Vermijd overigens de scrollbalk in de leesrichting (horizontaal).

Bevinding 24: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan verdwijnt op pagina https://detoekomstvanbrabant.nl/traineepogramma/ de tekst onder 'Herken jij jezelf hierin?' in de achtergrond die dezelfde kleur heeft. Zorg ervoor dat tekst altijd leesbaar blijft en vermijd een scrollbalk in de leesrichting (horizontaal).

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 25: Op de homepagina staat een afbeelding die linkt naar een Instagram post met de tekst 'Lever jou bijdrage aan de Brabantse samenleving ...' 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. Hetzelfde geldt voor de twee afbeeldingen met ernaast tekst ernaast die ook linken naar Instagram.

Bevinding 26: Op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/ staan de drie fasen van de opleiding als tekst afgebeeld. 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

Bevinding 27: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina https://detoekomstvanbrabant.nl/traineepogramma/ de tekst onder 'Herken jij jezelf hierin?' in de achtergrond die dezelfde kleur heeft. Zorg ervoor dat tekst altijd leesbaar blijft en vermijd een scrollbalk in de leesrichting (horizontaal).

Bevinding 28: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op de 404 pagina https://detoekomstvanbrabant.nl/fout een deel van de tekst, de eerste en laatste letter van de eerste regel, buiten beeld. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken. Vermijd overigens de scrollbalk in de leesrichting (horizontaal).

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 29: Op de homepagina staat een video. Als de afspeelknop op de video focus heeft is het contrast van de blauwe focusrand (HEX #3083c2) op de grijze video-achtergrond te laag. De contrastverhouding is op sommige plaatsen 1,5:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Als de achtergrond een foto of video is maak dan bijvoorbeeld gebruik van twee sterk contrasterende kleuren voor de focusrand. Op meer plaatsen in de website geeft de focusrand in video een probleem, bijvoorbeeld in de video op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/ heeft de blauwe focusrand van de knop 'Watch on Youtube' op de grijze achtergrond (HEX #766E61) een contrast van 1,3:1 waar dit minimaal 3:1 moet zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 30: Wanneer bezoekers bij een schermgrootte van 1280x1024px inzomen en de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven voor dit succescriterium, is op elke pagina in de footer het e-mail adres niet meer leesbaar omdat een groot deel buiten beeld valt. Zorg ervoor dat informatie beschikbaar en leesbaar blijft, ook wanneer bezoekers een eigen tekstopmaak toepassen.

2. Bedienbaar

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 31: Op de homepagina staat content die automatisch begint af te spelen na het laden van de webpagina, namelijk de video bovenaan de pagina. Er is geen mechanisme beschikbaar, of makkelijk bereikbaar, om de content te laten stoppen, te pauzeren of te verbergen. Voeg een mechanisme toe waarmee de gebruiker dat kan, of verwijder de content om dit probleem op te lossen.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 32: 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 33: Als bij een schermresolutie van 1280x1024 ingezoomd wordt tot 200% verschijnt op elke pagina een hamburger menu-knop 'Toggle navigation'. Bij navigatie met behulp van de tabtoets krijgt niet het logo linksboven in de header het eerst focus maar deze knop. Dat is verwarrend. Zorg voor een logische focusvolgorde van links naar rechts, van boven naar onderen.

Bevinding 34: Als bij een schermresolutie van 1280x1024 ingezoomd wordt tot 200% verschijnt op elke pagina een hamburger menu-knop 'Toggle navigation'. Als met deze knop het menu uitgevouwen wordt blijft de focus op deze knop, dat is goed. Maar daarna krijgt niet het eerste item in het uitgeklapte menu focus maar het logo van 'De Toekomst van Brabant'. Dat is verwarrend. Zorg ervoor dat als nieuwe content geopend wordt de volgende focus op het eerste element van de nieuwe content wordt geplaatst.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 35: Op pagina https://detoekomstvanbrabant.nl/traineepogramma/ staan links met de linktekst 'Lees meer'. 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. Hetzelfde geldt bijvoorbeeld voor de links met de tekst 'Linkedin' op pagina https://detoekomstvanbrabant.nl/trainees-2022-2024/. Voeg hier de naam van de deelnemer toe aan de linktekst.

Bevinding 36: Op de homepagina staan bij 'Ons programma' twee links naar het traineeprogramma voor 'Generalisten' en 'Data- en Informatiemanagement'. Deze links hebben geen toegankelijkheidsnaam. 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 vaker voor in de website, bijvoorbeeld ook op de homepagina hebben de drie links naar Instagram posts onderaan de pagina ook geen toegankelijkheidsnaam.

Bevinding 37: Op pagina https://detoekomstvanbrabant.nl/contact/ staat afbeelding van envelopjes die linken naar het e-mail adres van de contactpersoon. De link heeft geen toegankelijkheidsnaam. 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.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Bevinding 38: Opmerking: Er is geen complete sitemap en geen zoekfunctie op de website. Ook al zijn alle pagina's op meerdere manieren te bereiken, overweeg toch een van deze twee toe te passen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 39: Wanneer een hoofdmenu-item op elke pagina, bijvoorbeeld 'Over ons', 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.

Bevinding 40: Als de website bekeken wordt op kleine schermen komt het mobile menu (de zogenaamde hamburger knop) in beeld. Er is geen focusrand op deze knop. Deze knop opent het menu waar de focus niet zichtbaar is op de menu-items.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 41: Op de homepagina staat een video in een iframe. De taal van het iframe is Engels maar titel van de video 'Traineeprogramma De Toekomst van Brabant 2021' is Nederlandstalig. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="nl" toe te voegen. Hetzelfde probleem heeft bijvoorbeeld de titel van de video op pagina https://detoekomstvanbrabant.nl/traineepogramma/. Een betere oplossing is deze tekst in het Nederlands te schrijven.

Bevinding 42: Als bij een schermresolutie van 1280x1024 ingezoomd wordt tot 200% verschijnt op elke pagina een hamburger menu-knop met de naam 'Toggle navigation'. Deze tekst is in een andere taal. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="en" toe te voegen. Een betere oplossing is deze tekst in het Nederlands te schrijven.

Bevinding 43: Als het formulier op pagina https://detoekomstvanbrabant.nl/solliciterendata/ wordt verstuurd terwijl het niet volledig is ingevuld verschijnt een foutmelding: 'One or more fields have an error. Please check and try again.' en onder elk niet ingevuld veld de tekst 'The field is required.' Deze tekst is in een andere taal. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="en" toe te voegen. Een betere oplossing is deze tekst in het Nederlands te schrijven.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 44: Op pagina https://detoekomstvanbrabant.nl/solliciterendata/ staat een formulier. Wanneer bezoekers een formulierveld niet of niet goed invullen, verschijnt de foutmelding 'The field is required.' Een goede fout-identificatie vermeldt welke fout gemaakt is en waar de fout gemaakt is. Bijvoorbeeld 'Het veld E-mail is niet ingevuld’.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 45: Op pagina https://detoekomstvanbrabant.nl/solliciterendata/ staat een formulier. Alle velden zijn verplicht, maar dat is niet in de labels van het formulier aangegeven. Een bezoeker moet nu eerst een fout maken om te zien welke velden verplicht zijn.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 46: Onder andere op de homepagina komen fouten in de html code voor: er zijn div elementen die child element van een span zijn, dat mag niet. Op elke pagina is een eind-tag van een paragraaf zonder bijpassende begin-tag. Dit kan problemen met hulpsoftware opleveren. Zorg voor goede HTML code.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 47: Op de homepagina staan bij 'Ons programma' twee links naar het traineeprogramma voor 'Generalisten' en 'Data- en Informatiemanagement'. 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.

Bevinding 48: Op de homepagina staat een video met linksboven het grafische logo van 'De Toekomst van Brabant'. Dit is een link naar het kanaal van 'De Toekomst van Brabant' op YouTube. Het aria-label attribuut mag niet gebruikt worden voor een element met de rol link. Voor sommige combinaties van browser en hulpsoftware heeft de link nu geen toegankelijk linkdoel. Voeg een verborgen linktekst toe of geef de afbeelding een alt tekst waarin ook het linkdoel wordt genoemd. Hetzelfde komt op meer plaatsen in de website voor, bijvoorbeeld bij de video op pagina https://detoekomstvanbrabant.nl/opleidingsprogramma/.

Bevinding 49: Op pagina https://detoekomstvanbrabant.nl/traineepogramma/ staan een aantal veelgestelde vragen in een div met de rol=tab met daarin een link met de rol=button. Een tab is een interactief element en interactieve elementen kunnen niet genest worden. Laat bijvoorbeeld de rol=tab weg.

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://detoekomstvanbrabant.nl/
• Contact:
  https://detoekomstvanbrabant.nl/contact/
• Opleidingsprogramma:
  https://detoekomstvanbrabant.nl/opleidingsprogramma/
• Data- en Informatiemanagement:
  https://detoekomstvanbrabant.nl/traineepogramma/
• 404:
  https://detoekomstvanbrabant.nl/fout
• Vacature:
  https://detoekomstvanbrabant.nl/vacaturegeneralisten/
• Sollicitatieformulier:
  https://detoekomstvanbrabant.nl/solliciterendata/
• Blogs:
  https://detoekomstvanbrabant.nl/blog/
• Blog:
  https://detoekomstvanbrabant.nl/trainees-op-bezoek-bij-waterschap-aa-en-maas/
• podcast:
  https://detoekomstvanbrabant.nl/podcast/
• Over ons:
  https://detoekomstvanbrabant.nl/over-ons/
• Deelnemers:
  https://detoekomstvanbrabant.nl/trainees-2022-2024/
• Blog Wenen:
  https://detoekomstvanbrabant.nl/even-gluren-bij-de-buren/
• Opdracht:
  https://detoekomstvanbrabant.nl/opdracht-iris-zoet/

Ondersteunende technieken

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

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.