Tekst van de knop heeft te weinig contrast

Tijdens de retest is gebleken dat deze bevinding op vele plekken op de website is opgelost. Echter, er zijn nog pagina’s waar de ‘oude’ kleurencombinatie is gebruikt. Op de pagina Inloggen (https://www.rijksmuseum.nl/nl/inloggen?redirectUrl=https://www.rijksmuseum.nl/nl/bezoek) staat een rode (#d55140) knop met witte tekst. De contrastratio is 4,1:1. Zie ook de pagina Profiel.

Oplossing:

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

Tip: zoek in de CSS-files van het project de kleur #d55140 op. Zo weet je of deze kleur aan andere CSS-classen is toegekend.

Kopteksten zijn niet gemarkeerd als koppen

Boven de logo’s in de footer staan de teksten “Founder” en “Hoofdsponsoren”. Deze teksten leggen uit wat de onderstaande logo’s betekenen. Deze relatie ontbreekt in de HTML omdat deze teksten in een <p>-element zijn opgenomen.

Oplossing:

Om deze relatie duidelijk te maken zet je deze teksten om in een kop-element, bijvoorbeeld een <h3>.

Link naar pagina: Homepagina

Alle bevindingen zijn opgelost.

Link naar pagina: Kaartje kopen

Huidige stap bestelproces alleen aan kleur te herkennen

Op alle pagina’s van het bestelproces is de huidige stap alleen visueel aangegeven. Dit kan een probleem zijn voor kleurenblinde of slechtziende gebruikers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dus niet bij welke stap ze zijn.

Oplossing:

Zorg ervoor dat de huidige stap ook nog op een andere manier te herkennen is, bijvoorbeeld door deze te onderstrepen of vetgedrukt te maken.

De huidige stap wordt niet doorgegeven aan de schermlezer

Op alle vier de pagina’s van het bestelproces is het voor de schermlezer niet duidelijk welke link in de horizontale navigatie met de stappen ( 1 tot 4) een actieve link (de huidige stap) is.

Oplossing:

Dit kan worden opgelost door een verborgen tekst toe te voegen die alleen zichtbaar is voor de schermlezer.

Decoratieve afbeelding is niet verborgen voor schermlezer

In alle vier de stappen staat bovenaan de pagina een decoratieve afbeelding met een tekstalternatief. Schermlezers beginnen daardoor elke pagina van dit proces met het voorlezen van de tekst “Een moeder en een dochter kijken naar Delfts Blauw”.

Oplossing:

Laat de alt-tekst bij deze decoratieve afbeelding leeg. Dan negeren schermlezers de afbeelding.

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

Op alle pagina’s van het bestelproces staan de grijze links (#797E82) van de niet-actuele stappen op een donkergrijze achtergrond (#40474F). De contrastverhouding is hier 2,3:1.

Oplossing:

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

De geselecteerde dag is niet in de code vastgelegd

Als je in stap 2 een datum selecteert in de kalender, ziet de geselecteerde datum er anders uit dan de rest. Deze informatie is niet in de code vastgelegd.

Oplossing:

Zorg dat veranderingen in hoe iets eruitziet (bijvoorbeeld omdat het geselecteerd wordt) ook in de code zichtbaar zijn. Dit doe je bijvoorbeeld met aria of andere attributen. Hierdoor kunnen schermlezers en andere hulpsoftware de informatie doorgeven.

Informatie wordt alleen in kleur overgebracht

Als je in stap 2 een datum selecteert in de kalender, wordt alleen kleur gebruikt om aan te geven welke datum is geselecteerd. Hetzelfde geldt voor de tijdsloten. Alleen mensen die kleuren kunnen zien en onderscheiden, kunnen nu zien of een datum is geselecteerd.

Oplossing:

Zorg dat je naast kleur ook nog een andere visuele indicator gebruikt, zoals een ander patroon of vorm, of een dikkere rand.

Focusvolgorde is niet logisch

Als je in stap 2 de optie “Entree museum" selecteert, opent een kalender. Je verwacht dat de toetsenbordfocus na het selecteren van een datum met het toetsenbord in het volgende scherm met de tijdsloten komt. Dit gebeurt wel, maar de focus is niet zichtbaar omdat het buitenbeeld is. De bedoeling is dat je met de Enter toets de datum selecteert, vervolgens op de Tab-toets drukt om naar de tijdslots te gaan. Binnen de tijdslots gebruik je pijltoetsen om een datum te selecteren. Deze functionaliteit werkt wel, maar is onzichtbaar voor een ziende bezoeker.

De bezoeker met een schermlezer wordt niet naar de tijdslots gestuurd na het selecteren van een datum. De schermlezer leest eerst alle beschikbare dagen voor en vervolgens alle beschikbare tijden.

Oplossing:

Maak de toetsenbordfocus zichtbaar en de focusvolgorde logisch.

Timer wordt niet aangekondigd door schermlezers

In stap 2 is een timer actief. Deze informatie is een statusbericht, maar schermlezers kondigen dit niet als een statusbericht aan.

Oplossing:

Voeg aria-live="polite" toe aan de container met de timer.

Foutmelding is niet gekoppeld aan invoerveld

Als je het formulier in stap 3 instuurt met lege velden of onjuiste gegevens, verschijnen de foutmeldingen: "Voornaam moet ingevuld worden", "Achternaam moet ingevuld worden" en/of "E-mailadres moet ingevuld worden". De relatie tussen deze foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers slaan in de "formulier"-modus namelijk vaak losse inhoud die tussen invoervelden in staat over.

Oplossing:

Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

In stap 3 ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie, zoals "Naam", "Achternaam" en "E-mailadres".

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.

Oplossing:

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.

Taalwisseling ontbreekt op anderstalige content

In stap 3 zijn de namen van de landen in het select-element "Land" in het Engels geschreven, zonder taalcode.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. Je wilt echter dat de schermlezer bij deze tekst op de taal van deze zin overschakelt. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het HTML-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

Foutmelding is een instructie in plaats van een uitleg over de fout

Als je het formulier in stap 3 instuurt met lege velden of onjuiste gegevens, verschijnen de foutmeldingen: "Voornaam moet ingevuld worden", "Achternaam moet ingevuld worden", en/of "E-mailadres moet ingevuld worden".

Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Oplossing:

Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

Belangrijke instructie is geplaatst als placeholder-tekst

In stap 3 staat het invoerveld “Postcode” met de placeholder-tekst “1071XX”. Dit veld vereist een specifiek format: de postcode moet zonder spatie worden ingevuld. Vul je dit niet goed in, dan verschijnt een foutmelding: “Postcode mag maximaal 6 karakters bevatten”. Het voorbeeld van het format (“1071XX”) is op dit moment niet permanent zichtbaar: het verdwijnt als je begint te typen.

Oplossing:

Plaats deze informatie als een permanent zichtbare tekst boven het invoerveld.

Foutmelding is niet gekoppeld aan invoerveld

Als je in stap 4 voor de betaalmethode "Cards" of "Bancontact card" kiest, verschijnen formulieren. Stuur je dit in met lege velden of onjuiste gegevens, dan verschijnen foutmeldingen, bijvoorbeeld "Voer de naam van de kaart in", "Onvolledig veld" of "Voer de vervaldatum in". De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers slaan in de "formulier"-modus namelijk vaak losse inhoud over die tussen invoervelden in staat.

Oplossing:

Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Als je in stap 4 voor de betaalmethode "Cards" of "Bancontact card" kiest, verschijnen formulieren. In de invoervelden voor persoonlijke informatie ("Straat", "Postcode") ontbreekt het autocomplete-attribuut.

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.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld.

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

Bij de betaalmethoden "Creditcard" en "Bancontactkaart" in stap 4 staat de grijze tekst (#687282) "Alle velden zijn verplicht tenzij anders aangegeven." op een donkergrijze achtergrond (#343B42). De contrastverhouding is hier 2,3:1.

Oplossing:

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

Foutmeldingen hebben te weinig contrast

Als je in stap 4 voor de betaalmethode "Cards" of "Bancontact card" kiest, verschijnen formulieren. Stuur je dit in met lege velden of onjuiste gegevens, dan verschijnen foutmeldingen met rode tekst (#D55140) tegen een grijze achtergrond (#343B42). De contrastverhouding is 2,7:1.

Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.

Oplossing:

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

Foutmelding is een instructie in plaats van een uitleg over de fout

Als je in stap 4 voor de betaalmethode "Creditcard" of "Bancontactkaart" kiest, verschijnen formulieren. Als je het formulier instuurt met lege velden of onjuiste gegevens, verschijnen foutmeldingen zoals "Enter the card name”, "Incomplete field” en “Enter the expiry date”.

Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Oplossing:

Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

Link naar pagina: Aanmelden

Foutmelding is niet gekoppeld aan invoerveld

Als je het formulier op deze pagina instuurt met lege velden verschijnt een foutmelding, zoals "Vul a.u.b. je naam in". De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker. Schermlezers in de "formulier"-modus slaan namelijk vaak losse inhoud over die tussen invoervelden in staat.

Oplossing:

Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie, zoals "E-mail".

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.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email".

fieldset-element met interactieve inhoud heeft geen naam

In het formulier wordt vier keer het fieldset-element gebruikt zonder toegankelijke naam. Dit is wel nodig. Anders kan de schermlezer niet vertellen welke inhoud hierin is opgenomen.

Oplossing:

Gebruik het <legend>-element om fieldsets een naam te geven. Je kunt daarnaast het beste deze vier fieldset-elementen combineren tot één fieldset.

De kleur van de rand van het invoerveld heeft niet genoeg contrast

Op deze pagina staat een formulier met invoervelden. De contrastverhouding tussen de grijze rand (#CACACA) en de achtergrond van de pagina (#EAEAEA) is 1,4:1.

Oplossing:

De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Tekst op knop heeft niet genoeg contrast

Het kleurcontrast tussen de witte tekst en de blauwe achtergrond van de knop is 3,4:1. Logo’s worden gezien als ‘kunstobjecten’ en hoeven daarom niet aan de contrasteisen te voldoen. Voor de knop met een “F” geldt dus een uitzondering. De tekst op de knop ernaast is een gewone tekst, dus deze moet wel voldoen aan de eisen.

Oplossing:

Verhoog het contrast naar minimaal 4,5:1.

Toetsenbordfocus verplaatst niet naar de foutmelding

Als je het formulier op deze pagina instuurt met lege velden, verschijnen foutmeldingen zonder dat de pagina opnieuw wordt geladen. De focus verplaatst echter niet automatisch naar de eerste foutmelding. Dit dwingt toetsenbordgebruikers om achteruit te navigeren met Shift+Tab om de fout te vinden, en dat is niet toegankelijk.

Oplossing:

Zorg dat de toetsenbordfocus automatisch naar de eerste foutmelding gaat zodra deze verschijnt. Zo wordt de bezoeker meteen over de fout geïnformeerd en kan hij zijn invoer aanpassen. Je kunt ook een aria-live region gebruiken.

Foutmelding is een instructie in plaats van een uitleg over de fout

Als je het formulier op deze pagina instuurt met lege velden, verschijnen foutmeldingen, bijvoorbeeld "Vul a.u.b. je naam in", "Vul a.u.b. je e-mailadres in" en "Vul a.u.b. een wachtwoord in".

Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Oplossing:

Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

Link naar pagina: Profiel

title-element beschrijft de inhoud niet

De titel van deze pagina ("- Alle Rijksstudio's - Rijksstudio - Rijksmuseum") beschrijft de inhoud van de pagina niet goed.

In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Deze tekst wordt bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s.

Oplossing:

Zet een duidelijke tekst in het title-element van de pagina, die de inhoud van de pagina beschrijft.

Tekst van de knop heeft te weinig contrast

Op deze pagina staan knoppen met de teksten “Annuleren” en “Kies een nieuwe foto”. De witte tekst van de knop (#ffffff) heeft een contrast van 2,3:1 tegen de grijze achtergrond (#A2ABAD).

Oplossing:

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

Relatie tussen links in een groep is niet in HTML vastgelegd

Onder de kop "Instellingen" op deze pagina staan links die eruitzien als een groep, maar waarvan de relatie niet is vastgelegd in de code. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.

Oplossing:

Neem de elementen op in een ul- of nav-element.

Invoerveld heeft geen toegankelijke naam

De invoervelden "Naam" en “nr.” op deze pagina hebben geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Oplossing:

Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

De kleur van de rand van het invoerveld heeft niet genoeg contrast

Het contrast tussen de grijze randen van de invoervelden op deze pagina (#C4C4C4) en de achtergrond van de pagina (#EAEAEA) is 1,4:1.

Oplossing:

De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Placeholder-tekst wordt gebruikt als label voor een invoerveld

Op deze pagina staat een invoerveld met de placeholder-tekst “nr”. Deze placeholder-tekst is hier als label gebruikt, maar deze verdwijnt als je begint te typen. Invoervelden moeten een label hebben dat altijd zichtbaar is. Je kunt hier dus niet een placeholder-tekst voor gebruiken.

Oplossing:

Voeg een permanent zichtbaar label toe bij het invoerveld.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina ontbreekt het autocomplete-attribuut bij invoervelden die persoonlijke informatie verzamelen (bijvoorbeeld voornaam, e-mail, telefoonnummer).

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email".

Zichtbare tekst van het invoerveld staat niet in de toegankelijke naam

De zichtbare tekst van het invoerveld op deze pagina is “voornaam”, maar de toegankelijke naam is “Naam”.

Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.

Oplossing:

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Keuzelijst heeft geen toegankelijke naam

Op deze pagina staat een keuzelijst (select-element) met het label “Voorkeurstaal e-mail”. Dit element heeft geen toegankelijke naam.

Oplossing:

Geef het select-element een toegankelijke naam.

Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de volgende elementen: het select-element naast “Land”, en het select-element naast “Voorkeurstaal e-mail”.

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 op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

Onzichtbaar element krijgt toetsenbordfocus

Na de link “Kies een nieuwe foto” op deze pagina, landt de toetsenbordfocus op een onzichtbaar element.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Contrast tussen focusindicator en achtergrond is te laag

Als de knop “Annuleren” of “Opslaan” op deze pagina toetsenbordfocus krijgt, zie je dat aan een witte focusindicator-rand. Het contrast tussen deze witte rand en de grijze achtergrond is 1,2:1.

Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

Link naar pagina: Teken de natuur

Geen bevindingen

Link naar pagina: Collectie

img-element heeft geen alt-attribuut

Op deze pagina zijn 27 afbeeldingen geplaatst met behulp van een img-element, maar ze hebben geenalt-attribuut. Het gaat bijvoorbeeld om de afbeelding onder het kopje “Collectie”.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alt-tekst toe. Je kunt deze afbeeldingen vinden met Axe-tool.

Relatie tussen links in een groep is niet in HTML vastgelegd

Op deze pagina staat naast de tekst "Aan de slag met de collectie:" een groep links die visueel een groep vormt, maar waarvan de relatie niet is vastgelegd in de HTML-structuur. Hetzelfde geldt voor de logo's naast de tekst "Collectie Online wordt mede mogelijk gemaakt door".

Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.

Oplossing:

Zet de teksten "Aan de slag met de collectie:" en "Collectie Online wordt mede mogelijk gemaakt door" om in koppen. Zo wordt de relatie tussen deze stukken content duidelijker.

Bezoekers die tot 200% en tot 400% inzoomen kunnen niet meer alle functies gebruiken

Als je de tekst op deze pagina inzoomt tot 200%, zijn de links "Ontdek" en "Vertel je verhaal" niet meer zichtbaar. Dit gebeurt ook bij 400% zoom.

Oplossing:

Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% of 400% op een scherm van 1280 bij 1024 pixels.

Knop kan niet bediend worden met spatiebalk en Enter-toets

Onder het kopje "Kunstwerken" op deze pagina staan knoppen met een "+"-icoon. Deze knoppen zijn niet toegankelijk via het toetsenbord.

Oplossing:

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

Het is onduidelijk waar de link naar toe verwijst

Onder het kopje "BEZOEKERSVERHALEN" op deze pagina staan kaartjes met afbeeldingen die links zijn naar de detailpagina van een verhaal. De toegankelijke namen van de links beschrijven de bestemming van de links niet duidelijk. Het gaat bijvoorbeeld om de naam "Festoen van vruchten en bloemen Stilleven met bloemen en vruchten Gouden hert." Een blinde bezoeker begrijpt mogelijk niet wat er gebeurt na het activeren van de link. Daarnaast zijn deze link niet met stem te bedienen. Een bezoeker die stembesturing gebruikt om op de website te navigeren, leest de tekst van het kaartje op, maar kan daarmee de link niet activeren.

Oplossing:

De toegankelijke naam van de link moet duidelijk beschrijven wat er gebeurt als je op de link klikt. In plaats van een lijst met namen van kunstwerken moet hier de zichtbare tekst van het kaartje staan: “Beauty in the eye ..”.
Dit kun je bereiken door een aria-label op de link te plaatsen:

<a href=”#” aria-label=”Beauty in the eye of the beholder 18 november 2024 759 kunstwerken”>

Link naar pagina: Vertel je verhaal

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op deze pagina openen de knoppen met de teksten "Hang kunstwerken op" en "Maak nu" (onder het kopje "Wat verzamel jij?") een dialoogvenster. Bij dit dialoogvenster mist zowel een eigen ARIA-rol als een toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Toetsenbordfocus komt niet op een logische plek nadat dialoogvenster is gesloten

Op deze pagina opent de knop met de tekst "Hang kunstwerken op" een dialoogvenster. Na het sluiten van het dialoogvenster gaat de toetsenbordfocus niet terug naar het element dat de knop activeert of naar het volgende logische element in de focusvolgorde van de pagina. De focus begint weer bovenaan de pagina.

Oplossing:

Zorg dat de focus na het sluiten van het venster terechtkomt op het element waarmee het dialoogvenster werd geopend.

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina is de zichtbare tekst van de links, bijvoorbeeld "Japan 8 februari 2025 | 6 kunstwerken", niet opgenomen in de toegankelijke naam "Wereld der Kunsten - 7 Lelies Het meer Kawaguchi". Er zijn meer links met dit probleem. Bijvoorbeeld "fiori ...", "Interessant gemarmerd papier ...".

Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Zichtbare tekst op dit element”).

Kop is niet gemarkeerd als koptekst

Op deze pagina staan blokken onder het kopje “Uitgelicht”. De kopjes "Eregalerij", "Japan", "fiori", enzovoorts, zijn niet als kopteksten gemarkeerd.

Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet 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 springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.

Oplossing:

Markeer koppen altijd met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Link naar pagina: Rembrandt van Rijn

img-element heeft geen alt-attribuut

Op deze pagina staan 33 afbeeldingen die zijn geplaatst met een img-element, en die geen alt-attribuut hebben.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alt-tekst toe. Je kunt deze afbeeldingen vinden met de Axe-tool.

Kop is niet gemarkeerd als koptekst

Op deze pagina staat een knop om de zoekbalk te openen. Het invoerveld "Verder zoeken" toont een lijst met suggesties. De tekst "Verfijn je zoekopdracht" is niet gemarkeerd als kop.

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

Oplossing:

Gebruik een kop-element, zoals <h3> of <h4>.

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

Op deze pagina staat een knop om de zoekbalk te openen. De grijze teksten (#7A7B7D) van de links in de zoektabbladen ("KUNSTWERKEN (1551)", "BIBLIOTHEEK (0)", "BEZOEKERSVERHALEN (39234)") staan op een donkergrijze achtergrond (#212327). De contrastverhouding is 3,7:1.

Oplossing:

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

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

Op deze pagina staat een knop om de zoekbalk te openen. De knop "Zoekopties" opent extra inhoud. Onder het kopje "MAKER" staat een select-element met de grijze tekst "Kwalificaties" (#676768) op een donkergrijze achtergrond (#2B2D2E). De contrastverhouding is te laag: 2,4:1.

Oplossing:

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

Bezoekers die inzoomen tot 200% en tot 400% kunnen niet meer alle functies gebruiken

Als de tekst op deze pagina wordt ingezoomd tot 200% en tot 400%, zijn de links "Ontdek” en "Vertel je verhaal" niet meer zichtbaar.

Oplossing:

Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% of 400% op een scherm van 1280 bij 1024 pixels.

Elementen die bedekt worden door het zoekformulier krijgen nog toetsenbordfocus

Op deze pagina staat een knop om de zoekbalk te openen. Als de toetsenbordfocus op het invoerveld "Verder zoeken" landt, opent een lijst met suggesties.

Als de bezoeker verder met de Tab-toets navigeert, gaat de toetsenbordfocus buiten de suggestielijst en komt deze terecht op interactieve elementen op de pagina die op dat moment niet zichtbaar zijn. Dit kan ertoe leiden dat een bezoeker onbedoeld zo’n element activeert.

Oplossing:

Je lost dit op een van de volgende manieren op: Houd de focus binnen de lijst met suggesties: zorg dat de toetsenbordfocus binnen blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Sluit de lijst met suggesties automatisch: sluit het chatvenster automatisch op het moment dat de focus eruit gaat.

Keuzelijst heeft geen toegankelijke naam

Op deze pagina staat een knop om de zoekbalk te openen. De knop "Zoekopties" opent extra inhoud. Onder de kopjes "MAKER", "PLAATS" en "SOORT WERK" staan keuzelijsten (select-elementen). Deze hebben geen toegankelijke naam. Hierdoor zijn de keuzelijsten niet toegankelijk.

Oplossing:

Geef de select-elementen een toegankelijke naam. Dat kan via een aria-label. Plaats hierin de tekst die boven het select-element staat.

Het aanvinken van een element zorgt ervoor dat de pagina opnieuw laadt

Op deze pagina staat een knop om de zoekbalk te openen. De knop "Zoekopties" opent extra inhoud. Als je opties selecteert onder "Te zien in het museum" en "Alleen met afbeelding", laadt de pagina opnieuw. Dit mag niet gebeuren zonder een waarschuwing vooraf.

Oplossing:

Bezoekers moeten van tevoren gewaarschuwd worden dat de pagina opnieuw zal laden als zij een andere optie selecteren. Je kunt ook een knop toevoegen waarmee de bezoeker zijn keuze kan bevestigen.

Link naar pagina: Stories

Geen andere bevindigen

Link naar pagina: Operatie Nachtwacht

Ondertitels in een andere taal

In de video op deze pagina wordt Engels gesproken, maar de ondertiteling is in het Nederlands. Ondertitels moeten in dezelfde taal zijn als de gesproken taal. Het gaat om de video verderop de pagina die over blauw glas gaat.

Oplossing:

Voeg ondertiteling in de gesproken taal toe aan deze video.

Link naar pagina: Bezoek het Rijksmuseum

Citaat is onjuist gemarkeerd als kop

Als je op de knop "Kom meer te weten over je bezoek" op deze pagina hebt geklikt, verschijnen citaten. Deze citaten zijn gemarkeerd als kop.

Dit is niet de correcte manier om een citaat te markeren, omdat je zo de structuur van de inhoud niet juist weergeeft aan bezoekers met een schermlezer. De citaten zijn immers geen koppen.

Oplossing:

Gebruik de juiste HTML-elementen voor citaten:

• <blockquote>: Voor langere citaten die een eigen alinea vormen.
• <q>: Voor kortere citaten binnen een zin.
• Pas eventueel CSS-stijlen toe om het citaat visueel op te laten vallen.

Link naar pagina: Opvliegende Zilverreigers

Video zonder geluid heeft geen transcriptie

Op deze pagina staat een video zonder geluid waarin wordt getoond hoe de restauratie is verlopen. Deze video is niet toegankelijk voor blinde bezoekers.

Oplossing:

Maak deze informatie toegankelijk voor blinde bezoekers door een uitgeschreven tekst (transcriptie) toe te voegen. Zet deze tekst naast of onder de video op de pagina, zodat het duidelijk is dat het een beschrijving van de video-inhoud is.

Link naar PDF: PDF1

PDF-document heeft geen titel

In de bestandseigenschappen van dit PDF-document is geen titel ingesteld.

Zelfs als er een titel op de eerste pagina staat, moet je in de PDF-instellingen ook een documenttitel instellen. Als je een PDF opent in een PDF-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk. Maar als je een documenttitel in de PDF-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Los het op in Adobe Acrobat:

• Open het PDF-document in Adobe Acrobat.
• Ga naar Bestand > Eigenschappen.
• Ga naar het tabblad Beschrijving.
• Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Voorbereidingsdocument voor scholen".
• Klik op OK en sla het bestand op.

Informatieve afbeeldingen hebben geen alt-tekst

Dit PDF-document bevat informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Dit komt op alle pagina’s voor.

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen.

Oplossing:

Voeg alt-teksten toe aan deze informatieve afbeeldingen. De auteur van dit document mag zelf bepalen of de afbeeldingen decoratief of informatief zijn. Het logo bovenaan het document is sowieso een informatieve afbeelding en moet een tekstalternatief krijgen.

Alt-teksten van sommige afbeeldingen zijn niet correct

In dit PDF-document staan 6 afbeeldingen waarbij het pad naar de afbeelding als tektalternatief is ingesteld. Dit is niet correct. Een aantal andere afbeeldingen hebben automatisch gegenereerde alt-tekst, bijvoorbeeld “Afbeelding met tekst Automatisch gegenereerde beschrijving”. Dit is ook niet goed.

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen.

Oplossing:

Zorg dat de alt-teksten duidelijk beschrijven wat op de afbeeldingen te zien is.

Kop niet gemarkeerd als een echte kop

In dit document staat op pagina 2 de tussenkop “Rondleiding in het hoofdgebouw”. Deze tekst is niet gemarkeerd als kop.

Oplossing:

Gebruik een heading-tag.

Lijst is niet als lijst gemarkeerd

In dit PDF-document staat op pagina 4 een lijst met 4 items. De juiste opmaak ontbreekt.

Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen.

Oplossing:

Markeer de lijst met een L- en Li-tags.

Leesvolgorde van de tags is niet logisch

In dit PDF-document is de leesvolgorde niet logisch.

Schermlezers lezen een PDF-document in de volgorde van de tags die in de codelaag staan. Als deze tags niet in een logische volgorde staan, is de leesvolgorde dus niet logisch en wordt het voor een blinde bezoeker moeilijk om de inhoud van het document te begrijpen.

Oplossing:

Zorg dat de volgorde van de tags logisch is.

Kleurcontrast van kleine tekst is te laag

In het PDF-document staat de grijze tekst "Krijgen jullie een rondleiding die ... De Teekenschool" (#808080) op een witte achtergrond (#FFFFFF). De contrastverhouding is 3,9:1.

Oplossing:

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

Instructie verwijst naar een visueel aspect

In dit document staat op pagina 3 de tekst “Op deze foto zie je waar je uitkomt als je met de lift gaat:”.

Deze tekst verwijst naar een visuele locatie, die mensen die de PDF niet kunnen zien mogelijk niet begrijpen.

Oplossing:

Beschrijf deze informatie in tekst.

Gegevenstabel gebruikt voor opmaak in PDF

In dit PDF-document zijn gegevenstabellen gebruikt voor lay-out.

Gegevenstabellen mogen alleen worden gebruikt om gegevens op een zinvolle manier te structureren, niet voor visuele opmaak. Wanneer deze tabellen verkeerd worden gebruikt voor opmaak, kunnen screenreaders de inhoud verkeerd interpreteren, wat leidt tot verwarring voor gebruikers die afhankelijk zijn van hulpsoftware.

Je herkent een gegevenstabel aan de aanwezigheid van th-tags. Deze tags mogen niet voorkomen in een tabel die voor lay-out is gebruikt.

Oplossing:

Gebruik goede semantische markup voor het structureren van de inhoud, zoals koppen, paragrafen en lijsten, in plaats van tabellen voor de opmaak.

Link naar pagina: Veelgestelde vragen

De accordeon heeft geen koppen

Op deze pagina staan secties met inhoud die kan worden in- en uitgeklapt, zogenaamde accordeons. De vragen waarmee je de antwoorden kunt uitklappen, hebben niet de rol van kop.

De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.

Oplossing:

Voeg een kop-element toe waarin het button-element staat. De volgorde is belangrijk:

<h3>Kan ik mijn ticket omboeken naar een ander moment? <button aria-expanded=”false”> Open Kan ik mijn ticket omboeken naar een ander moment?</button></h3>

Foutmeldingen hebben te weinig contrast

Als je het formulier op deze pagina instuurt met onjuiste gegevens, zie je foutmeldingen in rode tekst (#FF0000) tegen een grijze achtergrond (#40474F). De contrastverhouding is 2,4:1. Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.

Oplossing:

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

Voor de foutmeldingen is alleen HTML5-validatie gebruikt

Op deze pagina staat een formulier waarbij HTML5-validatie is gebruikt voor de invoervelden "Voornaam", "Achternaam", "E-mail" en andere invoervelden.

Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier:

• De melding blijft te kort staan.
• De foutmeldingen zijn onvolledig.
• De foutmeldingen worden niet altijd in de taal van de website getoond.

Oplossing:

Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

SC 1.4.3 Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

Op deze pagina staan naast de verplichte velden rode sterretjes (#BA3612) op een grijze achtergrond (#41474F). De contrastverhouding is 1,6:1.

Oplossing:

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

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie (bijvoorbeeld Voornaam, Achternaam, E-mail).

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email".

Link naar pagina: Zoekresultaten

SC 2.4.3 Onzichtbaar element krijgt toetsenbordfocus

Als je deze pagina bekijkt op een klein scherm, komt de toetsenbordfocus na de knop met vergrootglas terecht op een onzichtbaar interactief element. De focus mag nooit terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Link naar pagina: Agenda en activiteiten

Alle bevindingen zijn opgelost.

Link naar pagina: American Photography

Kop-element is gebruikt voor tekst die geen kop is

Op deze pagina staat de knop "Lees meer over de tentoonstelling". Deze knop opent inhoud met citaten. Deze citaten zijn geen koppen, maar ze zijn wel gemarkeerd met een <h2>-element, waarschijnlijk om de letters groter te maken.

Het kop-element (h2) is hier niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h2-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h2-element en gebruik een ander element, zoals een blockquote-element. De gewenste stijl kun je met CSS toevoegen.