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, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom 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
SPOT Groningen
Evaluatiedatum
12 maart 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 27 van de 50 criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat er geen afbeeldingen van tekst worden gebruikt en dat de webpagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Invoervelden zonder labels
Niet alle content is bereikbaar bij inzoomen
Niet alle functionaliteit werkt met het toetsenbord
Scope van de evaluatie
Website naam
spotgroningen.nl
Scope van de website
Alle pagina's op https://www.spotgroningen.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 50 van 50 WCAG 2.1 AA
Success Criteria.
17Voldoende
23Onvoldoende
10Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Programmaonderdeel Fun Lovin Criminals
Uitkomst: Onvoldoende
The Mix eten en drinken (incl. reserveren)
Uitkomst: Onvoldoende
English startpage
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Document Accessibility
Uitkomst: Onvoldoende
Random pagina Werken bij SPOT
Uitkomst: Onvoldoende
Random pagina Member worden
Uitkomst: Onvoldoende
Homepage
Bij het nieuwsartikel ‘Ontwikkelingen de Nieuwe Poort’ staat een afbeelding met als alt-tekst dezelfde tekst uit de titel. Dit is niet wat er te zien is op de foto’s en voegt geen informatie toe. Bij decoratieve afbeeldingen kan de alt-tekst beter leeg worden gelaten, zodat screenreaders ze negeren. Dit geldt ook voor de foto bij ‘The mix’. Dit komt op meerdere pagina’s voor, bijvoorbeeld bij Contact bij de foto’s naast ‘voor pers’ en ‘voor leveranciers’ en bij de afbeeldingen op de pagina Nieuws.
Programmaonderdeel Fun Lovin Criminals
De video’s hebben geen beschrijvende tekst. Voor bezoekers die geen afbeeldingen kunnen zien is het niet duidelijk dat hier een video staat en wat hierop te zien is. Voeg een beschrijving toe van de video direct boven of onder de video. Dit komt op meerdere pagina’s voor.
The Mix eten en drinken (incl. reserveren)
Bij het zoekveld om te filteren op artiest of event staat een afbeelding van een vergrootglas zonder alternatieve tekst. Dit lijkt een knop, maar is een svg met role=”image”. Wanneer deze afbeelding decoratief is bedoeld, kan deze beter worden verborgen voor hulpsoftware. Wanneer dit niet wordt gedaan, moet er een alternatieve tekst worden gegeven. Dit kan bij een svg worden gedaan met het title-element.
Bij het menu staan achter sommige gerechten iconen die aangeven deze vegetarisch of veganistisch zijn. Deze afbeeldingen zijn verborgen voor hulpsoftware en er wordt geen tekstalternatief geboden. Dit kan worden opgelost door de svg’s niet te verbergen en een title element met beschrijving binnen de svg’s toe te voegen en een role=”img” op de svg’s.
English startpage
De header foto van een concert heeft als alt-tekst ‘English’. Voeg een goede beschrijving toe of laat de alt-tekst leeg wanneer de foto decoratief is.
Account aanmaken (proces meerdere pagina’s)
Bij het aanmaken van een wachtwoord staat achter het veld een afbeelding van een oog zonder alternatieve tekst. Zie ook 4.1.2.
Document Accessibility
Het logo van SPOT en de adresgegevens staan in afbeeldingen zonder geen alt-tekst. Het beste is om deze op de eerste pagina van alt-tekst te voorzien en op de pagina’s daarna als header en footer te verbergen voor screenreaders.
Random pagina Werken bij SPOT
Onderaan de pagina staat een galerij met foto’s. Deze hebben geen goede alt-teksten, bijvoorbeeld ‘SPOT-Personeel-NielsKnelis-0015-DSC_0559’. De links om de foto’s hebben als aria-label ‘Afbeelding vergroten’, maar in de grote weergave is er geen alt-attribuut. Voeg een goede beschrijving toe op de thumbail afbeelding, verwijder het aria-label (omdat deze nu de alt-tekst overschijft), en geef de afbeelding in de grote versie ook een alternatieve tekst.
Random pagina Member worden
In de tabel met lidmaatschappen staan vinkjes als afbeeldingen. Deze afbeeldingen hebben geen alternatieve tekst, zodat deze tabelcellen voor screenreadergebruikers leeg zijn. Geef de afbeeldingen een alternatieve tekst door bijvoorbeeld een title element toe te voegen of een aria-label.
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: Niet van toepassing
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Onvoldoende
Random pagina Werken bij SPOT
Uitkomst: Onvoldoende
Random pagina Werken bij SPOT
Er staat op deze pagina een korte video. Hier komt informatie in beeld die niet wordt uitgesproken. Aangezien deze teksten niet tijdsgevoelig zijn, kunnen deze samen met de beschrijving (sfeerimpressie met enkele onderdelen) als tekst onder de video getoond worden als alternatief voor audiodescriptie.
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
Nieuwsartikel Joy Wielkens
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Toegankelijkheid
Uitkomst: Onvoldoende
Document Accessibility
Uitkomst: Niet getoetst
PDF verslag bijeenkomst De Nieuwe Poort
Uitkomst: Onvoldoende
Homepage
De koppenstructuur is niet logisch opgebouwd. De pagina bevat voornamelijk h1 koppen. Na de eerste h1-kop volgt een h2 met (tekstueel) een subkop. Dit behoort geen apart kop-element te zijn, omdat er verder geen content achter volgt. Verder zijn er h2 koppen die vallen onder h1 koppen waar deze niet bij horen. Zo staat de kop ‘Binnenkort bij SPOT Groningen’ onder de kop ‘Amsterdam Sinfonieta & Fazil Say’ maar dit hoort niet onder elkaar qua betekenis. Ook volgen ‘Het laatste nieuws…’ en ‘Volg SPOT Groningen’ onder ‘André Kuipers Op reis naar de toekomst’.
Voor screenreader gebruikers die navigeren via de koppenstructuur is het niet duidelijk welke content waaronder valt. Zorg dat de koppenstructuur een juiste opbouw van de pagina laat zien. Gebruik h1 alleen voor het hoofdniveau, bijvoorbeeld Homepage of Programma.
Dit komt op veel pagina’s voor, bijvoorbeeld ook bij Programma.
Contact
Tussenkopjes zoals ‘Zakelijk’ zijn opgemaakt met het strong-element in plaats van met kopelementen. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier een kopelementen van zoals h2. Let er op deze pagona wel op dat er al wel h3-koppen zijn met ‘Voor pers’ en ‘Voor leveranciers’. Wanneer de tussenkopjes h2-niveau krijgen, vallen deze h3-koppen onder de laatste h2-kop (en dat klopt dan dus niet). Dan is het beter om deze ook h2-niveau te geven.
Dit komt op meerdere pagina’s voor, zoals ook op Programmaonderdeel Fun Lovin Criminals (tussenkopjes van de artiesten) en de pagina Toegankelijkheid.
Programmaonderdeel Wilfried de Jong (incl. reserveren)
De eerste paragraaf is opgemaakt met het strong-element. Dat is hier niet voor bedoeld, maar voor het uitlichten van enkele woorden die extra aandacht behoeven. Screenreaders kunnen deze teksten op een andere manier voorlezen. Gebruik CSS om deze paragraaf anders te stylen. Dit komt op meerdere pagina’s voor, ook bijvoorbeeld bij The Mix eten en drinken.
Bij het bestelproces worden bovenaan de doorlopen stappen getoond. Via de vormgeving wordt aangeven welke stappen zijn afgerond en welke niet. Dit wordt niet doorgegeven aan hulpsoftware. Dit kan worden gedaan met een ‘screenreadertekst’ of via aria-current=”step” op de huidige stap.
Wanneer je wilt betalen met een creditcard, kom je op een formulier terecht op card.pay.nl. In dit formulier hebben de invoervelden geen labels. Voor gebruikers van hulpsoftware is het hierdoor niet duidelijk wat waar ingevuld moet worden. Voeg labels toe en verbind deze via een id aan de invoervelden. De velden bij de vervaldatum moeten ook worden gegroepeerd en een groepslabel bevatten.
Opmerking: De knop naar het delen op social media is in Windows High Contrast mode niet zichtbaar. Dit komt doordat de svg afbeelding enkel zwart is en daardoor wegvalt tegen de achtergrond. Dit kan worden opgelost door er een (transparante) outline omheen te zetten.
Nieuwsartikel Joy Wielkens
De koppenstructuur is niet logisch opgebouwd. Bovenin het artikel staat een citaat. Deze is opgemaakt als h2-kop, maar dit hoort geen kop te zijn. Beter geschikt is het blockquote-element. De vragen kunnen beter wel als kopjes worden opgemaakt. ‘Meer nieuws’ is een h2-kop, maar de nieuwsartikelen die eronder vallen hebben h1-koppen. Dit moeten dan h3-koppen zijn.
Account aanmaken (proces meerdere pagina’s)
De invoervelden bij de nieuwsbrief zijn niet gegroepeerd en hebben geen groepslabel. Dit kan worden gedaan via een fieldset en legend of via role="group" en een “aria-labelledby”-attribuut dat hier verwijst naar het beschrijvende label.
De invoervelden achter geboortedatum (3 select elementen) hebben geen label. Voeg een label element of een aria-label toe. Ook zijn de velden niet gegroepeerd en hebben geen groepslabel.
Toegankelijkheid
Onder de knoppen die extra content uitklappen staan visueel lijsten, maar deze zijn niet als lijsten opgemaakt maar als paragraaf. Screenreaders lezen dit hierdoor niet als lijst op. Maar hier ul-elementen van.
Document Accessibility
De koppenstructuur is niet logisch opgebouwd. De tussenkopjes zijn opgemaakt als h1. Ook zitten paragraafteksten binnen de headings. De lijsten onder de onderwerpen zijn niet als lijst opgemaakt.
Opmerking: de link naar het rapport onder Web accessibility ontbreekt.
PDF verslag bijeenkomst De Nieuwe Poort
Kopjes in het document zijn niet als kop opgemaakt, maar als paragraaf. Ook zijn lijsten niet als lijst opgemaakt. Voor screenreadergebruikers is hierdoor de structuur niet duidelijk.
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: Onvoldoende
Hele sample
Bevindingen:
Op landschapsmodus is de ‘Accepteren’ knop van de cookies niet bereikbaar. (Je kunt de melding wel sluiten met het kruis, maar dan moet je dit elke pagina opnieuw doen.) Mensen die motorisch beperkt zijn kunnen niet altijd het device draaien. Zorg daarom dat alles altijd bereikbaar is op portret- en op landschapsmodus.
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes. Dit issue komt ook voor bij het bestellen zonder account.
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
Homepage
Uitkomst: Onvoldoende
Programma
Uitkomst: Onvoldoende
Programmaonderdeel Willem
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
The Mix eten en drinken (incl. reserveren)
Uitkomst: Onvoldoende
Zoekresultaten rock
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Homepage
De ‘contact’ en ‘english’ links in de header bij inzoomen (grijs, 2.99:1). Zie screenshot 3.
Programma
De teksten van de dag en de maand bij elk onderdeel (paars, 3.71:1).
De buttons van de genres wanneer ingezoomd (paars op paars, 1.58:1). Zie screenshot 4.
Programmaonderdeel Willem
Het hoofdmenu (wit op lichtblauwe achtergrond, 2.19:1). Dit komt op veel pagina’s voor, ook op de pagina’s voor het kopen van tickets.
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Onder ‘Bekijk ook’ de roze praktische gegevens (datum/plaats) en witte paragrafen op rode achtergrond (3:1 en 4.11:1). Dit komt op veel pagina’s voor, ook bij nieuwsartikelen.
Na ticket kopen: de rode tekst om in te loggen (3.93:1), de grijze teksten over maximaal 10 kaarten (3.9:1) en de groene tekst van de actiecode (3.88:1).
De grijze teksten van de stappen voor het afronden van de bestelling (2.55:1).
De grijze teksten op de pagina met betaalopties (4.29:1).
The Mix eten en drinken (incl. reserveren)
De grijze teksten in het menu zoals ‘voorgerechten’ op grijze achtergrond (2.19:1).
Zoekresultaten rock
De teksten van de inactieve categorieën (2.46:1).
Account aanmaken (proces meerdere pagina’s)
De teksten van de foutmeldingen (3.14). Zie screenshot 2.
De grijze tekst van de eisen waar een wachtwoord aan moet voldoen (4.34).
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Nieuws
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.
Nieuws
Onderaan de pagina staat informatie op welke pagina je bent, bijvoorbeeld 2/17. Bij het inzoomen boven 125% verdwijnt deze content.
Account aanmaken (proces meerdere pagina’s)
Het inzoomen op mobiele apparaten wordt belemmerd via het meta element (user-scalable=0 en maximum-scale=1.0).
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Voldoende
Programma
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
The Mix eten en drinken (incl. reserveren)
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)
Vanaf 300% is de knop om de cookies te accepteren niet meer bereikbaar. Binnen de melding kan niet gescrold worden. Ook valt het logo over de tekst in de cookiemelding. Zie screenshot 5.
Homepage
Opmerking: Doordat het menu op 400% de helft van het scherm vult, is het lastig te content te lezen. Dit kan verbeterd worden door bijvoorbeeld het menu inklapbaar te maken. Zie screenshot 6.
Programma
Op 400% neemt de navigatie en het filter het gehele scherm in beslag, waardoor het niet meer mogelijk is de content te lezen. Zorg dat deze onderdelen minder ruimte innemen, bijvoorbeeld door ze te kunnen inklappen. Zie screenshot 7.
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Wanneer je wilt betalen met een creditcard, kom je op een formulier terecht op card.pay.nl. Ingezoomd boven de 150% moet je hier in 2 richtingen scrollen om de content te kunnen lezen. Dit kan worden opgelost door de pagina’s‘ responsive’ te bouwen.
The Mix eten en drinken (incl. reserveren)
Op 400% vallen de teksten met ‘volgeboekt’ deels buiten beeld waardoor je horizontaal moet scrollen.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Programmaonderdeel Willem
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
The Mix eten en drinken (incl. reserveren)
Uitkomst: Onvoldoende
Random pagina Member worden
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Programmaonderdeel Willem
De iconen in het hoofmenu voor eten, account en zoeken (wit op grijs, 2.2:1). Dit komt op veel pagina’s voor.
Programmaonderdeel Wilfried de Jong (incl. reserveren)
De social media iconen onderaan de pagina (2.5:1).
De randen voor het invoerveld van de actiecode en bij het invoeren van de persoonlijke gegevens voor het bestellen (1.6:1).
The Mix eten en drinken (incl. reserveren)
De iconen voor de veganistische gerechten (1.9:1).
Random pagina Member worden
De icoontjes in de kolom voor superster (2.1:1).
1.4.12: Tekstafstand
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is in onderstaande gevallen niet alle content meer beschikbaar. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html.
Homepage
Op 110% valt het logo over het menu-item ‘programma’ heen. Op 400% is de zoekfunctie niet meerte bereiken. Ook staan de menu-items qua tekst tegen elkaar aan. Zie screenshot 8.
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Niet van toepassing
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
Zoekresultaten rock
Uitkomst: Voldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Om een ticket te kopen of een diner te reserveren moet je op het +-icoon drukken. Dit kan met de muis, maar niet met het toetsenbord. Zie ook 4.1.2.
Bij het afronden krijg je de vraag of je een kaartje voor een ander wil doneren. De ‘Nee bedankt’ optie is niet bereikbaar met het toetsenbord. Dit is een link zonder href attribuut.
Zoekresultaten rock
Opmerking: het zoekveld binnen de pagina werkt niet met het toetsenbord. Als alternatief kan het zoekveld in de header gebruikt worden, maar voor ziende toetsenbordgebruikers kan het wel verwarrend zijn dat ze hier niet bij kunnen. Maak deze bij voorkeur dus ook toetsenbordtoegankelijk.
Account aanmaken (proces meerdere pagina’s)
Bij het aanmaken van een wachtwoord staat achter het veld een afbeelding van een oog. Dit fungeert met de muis als een knop om het wachtwoord te tonen, maar dit werkt niet met het toetsenbord. Zie ook 4.1.2.
Ook verschijnt er op hover een tooltip met informatie over de kwaliteit van het wachtwoord. Op focus wordt deze niet getoond.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Onvoldoende
Programmaonderdeel Fun Lovin Criminals
Uitkomst: Onvoldoende
Programmaonderdeel Fun Lovin Criminals
Op deze pagina wordt gebruik gemaakt van een videospeler. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken.
Een oplossing is om de embedcode van de YouTube video aanpassen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing is de videospeler van YouTube toegankelijk. Zie ook https://developers.google.com/youtube/player_parameters#disablekb Dit komt op meerdere pagina’s met video’s voor.
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Hele sample
Uitkomst: Voldoende
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: Voldoende
2.4 Navigeerbaar
Success Criterium
Uitkomst
Bevindingen
2.4.1: Blokken omzeilen
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Er is geen mechanisme om terugkerende blokken content, zoals het hoofdmenu, over te slaan. Toetsenbordgebruikers moeten hierdoor op elke pagina door alle menu-links heen om bij de hoofdcontent te komen. Plaats hiervoor bijvoorbeeld een ‘skiplink’ als eerste link op de pagina waarmee het hoofdmenu overgeslagen kan worden.
NB: er zijn landmarks zoals zoals ‘navigation’ en ‘main’, maar als je naar ‘main’ springt met de screenreader, worden alsnog de hoofdmenu-items voorgelezen. Ook zijn skiplinks in het algemeen gemakkelijker te gebruiken dan landmarks, omdat niet iedereen weet hoe deze te gebruiken.
2.4.2: Paginatitel
Hele sample
Uitkomst: Onvoldoende
PDF verslag bijeenkomst De Nieuwe Poort
Uitkomst: Onvoldoende
PDF verslag bijeenkomst De Nieuwe Poort
Het PDF-bestand heeft geen titel. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Wanneer een pdf geen titel heeft wordt de bestandsnaam getoond, deze is niet altijd even duidelijk. Pas de titel aan in de Documenteigenschappen in Adobe PDF.
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Programmaonderdeel Fun Lovin Criminals
Uitkomst: Onvoldoende
The Mix eten en drinken (incl. reserveren)
Uitkomst: Voldoende
Hele sample
Bevindingen:
Wanneer je de site voor het eerst opent, komt de focus niet meteen in de (geopende) cookiemelding terecht, maar in het eronder liggende hoofdmenu. Pas na alle links in het hoofdmenu komt de focus in de cookiemelding. Zord dat de focus hier als eerste in komt, en niet op onderdelen die verborgen zijn.
Programmaonderdeel Fun Lovin Criminals
De opties voor het delen op social media staan standaard verborgen, maar de focus komt wel op alle links. Zorg dat wanneer onderdelen visueel verborgen zijn, ze ook geen focus kunnen ontvangen.
The Mix eten en drinken (incl. reserveren)
Opmerking: bij de events staan er dubbele links: op de datum en op de artiest. Beide krijgen focus, wat veel extra tabstops geeft. Overweeg de focus alleen op de artiest te zetten. Bij volgeboekte events is daar de links weggehaald, maar bij de datum nog niet. Dit levert een onnodige klik op naar een pagina met melding dat het volgeboekt is.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Programmaonderdeel Fun Lovin Criminals
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Programmaonderdeel Fun Lovin Criminals
Er staan 2 links naar video’s met elk de linktekst ‘video’ (via het aria-label). Hierdoor is het niet duidelijk welke video’s geopend worden. Geef deze links een goede beschrijving van de videoclip. Dit issue komt ook voor op de pagina Programmaonderdeel Willem.
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Op de pagina met betaalopties staat bovenaan de pagina een link zonder tekst. Deze link staat om het Pay logo. Voeg een alt-tekst toe bij het logo.
Account aanmaken (proces meerdere pagina’s)
Meerdere links in het hoofdmenu hebben geen tekst. Het gaat om de links achter afbeeldingen zoals het logo en iconen zoals die van de arrangementen. Dit kan worden opgelost door bijvoorbeeld aan aria-label attribuut.
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
Homepage
Uitkomst: Onvoldoende
Homepage
Bij de eerste artiest en bij The Mix gaat de focus eerst onzichtbaar naar de link rond de afbeelding en daarna zichtbaar naar de link achter de titel. Zorg dat beide links zichtbare focus hebben, of haal de focus weg van de afbeelding, aangezien dit dubbel is en daardoor een onnodige ‘tab’.
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: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
PDF verslag bijeenkomst De Nieuwe Poort
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
De pagina’s onder https://tickets.spotgroningen.nl hebben geen taal gespecificeerd. Screenreaders lezen hierdoor de pagina mogelijk niet in de juiste taal voor. Stel de juiste taal in op het html element.
PDF verslag bijeenkomst De Nieuwe Poort
Het document staat ingesteld op Engels, maar de content is Nederlands. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.
3.1.2: Taal van onderdelen
Hele sample
Uitkomst: Onvoldoende
English startpage
Uitkomst: Onvoldoende
Toegankelijkheid
Uitkomst: Onvoldoende
English startpage
De pagina staat ingesteld op Nederlands, maar de Engelse teksten hebben geen eigen taalcode. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd voor. Geef de taal aan met het attribuut lang="en" op de betreffende elementen.
Toegankelijkheid
Onderaan de pagina staat de zin ‘Do you want to read all about the accessibility of SPOT Groningen? Download this pdf.’ Van deze tekst wordt niet in de code aangegeven dat het Engels is. Screenreaders kunnen hierdoor niet de juiste taal bepalen voor dit onderdeel en lezen het mogelijk verkeerd voor. Geef de taal van de Engelse tekst aan met het attribuut lang="en" op het betreffende element.
Opmerking: de link gaat niet naar een PDF document, maar naar een docx.
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: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Wanneer het aanmeldformulier niet verzonden kan worden omdat niet alle verplichte velden zijn ingevuld, wordt niet in tekst aangegeven welke velden missen. Er komt alleen een (Engelstalige) tooltip in beeld via de standaard browservalidatie. Zorg voor een ‘eigen’ validatie met duidelijke, Nederlandse teksten over wat er fout gaat. Zie screenshot 1.
Dit probleem doet zich ook voor bij het inschrijven voor de nieuwsbrief in de footer.
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De invoervelden bij het inschrijven voor de nieuwsbrief hebben geen zichtbaar label. Een placeholder is niet voldoende omdat niet iedereen die kan lezen en deze ook verdwijnt bij focus. Voeg tekstlabels die tijdens het invullen in beeld blijven. Zie screenshot 9.
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
Account aanmaken (proces meerdere pagina’s)
Uitkomst: Onvoldoende
Veelgestelde vragen
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Onder ‘Volg SPOT Groningen’ in de footer staan knoppen waarmee een lijst wordt uitgeklapt. Van deze knoppen wordt geen status aangegeven (in/uitgeklapt). Dit kan worden opgelost door het aria-expanded attribuut toe te voegen op de button elementen. Dit geldt ook voor de delen-knop bovenaan pagina’s, zoals bij Contact.
De overlay voor de cookies heeft een rol van dialog en als naam het attribuut ‘aria-name’. DIt is geen geldige markup. Maak hier bijvoorbeeld aria-label van.
Programma
De button met de datumprikker geeft geen status aan of de kalender geopend of gesloten is. Als je op 200% bent ingezoomd geldt dit ook voor het openen en sluiten van de labels. Dit worden gedaan via het aria-expanded-attribuut.
Bij het zoekfilter kun je categorieën aan en uit zetten. Het is alleen visueel (verschil in kleur) te zien welke geactiveerd zijn. Dit wordt niet doorgegeven aan hulpsoftware. Dit kan worden opgelost door op de geactiveerde buttons via aria-pressed de status aan te geven. Dit geldt ook voor de subgrenres. Zie ook https://www.w3.org/TR/wai-aria-1.1/#aria-pressed.
Programmaonderdeel Fun Lovin Criminals
De iframes met de video’s hebben geen toegankelijke naam. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg bijvoorbeeld een title attribuut met beschrijving toe of een aria-label. Dit komt op meerdere pagina’s voor.
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Om een ticket te kopen of een diner te reserveren moet je op het +-icoon drukken. Dit is een span-element, maar dit is voor hulpsoftware en toetsenbordgebruikers geen bruikbaar interactief element. Maak hier bijvoorbeeld een input met type number van.
Account aanmaken (proces meerdere pagina’s)
Bij het aanmaken van een wachtwoord staat achter het veld een afbeelding van een oog. Dit is enkel een img-element, maar fungeert met de muis als een knop om het wachtwoord te tonen. Maak hier een button element van met een goede naam en waarde (actief of niet actief).
Veelgestelde vragen
De vragen zitten in buttons die kunnen worden uitgeklapt. Deze status wordt niet doorgegeven aan hulpsoftware. Er staat een aria-expanded attribuut op het div-element dat wordt uitgeklapt, maar dit attribuut moet op de button staan. Dit komt ook voor op de pagina Toegankelijkheid.
4.1.3: Statusberichten
Hele sample
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Uitkomst: Onvoldoende
Programmaonderdeel Wilfried de Jong (incl. reserveren)
Wanneer je een kaartje koopt, staat er een melding in beeld die aangeeft hoeveel tijd je nog hebt. Deze informatie wordt niet doorgegeven aan hulpsoftware. DIt kan worden opgelost via een live-region. Zie ook https://www.w3.org/TR/wai-aria-1.1/#timer.
Sample met getoetste webpagina's
Homepage - https://www.spotgroningen.nl/
Contact - https://www.spotgroningen.nl/contact/
Programma - https://www.spotgroningen.nl/programma/
Programmaonderdeel Fun Lovin Criminals - https://www.spotgroningen.nl/programma/flc-rudeboy-udc/
Programmaonderdeel Willem - https://www.spotgroningen.nl/programma/willem/
Programmaonderdeel Wilfried de Jong (incl. reserveren) - https://www.spotgroningen.nl/programma/wilfried-de-jong-en-caro-derkx/
The Mix eten en drinken (incl. reserveren) - https://www.spotgroningen.nl/eten-en-drinken/the-mix/
English startpage - https://www.spotgroningen.nl/programma/verzameling/english/
Zoekresultaten rock - https://www.spotgroningen.nl/?s=rock
Nieuws - https://www.spotgroningen.nl/nieuws/
Nieuwsartikel Joy Wielkens - https://www.spotgroningen.nl/nieuws/actrice-joy-wielkens-over-lady-lord-macbeth/
PDF verslag bijeenkomst De Nieuwe Poort - https://www.spotgroningen.nl/wp-content/uploads/2024/03/Verslag-informatiebijeenkomst-De-Nieuwe-Poort-15-februari-2024.pdf
Random pagina Werken bij SPOT - https://www.spotgroningen.nl/informatie/werken-bij-spot/
Random pagina Member worden - https://www.spotgroningen.nl/word-member/
Webtechnologie
HTML,CSS,WAI-ARIA,JavaScript,SVG,PDF
Onderbouwing van de evaluatie
Gebruikte systemen tijdens het onderzoek:
Edge 122 op Windows 10
Chrome 122 en Safari 17.4 met Voiceover op Mac 13.6.5
