Quickscan digitale toegankelijkheid van het bestelproces van https://tickets.vangoghmuseum.nl/nl/tickets

#1 - Sessie verloopt zonder waarschuwing vooraf

Op de pagina's met boekingsstappen verloopt de sessie zonder voorafgaande waarschuwing, waardoor er een omleiding naar de eerste stap plaatsvindt. Zorg dat bezoekers de mogelijkheid hebben om deze tijdslimiet uit te zetten, aan te passen of te verlengen.

#2 - Paginatitel op alle pagina's dezelfde tekst

Alle pagina's in de steekproef hebben dezelfde tekst in het title-element staan, namelijk "Van Gogh Museum - Online tickets". In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina's dezelfde tekst? Dan kan dit verwarrend zijn voor de gebruiker. De navigatie tussen pagina's wordt dan ook lastiger.

Oplossing:

Verander de tekst in het title-element, zodat elke pagina een unieke title-tekst heeft.

#3 - Logo heeft meer tekst dan het tekstalternatief

Bovenaan de website staat een logo. De volledige tekst die in het logo staat is "Van Gogh Museum Amsterdam". Het tekstalternatief is "Logo".

<img
  src="/assets/15/ticketstreet_banner/default/ticketstreet_ticketstreet-logo.png"
  alt="Logo"
/>

In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

alt="van Gogh Museum Amsterdam"

#4 - Logo is een link, maar bestemming is onbekend

Bovenaan de pagina staat een logo. Het logo is een link, maar de tekst die de bestemming van de link beschrijft is "Logo". Hierdoor weten gebruikers van ondersteunende technologieën niet naar welke pagina of inhoud de link leidt.

Oplossing:

Voeg alt-tekst toe die de volledige tekst van het logo bevat, of geef tekst die alleen zichtbaar is voor schermlezers, zoals een aria-label.

#5 - Tekst van het logo staat niet in toegankelijke naam

Bovenaan de pagina staat het logo. Dit logo is tegelijk ook een link. De zichtbare tekst is "Van Gogh Museum Amsterdam", en de toegankelijke naam is "Logo". Zoals je ziet is de toegankelijke naam van de link niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als je hem met je stem wilt activeren. Je noemt dan namelijk de tekst die je in het logo ziet. Als de toegankelijke naam anders is, zal het systeem de link dus niet herkennen.

Oplossing:

Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

#6 - Huidige pagina alleen visueel aangegeven

De link naar de huidige pagina in het menu (de bestelstappen) is alleen visueel te herkennen. Bezoekers die de pagina laten voorlezen, hebben geen toegang tot deze informatie.

<a
  href="/nl/tickets"
  class="gt-background-second gt-border-color-second gt-font-family-second"
  tabindex="-1"
>
  <span class="number">1</span><span class="step">. Tickets</span>
</a>

Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="page" toe aan de actieve link. Andere opties zijn een h1-kop met dezelfde tekst of het gebruik van de paginatitel (title).

#7 - Contrast van informatief icoon op de knop is minder dan 3,0:1

