SC 1.3.4 Alle schermen zijn beperkt tot één weergavestand (staand)

De lay-out van alle schermen is beperkt tot één weergavestand (portret). Websites en apps moeten zowel in verticale (portret) als horizontale (landschap) stand goed werken. Bezoekers moeten de vrijheid hebben om te kiezen welke modus het beste voor hen werkt. Je mag hier alleen van afwijken als één bepaalde stand echt noodzakelijk is. Dit is bijvoorbeeld belangrijk voor mensen die hun tablet aan hun rolstoel hebben gemonteerd en de oriëntatie niet kunnen aanpassen. Zo kunnen zij de app of website gebruiken op de manier die voor hen het handigst is, zonder iets te missen.

Oplossing

Zorg ervoor dat de inhoud van de app draait en zich aanpast aan de weergavestand.

SC 1.4.3 Contrast van tekst is niet voldoende

Op de schermen "Mijn kaarten", "Kaart" en "Kies je kaartkleuren" staat op de museumkaart paarse tekst (de achternaam en de leeftijdscategorie) op een roze achtergrond. De contrastverhouding is te laag: 4,3:1.

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Veel andere kleurencombinaties hebben ook onvoldoende kleurcontrast. Bijvoorbeeld groene tekst op een roze achtergrond, paarse tekst op een blauwe achtergrond, groene tekst op een blauwe achtergrond, enzovoorts.

Op de schermen “Mijn kaarten” en “Kaart” is de tekst op de museumkaart grijs of rood op een grijze achtergrond, als de kaart actief is op een ander apparaat. Het kleurcontrast is te laag, tussen de 1,8:1 en 2,5:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Pad: eerste scherm (zonder kaart)

Geen bevindingen.

Pad: Mijn kaarten > Voeg een Museumkaart toe (plus knop)

SC 1.3.1 Kop is niet als kop gemarkeerd

Op dit scherm staat de kop “Heb je al een museumkaart”. Deze tekst is niet als koptekst gemarkeerd.

Oplossing

Maak hier een kop van.

Pad: Scan je fysieke Museumkaart > Voer (cadeau) kaartnummer in

SC 1.3.1 Kop niet als koptekst gemarkeerd

Op het scherm "Welke kaart heb je?" staan onder de vraag “Welke kaart heb je” twee opties. De vraag is niet als koptekst gemarkeerd.

Oplossing

Markeer deze tekst als kop met een heading-element.

SC 1.4.4 Tekst op de knop verdwijnt als de tekst wordt vergroot

Als je de tekst maximaal vergroot in de instellingen van de telefoon, verdwijnt de tekst op de knop “Volgende”.

Oplossing

Zorg dat tekst leesbaar blijft als de tekst groter wordt gemaakt.

Pad: Welke kaart heb je? > Museumkaart

Geen bevindingen

Pad: Scan je fysieke Museumkaart > Je activatielink is verlopen

SC 1.3.1 Kop niet als kop gemarkeerd

Op dit scherm staat de kop “Je activatielink is verlopen”. Deze tekst is niet als koptekst gemarkeerd.

Oplossing

Maak hier een kop van.

Pad: Scan je fysieke Museumkaart > Je gaat je fysieke Museumkaart omzetten naar een digitale kaart

SC 1.3.1 Kop niet als kop gemarkeerd

Op dit scherm staat de kop “Je gaat je fysieke Museumkaart omzetten naar een digitale kaart”. Deze tekst is niet als koptekst gemarkeerd.

Oplossing

Maak hier een kop van.

SC 2.2.2 Beweging is niet te stoppen

Op dit scherm staat een carrousel. Op elke slide staat een animatie die automatisch begint te spelen. Er is geen mechanisme om die beweging te stoppen. Dit kan storend zijn voor mensen met cognitieve beperking.

Oplossing

Verwijder de animatie of voeg een knop toe om de animatie te stoppen.

1.4.11 Stippen hebben onvoldoende contrast (carrousel)

Op dit scherm staat een caroussel. De grijze bolletjes waarmee je tussen de slides kunt wisselen hebben een contrast van 2,3:1 op de witte achtergrond.

Oplossing

