Onderzoek toegankelijkheid gca-almere.nl - hertoetsing (versie 1.1)

Inleiding

Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?

Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.

Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, worden hiervan een of meer voorbeelden gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten structureel worden aangepakt.

De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).

Over deze evaluatie

Rapport auteur
Janita Top
Evaluatie opdrachtgever
Gemeente Almere
Evaluatiedatum
28 februari 2022

Managementsamenvatting

Dit onderzoek is een hertoetsing na het eerste onderzoek op 30 december 2021. Issues die zijn opgelost, zijn uit het rapport weggehaald.

Uit dit onderzoek blijkt dat wordt voldaan aan 36 van de 50 criteria voor toegankelijkheid (dit waren er 32 in het eerste onderzoek). Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

Positieve punten: zo is de informatie bijvoorbeeld niet alleen van kleur afhankelijk, dit is van belang voor kleurenblinden. Ook kunnen er bepaalde stijlkenmerken worden toegepast, zoals een grotere regelafstand, en dan is er geen verlies van content of functionaliteit. Dit kan bijvoorbeeld van belang zijn voor mensen met dyslexie. Ook is de standaardtaal van de pagina's goed ingesteld, hierdoor kan voorleessoftware de tekst op de juiste manier voorlezen.

Negatieve punten: niet alle niet-tekstuele content zoals afbeeldingen en knoppen zijn voorzien van een alternatieve tekst. Hierdoor is deze informatie niet beschikbaar voor gebruikers met voorleessoftware.
Mensen die blind zijn of om een andere reden geen muis kunnen gebruiken moeten de website kunnen bedienen met het toetsenbord. Op dit momenten zijn niet alle interactieve componenten binnen de website met alleen het toetsenbord te bedienen. Mensen die blind zijn kunnen nu dus niet alles goed bedienen. De zichtbare focus is uitgezet op veel onderdelen in de website, waardoor ziende toetsenbordgebruikers niet weten wanneer ze interactieve elementen moeten activeren.

Scope van de evaluatie

Website naam
gca-almere.nl
Scope van de website
Alle pagina's op https://gca-almere.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 50 van 50 WCAG 2.1 AA Success Criteria.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

Floriadebruggen

Uitkomst: Onvoldoende

Evenementen

Uitkomst: Onvoldoende

PDF

Uitkomst: Onvoldoende

Foto's

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Home

Op de homepagina onder het kopje “Onze uitdagingen” staan vier afbeeldingen die als achtergrond dienen voor de kopteksten. Deze afbeeldingen zijn decoratief, maar niet verborgen voor hulpsoftware. Elke afbeelding herhaalt de waarde van de kop in zijn alt-attribuut. Op deze manier wordt dezelfde tekst twee keer voorgelezen. Laat de alt-attributen van deze afbeeldingen leeg.

Sommige logo’s onder het kopje “Grondstoffen Collecties Almere is opgericht door:” hebben lege alt-attributen of geven niet de volledige tekst weer. De voorleessoftware leest deze afbeeldingen niet voor, hierdoor weet een blinde gebruiker niet wie de partners zijn. Voor logo’s geldt dat zichtbare tekst van het logo in het alt-attribuut van de afbeelding moet terugkomen. Deze sectie komt ook op andere pagina’s voor zie bijvoorbeeld https://gca-almere.nl/over-gca/. Ook op https://gca-almere.nl/project/bereklauw/ en alle andere projectpagina’s onder “Project partners” staan logo’s die verborgen zijn voor hulpsoftware.

Floriadebruggen

In de rechter kolom onder het kopje “Evenementen” staat een zoekbalk. Het label bij dit invoerveld is een afbeelding van een vergrootglas. Deze afbeelding is toegevoegd als achtergrondafbeelding en is daarmee niet beschikbaar voor hulpsoftware. Deze informatieve afbeelding heeft een alternatieve tekst nodig. Dit geldt ook voor de pagina https://gca-almere.nl/evenementen/.

Evenementen

Op pagina https://gca-almere.nl/evenementen/ naast de bovengenoemde afbeelding staat ook een afbeelding van een kalender die als een label dient voor twee invoervelden. Deze afbeelding is evenmin beschikbaar voor hulpsoftware. Zonder tekstalternatief wordt deze afbeelding genegeerd en blijven twee select-elementen zonder label.

PDF

