Toegankelijkheidsonderzoek

Issues:
Contentaudit digitale toegankelijkheid website Toekomstbehendig Brabant

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Toekomstbehendig Brabant
Datum 7 augustus 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • De content van alle pagina's op toekomstbehendigbrabant.nl
  • Alle PDF's op toekomstbehendigbrabant.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: 34

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: Bovenaan iedere pagina staat het logo van Provincie Noord Brabant. De alternatieve tekst van deze afbeelding is "Toekomstbehendig Brabant logo". De alternatieve tekst van een logo moet tenminste de naam van de organisatie bevatten, in dit geval Provincie Noord Brabant. Aangezien het hier om een link gaat, mag daarnaast optioneel wel bijvoorbeeld 'Ga naar de homepage van Toekomstbehendig Brabant' toegevoegd worden.

Bevinding 2: Op de homepagina staan onder 'Actueel' items met een titel, tekst en een afbeelding. Bij een aantal afbeeldingen is de alternatieve tekst gevormd als: 'Ga naar het item' + de titel van het item. Deze tekst beschrijft de afbeelding niet. Pas de alternatieve tekst aan of maak de afbeelding eventueel decoratief door een leeg alt-attribuut toe te voegen binnen het img-element. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina toekomstbehendigbrabant.nl/actueel/default.aspx waar afbeeldingen de toegankelijke tekst 'Bericht' + titel item + 'bekijken' hebben.

Bevinding 3: In de footer van elke pagina staat een LinkedIn icoon die linkt naar de LinkedIn pagina van Toekomstbehendig Brabant. 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 4: Op pagina toekomstbehendigbrabant.nl/Beheer/Formulierenmodule/2168793.aspx?t=Aanmelden-voor-de-nieuwsbrief wordt onder het formulier een hCaptcha-test gebruikt met afbeeldingen waarvoor visuele waarneming nodig is. De test wordt niet op een alternatieve manier aangeboden, waardoor bijvoorbeeld blinden het formulier niet kunnen verzenden. Er wordt een toegankelijk alternatief aangeboden waarvoor bezoekers een e-mailadres moeten geven en eventueel andere privacy gevoelige informatie. Het volgen van deze procedure valt buiten de scope van dit onderzoek en is daarnaast door de aard van de procedure geen toegankelijk alternatief.

Bevinding 5: Op de pagina www.toekomstbehendigbrabant.nl/actueel/nieuws+innovatie+en+sleuteltechnologien/2433914.aspx- staat een afbeelding met tekst. Door een leeg als attribuut wordt de afbeelding door hulpsoftware als decoratief genegeerd, terwijl het een informatieve afbeelding is. Zorg voor een tekst alternatief dat voorgelezen kan worden door de schermleessoftware.

Bevinding 6: Op pagina www.toekomstbehendigbrabant.nl/brabantse+innovatiekracht/default.aspx staat een interactieve kaart. De informatie die via deze kaart wordt gepresenteerd is niet beschikbaar voor blinden en slechtzienden die gebruikmaken van hulpsoftware. Zorg voor een tekst-alternatief die voorgelezen kan worden door de schermlezer-software.

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 7: Op pagina toekomstbehendigbrabant.nl/podcast/default.aspx staat een podcast. De louter-geluid content in deze podcast is niet op een andere manier beschikbaar, mensen met een auditieve beperking missen deze informatie. Zorg voor een alternatief, bijvoorbeeld door een uitgeschreven versie van de podcast aan te bieden.

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 8: Op de homepagina staat de video 'BioBased Circular'. 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 9: Op pagina toekomstbehendigbrabant.nl/themas/talent++arbeidsmarkt/talent+behouden/default.aspx is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:00. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals een voorleessoftware 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. Dit geldt ook voor de video op de homepage.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 10: Op pagina toekomstbehendigbrabant.nl/themas/talent++arbeidsmarkt/talent+behouden/default.aspx is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:00. 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. Laat de teksten in beeld uitspreken door een voiceover of maak gebruik van een audiodescriptie. Dit geldt ook voor de video op de homepage.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 11: Op pagina toekomstbehendigbrabant.nl/Beheer/Toegankelijkheidsverklaring/Default.aspx staan drie koppen van niveau 1 onder elkaar. Bezoekers die gebruik maken van hulpsoftware maken gebruik van de koppenstructuur om een overzicht van de inhoud van een pagina te krijgen. Een kop moet daarom een korte samenvatting van de onderliggende inhoud bevatten. Nu zijn er twee koppen zonder onderliggende inhoud. Zorg voor een goede koppenstructuur. Gebruikelijk is één kop van niveau 1 met daarin de titel van de pagina.