Maak deze stippen donkerder zodat het contrast minimaal 3,0:1 wordt.

SC 1.4.3 Contrast van de foutmelding

Als je op dit scherm een verlopen kaart scant, verschijnt een foutmelding met een witte tekst op een rode achtergrond. De contrastverhouding van die tekst is 3,3:1. Dit moet minimaal 4,5:1 zijn.

Oplossing

Zorg dat de contrastverhouding minimaal 4,5:1 is.

SC 1.3.1 Informatie op het scherm is niet toegankelijk voor schermlezers

Op dit scherm staat een carrousel met drie slides. De schermlezer leest alleen de eerste slide voor en kondigt niet aan dat er in totaal drie slides zijn. De knoppen onder de carrousel met drie stippen worden ook niet voorgelezen.

Oplossing

Zorg ervoor dat alle informatie wordt voorgelezen. Je kunt ervoor kiezen om de animatie te verwijderen en de inhoud van de drie slides als tekst onder elkaar te plaatsen.

SC 2.1.1 Carrousel is niet toegankelijk met een extern toetsenbord

Op het scherm "Je gaat je fysieke Museumkaart omzetten naar een digitale kaart" staat een carrousel. De slides in die carrousel kunnen worden geswiped om ertussen te navigeren. Maar dit element is niet toegankelijk via het toetsenbord.

Oplossing

Je kunt ervoor kiezen om de animatie te verwijderen en de inhoud van de drie slides als tekst onder elkaar te plaatsen.

SC 4.1.2 Knoppen om door de carrousel te navigeren hebben geen juiste rol

Op dit scherm staat een carrousel. Onder deze carrousel staan drie knoppen om tussen de slides te navigeren. Deze knoppen worden niet als knoppen voorgelezen.

Oplossing

Maak deze knoppen toegankelijk of vervang de carrousel door platte tekst op het scherm.

Pad: Begin scherm (met een toegevoegde kaart)

SC 1.1.1 Informatieve afbeelding heeft geen tekstalternatief

De plusknop boven "Voeg een Museumkaart toe" op het scherm "Mijn kaarten" heeft geen tekstalternatief. De tekst "Voeg een Museumkaart toe" doet visueel wel dienst als het label van de knop, maar in de code is deze relatie niet vastgelegd. Daardoor horen bezoekers met een schermlezer alleen dat er een knop is zonder naam.

Oplossing

Geef deze knop een toegankelijke naam.

SC 1.4.4 Tekst valt weg na vergroting

Op dit scherm valt een deel van de achternaam van de kaarthouder weg als je de tekst vergroot.

Oplossing

Plaats de achternaam op een eigen regel zodat deze leesbaar blijft.

SC 4.1.2 Knop heeft geen toegankelijke naam

De knop boven "Voeg een Museumkaart toe", die in de vorige bevinding al is beschreven, heeft ook geen toegankelijke naam. Hierdoor weten bezoekers die afhankelijk zijn van een schermlezer niet wat het doel van de knop is.

Oplossing

Voeg de toegankelijke naam toe, en zorg dat deze de functie van de knop nauwkeurig weergeeft ("Voeg een Museumkaart toe").

SC 1.3.1 Kopteksten zijn niet als koppen opgemaakt

Op het scherm "Mijn kaarten" zijn onder andere de teksten "Mijn kaarten", "Ontdek" en "Heb je vragen?" niet gemarkeerd als kop.

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die fungeert als kop, maar niet als kop is gemarkeerd. Via de koppen op een scherm kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren.

Dit komt ook op alle andere schermen voor. Bijvoorbeeld op de schermen "Heb je al een Museumkaart?", "Altijd je Museumkaart op zak" en "Welke kaart heb je?".

Oplossing

Markeer deze teksten met de juiste heading-elementen.

SC 1.4.1 Toetsenbordfocus is alleen te zien aan verandering van kleur

Op het scherm "Mijn kaarten" is voor alle interactieve elementen een aangepaste focusindicator ingesteld, namelijk een verandering van de achtergrondkleur. Dit is bijvoorbeeld zo bij de knoppen in het bovenste menu, de knop die het kaartscherm opent en de knop "Duik in de collectie".

