Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website webshop Zwembad en Stadscamping Vitaloo

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Webshop Zwembad en Stadscamping Vitaloo
Datum 19 april 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's en het bestelproces op webshopvitaloo.sudwestfryslan.nl/.
  • Alle PDF's op webshopvitaloo.sudwestfryslan.nl/.
Buiten de scope van het onderzoek valt:
  • Het betaalproces via Mollie.
  • 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: 84

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: In de header van iedere pagina staat het logo van Gemeente Súdwest-Fryslân en Zwembad Vitaloo (in één afbeelding). Deze afbeelding heeft geen alternatieve tekst. Zorg ervoor dat het zowel duidelijk is dat het logo's betreft, als dat de zichtbare tekst (de namen van de organisaties) voorkomt in de alternatieve tekst. Dit doet zich ook voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login. Let op: De afbeelding is op deze pagina daarnaast ook zo klein, dat het ook voor ziende bezoekers moeilijk is om de tekst op de afbeelding te lezen.

Bevinding 2: De afbeeldingen op de homepage https://webshopvitaloo.sudwestfryslan.nl/ zijn in principe decoratief, maar hebben een niet-beschrijvende alternatieve tekst: 'Category image'. Geef decoratieve afbeeldingen een alternatieve tekst die de inhoud van de afbeelding beschrijft, of verberg decoratieve afbeeldingen voor hulpsoftware. Vergelijkbare situaties komen voor op de productpagina's, zoals pagina https://webshopvitaloo.sudwestfryslan.nl/category/205/recreatief-zwemmen en pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen, waar de afbeelding de alternatieve tekst 'product image' heeft.

Bevinding 3: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login staat een afbeelding van een oog, waarmee bezoekers het wachtwoord zichtbaar kunnen maken (of weer verbergen). Deze afbeelding heeft geen alternatieve tekst, waardoor er ook een toegankelijke naam mist. Bezoekers die het scherm niet kunnen zien weten daarom niet wat dit icoon doet.

Bevinding 4: Wanneer bezoekers inzoomen op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account verandert het submenu in een hamburgermenu. Dit icoon heeft geen alternatieve tekst, waardoor er ook geen toegankelijke naam aanwezig is. Een vergelijkbare situatie komt voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders met de iconen om tickets en facturen te downloaden.

Bevinding 5: De profielfoto's op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/client/passes hebben geen alternatieve tekst. Hulpsoftware zal in plaats daarvan de bestandsnaam voorlezen. Voeg een alternatieve tekst toe, bijvoorbeeld 'Profielfoto *naam account*'. Dit geldt ook andere pagina's waarop profielfoto's op voorkomen, zoals https://webshopvitaloo.sudwestfryslan.nl/client/profiles.

Bevinding 6: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536, kunnen bezoekers tickets toevoegen aan Apple Wallet en Gpay. Deze afbeeldingen hebben echter geen alternatieve tekst. Hierdoor is deze informatie niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Voeg een beschrijvende alternatieve tekst (met taalwissel) toe aan de afbeeldingen, of plaats de links als platte tekst op de pagina.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: De invoervelden op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login hebben geen toegankelijke naam omdat het label-element niet gekoppeld is aan het input-element. Voeg een id toe aan het input-element dat overeenkomt met de waarde van het for-attribuut in het label-element om dit op te lossen.
Dit geldt ook voor het input-element dat verschijnt wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login op 'Vergeten?' klikken.

Bevinding 8: Op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen wordt het strong-element gebruikt om kopjes te maken (bijvoorbeeld '13 jaar en ouder'). Het gaat hier echter om labels van invoervelden. Het strong-element geeft aan dat tekst relatief aan de tekst eromheen belangrijker is. Gebruik het daarom niet puur voor styling, maar gebruik in plaats daarvan CSS om de tekst een andere opmaak te geven. Dit komt op alle pagina's van dit type voor.

Bevinding 9: Op pagina https://webshopvitaloo.sudwestfryslan.nl/category/223/abonnementen wordt het em-element gebruikt om teksten schuin te drukken. Het em-element geeft gesproken nadruk op een term of woord, gebruik het daarom niet puur voor opmaak. Gebruik CSS om de tekst schuin te maken en verwijder het em-element.

Bevinding 10: Het em-element wordt op enkele plekken, zoals op de ingezoomde weergave van pagina https://webshopvitaloo.sudwestfryslan.nl/client/account, ook gebruikt om CSS iconen in te plaatsen. Dit is verwarrend voor bezoekers die gebruik maken van voorleessoftware. Gebruik hiervoor een andere methode en verwijder het em-element. Een vergelijkbare situatie komt voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders met de iconen om tickets en facturen te downloaden en onder andere op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 met het pijl-icoon naast de link 'Terug'.