Bevinding 12: Op pagina toekomstbehendigbrabant.nl/subsidies/default.aspx is een tabel met daarin kopcellen. De eerste en laatste zijn kopcellen waarin niks staat. Dit is verwarrend voor bezoekers die gebruik maken van hulpsoftware. Zorg dat elke kopcel een naam heeft die de bijbehorende cellen beschrijft of, als dit de eerste kolom betreft zorg dat hier geen kop (<th> wordt gebruikt maar een cel (<td>).

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 13: Op de pagina toekomstbehendigbrabant.nl/actueel/default.aspx staan blokken met een afbeelding en een kop. De afbeeldingen hebben geen toegankelijke tekst maar ze krijgen wel focus omdat het links zijn. Dit is afgekeurd onder 1.1.1. Als de afbeeldingen wel een toegankelijke tekst hebben treed het volgende probleem op: Als de blokken achter elkaar worden voorgelezen is het niet duidelijk bij welke kop de afbeelding hoort. Zet de koppen vooraan in de HTML-code en zet hierachter de afbeelding. Visueel mag deze indeling wel aangehouden worden.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Niet aanwezig

Bevinding 14: Onderstaande is geen (content) toegankelijkheidsprobleem, maar viel op:
Op pagina www.toekomstbehendigbrabant.nl/Beheer/Formulierenmodule/2168793.aspx is een formulier waar de bezoeker onder andere het eigen e-mailadres en achternaam 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 met de juiste waarde. Bijvoorbeeld voor e-mailadres autocomplete="email".

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 15: In het menu op elke pagina is witte tekst op een cyaangroene achtergrond (HEX #178B93). Deze tekst heeft een te laag contrast. De contrastverhouding is 4,1:1 waar dit 4,5:1 moet zijn. Deze kleurencombinatie komt veel voor in de website, bijvoorbeeld op de homepagina.

Bevinding 16: In het menu op elke pagina heeft een actief menu-item, bijvoorbeeld 'home' op de homepagina, dit is een witte tekst op een oranje achtergrond (HEX #F99300). Deze tekst heeft een te laag contrast. De contrastverhouding is 2,3:1 waar dit 4,5:1 moet zijn.
Deze kleurencombinatie komt vaker voor in de website, bijvoorbeeld op pagina toekomstbehendigbrabant.nl/themas/circulariteit++duurzaamheid/default.aspx. De kop 'INNOVATIE AWARD: GOUDEN CIRKEL' is in een groot lettertype geschreven en mag daarom een lager contrast hebben, maar de contrastverhouding is 2,3:1 waar dit 3:1 moet zijn.

Bevinding 17: Als de cookie van derden niet zijn toegestaan verschijnt er op plaatsen waar video in de website staat een link 'Wijzig hier jouw cookie-instellingen.' De blauwe tekst (HEX #0073D1) op lichtgrijze achtergrond (HEX #F2F2F2) heeft een te laag contrast. De contrastverhouding is 4,3:1 waar dit 4,5:1 moet zijn.

Bevinding 18: Op de homepagina is er bijvoorbeeld onder 'Thema's' een cyaangroene tekst (HEX #333F52) op een roze (HEX #EF8770) achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 4,3:1 waar dit 4,5:1 moet zijn.

Bevinding 19: Op pagina toekomstbehendigbrabant.nl/themas/talent++arbeidsmarkt/talent+behouden/default.aspx is een witte tekst op een lichtblauwe achtergrond (HEX #94C2EA). Deze tekst heeft een te laag contrast. De contrastverhouding is 1,9:1 waar dit 4,5:1 moet zijn voor normale tekst en 3:1 voor grote en grote en dikgedrukte tekst.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 20: Op de pagina www.toekomstbehendigbrabant.nl/actueel/nieuws+innovatie+en+sleuteltechnologien/2433914.aspx- staat een afbeelding met tekst. 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 21: Op de homepagina staan er onder de thema-carrousel blauwe knoppen (HEX #0073D1) op een roze achtergrond (HEX #EF8770). De contrastverhouding is hier 1,9:1, waar dit minimaal 3:1 moet zijn.
Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.

Bevinding 22: De kaart op pagina www.toekomstbehendigbrabant.nl/brabantse+innovatiekracht/default.aspx heeft een te laag contrast. De contrastverhouding tussen de witte provincie en de grijze grens is bijvoorbeeld 1,5:1 waar dit minimaal 3:1 moet zijn. De gele locaties van fieldlabs (HEX #F7A70D) op witte achtergrond hebben een contrastverhouding van 2:1 waar dit minimaal 3:1 moet zijn. Maak gebruik van een kleurencombinaties met voldoende contrast.

Bevinding 23: Op pagina toekomstbehendigbrabant.nl/podcast/default.aspx hebben de lichtbaluwe LinkedIn logo's (HEX #60A5C9) op witte achtergrond een te laag contrast. De contrastverhouding is hier 2,7:1, waar dit minimaal 3:1 moet zijn.

Bevinding 24: De knop 'Cookies van derden toestaan' in de Cookie-instellingen lichtgrijs (HEX #DEE2E6) op wit heeft een te laag contrast. De contrastverhouding is hier 1,3:1, waar dit minimaal 3:1 moet zijn.

Bevinding 25: Op pagina toekomstbehendigbrabant.nl/brabant+business+panel/default.aspx hebben de links onder de kop 'Editites' een blauwe onderstreping (HEX #0073D1) op een cyaangroene achtergrond (HEX #178B93). De contrastverhouding is hier 1,2:1, waar dit minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 26: Op de pagina toekomstbehendigbrabant.nl/themas/talent++arbeidsmarkt/talent+behouden/default.aspx wordt voor de video 'Nationaal Groeifonds geeft steun aan ontwikkeling circulaire productieketens' gebruikgemaakt van de videospeler van Vimeo. 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 Vimeo video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'keyboard: false'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 27: Onder andere op pagina de homepagina staan een illustraties met bewegende onderdelen, bovenaan en onder 'Thema's'. Deze beweging kan niet gestopt, gepauzeerd of verborgen worden. Bij sommige mensen kan de beweging misselijkheid veroorzaken. Voor mensen met bijvoorbeeld een cognitieve beperking kan het lastig zijn omdat zij zich tijdens het lezen niet kunnen concentreren op de tekst, doordat de tekst beweegt. Zorg dat bezoekers de beweging in de illustratie kunnen stoppen of pauzeren.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 28: In de footer van elke pagina staat een LinkedIn icoon die linkt naar de LinkedIn pagina van Energiewerkplaats Brabant. Deze afbeelding heeft geen alternatieve tekst. 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. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Dat kan eventueel door het linkdoel aan de toegankelijke tekst van de afbeelding toe te voegen. Dit probleem komt op meer plaatsen in de website voor, bijvoorbeeld op pagina www.toekomstbehendigbrabant.nl/themas/clusters++campussen/default.aspx bij de afbeelding van een kaart van Noord-Brabant die linkt naar een interactieve kaart en op dezelfde pagina het LinkedIn logo bij 'MAARTEN
RAAIJMAKERS' en de afbeeldingen onder 'GERELATEERDE THEMA'S'.

Bevinding 29: Op pagina www.toekomstbehendigbrabant.nl/themas/clusters++campussen/default.aspx staan links met de linktekst 'Meer lezen'. 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. Dit probleem komt op meer pagina's in de website voor. Bijvoorbeeld op pagina toekomstbehendigbrabant.nl/themas/circulariteit++duurzaamheid/default.aspx.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 30: In het formulier op pagina www.toekomstbehendigbrabant.nl/Beheer/Formulierenmodule/2168793.aspx staat een selectie vakje met het label 'I am human'. De toegankelijke naam van deze knop is echter 'hCaptcha checkbox. Select in order to trigger the challenge, or to bypass it if you have an accessibility cookie.'. Doordat het visuele label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

Bevinding 31: Bovenaan iedere pagina staat het logo van Provincie Noord Brabant. De alternatieve tekst van deze afbeelding is "Toekomstbehendig Brabant logo". Deze afbeelding is ook een link. Omdat de toegankelijke tekst en de visuele tekst niet overeen komen, is de link moeilijker of niet bedienbaar voor bezoekers die gebruik maken van spraakgestuurde navigatie. Zorg ervoor dat de visuele tekst voorkomt in de toegankelijke naam, het liefst vooraan.

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 32: Op pagina toekomstbehendigbrabant.nl/podcast/default.aspx is het iframe met de podcast Engelstalig gecodeerd. De titel '10. Kernenergie, een Brabantse innovatie?' is Nederlandstalig. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan bijvoorbeeld door in de code van de kop een lang="nl" toe te voegen.

Bevinding 33: Advies: In het formulier op pagina aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx staat een hCaptcha. Deze is Engelstalig en correct als zodanig gecodeerd. Er is ook een Nederlandstalige variant. Overweeg om die aan te bieden.

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 34: Op pagina toekomstbehendigbrabant.nl/podcast/default.aspx is een podcast 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 "Podcast 10. Kernenergie, een Brabantse innovatie?".

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-05-18 14:08:07 v2.4-011