Het gebruik van alleen kleur om focus aan te geven is hier niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn.

Oplossing

Zorg dat er een duidelijk zichtbare focusindicator is. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

SC 4.1.2 Links missen correcte rol

Sommige links hebben niet de juiste rol. Het gaat om de links "Nu in het museum" en "Vind een museum" op het scherm "Mijn kaarten" (onder "Ontdek").

Oplossing

Voeg de rol van link toe zodat hulpsoftware deze links correct kan voorlezen.

Pad: Mijn kaarten > klik op een kaart

SC 1.3.1 Alle tekst staat in één element

Op dit scherm is een heleboel informatie in één element opgenomen. Het gaat om de tekst die begint met het logo van de Museumkaart en eindigt met de streepjescode. Het probleem is dat al deze informatie als één blok tekst wordt voorgelezen. Een bezoeker kan dus niet naar een afzonderlijk stukje tekst luisteren, bijvoorbeeld de geldig-tot-datum, maar moet dan het hele scherm opnieuw beluisteren.

Oplossing

Zorg ervoor dat de visuele structuur van informatie (losse alinea’s) ook in de code als losse elementen is vastgelegd. De bedoeling is dat je op een stukje tekst kunt drukken en dat dan alleen dat stukje wordt voorgelezen.

SC 1.4.3 Tekstkleur van foutmeldingen heeft onvoldoende contrast

Als de kaart actief is op het andere apparaat, staat op het scherm “Kaart” de rode tekst "Verwijder kaart" op een roze achtergrond. Klik op het pictogram met drie puntjes in de rechterbovenhoek om deze tekst te vinden. De contrastverhouding is hier te laag. Het is niet mogelijk om een schermopname te maken om de exacte waarde van het contrast te meten.

Oplossing

Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

SC 1.3.1 Koptekst is niet gemarkeerd als kop

Als een bezoeker een screenshot probeert te maken op dit scherm, verschijnt een dialogvenster met de kop “Je kunt geen screenshots maken”. Deze tekst is een kop, maar is niet als koptekst gemarkeerd.

Oplossing

Zet deze tekst om in een kop zodat een blinde bezoeker dezelfde structuur krijgt voorgelezen.

SC 2.2.2 Beweging kan niet worden gestopt

Op het scherm "Kaart" is er een animatie rond de streepjescode die automatisch wordt afgespeeld en niet kan worden gepauzeerd of gestopt.

Het kan storend zijn voor mensen met een cognitieve beperking als een video, GIF of animatie in een app automatisch gaat spelen. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.

Oplossing

Daarom moet er een manier zijn voor bezoekers om dit soort multimedia te stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.

SC 1.1.1 Foto pashouder kaart 1 en kaart 2 heeft dezelfde alternatieve tekst

Als iemand twee kaarten aan de app heeft toegevoegd, staan er twee foto’s van de kaarthouders op dit scherm. Beide foto’s hebben hetzelfde tekstalternatief. Ook in de grote weergave hebben de twee foto’s dezelfde alternatieve tekst “Foto pashouder”.

Oplossing

Geef deze foto’s de naam van de kaarthouder zodat duidelijk is welke pashouder op welke afbeelding staat.

Pad: Kaart > Foto pashouder

SC 2.4.3 De focusvolgorde is niet correct

Op het scherm “Foto pashouder” komt de toetsenbordfocus terecht op het onderliggende scherm. Toetsenbordgebruikers kunnen niet door het scherm navigeren.

Oplossing

Zorg dat de focusvolgorde logisch is voor bezoekers die met het toetsenbord navigeren.

Pad: Kaart > drie stippen in bovenste menu > Kies je kaartkleuren

SC 1.4.1 Toetsenbordfocus alleen in kleur

Op het scherm "Kies je kaartkleuren" is een aangepaste focusindicator gebruikt bij de terugknop en de knop "Bevestig kleur". Deze focusindicator bestaat uit een verandering van de achtergrondkleur. Dit komt ook voor op andere schermen zoals "Kaart", "Altijd je Museumkaart op zak" en "Heb je al een Museumkaart?".

Oplossing