Bevinding 11: Op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen is de tekst 'Vrij zwemmen en banenzwemmen' gestyled als een koptekst, maar in de code niet opgemaakt als een kop. Bezoekers die gebruik maken van bijvoorbeeld voorleessoftware kunnen aan de hand van een sneltoets of koppenlijst langs de koppen op een pagina navigeren, om zo snel bij de inhoud te komen die zij zoeken. Dat kan echter alleen als visuele koppen ook opgemaakt zijn als kop. Zorg daarom voor een logische, aflopende koppenstructuur op de pagina door visuele koppen op te maken met h-elementen (zoals het h2 element).

Bevinding 12: In het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen kunnen bezoekers een datum kiezen. Deze informatie wordt gepresenteerd in tabelvorm met interactieve opties (zie succescriterium 2.1.1), maar omdat er geen gebruik is gemaakt van een tabel die herkenbaar is voor hulpsoftware, is er geen relatie tussen de koppen en de cellen. Zorg ervoor dat deze informatie ook beschikbaar is voor bezoekers die het scherm niet kunnen zien. Een vergelijkbare situatie komt voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders en op pagina https://webshopvitaloo.sudwestfryslan.nl/client/passes, waar bestellingen worden getoond in een tabelvorm, maar tabel-codering mist.

Bevinding 13: Wanneer bezoekers in het bestelproces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen een couponcode willen invoeren, verschijnt een dialoogvenster met daarin een invoerveld. Deze heeft wel een visueel label, maar geen label dat beschikbaar is voor hulpsoftware. Koppel een (eventueel onzichtbaar) label-element met de attributen for en id aan het input-element.

Bevinding 14: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders komt visueel een tablijst voor, maar de 'tabbladen' zijn alleen opgemaakt als link. Het is nu ook niet duidelijk voor bezoekers die het scherm niet kunnen zien welk 'tabblad' actief is. Zie https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/.

Bevinding 15: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 komen keuzerondjes voor als bezoekers een pas activeren. Deze keuzerondjes zijn nu gegroepeerd in een lijst element met daarboven gewone paragraaftekst. Hierdoor is er geen relatie tussen de tekst en de keuzerondjes. Gebruik in plaats hiervan een fieldset en legend om de keuzerondjes te groeperen.

Bevinding 16: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account een veld niet invullen, verschijnt de melding 'Voornaam en/of achternaam moet tussen 1 en 100 karakters zijn.' Deze melding staat in een apart venster dat niet wordt opgemerkt door hulpsoftware. Zorg ervoor dat aanvullende content ook beschikbaar is voor bezoekers die het scherm niet kunnen zien.

Bevinding 17: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account wordt in het submenu de huidige pagina aangegeven met een andere kleur. Dit is visuele informatie die niet beschikbaar is voor hulpsoftware. Los dit bijvoorbeeld op door gebruik te maken van aria-current op de link van de huidige pagina. Dit komt ook voor op de andere pagina's binnen de 'Mijn account' omgeving.

Bevinding 18: De PDF op pagina https://cdn.booqi.app/subscriptions/2024-04-03/102/cc68145c-f1cb-48a1-8250-e77c9afa0d07/invoice.pdf is niet gecodeerd en daardoor is er voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van deze bevinding nieuwe toegankelijkheidsbevindingen kunnen ontstaan. Dit geldt ook voor de PDF op pagina https://cdn.booqi.app/orders/2024-04-12/102/22133571-5167-4aa4-a14c-d24c52e63c28/tickets.pdf.

Bevinding 19: Advies: In de datumkiezer in het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen is het voor bezoekers die het scherm kunnen zien duidelijk welke datum de huidige dag is. Overweeg deze informatie ook extra beschikbaar te maken voor bezoekers die gebruik maken van hulpsoftware door het attribuut aria-current=date te gebruiken.

Bevinding 20: Advies: Er mist een duidelijke koppenstructuur op de website. Op de homepage https://webshopvitaloo.sudwestfryslan.nl/ mist bijvoorbeeld een h1-kop, en zijn alle tussenkopjes van niveau 5. Een logische, aflopende koppenstructuur is een belangrijk navigatiemiddel voor bezoekers die gebruik maken van bijvoorbeeld voorleessoftware. Pas de koppenstructuur daarom aan. Dit doet zich op meerdere pagina's voor, waaronder op pagina https://webshopvitaloo.sudwestfryslan.nl/bestaatniet.

Bevinding 21: Advies: De website beschikt niet over landmarks, zoals een header en een footer. Deze elementen helpen bezoekers die gebruik maken van hulpsoftware met navigeren. Overweeg deze toe te voegen.

Bevinding 22: Advies: Onderaan iedere pagina staat een lijst-element met daarin maar één item ('Privacy policy'). Vermijd lijsten met maar één element, dit is verwarrend voor bezoekers die gebruik maken van voorleessoftware.

