Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Veendam Beweegt

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Veendam Beweegt
Datum 13 december 2022
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op veendambeweegt.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 veendambeweegt.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 29

1. Waarneembaar

1.2 Op tijd gebaseerde media

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 1: De video's op pagina https://veendambeweegt.nl/asm/skills-garden-2/blokkenveld/ bevatten geen audiodescriptie of media-alternatief. Audiodescriptie is gesproken tekst die is toegevoegd aan het standaard audiospoor om belangrijke visuele details te beschrijven, die niet vanuit het standaard audiospoor alleen te begrijpen zijn. Vaak kan audiodescriptie in een videospeler aan of uit worden gezet. De audiodescriptie is belangrijk voor blinde bezoekers, die niet kunnen zien wat in beeld gebeurt/verschijnt. Voeg een media-alternatief zoals een transcript toe, of een audiodescriptie om ook te voldoen aan succescriterium 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 2: De video's op pagina https://veendambeweegt.nl/asm/skills-garden-2/blokkenveld/ bevatten geen audiodescriptie. Audiodescriptie is gesproken tekst die is toegevoegd aan het standaard audiospoor om belangrijke visuele details te beschrijven, die niet vanuit het standaard audiospoor alleen te begrijpen zijn. Vaak kan audiodescriptie in een videospeler aan of uit worden gezet. De audiodescriptie is belangrijk voor blinde bezoekers, die niet kunnen zien wat in beeld gebeurt/verschijnt. Voeg audiodescriptie toe aan de video om dit probleem op te lossen. Dit geldt ook voor de video's op pagina https://veendambeweegt.nl/asm/skills-garden-2/blokkenveld/.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: Op de homepage https://veendambeweegt.nl/ staan selectievakjes onder 'Naar welke sport ben jij op Zoek?'. De selectievakjes staan gegroepeerd in een fieldset en legend combinatie, maar in het legend element staat nu een label element genest in plaats van gewoon tekst. Hierdoor is er geen relatie tussen de tekst 'Sportsoorten' en de selectievakjes. Dit geldt ook voor de naam boven de combobox Sportgroepen. Daarnaast is de tekst opgemaakt met het strong-element. Het strong-element mag niet puur voor opmaak gebruikt worden, enkel waar dat semantisch gepast is. Dat is hier niet het geval.

Bevinding 4: Op de homepage https://veendambeweegt.nl/ staan selectievakjes onder 'Naar welke sport ben jij op Zoek?'. De combobox onder 'Sportgroepen' heeft geen toegankelijke naam omdat het label verwijst naar een verkeerd id. Koppel het label correct zodat de combobox een toegankelijke naam heeft en plaats het buiten het legend element. Dit komt op meerdere pagina's voor, waaronder op pagina https://veendambeweegt.nl/sportaccommodaties/accommodatie-huren/ en op pagina https://veendambeweegt.nl/sportaccommodaties/.

Bevinding 5: Op pagina https://veendambeweegt.nl/sportaccommodaties/accommodatie-huren/ zijn er labels aanwezig voor de invoervelden, maar de waarde achter 'for' komt nier overeen met het id (of er is geen id) van het invoerveld. Bij sommige labels is er daarnaast geen waarde ingevuld, waardoor er geen toegankelijke naam is, ook niet als het label wel goed gekoppeld zou zijn. Dit geldt ook voor het selectievakje op dezelfde pagina.

Bevinding 6: Nieuwe bevinding op basis van nieuwe functionaliteit:
Het is voor ziende bezoekers duidelijk welke categorie in de hoofdnavigatie actief is, doordat de tekstkleur paars kleurt en de achtergrond lichtpaars kleurt. Deze informatie moet ook beschikbaar zijn voor hulpsoftware. Gebruik aria-current of een vergelijkbare techniek om dit probleem op te lossen.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://veendambeweegt.nl/asm/skills-garden-2/blokkenveld/ wordt verwezen naar 'het plusje'. Instructies die geleverd worden om content te begrijpen en te bedienen mogen niet alleen afhankelijk zijn van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 8: De invoervelden op pagina https://veendambeweegt.nl/sportaccommodaties/accommodatie-huren/ bevatten geen autocomplete-attributen. HMTL5 invoervelden die informatie over de gebruiker vragen, zoals naam/achternaam, adres en geboortedatum, moeten een juist autocomplete attritbuut hebben. Lees er meer over op pagina https://www.w3.org/TR/WCAG21/#input-purposes. Dit komt op meerdere pagina's voor, waaronder op pagina https://veendambeweegt.nl/evenement-aanmelden/.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 9: De e-mailadressen op pagina https://veendambeweegt.nl/sport/ouderenwerk-compaen/ zijn alleen herkenbaar als link doordat de kleur anders is dan de omringende tekst. Kleur mag niet als het enige visuele middel gebruikt worden om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Gebruik minimaal één andere manier om de linktekst te onderscheiden, bijvoorbeeld door de linktekst te onderstrepen.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 10: Wanneer bezoekers met viewport 1280 bij 1024 inzoomen naar 400% op pagina https://veendambeweegt.nl/informatie/nieuwsberichten/ zijn niet alle teksten op de pagina goed leesbaar omdat een deel van de tekst van de pagina af valt. Verder schuiven de teksten vanaf 175% zoom dusdanig over elkaar dat de teksten in het geheel niet meer leesbaar zijn. Dit herstelt zich weer bij 250% zoom. Zorg ervoor dat er geen informatie of functionaliteit verdwijnt bij inzoomen en vermijd daarbij het gebruik van een horizontale scrollbalk.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 11: Wanneer de social media iconen in de header van de pagina (iedere pagina) focus hebben, is dat niet goed zichtbaar voor iedereen. De contrastratio tussen de zwarte focusrand en de donkergrijze kleur van de iconen (HEX #575656) is 2,8:1 waar dat minimaal 3:1 moet zijn. Hetzelfde geldt voor de zwarte stippellijn zoals gebruikt in Firefox. Let op: de eisen omtrent focuszichtbaarheid worden strenger in de WCAG 2.2, lees er meer over op: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html.

Bevinding 12: Wanneer de combobox op de homepage onder 'Naar welke sport ben jij op Zoek?' focus heeft, is dat niet goed zichtbaar voor iedereen. De contrastratio tussen de blauwe focusrand (HEX #BFDEFF) en de witte achtergrond is 1,3:1 waar dat minimaal 3:1 moet zijn. Dit komt op meerdere pagina's voor, waaronder bij de combobox op pagina https://veendambeweegt.nl/sportaccommodaties/.

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 13: Op pagina https://veendambeweegt.nl/asm/skills-garden-2/blokkenveld komt een embedded video voor. Als de website (of webapp) gebruik maakt van sneltoetsen, mogen die de werking van screenreaders niet in de weg zitten. Daarom moet een bezoeker ze kunnen uitzetten, aanpassen, of moeten ze alleen actief zijn als er focus geplaatst wordt op het object waarop de sneltoetsen van toepassing zijn. Video's moeten een extra stuk code hebben die de standaard sneltoetsen van de videospeler uitschakelen. In Youtube kan je de sneltoetsen uitschakelen door in de URL van de ingebedde video de parameter 'disablekb=1' toe te voegen.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 14: Wanneer bezoekers inzoomen verandert het navigatiemenu in de header van de pagina in een hamburgermenu. Wanneer bezoekers met het toetsenbord door het menu navigeren gaat de toetsenbordfocus na het laatste item verder in de adresbalk en browserknoppen en vervolgens op de achterliggende pagina. Het menu blijft openstaan en verhindert het zicht op de pagina. Zorg ervoor dat bezoekers het menu zelf afsluiten, of dat het menu automatisch sluit na het laatste item.

Bevinding 15: Op pagina https://veendambeweegt.nl/over-ons/contact/ krijgt het e-mailadres twee keer focus, één keer onzichtbaar in de spatie vóór het zichtbare e-mailadres en één keer op het zichtbare e-mailadres. Dit is verwarrend voor bezoekers die met het toetsenbord navigeren maar het scherm wel kunnen zien. Verwijder de onzichtbare link uit de focus volgorde om dit probleem op te lossen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 16: De knoppen waarmee bezoekers de contentblokken op pagina https://veendambeweegt.nl/asm/skills-garden-2/blokkenveld/ kunnen in- en uitklappen krijgen geen zichtbare focus. Zorg ervoor dat bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren maar het scherm wél kunnen zien, weten waar de focus zich bevindt door een zichtbare focusrand toe te voegen. Dit komt op meerdere pagina's voor, waaronder op pagina.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 17: Op pagina https://veendambeweegt.nl/404 komt een zoekfunctie voor. Het zichtbare label van het veld is 'Zoeken'. De toegankelijke naam van het veld is echter 'Zoek naar'. Hierdoor kunnen bezoekers die gebruik maken van spraaksoftware het zoekveld niet of moeilijk bedienen. Zorg ervoor dat de zichtbare naam voorkomt in de toegankelijke naam, het liefst vooraan.
Dit probleem komt ook voor bij het zoekveld in de header op elke pagina.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 18: Aangepaste bevinding op basis van wijzigingen na een eerdere audit:
Wanneer bezoekers op pagina https://veendambeweegt.nl/sportaccommodaties/accommodatie-huren/ een verplicht veld niet invullen, verschijnt de melding 'Veld is verplicht'. De gebruiker moet een foutmelding krijgen wanneer een invoerveld niet goed is ingevuld of het formulier niet goed verzonden kan worden. De foutmelding moet beschrijven welke fout is gemaakt en wáár die is gemaakt. Dat een veld verplicht is is een foutsuggestie zoals beschreven in succescriterium 3.3.1 en geen voldoende foutidentificatie.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 19: Op alle pagina's komt het id "primary-menu' dubbel voor. Dit zorgt mogelijk voor toegankelijkheidsproblemen. Zorg ervoor dat id's uniek zijn.

Bevinding 20: Nieuwe bevinding op basis van wijzigingen naar aanleiding van een eerdere audit:
Op de homepage komt een ongesloten fieldset element voor. Dit veroorzaakt mogelijk toegankelijkheidsproblemen.

Bevinding 21: Nieuwe bevinding op basis van wijzigingen naar aanleiding van een eerdere audit:
Op de homepage komt een legend element voor binnen een div element. Dit is niet toegestaan en veroorzaakt mogelijk toegankelijkheidsproblemen.

Bevinding 22: Op de homepage wordt op meerdere plekken een div-element binnen een span-element geplaatst. Dit zorgt mogelijk voor toegankelijkheidsproblemen.

Bevinding 23: Op pagina https://veendambeweegt.nl/sporten/ komt een div-element zonder eindtag. Dit zorgt mogelijk voor toegankelijkheidsproblemen. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://veendambeweegt.nl/sportaccommodaties/.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 24: Op de homepage https://veendambeweegt.nl/ staan selectievakjes onder 'Naar welke sport ben jij op Zoek?'. De combobox onder 'Sportgroepen' heeft geen toegankelijke naam.
Dit komt op meerdere pagina's voor, waaronder op https://veendambeweegt.nl/sportaccommodaties/accommodatie-huren/.

Bevinding 25: Op de homepage https://veendambeweegt.nl/ staat een Google Maps iframe. Het iframe heeft geen beschrijving binnen het title-attribuut. Daarnaast is het iframe verborgen voor voorleessoftware met het aria-hidden attribuut. De knoppen in het iframe zijn echter nog wel bedienbaar met het toetsenbord. Zorg ervoor dat er geen interactieve elementen bedienbaar zijn in verborgen content, dit is verwarrend voor bezoekers die het scherm niet kunnen zien. Dit komt op meerdere pagina's voor, waaronder op pagina https://veendambeweegt.nl/sportaccommodaties/.

Bevinding 26: Wanneer bezoekers op pagina https://veendambeweegt.nl/evenement-aanmelden/ een datum en tijd hebben ingevuld, kunnen zij de informatie wissen met de X-knop. Deze knop heeft geen toegankelijke naam.

Bevinding 27: Het selectievakje onder de formulieren op pagina https://veendambeweegt.nl/sportaccommodaties/accommodatie-huren/ heeft geen toegankelijke naam.

Bevinding 28: Meerdere invoervelden op pagina https://veendambeweegt.nl/sportaccommodaties/accommodatie-huren/ hebben geen toegankelijke naam.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 29: Op de homepage https://veendambeweegt.nl/ staan selectievakjes en een combobox onder 'Naar welke sport ben jij op Zoek?'. Wanneer bezoekers op 'Weergeven op kaart' klikken, verschijnt er een laadanimatie. Hulpsoftware moet hier ook een update van krijgen. Vergelijkbare problemen komen ook voor op pagina https://veendambeweegt.nl/sportaccommodaties/.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2024-11-22 20:29:51 v2.4-011