Audit digitale toegankelijkheid van de Rijksmuseum app, iOS

#1 - Kop is niet gemarkeerd als kop

Dit is te zien in de pop-ups:

• Wilt u mijn route beëindigen?
• Weet je zeker dat je wilt stoppen?
• Wilt u Thuis in de 17de eeuw beëindigen?

Oplossing:

Markeer deze teksten als koppen. In iOS wordt het kopniveau niet voorgelezen. Gebruik kop-elementen uitsluitend voor koppen die secties introduceren, waaronder koppen in dialoogvensters.

#2 - Knoppen voor taalkeuze hebben onjuiste rol

In het mobiele menu staat een knop “Languages”. Deze knop opent een venster met taalopties. Deze opties zijn knoppen, maar worden niet als knoppen voorgelezen.

Oplossing:

Zorg ervoor dat de schermlezer deze opties als knoppen aankondigt.

#3 - Niet alle tekst reageert op tekstvergroting

Wanneer bij de instelling om tekst te vergroten (in het besturingssysteem)n een na de laatste optie wordt gekozen, moet alle tekst in app op deze wijziging reageren. Dit gebeurt momenteel niet in alle teksten. Alleen de links in het menu passen zich aan.

Oplossing:

Zorg ervoor dat de tekst van de app groter wordt als de instelling voor tekstvergroting wordt aangepast.

#4 - Links zijn niet met spraakbediening te bedienen

Wanneer bij de instelling om tekst te vergroten (in het besturingssysteem) een na de laatste optie wordt gekozen, verdwijnt een deel van een link in het mobiele menu.
De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Dit los je op door deze links onder elkaar te plaatsen zodat de volledige tekst van de link zichtbaar blijft.

#5 - KPN-logo heeft geen passend tekstalternatief

In het mobiele menu staat het logo “Connected by KPN”. Deze informatieve afbeelding wordt niet voorgelezen.

Op de schermen met tours staat dit logo ook. Hier wordt alleen “KPN, logo” voorgelezen. De tekst “Connected by” maakt geen deel uit van het tekstalternatief.

Er is een derde variant van het KPN-logo. Hier bestaat het tekstalternatief uit de tekst “Attachment.png”.

Oplossing:

Geef het logo een tekstalternatief waarin alle zichtbare tekst is opgenomen.

#6 - Kleurcontrast bij tekst kleiner dan 19px is onvoldoende