Er is een taalswitch aanwezig. Dit element heeft een oranje (HEX #FFCE00) pictogram (pijl) op een witte (HEX #FFFFFF) achtergrond. De kleurcontrastverhouding is te laag: 1,5:1. Deze pijl is onzichtbaar voor sommige bezoekers waardoor ze informatie missen dat hier iets kan worden geselecteerd.

Het contrast tussen interactieve elementen moet minimaal 3,0:1 zijn.

#8 - Geen toegankelijke naam van de taalswitch

Er is een taalswitch aanwezig. Deze combobox heeft geen toegankelijke naam. De individuele opties in dit element leggen niet goed uit wat hiermee wordt bedoeld.

<span
  tabindex="0"
  id="ui-id-1-button"
  role="combobox"
  aria-expanded="false"
  aria-autocomplete="list"
  aria-owns="ui-id-1-menu"
  aria-haspopup="true"
  class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget"
  style="width: 100%;"
  aria-activedescendant="ui-id-2"
  aria-labelledby="ui-id-2"
  aria-disabled="false"
  ><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span
  ><span class="ui-selectmenu-text">NL</span></span
>

Hierdoor kan een blinde bezoeker niet bepalen wat hiermee kan worden geselecteerd.

Oplossing:

Voeg een permanent zichtbaar label toe dat dit element goed beschrijft.

#9 - Strong-element is gebruikt voor opmaak

Het strong-element wordt gebruikt voor styling in de teksten "Wat ga je zien?", "Vaste collectie:", en "Tentoonstelling: " onder het kopje "Zie Van Gogh zelf. Boek een kaartje".

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS.

#10 - Alt-tekst van afbeelding is leeg

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een tabel met gegevens van tickets en opties. Onder de tekst "Met de audiotour weet je wat je ziet!" staan informatieve afbeeldingen van vlaggetjes die de talen van een audiottour aangeven.

<li><span class="icon flag gb" title="English"></span></li>

Deze informatie is niet beschikbaar voor een bezoeker die een schermlezer gebruikt. Het title-attribuut werkt niet op een <li>-element.

Oplossing:

Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. Voeg verborgen tekst toe om dit op te lossen.

<li><span class="sr-only">Ukrajina</span></li>

#11 - Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een gegevenstabel met tickets en opties. Naast de afbeeldingen van vlaggen staat blauw (HEX #007C92) tekst "Met de audiotour weet je wat je ziet!" op een grijze (HEX #EEEEEE) achtergrond.

Het kleurcontrast is te laag: 4,2:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

#12 - Relatie tussen stukken informatie ontbreekt

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een gegevenstabel met tickets en opties. In de HTML is deze informatie niet als een gegevenstabel opgemaakt. Schermlezer kan niet bepalen dat de teksten "Selecteer je tickets Prijs Aantal Subtotaal" betrekking hebben op de rijen daaronder.

#13 - Leesvolgorde klopt niet

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een gegevenstabel met tickets en opties. Deze gegevens zijn zo in de HTML-code geprogrammeerd dat de scherlezer alles rij per rij, van links naar rechts voorleest. Deze leesvolgorde is niet betekenisvol.

#14 - Tekst niet meer leesbaar bij aangepaste tekstafstand

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een tabel. Als gebruikers tekstafstand toepassen zoals beschreven in dit succescriterium, verdwijnt in de tabelrij "Audiotour Volwassenen" het subtotaalbedrag.

Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.

#15 - Link heeft geen tekst, waardoor linkdoel onbekend is

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een tabel. In de kolom "Selecteer je tickets" staat in sommige rijen (bijvoorbeeld naast "Museumkaart", "Student", "CJP") een link met een i-icoon. De link heeft geen inhoud en mist daarom een linkdoel. Het resultaat is dat een blinde bezoeker niet weet waar de link naartoe leidt.

Oplossing:

Om dit op te lossen moet je de link content geven. Dat doe je bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben.

#16 - Naam van de knop beschrijft niet wat de knop doet

Onder het kopje "Zie Van Gogh zelf. Boek een kaartje" staat een tabel. In de kolom "Aantal" staan knoppen (combobox). De functie van deze knop is om het aantal tickets te selecteren. Na het selecteren van het aantal tickets verandert de naam van de knop (bijvoorbeeld "1"), maar dit beschrijft niet de functie van de knop. Hierdoor kan een blinde bezoeker niet bepalen wat de knop doet.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft.

#17 - Link heeft geen toegankelijke naam

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een tabel. In de kolom "Selecteer je tickets" staat in sommige tabelrijen (bijvoorbeeld naast "Museumkaart", "Student", "CJP") een link met een i-icoon.

<a href="#" class="gt-font-color-fourth">
  <span class="icon info-circle"></span>
</a>

Deze link heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.

Oplossing:

Geef deze link een toegankelijke naam die het doel van de link beschrijft. Bijvoorbeeld:

<a href="#"><span class="sr-only">Informatie over Museumkaart</span></a>

#18 - Leesvolgorde niet correct

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een tabel. In de kolom "Selecteer je tickets" staat in sommige tabelrijen (bijvoorbeeld naast "Museumkaart", "Student", "CJP") een link met een i-icoon. Deze link toont en verbergt extra informatie. Deze informatie wordt in de HTML onder de tabel geinjecteerd. Er is geen relatie tussen de link en zijn inhoud.

#19 - Button heeft geen rol en naam

Onder het kopje "Zie Van Gogh zelf. Boek een ticket" staat een gegevenstabel. Onder de rij "Student" staat een knop met de tekst "Toon meer tickets". Deze knop heeft geen correct toegankelijke rol en naam.

Elk HTML-element heeft een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de gebruiker te geven of om informatie van de gebruiker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de gebruiker uitleggen wat het element doet.

#20 - Visueel meerdere alinea's, in de code maar een

Onder de tabel staat een knop "Ik heb een kortingscode". Na het klikken op deze knop verschijnt er naast de tekst "Vul hier je kortingscode in:" een invoerveld. Als het invoerveld onjuiste gegevens bevat, verschijnt er een foutmelding onder het invoerveld. Er zijn twee alinea's tekst. In HTML zijn deze alinea's gemarkeerd als een p-element.

Visueel lijkt de tekst uit meerdere alinea's te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Dat doe je door elke alinea in een eigen p-element te plaatsen. Het aantal alinea's dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

#21 - Foutmelding wordt niet voorgelezen

Onder de tabel staat een knop "Ik heb een kortingscode". Na het klikken op deze knop verschijnt er naast de tekst "Vul hier je kortingscode in:" een invoerveld. Als het invoerveld met onjuiste code wordt verstuurd, verschijnt er een foutmelding boven het invoerveld. De schermlezer in de "formulier"-modus leest niet tussen de invoervelden en zal deze foutmelding niet voorlezen.

De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de HTML-code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

#22 - Foutmeldingen hebben te weinig contrast

Naast de tekst "Vul hier je kortingscode in:" staat een invoerveld. Als het invoerveld met onjuiste code wordt verstuurd, verschijnt er een foutmelding. De tekstkleur is rood. In combinatie met de witte achtergrond van de pagina is het kleurcontrast 4,3:1. Het moet minimaal 4,5:1 zijn.

#23 - Knop met huidige status is alleen visueel

Als je een ticket in de tabel selecteert, verschijnt er een donatiemogelijkheid onder de tabel. Er zijn knoppen met het label "€ 1,00", "€ 5,00" enzovoort. De geselecteerde knop ziet er anders uit dan de rest. Deze informatie is niet toegankelijk voor blinde en slechtziende gebruikers.

Oplossing:

Zorg ervoor dat wijzigingen in de visuele presentatie ook programmatisch beschikbaar worden gemaakt (zoals via aria-pressed, aria-selected of andere attributen).

#24 - Informatie alleen met kleur overgedragen

Wanneer een ticket in de tabel wordt geselecteerd, verschijnt er een donatieoptie onder de tabel. Er zijn knoppen met de tekst "€ 1,00", "€ 5,00" enzovoort. Wanneer de knop is geselecteerd, wordt alleen de kleur (oranje) gebruikt om informatie te geven.

Alleen mensen die kleuren kunnen zien en onderscheiden, kunnen zien wanneer de knop is geselecteerd. Dit kan worden opgelost door verschillende patronen, vormen of extra indicatoren te gebruiken naast kleur.

#25 - Kleur van knoppen

Als je een ticket in de tabel selecteert, verschijnt er een donatiemogelijkheid onder de tabel. Er zijn knoppen met de tekst "€ 1,00", "€ 5,00" enzovoort. De oranje kleur (HEX #FFCE00) van het geselecteerde element contrasteert niet voldoende met de statische witte kleur (HEX #FFFFFF). De kleurcontrastverhouding is te laag: 1,5:1.

Het contrast tussen interactieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden.

#26 - Randen van checkbox hebben niet voldoende kleurcontrast

Wanneer een ticket wordt geselecteerd in de tabel, verschijnt er een donatieoptie onder de tabel met een selectievakje "Ik wil een donatie doen". De randkleur van een selectievakje is grijs (HEX #BBBBBB). De achtergrondkleur is wit (HEX #FFFFFF). Het kleurcontrast is 1,9:1. Het kleurcontrast tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze filteropties moet minimaal 3,0:1 zijn.

#27 - Onvoldoende kleurcontrast wanneer checkbox is geselecteerd

Wanneer een ticket in de tabel wordt geselecteerd, verschijnt er een donatieoptie onder de tabel met een selectievakje "Ik wil een donatie doen". De oranje (HEX #FFCE00) geeft aan dat de checkbox is geselecteerd. De achtergrond is wit (HEX #FFFFFF). Het kleurcontrast is 1,5:1. Het contrast tussen de indicator en de achtergrond van het selectievakje moet ten minste 3:1 zijn.

#28 - Knop kan niet bediend worden met spatiebalk en Enter-toets

Als je een ticket in de tabel selecteert, verschijnt er een donatiemogelijkheid onder de tabel. Er zijn knoppen met de tekst "€ 1,00", "€ 5,00" enzovoort. Momenteel kunnen deze knoppen niet worden geactiveerd met de spatiebalk of de entertoets.

Oplossing:

Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.

#29 - Toetsenbordfocus is niet zichtbaar

De toetsenbordfocus niet zichtbaar op de checkbox "Ik wil een donatie doen" (kies eerst een willekeurig ticket).

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

#30 - Knop heeft niet de juiste rol

Wanneer een ticket in de tabel wordt geselecteerd, verschijnt er een donatieoptie onder de tabel. Elementen met het label "€ 1,00", "€ 5,00" enzovoort zijn aanwezig. Ze werken als keuzerondjes. Deze knoppen hebben niet de juiste toegankelijke rol.

Hierdoor kunnen schermlezers niet doorgeven dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Het gevolg is dat alle content die met deze knop kan worden geopend, ook niet toegankelijk is.

#31 - Linktekst in de stappen is niet duidelijk genoeg

De voortgangsbalk bestaat uit links. Op dit moment bevatten de links alleen tekst zoals '1,' '2,' '3,' enzovoort.

Voor ziende gebruikers is het duidelijk dat dit stappen in de voortgangsbalk zijn, maar voor slechtziende gebruikers en gebruikers die schermlezers gebruiken is het niet altijd duidelijk dat dit verschillende stadia van het proces zijn.

#32 - Link is niet met het toetsenbord te bedienen

De voortgangsbalk bestaat uit links. De bezoeker kan op deze link klikken om naar een andere locatie te gaan / een popup-venster te openen. Dit werkt niet als je alleen met het toetsenbord navigeert.

Oplossing:

Zorg dat alle links ook met de Enter-, Return- of spatietoetsen kunnen worden bediend.

#33 - Links met huidige status is alleen visueel

Wanneer een datum in de kalender wordt geselecteerd, ziet de geselecteerde datum er anders uit dan de rest. Deze informatie is niet toegankelijk voor blinde en slechtziende gebruikers.

Oplossing:

Zorg ervoor dat wijzigingen in de visuele presentatie ook programmatisch beschikbaar worden gemaakt (zoals aria of andere attributen).

#34 - Informatie alleen met kleur overgedragen

Wanneer een datum wordt geselecteerd in de kalender, wordt alleen kleur (oranje) gebruikt om informatie te geven.

Alleen mensen die kleuren kunnen zien en onderscheiden, kunnen zien wanneer de datum is geselecteerd. Dit kan worden opgelost door verschillende patronen, vormen of extra indicatoren te gebruiken naast kleur.

#35 - Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Als een datum wordt geselecteerd in de kalender, wordt de prijs aan de kalender toegevoegd als een witte tekst (HEX #FFFFFF) op een oranje achtergrond (HEX #FFCE01). Het kleurcontrast is te laag: 1,5:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

#36 - Kleur van links

Wanneer een datum wordt geselecteerd in de kalender, heeft de oranje achtergrond (HEX #FFCE00) van het geselecteerde element niet voldoende contrast ten opzichte van de statische witte kleur (HEX #FFFFFF). De kleurcontrastverhouding is te laag: 1,5:1. Het contrast tussen interactieve elementen moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden.

#37 - Knop kan niet bediend worden met spatiebalk en Enter-toets

De kalender bevat links met pijlen om naar een andere maand te bladeren. Momenteel kunnen deze knoppen niet worden geactiveerd met de spatiebalk of de entertoets.

#38 - Volgorde toetsenbordfocus niet logisch

Na het selecteren van een datum in de kalender, blijft de focus lopen door alle dagen van de kalender, in plaats van zich te verplaatsen naar beschikbare slots voor de geselecteerde dag.

#39 - Menulink heeft verkeerde naam waardoor linkdoel niet duidelijk is

De links met data zijn gelabeld met nummers (bijvoorbeeld "13"). Het doel van deze links is niet duidelijk, omdat de getallen alleen niet voldoende context bieden.

Oplossing:

Je kunt een verborgen tekst toevoegen om het doel van deze link duidelijker te maken.

#40 - Groep heeft geen naam

Er is een groep keuzerondjes met tijdsloten onder de kalender. Boven deze groep staat de tekst "Op welk tijdstip wil je het museum bezoeken?" De relatie tussen deze tekst en de keuzerondjes kan niet programmatisch bepaald worden.

Oplossing:

Je lost dit op door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kun je het legend-element gebruiken. Een andere oplossing is het gebruik van een kop-element in de vraag.

#41 - De geselecteerde tijdslot is alleen visueel aangegeven

Er zijn tijdsloten onder de kalender. Het geselecteerde slot ziet er anders uit dan de rest. Deze informatie is niet toegankelijk voor blinde en slechtziende gebruikers.

Oplossing:

Zorg ervoor dat wijzigingen in de visuele presentatie ook programmatisch beschikbaar worden gemaakt (zoals via aria of andere attributen).

#42 - Informatie alleen met kleur overgedragen

Er zijn tijdsloten onder de kalender. Het geselecteerde slot ziet er anders uit dan de rest. Kleur wordt gebruikt om informatie te geven.

Alleen mensen die kleuren kunnen zien en onderscheiden, kunnen zien wanneer de knop is geselecteerd. Dit kan worden opgelost door verschillende patronen, vormen of extra indicatoren naast kleur te gebruiken.

#43 - Onvoldoende kleurcontrast van informatieve elementen

Er zijn tijdsloten onder de kalender. Het geselecteerde slot ziet er anders uit dan de rest. De oranje kleur (HEX #FFCE00) van het geselecteerde element heeft niet voldoende contrast met de witte kleur (HEX #FFFFFF) van de achtergrond. De kleurcontrastverhouding is te laag: 1,5:1. Door te weinig contrast is het verschil tussen de doorgetrokken lijn en de gestippelde lijn niet meer zichtbaar. Deze bezoekers hebben geen toegang tot informatie over tijdsloten wanneer het bijna vol is.

Het contrast tussen interactieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden.

#44 - Invoervelden voor persoonlijke gegevens hebben geen correct autocomplete-attribuut

In het formulier staan invoervelden die persoonlijke informatie verzamelen (bijvoorbeeld "Voornaam", "Achternaam", "E-mailadres"). Het autocomplete attribuut ontbreekt.

Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email".

Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: Input purposes.

#45 - Foutmelding wordt alleen aangegeven met kleur

Het formulier heeft een invoerveld "Bevestig e-mailadres". Als het invoerveld is gevuld met onjuiste gegevens, is de fout alleen zichtbaar als een kleurverandering (naar rood) van de tekst in het invoerveld en/of de randkleur van het invoerveld.

Dit is niet toegankelijk voor bezoekers die de kleur helemaal niet kunnen zien of die kleurenblind zijn. Zorg ervoor dat informatie niet alleen met kleur wordt overgedragen. Gebruik daarnaast nog andere manieren om fouten of ontbrekende informatie door te geven, bijvoorbeeld met tekst of iconen.

#46 - Foutmeldingen hebben te weinig contrast

Wanneer het formulier wordt verzonden met lege velden of met onjuiste gegevens, verschijnen er foutmeldingen. Er is een probleem met de kleurencombinatie wit en rood voor de tekst en de achtergrond van de pagina, het kleurcontrast is 4,3:1. Het moet minimaal 4,5:1 zijn.

Een soortgelijk probleem met het invoerveld "Bevestig e-mailadres" (Wanneer het invoerveld is gevuld met onjuiste gegevens).

#47 - Randen van checkbox hebben niet voldoende kleurcontrast

Onder het laatste invoerveld van het formulier staan twee selectievakjes. De randkleur van de selectievakjes is grijs (HEX #BBBBBB). De achtergrondkleur is wit (HEX #FFFFFF). Het kleurcontrast is 1,9:1. Het kleurcontrast tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze filteropties moet minimaal 3,0:1 zijn.

#48 - Toetsenbordfocus is niet zichtbaar

De toetsenbordfocus niet zichtbaar op de volgende elementen: twee checkboxes onder het laatste invoerveld van het formulier.

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

#49 - Foutmelding is een instructie in plaats van een uitleg over de fout

Als je het formulier leeg instuurt of met fouten, verschijnt de melding "Je voornaam dient uit tenminste twee letters te bestaan.", "Vul hier je e-mailadres nogmaals in.". Dit is meer een instructie dan een foutmelding.

#50 - De foutmeldingen geven geen suggesties over hoe de fouten opgelost kunnen worden

Het formulier heeft een invoerveld "Bevestig e-mailadres". Wanneer het invoerveld is gevuld met onjuiste gegevens, is de fout alleen zichtbaar als een kleurverandering (naar rood) van de tekst in het invoerveld en/of de randkleur van het invoerveld. Er worden geen suggesties gegeven om de fouten te herstellen.

Oplossing:

Vertel de bezoeker wat ze moeten doen om de fout op te lossen.

#51 - Invoerveld heeft geen toegankelijke naam

Het formulier heeft een invoerveld (combobox) onder het kopje "Land". Dit veld heeft geen toegankelijke naam.

Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

#52 - Kop is niet gemarkeerd als koptekst

Onder de kop "Controleer je bestelling" zijn de volgende teksten niet gemarkeerd als koppen: "Persoonsgegevens", "Bezoekdatum".

Blinde bezoekers hebben niets aan een (tussen)kop die fungeert als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Zet deze koppen om in heading-elementen.

#53 - Opsomming is niet opgebouwd met het juiste HTML-element

Onder het kopje "Persoonsgegevens" staat een lijst met 2 items. De juiste opmaak ontbreekt.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in je CMS. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.

#54 - Tabel lijkt op een gegevenstabel, maar de HTML-code voor tabellen ontbreekt

Onder het kopje "Controleer je bestelling" staat een tabel die begint met de tekst "Tickets". Deze tabel is in de HTML-code niet als tabel gemarkeerd. Daardoor kan een schermlezer de relatie tussen de verschillende cellen niet begrijpen.

#55 - Onvoldoende linktekst "bewerken"

In de tabel staat links met de tekst "bewerken". Deze tekst geeft niet aan waar de link naartoe leidt. Linkteksten die meerdere keren op een pagina voorkomen, helpen niet bij het begrijpen welke bestemming deze links hebben.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

#56 - Visueel meerdere alinea's, in de code maar een

Bij het kiezen van de betaalmethode (bijvoorbeeld "Bancontact") verschijnt het invoerveld "telefoonnummer". Als het invoerveld onjuiste gegevens bevat, verschijnt er een foutmelding onder het invoerveld. Er zijn twee alinea's tekst. In HTML zijn deze alinea's gemarkeerd als een p-element.

Visueel lijkt de tekst uit meerdere alinea's te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Dat doe je door elke alinea in een eigen p-element te plaatsen. Het aantal alinea's dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

#57 - Informatie alleen met kleur overgedragen

Wanneer je een betaalmethode "Ideal" kiest, verschijnt de knop "Selecteer uw bank". Deze knop opent een lijst. Het geselecteerde item wordt alleen gemarkeerd door een verandering in de achtergrondkleur (grijs).

#58 - Foutmeldingen hebben te weinig contrast

Bij het kiezen van de betaalmethode (bijvoorbeeld "Bancontact") verschijnt het invoerveld "telefoonnummer". Als het invoerveld onjuiste gegevens bevat, verschijnt er een foutmelding onder het invoerveld. De tekstkleur is wit. In combinatie met de rode achtergrond van de pagina is het kleurcontrast 4,3:1. Het moet minimaal 4,5:1 zijn.

Hetzelfde probleem met de foutmelding "Er zijn te weinig tickets op voorraad op het gekozen tijdstip..." verschijnt wanneer het geselecteerde slot onbeschikbaar wordt tijdens het boekingsproces.

#59 - Tekst van de knop (link) heeft te weinig contrast

Bij het kiezen van de betaalmethode (bijvoorbeeld "Bancontact") verschijnt er inhoud voor het telefoonnummer. Er zijn links "i", "Klik hier" en de knop "Verstuur". Er is een probleem met de kleurencombinatie oranje (HEX #FFCE01) en wit (HEX #FFFFFF) voor de tekstlink en de achtergrond. Deze combinatie heeft een lage contrastverhouding van 1,5:1.

Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

#60 - Het contrast van de placeholdertekst is kleiner dan 4,5:1

Bij het kiezen van de betaalmethode (bijvoorbeeld "Bancontact") verschijnt er inhoud voor het telefoonnummer. Na het bevestigen van het nummer verschijnt er een formulier.

De grijze placeholdertekst (bijvoorbeeld in het veld "Nnam op Kaart") tegen de witte achtergrond heeft een kleurcontrast van 1,8:1.

Een soortgelijk probleem wordt waargenomen bij het kiezen van betaalmethode "Ideal". De knop "Selecteer uw bank" verschijnt. Deze knop opent een lijst met de plaatsaanduiding "Zoeken...".

Zorg dat het contrast minimaal 4,5:1 is.

#61 - Kleur van lijstitems

Wanneer je een betaalmethode "Ideal" kiest, verschijnt de knop "Selecteer uw bank". Deze knop opent een lijst. De grijze achtergrondkleur (HEX #F0F2F3) van het gefocuste item heeft niet voldoende contrast tegen de statische witte achtergrond (HEX #FFFFFF). De kleurcontrastverhouding is te laag: 1.1:1.

Het contrast tussen interactieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden.

#62 - Randen van checkbox hebben niet voldoende kleurcontrast

Onder de betaling staat een selectievakje met tekst die begint met "Ik ga akkord...". De randkleur van het selectievakje is grijs (HEX #BBBBBB). De achtergrondkleur is wit (HEX #FFFFFF). Het kleurcontrast is 1,9:1. Het kleurcontrast tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze filteropties moet minimaal 3,0:1 zijn.

#63 - Kleur indicator checkbox

Onder de betaling staat een selectievakje met tekst die begint met "Ik ga akkord...". De indicator is oranje (HEX #FFCE00). De achtergrond is wit (HEX #FFFFFF). Het kleurcontrast is 1,5:1. Het contrast tussen de indicator en de achtergrond van het selectievakje moet ten minste 3:1 zijn.

#64 - Toetsenbordfocus is niet zichtbaar

De toetsenbordfocus is niet zichtbaar op de volgende elementen: knoppen met logo's onder het kopje "Betalingsmogelijkheden", checkbox "Ik ga akkoord met alle voorwaarden en bepalingen".

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.