Rapport:
Audit digitale toegankelijkheid website webshop Zwembad en Stadscamping Vitaloo

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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'.

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).

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.

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.

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/.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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).

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.

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.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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'.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.)

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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'.

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: 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.

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.

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.

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.

Uitkomst: Onvoldoende

Bevindingen: 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.