Onderaan de app staat een tabnavigatie met de opties “Tours”, “Nummer”, “Ga naar”, “Voor jou” en “Help”. De tekst van de niet-geselecteerde opties is grijs (#636363) en heeft een contrastratio van 3,5:1.

In het mobiele menu heeft de witte link “Tickets” op een lichtgrijze achtergrond (#C1C6C7) een contrastratio van 1,7:1.

Op meerdere schermen staat een rode (#D55140) knop met een witte tekst, bijvoorbeeld “Zoek” op het scherm “Nummer”. De contrastratio bedraagt 4,1:1.

Oplossing:

Omdat deze tekst kleiner is dan 19px, moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#7 - Alternatieve tekst van informatieve afbeelding ontbreekt

Op meerdere schermen staat een informatieve afbeelding van een koptelefoon. Deze afbeelding wordt niet voorgelezen. De schermlezer leest alleen de cijfers voor. Zonder context is voor een blinde of slechtziende bezoeker onduidelijk wat deze cijfers betekenen.

Informatieve afbeeldingen, zoals een logo, moeten altijd een betekenisvolle alternatieve tekst hebben zodat schermlezers de informatie correct kunnen aankondigen.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe, bijvoorbeeld: “objectnummer”.

#8 - Jaartallen worden als losse cijfers voorgelezen

Op meerdere schermen worden jaartallen gebruikt om de collecties aan te geven, bijvoorbeeld ‘1100 - 1600’. Deze jaartallen worden voorgelezen als losse cijfers. Een blinde of slechtziende bezoeker hoort: ‘1 1 0 0 1 6 0 0’. Dit maakt het lastig om te begrijpen wat er staat.

Oplossing:

Overweeg om deze jaartallen anders weer te geven, bijvoorbeeld als ‘12de eeuw’.

#9 - Audio heeft geen transcript

In meerdere tours is een audiotour opgenomen. Deze audiofragmenten zijn niet toegankelijk voor bezoekers die het geluid niet kunnen horen.

Oplossing:

Voeg een transcript toe aan alle audiotours.

#10 - Logo Rijksmuseum heeft geen passend tekstalternatief

Op het startscherm staat het logo van het RIjksmuseum. Deze informatieve afbeelding wordt niet voorgelezen.

Onderaan het scherm staat het logo van KPN en de tekst “Connected by”. Het logo en de tekst worden niet voorgelezen.

Oplossing:

Maak deze informatie toegankelijk door een passend tekstalternatief toe te voegen of door de tekst als reguliere tekst op het scherm te plaatsen. Zorg er daarnaast voor dat de Engelstalige tekst naar het Nederlands wordt vertaald.

#11 - Koppen zijn niet gemarkeerd als koptekst

Op dit scherm staan meerdere koppen die niet als koptekst zijn gemarkeerd, waaronder:

• Het beste van het Rijksmuseum
• Thematische tours
• Tours per afdeling

De kop ‘Het beste van het Rijksmuseum’ en de alinea daaronder zijn samen in één element opgenomen en worden als één tekstblok voorgelezen. Hierdoor wijkt de visuele structuur van informatie af van de structuur die de schermlezer aankondigt.

Oplossing:

Markeer deze teksten als koppen met het correcte HTML-kopniveau en leg de tekststructuur vast in losse elementen.

#12 - Knoptekst is niet beschrijvend

Onder meerdere secties staat een knop ‘Toon meer’. Er zijn twee knoppen op dit scherm met dezelfde tekst. Op basis van de knoptekst is niet af te leiden welke sectie door de betreffende knop wordt geopend.

Oplossing:

Maak de knoppen onderscheidend door een verborgen tekst toe te voegen die alleen beschikbaar is voor de schermlezer.

#13 - Kleurcontrast bij tekst kleiner dan 24px is onvoldoende

Op dit scherm zijn teksten zoals “In de Philipdsvleugel, verdieping 1”, “Bekijk 18 werken op verdieping 2 (60 min)”, “Relieken, altaarstukken en schilderijen, op verdieping 0 (45 min)” en enkele andere teksten grijs (#A2ABAD) weergegeven op een witte achtergrond. Deze contrastratio bedraagt 2,3:1 en is daarmee onvoldoende.

Oplossing:

Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#14 - Knop heeft een Engelstalige toegankelijke naam (“Next step”)

De knop om naar de volgende dia te navigeren heeft als toegankelijke naam “Next step”. Voor Nederlandstalige bezoekers kan deze Engelstalige tekst een barrière vormen.

Oplossing:

Vertaal deze toegankelijke naam naar het Nederlands.

#15 - Kleurcontrast van tekst is onvoldoende

Onderaan het scherm staat witte tekst op een lichte achtergrond. Het kleurcontrast is onvoldoende en bedraagt 2,0:1.

Oplossing:

Zorg ervoor dat het kleurcontrast minimaal 4,5:1 is.

#16 - Focusvolgorde is onlogisch

Wanneer een bezoeker op de knop “Next tour” drukt, verplaatst de focus naar de carrousel op de volgende dia. De inhoud van de dia wordt niet voorgelezen. De bezoeker moet terug navigeren om deze inhoud te horen. Dit is geen logische focusvolgorde.

Oplossing:

Verplaats de focus naar het begin van de slide.

#17 - Schermlezer kondigt lege kop aan

Bovenaan het scherm staat een lege kop. De schermlezer kondigt deze lege kop aan.

Oplossing:

Verwijder deze kop.

#18 - Tours werken als knoppen, maar de rol ontbreekt

Op dit scherm staan tours die als knoppen functioneren. De bijbehorende interactieve rol ontbreekt, waardoor de schermlezer niet kan aangeven dat deze elementen bedienbaar zijn.

Oplossing:

Voeg de rol van knop toe.

#19 - Tourfunctionaliteit is niet te bedienen met een schermlezer

Wanneer een bezoeker op de knop “Ik ben bij de Multimediatours Balie” drukt, opent een scherm die dat de bezoeker naar een bepaalde locatie leidt. De knoppen “Je bent bij multimediatours”, “Nee? Vul het nummer opnieuw in” en “Tik om te beginnen” worden niet voorgelezen. Daarnaast reageert de knop “Tik om te beginnen” niet op de aanraking.

Oplossing:

Bied een toegankelijk alternatief voor gebruikers van een schermlezer.

#20 - Kleurcontrast van tekst is onvoldoende

Wanneer de tour nog niet is begonnen, heeft de grijze tekst onderaan het scherm onvoldoende kleurcontrast.

Oplossing:

Zorg ervoor dat deze tekst een contrastratio van minimaal 4,5:1 heeft ten opzichte van de achtergrond.

#21 - Bediening vereist pad-afhankelijke gebaren

Op dit scherm is een pad-afhankelijk gebaar vereist om een actie te voltooien. Wanneer op de knop met de tekst “Ga naar de liftlobby..” wordt geklikt, leest de schermlezer voor:
“Veeg omhoog of omlaag met een vinger om de waarde aan te passen”.
Een pad-afhankelijk gebaar heeft een begin- en eindpunt; tussen deze twee punten moet het scherm worden ingedrukt. Niet iedere bezoeker kan dit uitvoeren.

Lees meer over dit onderwerp op: https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html.

Oplossing:

Vervang pad-afhankelijke gebaren door een toegankelijk alternatief.

#22 - Schermlezer kondigt onzichtbare/lege kop aan

Bovenaan het scherm staat een onzichtbare kop. De schermlezer kondigt dit aan als een lege kop.

Oplossing:

Verwijder deze kop.

#23 - Kleurcontrast bij tekst kleiner dan 24px is onvoldoende en niet vetgedrukt

De grijze tekst “Voer het nummer in …” op de donkergrijze achtergrond heeft een contrastratio van 4,1:1. Dit is onvoldoende.

Oplossing:

Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#24 - Schermlezer leest belangrijke informatie niet voor

Wanneer een blinde of slechtziende bezoeker cijfers invoert om een kunstwerk op te zoeken, wordt het resultaat van de invoer niet voorgelezen. Tijdens de invoer wordt het getal genoemd, maar wanneer de bezoeker vanaf vanaf het toetsenbord omhoog nagiveert, wordt het resultaat niet voorgelezen.

Wanneer de bezoeker op de knop Verwijderen klikt, wordt het laatst ingevoerde cijfer verwijderd. Welk cijfer dit betreft, wordt niet uitgesproken. Voor bezoekers die het scherm niet kunnen zien en een beperkt kortetermijngeheugen hebben, is daardoor onduidelijk welke cijfers al zijn ingevoerd. Het verwijderen van cijfers is een statusbericht en moet als zodanig auditief worden aangekondigd.

Oplossing:

Zorg ervoor dat de schermlezer uitspreekt welk cijfer wordt verwijderd.

#25 - Focusvolgorde is onlogisch na het tonen van zoekresultaten

Wanneer de zoekopdracht is ingevoerd en op de Zoekknop is geklikt, verschijnen de zoekresultaten. De schermlezerfocus landt op een van de resultaten midden op het scherm. De verwachte focusvolgorde is dat de focus op de knop “Annuleer” of op het eerste zoekresultaat terechtkomt.

Oplossing:

Verplaats de focus naar het eerste zoekresultaat.

#26 - Overbodige tekst in de knop

Op dit scherm staan knoppen met de zichtbare teksten “Toilet”, “Café” en “Shop”. In de toegankelijke namen van deze knoppen staat het woord “grijs” vermeld. De knop wordt bijvoorbeeld voorgelezen als “Toilet, grijs, knop”. Dit kan verwarrend zijn voor bezoekers die luisteren naar een schermlezer.

Oplossing:

Verwijder deze overbodige tekst.

#27 - Kop is niet gemarkeerd als koptekst

De tekst “Kies je favoriete werken” is niet gemarkeerd als koptekst.

Bezoekers die hulpsoftware gebruiken hebben niets aan een kop die er wel uitziet als kop, maar niet is gemarkeerd als kop. Via koppen kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een sectie navigeren. Dit kan alleen als koppen ook in de code staan. Wanneer koppen uitsluitend visueel zijn vormgegeven (bijvoorbeeld vetgedrukt), kan de structuur in de code afwijken van de visuele structuur. Dit is te voorkomen door koppen altijd te markeren met het juiste element.

Oplossing:

Markeer deze kop als koptekst.

#28 - Rol van interactief element ontbreekt

Op dit scherm staat een link met de tekst “Ga naar de shop”. Dit element functioneert interactief bij aanraking, maar wordt niet aangekondigd als interactief element. Hierdoor is voor blinde of slechtziende bezoekers onduidelijk wat er een link aanwezig is.

Oplossing:

Leg dit element vast als link of knop.

#29 - Asterisk wordt onnodig voorgelezen

Op dit scherm staat een asterisk voor de tekst “Niet van toepassing”. Dit wordt voorgelezen als ‘Ster niet van toepassing’.

Oplossing:

Verwijder het asterisk.

#30 - Rol van interactief element ontbreekt

Op dit scherm staat een interactief element met de tekst “Veelgestelde vragen”. Dit element functioneert als link bij aanraking, maar wordt niet als interactief element voorgelezen. Daardoor is voor een blinde of slechtziende bezoeker onduidelijk dat hier een link aanwezig is.

Oplossing:

Leg deze tekst vast als link of knop.

#31 - Interactieve elementen zijn te klein

Onderaan het scherm staat een navigatie met ronde knoppen die kleiner zijn dan de minimaal vereiste afmeting van 24px24 px. Er is een alternatief beschikbaar in de vorm van een knop om vooruit te bladeren, maar er is geen knop om achteruit te bladeren. Daarom moeten deze stippen voldoen aan de minimale vereiste afmeting.

Oplossing:

Maak de stippen groter zodat ze minimaal 24x24 px zijn, of bied een alternatief in de vorm van een achteruitknop.

#32 - Kleurcontrast van navigatie is onvoldoende

Onderaan het scherm staat een navigatie met ronde knoppen. Deze knoppen hebben onvoldoende contrast ten opzichte van de achtergrond. Dit is relevant omdat deze koppen het aantal dia’s aangeven.

Oplossing:

Zorg voor een contrastratio van minimaal 3,0:1.

#33 - Carrouselinformatie is niet toegankelijk voor schermlezers

Onderaan het scherm staat een navigatie met ronde knoppen. Deze navigatie wordt niet voorgelezen. Hierdoor weet een blinde of slechtziende bezoeker niet hoeveel dia’s er zijn en welke informatie op de dia’s staat.

Oplossing:

Maak de informatie uit de dia’s toegankelijk voor gebruikers van een schermlezer.

#34 - Filterknoppen worden niet als knoppen aangekondigd

Op dit scherm staan filterknoppen “Ontdek”, “Hoogtepunten”, “Kunstenaars” en meer. Dit zijn knoppen, maar deze interactieve rol wordt niet voorgelezen.Een blinde of slechtziende bezoeker kan daardoor niet vaststellen dat er knoppen aanwezig zijn en dat deze knoppen de collectie filteren.

Oplossing:

Zorg ervoor dat deze elementen de rol van knop hebben en als zodanig worden aangekondigd.

#35 - Selectiestatus filterknoppen wordt niet doorgegeven aan hulpsoftware

Op dit scherm staan filterknoppen zoals “Ontdek”, “Hoogtepunten” en “Kunstenaars”. De geselecteerde toestand van een knop wordt niet voorgelezen. Daardoor is voor een blinde of slechtziende bezoeker onduidelijk welke knop is geselecteerd.

Oplossing:

Zorg ervoor dat de schermlezer de geselecteerde toestand aankondigt.

#36 - Visuele kop is niet als koptekst opgenomen in de code

De tekst “Hoogtepunten” is niet gemarkeerd als koptekst.

Bezoekers die hulpsoftware gebruiken hebben niets aan een kop die er wel uitziet als kop, maar niet gemarkeerd is als kop. Via koppen kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een sectie navigeren. Dit kan alleen als koppen ook in de code zijn vastgelegd. Wanneer koppen uitsluitend visueel zijn vormgegeven (bijvoorbeeld vetgedrukt), kan de structuur in de code afwijken van de visuele structuur. Dit is te voorkomen door koppen altijd te markeren met het juiste element.

Oplossing:

Markeer deze tekst als koptekst.

#37 - Toegankelijke naam van knop biedt onvoldoende betekenis

Onderaan het scherm staat een knop met een icoon van een lijst en een rondje met een cijfer. Wanneer een bezoeker deze knop activeert, wordt alleen het cijfer voorgelezen. Dit is onvoldoende.

Oplossing:

Geef deze knop een beschrijvende naam, bijvoorbeeld “3 werken geselecteerd”.

#38 - Schermlezer kondigt een onzichtbare/lege kop aan

Bovenaan het scherm staat een onzichtbare kop die door de schermlezer als een lege kop wordt aangekondigd.

Oplossing:

Verwijder deze kop.