Op pagina 1 van het pdf-document “Folder training (..)” staat een logo met tekst “Natuurvezel Academie”. De naam van deze trainingsinstituut komt nergens anders op deze pagina voor. Deze informatie moet ook toegankelijk worden gemaakt door middel van beschrijving. De beschrijving bestaat uit een reeks cijfers en letters. Vervang deze beschrijving door de tekst op het logo. Dit logo komt ook op pagina 2 voor. Onderaan deze pagina staat een logo van “Natuurvezel applicatie centrum”. Dit logo heeft een bestandsnaam als beschrijving. Dit voldoet evenmin. Vervang deze beschrijving door de tekst op het logo. De drie groene secties in dit document hebben de groene achtergrondkleur gekregen van afbeeldingen. Deze decoratieve afbeeldingen zijn met ‘figure’ tags toegevoegd. Deze tags zijn gereserveerd voor informatieve afbeeldingen en moeten voorzien zijn van beschrijvingen. De decoratieve afbeeldingen moeten als decoratief worden aangemerkt en mogen niet in de tags structuur voorkomen.

Foto's

Op pagina https://gca-almere.nl/media/fotos/ staan afbeeldingen zonder het alt-attribuut. Zonder dit attribuut wordt de bestandsnaam voorgelezen. Daarnaast fungeren deze afbeeldingen als links om de grote weergave van de afbeelding te openen. Geef deze afbeeldingen een alt-attribuut waarin deze informatie staat.

Op pagina https://gca-almere.nl/media/fotos/ staan foto’s. Als op een van de foto’s wordt geklikt, opent een lightbox waarin aan de linker en de rechterkant iconen staan om door de foto’s te bladeren. Deze iconen hebben als tekstalternatief een cijfer: 1 t/m 32. Deze cijfers zijn onvoldoende als tekstalternatief omdat ze niet duidelijk omschrijven wat deze iconen(knoppen) doen.

1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample

Uitkomst: Voldoende
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Onvoldoende

Video

Uitkomst: Onvoldoende

Video

In deze video komen verschillende sprekers aan het woord. Wie deze sprekers zijn en wat hun functie is, wordt niet aan een blinde gebruiker gecommuniceerd omdat deze informatie alleen als tekst in beeld komt. Voor deze visuele informatie moet een alternatief geboden worden voor mensen die blind zijn. Dit kan voor dit succescriterium door een volledig transscript in tekst aan te bieden waar alle (visuele en auditieve) informatie uit de video in zit.

1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample

Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

Uitkomst: Onvoldoende

Video

Uitkomst: Onvoldoende

Video

In deze video komen verschillende sprekers aan het woord. Wie deze sprekers zijn en wat hun functie is, wordt niet aan een blinde gebruiker gecommuniceerd omdat deze informatie alleen als tekst in beeld komt. Voor deze visuele informatie moet een alternatief geboden worden voor mensen die blind zijn. Om te voldoen aan niveau AA moet dit in de video zelf aangeboden worden door een audiodescriptie te geven voor alle visuele informatie. Die kan door dit in het bestaande audiospoor op te nemen, of door dit in een apart audiospoor erbij te plaatsen.
1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

Evenementen

Uitkomst: Onvoldoende

PDF

Uitkomst: Onvoldoende

Evenementen

Op pagina https://gca-almere.nl/evenementen/ onder de grote afbeelding staan twee select-elementen. Deze elementen horen bij elkaar, maar zijn niet in de HTML-code gegroepeerd. In de HTML is de relatie tussen deze elementen niet duidelijk. Een mogelijke oplossing is het opnemen van deze elementen in een fieldset. Een fieldset met interactieve elementen heeft een naam nodig. Deze naam kan een legende-element zijn, al dan niet verborgen van het scherm, maar zichtbaar voor de voorleessoftware.

PDF

In de tags structuur van dit pdf-document komt niet een koptekst voor. Visueel zijn er koppen aanwezig, maar deze structuur wordt niet aan een blinde gebruiker gecommuniceerd. Alle teksten in dit document zijn opgemaakt als paragrafen.

1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample

Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample

Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Voldoende
1.4 Onderscheidbaar
Success Criterium Uitkomst Bevindingen
1.4.1: Gebruik van kleur
Hele sample

Uitkomst: Voldoende
1.4.2: Geluidsbediening
Hele sample

Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

Video

Uitkomst: Onvoldoende

Home

Op de homepage staat een knop met de tekst 'Kalenderoverzicht'. Deze heeft onvoldoende contrast, namelijk 2,8:1.

Video

De ondertiteling in deze video heeft te weinig contrast (wit op groen). Doordat deze ondertiteling ingebed is in de vidoe, kan de gebruiker de kleuren hiervan ook niet zelf aanpassen.
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