Maak deze kleur donkerder zodat het contrast met de achtergrond minimaal 3,0:1 is.

SC 1.3.1 Structuur van informatie ontbreekt in de code

Op het scherm "Kies je kaartkleuren" staan twee groepen rondjes: opties voor kaartkleuren onder “Kaartkleur” en opties voor tekstkleuren onder “Tekstkleur”. De relatie tussen de teksten en de groepen rondjes wordt niet voorgelezen.

Oplossing

Je lost dit op door de teksten “Kaartkleur” en “Tekstkleur” als koppen te markeren.

SC 1.4.1 Kleur wordt gebruikt om informatie te geven

Op het scherm "Kies je kaartkleuren" staan gekleurde cirkels, waarmee bezoekers de voor- of achtergrondkleur van de museumkaart kunnen veranderen. De enige manier om de cirkels te onderscheiden is door de kleur.

Oplossing

Voeg een tekstueel label toe aan de individuele keuzerondjes.

SC 4.1.2 Knoppen hebben geen naam

Op het scherm "Kies je kaartkleuren" staan keuzerondjes die geen toegankelijke namen hebben. De schermlezer leest dan “Geen label” voor. Hierdoor begrijpen bezoekers die een schermlezer gebruiken de functie van de knop niet.

Oplossing

Geef deze knoppen toegankelijke namen die hun functie beschrijven.

SC 4.1.2 De geselecteerde knop wordt niet voorgelezen

De knoppen die de kleuren aangeven hebben meerdere toestanden (bijvoorbeeld geselecteerd of niet geselecteerd). Deze informatie wordt niet voorgelezen. Hierdoor kan hulpsoftware deze informatie niet doorgeven aan een blinde bezoeker. Die weet daardoor niet welke kleur is geselecteerd.

Oplossing

Zorg dat de schermlezer deze tekst voorleest.

Pad: Heb je al een Museumkaart? > button “Ik heb al een museumkaart”

SC 1.3.1 Kop is niet als koptekst gemarkeerd

Op dit scherm is de tekst “Scan je fysieke Museumkaart” niet als koptekst gemarkeerd.

Oplossing

Verander deze tekst in een kop.

SC 1.4.3 Tekstkleur van foutmeldingen heeft onvoldoende contrast

Op de schermen "Scan je fysieke Museumkaart", "Je gaat je fysieke Museumkaart omzetten naar een digitale kaart" en "Voer hier je activatiecode in van de klantenservice" bestaat de foutmelding uit witte tekst op een rode achtergrond. De contrastverhouding is 3,1:1.

Oplossing

Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen. Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

SC 2.2.1 Foutmeldingen verdwijnen te snel

Op de schermen “Scan je fysieke Museumkaart”, “Je gaat je fysieke Museumkaart omzetten naar een digitale kaart” en “Voer hier je activatiecode in van de klantenservice” verschijnen de foutmeldingen kort in beeld, maar verdwijnen daarna weer.

Hierdoor hebben sommige bezoekers niet voldoende tijd om de fout te lezen en te begrijpen. Foutmeldingen moeten zichtbaar blijven totdat de bezoeker zelf iets doet om ze te verwijderen.

Oplossing

Zorg dat de foutmeldingen zichtbaar blijven. Voeg eventueel een sluitknop toe waarmee bezoekers de foutmelding zelf kunnen afsluiten.

Pad: Scan je kaart > Welke kaart heb je? > Voer hier je activatiecode in van de klantenservice

SC 1.3.1 Tekst is niet als kop gemarkeerd

Op dit scherm staat de tekst “Voer hier je activatiecode in van de klantenservice”. Dit is een kop, maar de tekst is niet als koptekst gemarkeerd.

Oplossing

Verander deze tekst in een koptekst.

SC 3.3.2 Permanent zichtbaar label ontbreekt

Onder de tekst “Voer hier je activatiecode in van de klantenservice” staat een invoerveld. De placeholder-tekst is “Je code”. Dit invoerveld heeft geen permanent zichtbaar label met deze tekst. Dat is wel nodig om dit veld met stem te kunnen bedienen.

Oplossing

Plaats deze tekst als altijd zichtbare tekst boven het invoerveld.