Bevinding 23: Advies: Op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen hebben de invoer-elementen een aria-label dat overeenkomt met de grotere tekst links van het invoer-element. Hierdoor is er een gedeelte van tekst, zoals de prijzen en de extra uitleg, niet gekoppeld aan de invoerelementen. Bezoekers die gebruik maken van voorleessoftware bevinden zich in een formulier in de zogenaamde 'formuliermodus', hierdoor lezen zij niet automatisch tekst die zich buiten het formulier bevindt. Overweeg deze tekst op een andere manier te koppelen. bijvoorbeeld met aria-describedby. Lees meer over dit aria-attribuut op https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 24: Op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen (en gelijksoortige pagina's), komt de knop 'Doorgaan' in de codevolgorde vóór de totaalprijs en 'Meer informatie'. Bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren en het scherm niet kunnen zien, missen deze informatie mogelijk. Plaats deze informatie daarom vóór knoppen om verder te gaan in het proces.

Bevinding 25: In het bestelproces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen komt de optie 'Heb je een coupon? Inwisselen' ná de knop 'Afrekenen'. Bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren en het scherm niet kunnen zien, missen deze optie mogelijk. Plaats deze informatie daarom vóór de afrekenknop om verder te gaan in het proces.

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 26: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login staan invoervelden waar bezoekers eigen gegevens moeten invoeren. HMTL5 invoervelden die informatie over de gebruiker vragen, zoals naam/achternaam, adres en geboortedatum, moeten een juist autocomplete attribuut hebben. Op pagina https://www.w3.org/TR/WCAG21/#input-purposes staat meer informatie over welke velden een autocomplete attribuut nodig hebben en welke dat moet zijn. Dit geldt ook voor het veld - E-mailadres in het dialoogvenster dat verschijnt wanneer bezoekers op 'Vergeten' klikken.

Bevinding 27: Wanneer bezoekers die niet ingelogd zijn het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen doorlopen, moeten zij bij de stap 'Persoonlijke gegevens' de Voornaam. Achternaam en het E-mailadres invoeren. HMTL5 invoervelden die informatie over de gebruiker vragen, zoals naam/achternaam, adres en geboortedatum, moeten een juist autocomplete attribuut hebben. Op pagina https://www.w3.org/TR/WCAG21/#input-purposes staat meer informatie over welke velden een autocomplete attribuut nodig hebben en welke dat moet zijn. Wanneer bezoekers zijn ingelogd worden de gegevens automatisch ingevuld.
Bovenstaande komt op meerdere pagina's voor, waaronder op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account en op pagina https://webshopvitaloo.sudwestfryslan.nl/client/profiles.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 28: Wanneer een niet-actief tabblad op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders focus heeft, is dat alleen zichtbaar door een verandering in kleur. Kleur mag niet als enige worden gebruikt om informatie, bijvoorbeeld over toetsenbordfocus, door te geven. Gebruik nog minimaal één andere manier, bijvoorbeeld een goed zichtbare focusrand.

Bevinding 29: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account wordt in het submenu de huidige pagina aangegeven met een andere kleur. Kleur mag niet het enige middel zijn om informatie over te brengen. Gebruik daarom nog een methode om deze informatie over te brengen, bijvoorbeeld door de link van de huidige pagina te onderstrepen of dikgedrukt te maken. Dit komt ook voor bij de andere pagina's in de 'Mijn account' omgeving. Deze informatie moet ook beschikbaar zijn voor gebruikers van hulpsoftware. Zie 1.3.1 voor meer informatie.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 30: Op de homepage https://webshopvitaloo.sudwestfryslan.nl/ staan 'Lees meer' links. De contrastratio tussen de groene tekst (HEX #91C611) en de witte achtergrond is 2:1 waar dat minimaal 4,5:1 moet zijn. Op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen komt dezelfde kleur tekst voor ('Meer informatie' en 'Heb je een coupon? Inwisselen') op een grijze achtergrond (HEX #FAFAFC). Hier is de contrastratio 1,9:1 waar dat minimaal 4,5:1 moet zijn. Een vergelijkbaar situatie komt voor op de pagina waar bezoekers een datum kiezen voor hun product (bijvoorbeeld in het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen). De huidige datum is aangegeven in dezelfde groene kleur.

Bevinding 31: In het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen kunnen bezoekers een datum kiezen. Bij muishover kleurt de tekst van de datum groen (HEX #91C611) op een roze achtergrond (HEX #D9668E). De contrastratio is hier 1,6:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 32: Op pagina https://webshopvitaloo.sudwestfryslan.nl/bestaatniet staat de witte tekst 'Go back' op een groene achtergrond (HEX #1ABC9C). De contrastratio is hier 2,4:1 waar dat minimaal 4,5:1 moet zijn. Wanneer de link focus heeft kleur de achtergrond iets donkerder (HEX #13A085), dan is de contrastratio 3,2:1 waar dat minimaal 4,5:1 moet zijn. Deze kleur tekst komt ook voor op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders.

Bevinding 33: In de stap 'Persoonlijke gegevens' in het bestelproces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen staat de tekst '* = Velden zijn verplicht.'. De contrastratio tussen de grijze tekst (HEX #8091A7) en de witte achtergrond is 3,2:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 34: Wanneer bezoekers in het bestelproces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen een couponcode invoeren en dat is succesvol, verschijnt er groene tekst (HEX #19BC90) op een lichtblauwe achtergrond (HEX #E4FBF5). De contrastratio is hier 2,2:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 35: Wanneer bezoekers in het bestelproces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen een couponcode invoeren en dat is niet succesvol, verschijnt er rode tekst (HEX #C3463C) op een lichtrode achtergrond (HEX #FCEAE9). De contrastratio is hier 4,2:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 36: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders wordt de status van de bestelling aangegeven in groene tekst (als de bestelling voltooid is) (HEX #1EE0AC) op een groene achtergrond (HEX #DDFAF2). De contrastratio is hier 1,5:1 waar dat minimaal 4,5:1 moet zijn. Als de bestelling geannuleerd is wordt dat getoond in rode tekst (HEX #E85347) op een rode achtergrond (HEX #FBE5E3), hier is de contrastratio 3:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 37: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders komt grijze tekst voor (HEX #8094AE) op een witte achtergrond. De contrastratio is hier 3,1:1 waar dat minimaal 4,5:1 moet zijn. Dit doet zich ook voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 en op https://webshopvitaloo.sudwestfryslan.nl/client/passes. Op deze pagina voldoet de tekst in de kleur HEX #8091A7 ook niet, de contrastratio is hier 3,2:1 waar dat minimaal 4,5:1 zou moeten zijn.

Bevinding 38: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 komt voor het activeren van een pas blauwe tekst (HEX #08A3BA) op een blauwe achtergrond voor (HEX #E1F8FB). De contrastratio is hier 2,7:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 39: In de PDF op pagina https://cdn.booqi.app/orders/2024-04-12/102/22133571-5167-4aa4-a14c-d24c52e63c28/tickets.pdf komt witte tekst op een blauw/groene achtergrond voor (HEX 03AF8D). De contrastratio is hier 2,7:1 waar dat minimaal 3:1 moet zijn voor grote tekst.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 40: In de code van de website is ingesteld met maximum-scale=1 dat bezoekers op mobiel niet kunnen inzoomen. Dit verhindert dat de website voldoet aan enkele succescriteria, waaronder dit succescriterium. Zorg ervoor dat bezoekers zowel op desktop als op mobiele apparaten kunnen inzoomen.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 41: Op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536, kunnen bezoekers tickets toevoegen aan Apple Wallet en Gpay. Dit zijn afbeeldingen met tekst erin. Voor bezoekers met een visuele beperking is het belangrijk dat tekst als HTML wordt geplaatst en niet in een afbeelding. Zij kunnen tekst in HTML namelijk met een eigen stylesheet naar hun wensen opmaken, terwijl tekst in een afbeelding niet aanpasbaar is. Plaats de links als platte tekst indien mogelijk, of voeg een toegankelijk alternatief toe. Let op: het toevoegen van een alternatieve tekst zoals beschreven in succescriterium 1.1.1 is niet voldoende om te voldoen aan dit succescriterium.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 42: In de code van de website is ingesteld met maximum-scale=1 dat bezoekers op mobiel niet kunnen inzoomen. Dit verhindert dat de website voldoet aan enkele succescriteria, waaronder dit succescriterium. Zorg ervoor dat bezoekers zowel op desktop als op mobiele apparaten kunnen inzoomen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 43: Wanneer de knop Inloggen op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login focus heeft, is dat zichtbaar door een lichtroze focusrand. De contrastratio tussen de focusrand (HEX #F3EDFF) en de witte achtergrond is 1,1:1 waar dat minimaal 3:1 moet zijn. Bij de tekst 'Vergeten?' geldt dit ook, echter wordt daar de tekst zelf wel onderstreept waardoor het duidelijker is dat de knop focus heeft. Dit geldt ook voor het de knop 'Doorgaan' in het dialoogvenster dat verschijnt wanneer bezoekers op 'Vergeten?' klikken. Een vergelijkbare situatie komt voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 als bezoekers een pas activeren, bij de knop 'Terugkeren' in het dialoogvenster 'Pas activeren bevestigen'. De focusrand is daar lichtgrijs (HEX #E2DFE2). De contrastratio op de witte achtergrond is 1,3:1 waar dat minimaal 3:1 zou moeten zijn.

Bevinding 44: De invoervelden op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login hebben een grijze rand (HEX #DBDFEA). De contrastratio op de witte achtergrond is hier 1,3:1 waar dat minimaal 3:1 moet zijn. Dit geldt ook voor het invoerveld in het dialoogvenster dat verschijnt wanneer bezoekers op 'Vergeten?' klikken. Dit doet zich ook voor op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536.

Bevinding 45: Wanneer de invoervelden op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login focus hebben, verandert de rand van het invoerveld van zwart naar grijs naar groen (HEX #1ABC9C). Deze kleur heeft een contrastratio van 2,4:1 op de witte achtergrond, waar dat minimaal 3:1 moet zijn. De focusrand die daaromheen verschijnt (HEX #1ABC9C) , heeft een contrastratio van 1:1 op de witte achtergrond, waar dat minimaal 3:1 moet zijn. Dit geldt ook voor het invoerveld in het dialoogvenster dat verschijnt wanneer bezoekers op 'Vergeten?' klikken. Dit doet zich ook voor op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen en de invoervelden onder 'Persoonlijke gegevens' in het bestelproces op de website.
Een vergelijkbare situatie komt elders voor: Wanneer de link 'Go back' op pagina https://webshopvitaloo.sudwestfryslan.nl/bestaatniet focus heeft is dat zichtbaar door een lichtpaarse focusrand (HEX #EAE5FB). De contrastratio op de grijze achtergrond (HEX #F5F6FA) is 1,1:1 waar dat minimaal 3:1 moet zijn.

Bevinding 46: In het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen kunnen bezoekers een datum kiezen. Bij muishover kleurt de achtergrond van de datum roze (HEX #D9668E) en verschijnt er een lichtblauwe focusrand (HEX #44BBDD). De focusrand heeft een contrastratio van 1,5:1 met de roze achtergrond en een contrastratio van 2,2:1 op de witte achtergrond, waar dit minimaal 3:1 moet zijn.

Bevinding 47: Wanneer bezoekers inzoomen op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account verandert het submenu in een hamburgermenu. Wanneer deze knop focus heeft, kleuren de strepen geel (HEX #FFEB3B) op een grijze achtergrond (HEX #E5E9F2). De contrastratio is hier 1,1:1 waar dat minimaal 3:1 moet zijn. Een vergelijkbare situatie komt voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders, met de knoppen om tickets en facturen te downloaden.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 48: De functie om het wachtwoord te tonen en te verbergen op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login is niet bereikbaar en bedienbaar met het toetsenbord, omdat tabindex -1 is toegepast op het a-element. Zorg ervoor dat functies die met een muisaanwijzer bereikbaar en bedienbaar zijn, ook bereikbaar en bedienbaar zijn met het toetsenbord (of zorg voor een toegankelijk alternatief). Daarnaast is hier een a-element gebruikt, terwijl het om een button-functionaliteit gaat. Gebruik hier daarom liever een button-element, met bijvoorbeeld de role 'switch' om een aan/uit knop aan te bieden. Let daarbij op toetsenbord toegankelijk en het correct communiceren van de verschillende statussen.

Bevinding 49: Op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen is de link 'Terug' niet bereikbaar en bedienbaar met het toetsenbord omdat het href attribuut ontbreekt binnen het a-element.

Bevinding 50: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen doorgaan in het proces, komen zij op een pagina waar zij een datum moeten kiezen. De datumkiezer is niet bereikbaar en bedienbaar met het toetsenbord. Zorg ervoor dat functies die met een muisaanwijzer bereikbaar en bedienbaar zijn, ook bereikbaar en bedienbaar zijn met het toetsenbord (of zorg voor een toegankelijk alternatief). Let op dat ook de juiste statussen worden doorgegeven, zodat de bezoeker weet welke datum momenteel geselecteerd is. Gebruik bijvoorbeeld aria-selected voor de geselecteerde datum (zie ook het advies over aria-current bij 1.3.1).

Bevinding 51: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/profiles een profiel aanmaken kunnen bezoekers die gebruik maken van de muis selecteren welk deel van de afbeelding zij willen gebruiken voor hun profielfoto. Deze optie, of een toegankelijk alternatief, is niet beschikbaar voor bezoekers die gebruik maken van het toetsenbord.

Bevinding 52: Wanneer bezoekers een pas hebben geactiveerd, kunnen zij op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 met de muis de pas omdraaien om aanvullende gegevens te activeren. Deze optie, of een toegankelijk alternatief, is niet beschikbaar voor bezoekers die gebruik maken van het toetsenbord.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevinding 53: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login een veld niet invullen en op Inloggen klikken, verschijnt alleen de melding 'Invalid email/password combination!'. Deze tekst verschijnt kort in een dialoogvenster, waarbij een aflopende balk de tijd aangeeft dat deze tekst blijft staan. Daarna verdwijnt de tekst. Als een bezoeker een tijdslimiet krijgt om iets te lezen of een actie uit te voeren, moet de bezoeker de tijdslimiet kunnen uitzetten, aanpassen (naar minstens 10 keer de tijdslimiet) of verlengen (minstens 10 keer). Dat is hier niet het geval. Het advies geldt hier om de melding op de pagina zelf (dus niet in een apart venster) te plaatsen, totdat de bezoeker het formulier opnieuw heeft ingevuld en het formulier verzendt, of de bezoeker de pagina refresht. Dit geldt voor meerdere dialoogvenster, bijvoorbeeld bij het niet invullen van een veld op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 54: Op iedere pagina mist een manier om herhalende blokken content, zoals de links in de header, over te kunnen slaan. Een bezoeker moet herhalende content (zoals menu's, zoekfunctie en herhalende blokken bovenaan de website) over kunnen slaan en via een skiplink direct naar de hoofdcontent kunnen gaan.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 55: Iedere pagina heeft als titel 'Zwembad en Stadscamping Vitaloo', ongeacht op welke pagina de bezoeker is. Dit zegt de bezoeker te weinig over de daadwerkelijke inhoud van de pagina. Zorg ervoor dat iedere pagina een unieke beschrijvende paginatitel heeft.

Bevinding 56: De PDF op pagina https://cdn.booqi.app/subscriptions/2024-04-03/102/cc68145c-f1cb-48a1-8250-e77c9afa0d07/invoice.pdf heet enkel 'Factuur'. Dit is onvoldoende beschrijvend. Voeg bijvoorbeeld het onderwerp voor de factuur toe, of tenminste de afzender (Zwembad en Stadscamping Vitaloo). Daarnaast wordt nu de bestandsnaam en niet de titel getoond bij openen van de PDF. Kies daarom bij 'Weergave bij openen' (in de instellingen van de PDF) voor 'Documenttitel'. Dit geldt ook voor de PDF op pagina https://cdn.booqi.app/orders/2024-04-12/102/22133571-5167-4aa4-a14c-d24c52e63c28/tickets.pdf.

Bevinding 57: Advies: Het is op pagina https://webshopvitaloo.sudwestfryslan.nl/bestaatniet niet duidelijk dat deze pagina nog bij de website van Vitaloo hoort, omdat de afzender hier 'Booqi' is. In dit geval geldt het advies een eigen 404-pagina toe te voegen aan de website, in plaats van afhankelijk te zijn van de geautomatiseerde pagina van het CMS.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 58: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login op 'Vergeten' klikken, opent een dialoogvenster. Wanneer bezoekers vervolgens met de tab-toets verder navigeren, verplaatst de focus zich naar de adresbalk van het browservenster. Zorg ervoor dat de focus in het dialoogvenster blijft totdat de bezoeker de sluitknop op de knop 'Doorgaan' gebruiken. Dit doet zich op meerdere pagina's voor, waaronder op pagina https://webshopvitaloo.sudwestfryslan.nl/client/profiles en op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 wanneer een profiel gekoppeld wordt aan de pas.

Bevinding 59: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen op 'Meer informatie' klikken verschijnt een dialoogvenster. Wanneer bezoekers verder navigeren komt de toetsenbordfocus op de sluitknop, en komt daarna onzichtbaar op de hele pagina. Dit is onlogisch en verwarrend voor bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren. Verwijder de focus van de hele pagina en laat de focus op de sluit-knop totdat bezoekers het venster sluiten. Dit doet zich in meerdere dialoogvensters voor, bijvoorbeeld in het dialoogvenster dat verschijnt wanneer bezoekers in het bestelproces een couponcode succesvol hebben ingevoerd.

Bevinding 60: Wanneer bezoekers in het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen een couponcode toevoegen en het dialoogvenster weer sluiten, gaat de focus volgorde verder bovenaan de pagina. Dit is niet logisch. Zorg ervoor dat bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren weer verder kunnen vanaf waar ze waren gebleven in het bestelproces, door de focus te plaatsen op de knop 'Afrekenen'.

Bevinding 61: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account de gegevens willen aanpassen, komt de focus daarna op de knop 'Opslaan'. Bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren moeten daarom terúg navigeren om bij de invoervelden te komen die zij aan willen passen. Dit is een onlogische focusvolgorde. Plaats de focus bijvoorbeeld in het eerste formulierveld om deze bevinding op te lossen.

Bevinding 62: Wanneer bezoekers inzoomen op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account verandert het submenu in een hamburgermenu. Wanneer bezoekers dat menu open gaat de focusvolgorde eerst verder op de achterliggende pagina, dan pas in het openstaande menu en gaat daarna verder naar de browserbalk. Zorg ervoor dat de focus direct in het menu komt en dat bezoekers dit menu ofwel zelf moeten sluiten of dat het menu vanzelf sluit wanneer bezoekers uit het menu navigeren.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 63: In de header van iedere pagina staan twee logo's in één afbeelding die samen een link vormen naar de homepage. Omdat een alternatieve tekst mist (zie succescriterium 1.1.1) is er ook geen linkdoel aanwezig. Bezoekers die gebruik maken van voorleessoftware horen wel dát er een link aanwezig is, maar missen verdere context om te bepalen waar de link naar verwijst.

Bevinding 64: Op de homepage https://webshopvitaloo.sudwestfryslan.nl/ staan links met de tekst 'Lees meer'. Dit biedt bezoekers die het scherm niet kunnen zien onvoldoende context om te weten waar de link naar verwijst. Daarnaast lijkt het hier niet om een daadwerkelijke link te gaan, maar een uitklapbare knop. Gebruik hiervoor daarom een button-element met het aria-expanded attribuut.

Bevinding 65: Meerdere elementen die een knop zouden moeten zijn, zijn nu een link-element zonder toegankelijk linkdoel, zoals de 'knoppen' op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders om tickets en facturen te downloaden. Zie voor verder advies succescriterium 4.1.2.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 66: Er moet meer dan één manier beschikbaar zijn om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces. Dat is niet voor alle pagina's het geval. Voeg bijvoorbeeld een zoekfunctie of een sitemap toe om dit probleem op te lossen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 67: Op de homepage https://webshopvitaloo.sudwestfryslan.nl/ krijgt ieder blok (zoals 'Recreatief zwemmen' twee keer focus: één keer onzichtbaar op de afbeelding, en één keer zicht op de link 'Selecteren'. Dit is verwarrend voor meerdere bezoekersgroepen, waaronder voor bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren maar het scherm wel kunnen zien. Zorg ervoor dat het altijd duidelijk is welk element op de pagina focus heeft door een zichtbare focusrand toe te voegen. In dit geval geldt echter het advies één keer focus te geven op de link en het klikgebied daarvan te vergroten naar het hele blok, zodat er geen dubbele links voorkomen op de pagina. Dit doet zich ook voor op de productpagina's.

Bevinding 68: Op onder andere pagina https://webshopvitaloo.sudwestfryslan.nl/client/account krijgen het navigatiemenu en alle interactieve items op de pagina geen zichtbare focusrand. Zorg ervoor dat het altijd duidelijk is welk element op de pagina focus heeft door een zichtbare focusrand toe te voegen. Dit geldt voor meerdere pagina's in de 'Mijn account' omgeving. In ingezoomde weergave krijgt het hamburgermenu wel zichtbare focus, maar niet de elementen in het menu zelf (en overige elementen op de pagina.)

2.5 Input modaliteiten

2.5.2 Aanwijzerannulering (Niveau A)

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Uitkomst: Onvoldoende

Bevinding 69: In het proces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen kunnen bezoekers met het indrukken van de muisknop een oneindig oplopende teller van toegevoegde kaartjes activeren. Zorg ervoor dat niet het down-event van een aanwijzer (zoals een muis) maar het up-event een actie activeert, zodat bezoekers de actie kunnen annuleren door geen up-event op het element te laten plaatsvinden. Oftewel: Knoppen en links mogen nooit activeren bij een het indrukken van de muisklik, maar pas bij het loslaten.

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 70: In de header van iedere pagina staan twee logo's in één afbeelding die samen een link vormen naar de homepage. Omdat een alternatieve tekst mist (zie succescriterium 1.1.1) komt het zichtbare label niet voor in de toegankelijke tekst, waardoor de link moeilijk of niet te bedienen is voor bezoekers die gebruik maken van spraakgestuurde navigatie.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 71: Pagina https://webshopvitaloo.sudwestfryslan.nl/bestaatniet mist een taalaanduiding binnen het html-element. Zorg ervoor dat iedere pagina een taalaanduiding heeft die overeenkomt met de hoofdtaal van de pagina. In dit geval geldt het advies een eigen 404-pagina te maken.

Bevinding 72: Er is geen taal ingesteld voor de PDF op pagina https://cdn.booqi.app/subscriptions/2024-04-03/102/cc68145c-f1cb-48a1-8250-e77c9afa0d07/invoice.pdf. Zorg ervoor dat de hoofdtaal van de PDF (in dit geval Nederlands) is ingesteld zodat voorleessoftware het bestand in de juiste taal kan voorlezen. Dit geldt ook voor de PDF op pagina https://cdn.booqi.app/orders/2024-04-12/102/22133571-5167-4aa4-a14c-d24c52e63c28/tickets.pdf.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 73: De afbeeldingen op de homepage https://webshopvitaloo.sudwestfryslan.nl/ hebben een Engelstalige alternatieve tekst: 'Category image'. Geef de afbeeldingen een beschrijvende Nederlandstalige tekst of verberg ze voor hulpsoftware. Voor anderstalige tekst dan de hoofdtaal op een pagina geldt dat een taalwissel moet worden aangegeven, maar in dit geval geldt het advies de teksten aan te passen (zie succescriterium 1.1.1). Dit doet zich ook voor op de productpagina's.

Bevinding 74: Wanneer bezoekers inzoomen verandert het navigatiemenu bovenaan iedere pagina in een hamburgermenu. De toegankelijke naam van dit menu is 'Toggle navigation'. Omdat er geen taalwissel is aangegeven, zal hulpsoftware deze tekst in het Nederlands voorlezen, waardoor de tekst praktisch onverstaanbaar is. In dit geval geldt het advies het menu een Nederlandstalige toegankelijke naam te geven.

Bevinding 75: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login een veld niet invullen en op Inloggen klikken, verschijnt de melding 'Invalid email/password combination!'. Voor deze tekst is geen taalwissel aangegeven. In dit geval geldt het advies de tekst naar het Nederlands te vertalen, aangezien de hoofdtaal van de pagina Nederlands is. Dit geldt ook voor de toegankelijke naam voor de sluitknop in dit venster, als ook voor de sluitknop van het dialoogvenster dat verschijnt wanneer bezoekers op 'Vergeten?' klikken.

Bevinding 76: Vergelijkbare problemen met Engelstalige namen van interactieve elementen komen op meerdere pagina's voor, waaronder op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen met de knoppen 'quantity-minus' en 'quantity plus en de knop 'close modal' in het dialoogvenster dat verschijnt wanneer bezoekers in het bestelproces een couponcode willen invoeren. Ook in het dialoogvenster op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536, bij het activeren van een pas, heeft de knop om het dialoogvenster te sluiten de naam 'close'.

3.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

Informatie over succescriterium 3.2.1 Bij focus

Uitkomst: Onvoldoende

Bevinding 77: Wanneer bezoekers een pas activeren op pagina https://webshopvitaloo.sudwestfryslan.nl/client/pass/22536 en focus hebben op het keuzerondje 'Profiel toevoegen' worden zij direct, zonder activering door de bezoeker doorgestuurd naar pagina https://webshopvitaloo.sudwestfryslan.nl/client/profiles?add=true&pass=22536. Dit is een contextwijziging die niet verwacht wordt door bezoekers. Het advies is hier om de optie 'Profiel toevoegen' uit de keuzerondjes optie te verwijderen en een aparte link daaronder toe te voegen die bezoekers die naar de Profiel pagina verwijst, voor het geval zij graag eerst een nieuw profiel willen aanmaken.

3.2.3 Consistente navigatie (Niveau AA)

Informatie over succescriterium 3.2.3 Consistente navigatie

Uitkomst: Voldoende

Bevinding 78: Advies: Pagina https://webshopvitaloo.sudwestfryslan.nl/bestaatniet mist een navigatiemenu. Zorg er bij voorkeur voor dat alle pagina's op een website over dezelfde navigatiestructuur beschikken.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 79: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account een veld niet invullen, verschijnt de melding 'Voornaam en/of achternaam moet tussen 1 en 100 karakters zijn.' Een goede foutmelding moet de bezoeker vertellen welke fout er is gemaakt en waar de fout is gemaakt. Bijvoorbeeld 'Het veld Voornaam is niet ingevuld'. Dat het veld een bepaald aantal tekens moet bevatten is een foutsuggestie zoals bedoeld onder succescriterium 3.3.3.

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 80: Wanneer bezoekers op pagina https://webshopvitaloo.sudwestfryslan.nl/client/login een veld niet invullen en op Inloggen klikken, verschijnt de melding 'Invalid email/password combination!' in een (visueel) dialoogvenster. Dit venster heeft echter geen toegankelijke naam en rol. Het dialoogvenster dat verschijnt wanneer bezoekers op 'Vergeten?' klikken heeft wel de role 'dialog' maar mist een toegankelijke naam. Dit doet zich op meerdere pagina's voor, waaronder op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen wanneer bezoekers op 'Meer informatie' klikken.

Bevinding 81: Wanneer bezoekers in het bestelproces op pagina https://webshopvitaloo.sudwestfryslan.nl/product/293799/vrij-zwemmen-en-banenzwemmen een couponcode willen invoeren, verschijnt een dialoogvenster met daarin een invoerveld. Dit invoerveld heeft geen toegankelijke naam.

Bevinding 82: Wanneer bezoekers inzoomen op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account verandert het submenu in een hamburgermenu. Dit icoon heeft geen toegankelijke naam. Een vergelijkbare situatie komt voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders met de iconen om tickets en facturen te downloaden.

Bevinding 83: Wanneer bezoekers inzoomen op pagina https://webshopvitaloo.sudwestfryslan.nl/client/account verandert het submenu in een hamburgermenu. Dit menu is opgemaakt als een link, maar heeft de functie van een knop. Een link stuurt de bezoeker ergens heen, zoals een andere pagina of een anker op dezelfde pagina. Een knop voert een actie uit, zoals het openen en sluiten van content. Zorg ervoor dat de juiste html elementen worden gebruikt, in dit geval is dat een knop. Let op dat dan ook de juiste status wordt doorgegeven, bijvoorbeeld met aria-expanded. Een vergelijkbare situatie komt voor op pagina https://webshopvitaloo.sudwestfryslan.nl/client/orders met de iconen om tickets en facturen te downloaden.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 84: Wanneer pagina's geladen worden, verschijnt er een laadanimatie in beeld. Deze informatie is niet beschikbaar voor hulpsoftware. Bezoekers die voorleessoftware gebruiken en het scherm niet kunnen zien, krijgen daardoor geen statusupdate. Zorg ervoor dat zichtbare statusupdates ook voorkomen in de accessibility tree.

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-12-22 04:15:07 v2.4-011