Home

Op de homepage staat een infographic waarin het proces van grondstoffenreductie en besparing is uitgetekend. Deze afbeelding bevat tekst die door iemand die slechtziend is niet met een eigen Stylesheet is aan te passen. Dat kan alleen als de tekst zichtbaar als gewone tekst op de pagina staat. Als de tekst in de afbeelding ook als gewone tekst er direct boven staat of onder, dan mag je dat als 'alternatief' beschouwen. Dat is dan dezelfde informatie en die is wel met een eigen stylesheet te bewerken, zodat iemand die slechtziend is de informatie dus wel tot zich kan nemen.
1.4.10: Reflow
Hele sample

Uitkomst: Voldoende
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Voldoende
1.4.12: Tekstafstand
Hele sample

Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

De submenu’s in het hoofdmenu kunnen, wanneer ze geopend worden op hover, alleen worden gesloten door de muis te verplaatsen. Mensen die vergrotingssoftware gebruiken, moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) hover content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Dit kan dan bijvoorbeeld met de escape toets.

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

Home

Onder 'Onze uitdagingen' staan meer items dan er standaard in beeld komen. Wanneer je met de muis hieroverheen gaat, komen knoppen waarin je door de overige items heen kunt gaan. Met het toetsenbord is deze mogelijkheid er niet en mis je dus een deel van de items.
2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Voldoende
2.2 Genoeg tijd
Success Criterium Uitkomst Bevindingen
2.2.1: Timing aanpasbaar
Hele sample

Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen
Hele sample

Uitkomst: Niet van toepassing
2.3 Toevallen en fysieke reacties
Success Criterium Uitkomst Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample

Uitkomst: Niet van toepassing
2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.1: Blokken omzeilen
Hele sample

Uitkomst: Voldoende
2.4.2: Paginatitel
Hele sample

Uitkomst: Onvoldoende

PDF

Uitkomst: Onvoldoende

PDF

In de metadata van pdf-document https://gca-almere.nl/site/wp-content/uploads/2021/03/Folder-training-circulair-biobased-infra-2021-Almere-1.pdf is de titel niet ingesteld. De titel dient een korte beschrijving van de inhoud van het bestand te zijn. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Dit kan worden ingesteld via de bestandseigenschappen.

2.4.3: Focus volgorde
Hele sample

Uitkomst: Voldoende
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

Bruggen congres

Uitkomst: Onvoldoende

Partners

Uitkomst: Onvoldoende

Foto's

Uitkomst: Onvoldoende

Home

Op de homepagina onder het kopje “Het laatste nieuws” staan nieuwsberichten. Om de afbeeldingen staan links, maar deze afbeeldingen zijn decoratief. De links hebben daardoor geen tekst. Het wordt aangeraden deze links hier weg te halen. Dit komt op meerdere pagina's voor, ook bijvoorbeeld op https://gca-almere.nl/project/bereklauw/.

Elk bericht heeft een “lees meer” link. Deze tekst geeft onvoldoende inzicht in het doel van elke link. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven, heeft een blinde gebruiker nog steeds geen overzicht. Hier kan verborgen tekst uitkomst bieden. Deze tekst kan alleen voor hulpsoftware zichtbaar worden gemaakt met bijvoorbeeld CSS clip methode.

Bruggen congres

Onder 'Deel dit evenement' staan links naar social media. Deze hebben als enige tekst het title attribuut. Deze wordt niet goed door hulpsoftware ondersteund, waardoor dit voor sommige gebruikers links zijn zonder doel. Voeg een linktekst toe.

Partners

Op pagina “Partners” staan logo’s van organisaties. Al deze afbeeldingen fungeren als links. Een deel (4) van deze links heeft geen content, de afbeeldingen zijn verborgen voor hulpsoftware met lege alt-attributen. Hierdoor zijn links zonder een duidelijk linkdoel ontstaan.

Foto's

Op deze pagina staan links met een onduidelijk linkdoel. Deze links bevatten een afbeelding zonder alt-attribuut. Er is een title-attribuut op de link aanwezig, maar deze wordt niet als gelijkwaardig alternatief beschouwd om de link een duidelijk linkdoel te geven. Geef de afbeeldingen een alt-attribuut waarin staat wat deze link doet.

2.4.5: Meerdere manieren
Hele sample

Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample

Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Op deze website is de focus indicator uitgezet door gebruik te maken van outline:0. De toetsenbordgebruikers weten niet op welke elementen de focus zich bevindt. Ze kunnen ongewenst en per ongeluk links en knoppen activeren. De focus moet altijd zichtbaar zijn. Zie als voorbeeld de knop 'contact opnemen' op de homepage.
2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.1: Aanwijzergebaren
Hele sample

Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample

Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample

Uitkomst: Voldoende
2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet van toepassing

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina
Hele sample

Uitkomst: Voldoende
3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

De link om herhalende blokken zoals het hoofdmenu over te slaan, is in het Engels ('Skip to content'), zonder dat dit in de code wordt aangegeven. Deze link kan het best naar het Nederlands worden omgezet, omdat de rest van de site ook in het Nederlands is.
3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Voldoende
3.2.2: Bij input
Hele sample

Uitkomst: Voldoende
3.2.3: Consistente navigatie
Hele sample

Uitkomst: Voldoende
3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Voldoende
3.3.2: Labels of instructies
Hele sample

Uitkomst: Voldoende
3.3.3: Foutsuggestie
Hele sample

Uitkomst: Voldoende
3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet van toepassing

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Onvoldoende

Evenementen

Uitkomst: Onvoldoende

Evenementen

Op pagina https://gca-almere.nl/evenementen/ zijn meerdere elementen gezien met dezelfde id waarde “mec_skin_3859”. Dubbele id’s kunnen parsefouten veroorzaken. Parsefouten kunnen leiden tot verkeerde interpretatie van content door hulpsoftware.

4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

Floriadebruggen

Uitkomst: Onvoldoende

Evenementen

Uitkomst: Onvoldoende

Home

Midden op de homepagina staat een tekening van de circulatie van processen. Als op deze afbeelding wordt geklikt, opent een grote weergave van de afbeelding. In de rechterbovenhoek staat een knop om de afbeelding af te sluiten. Deze knop heeft als toegankelijke naam “x”. Er is een poging gedaan om deze knop een toegankelijke naam te geven door middel van een title-attribuut en via CSS. CSS is echter bedoeld voor styling en niet voor content (zie ook https://www.w3.org/WAI/WCAG21/Techniques/failures/F87). Sommige bezoekers gebruiken namelijk eigen stijlen. Een beter alternatief is het gebruik van een aria-label. Let wel op dat de waarde van het aria-label in het Nederlands moet zijn.

Floriadebruggen

In de rechter kolom onder het kopje “Evenementen” staat een zoekbalk. Het invoerveld heeft geen toegankelijke naam. De voorleessoftware kan niet aan een blinde gebruiker vertellen wat dit element doet. Dit geldt ook voor de pagina https://gca-almere.nl/evenementen/.

Evenementen

Op pagina https://gca-almere.nl/evenementen/ onder de grote afbeelding staan twee select-elementen. Beide elementen missen een toegankelijke naam die beschrijft wat hier moet worden ingevuld. De toegankelijke naam dient uniek te zijn en de functie van het element beschrijven. ‘Selecteer maand’ en ‘selecteer jaar’ zijn een beter optie als toegankelijke naam.

4.1.3: Statusberichten
Hele sample

Uitkomst: Voldoende

Sample met getoetste webpagina's

  1. Home - https://gca-almere.nl/
  2. Over GCA - https://gca-almere.nl/over-gca/
  3. Project Bereklauw - https://gca-almere.nl/project/bereklauw/
  4. Contact - https://gca-almere.nl/contact/
  5. Uitdagingen - https://gca-almere.nl/uitdagingen/
  6. Floriadebruggen - https://gca-almere.nl/floriadebruggen-rondje-weerwater-en-beverbrug-gereed/
  7. Training circulaire biobased intrawerken - https://gca-almere.nl/training-circulaire-biobased-infrawerken-voor-professionals/
  8. Nieuws - https://gca-almere.nl/nieuws/
  9. Evenementen - https://gca-almere.nl/evenementen/
  10. Bruggen congres - https://gca-almere.nl/events/bruggen-congres-flevoland-floriade/
  11. Partners - https://gca-almere.nl/partners/
  12. Media - https://gca-almere.nl/media/
  13. Flyers - https://gca-almere.nl/media/flyers/
  14. Video - https://gca-almere.nl/de-circulaire-bruggen-rondje-weerwater-en-beverbrug-zijn-volop-in-aanbouw/
  15. PDF - https://gca-almere.nl/site/wp-content/uploads/2021/03/Folder-training-circulair-biobased-infra-2021-Almere-1.pdf
  16. Project Groen Beton - https://gca-almere.nl/project/groen-beton/
  17. Foto's - https://gca-almere.nl/media/fotos/

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,PDF

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: