Rapport:
Audit digitale toegankelijkheid website van Kennisbank Anne Frank Stichting

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de pagina met de tekst “anne frank stichting” is geïmplementeerd met een svg-element. Dit svg-element mist het title-element. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo wordt de informatie ook toegankelijk voor bezoekers die het logo niet kunnen zien. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Daarnaast is dit logo een link en moet het duidelijk worden waar deze link naartoe gaat. Zie ook succescriterium 2.4.4.
In de footer van de website is een vergelijkbaar probleem te zien bij het logo. Er moet een tekstalternatief worden toegevoegd waarin de volledige tekst van het logo staat. Omdat dit logo in de footer geen link is, moet het woord “Logo” worden toegevoegd aan het tekstalternatief.

Bovenaan de pagina is er op kleine schermen een knop met drie horizontale lijnen die het navigatiemenu opent. Dit pictogram heeft geen tekstalternatief. Ook het “X”-icoon dat wordt gebruikt om het menu te sluiten wanneer het open is, mist een tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Voeg deze beschrijving toe via een aria-label of een tekst die visueel verborgen is, maar toegankelijk is voor de schermlezer. Andere oplossingen zijn ook mogelijk.

In de footer functioneren de afbeeldingen van sociale netwerken als links, maar er is geen tekstalternatief aanwezig. Deze afbeeldingen zijn dus interactief. Er is geen tekstalternatief. Daardoor hebben de links geen inhoud. Om deze links toegankelijk te maken, moeten de afbeeldingen een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de links naartoe leiden.

Op pagina https://research.annefrank.org/nl/?page=1 staan afbeeldingen in de zoekresultaten onder de koppen “Victor Kugler volgt een opleiding tot elektrotechnicus” en “Victor Kugler volgt cursus Nederlandse handelscorrespondentie”. Deze afbeeldingen zijn toegevoegd met een img-element, maar het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ is hetzelfde probleem te zien bij de afbeelding onder de kop “Betrokken personen (1)”. Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/ gaat het om afbeeldingen onder de koppen “Betrokken personen (3)” en “Locaties (1)”. Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ ontbreekt het alt-attribuut bij de afbeeldingen onder de koppen “Digital files (1)” en “Events (2)”. Dit probleem komt ook op andere pagina’s voor.

Op pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ staan onder de kop “Gebeurtenissen (36)” artikelen zoals “Peter van Pels door de Synagogen-Gemeente Osnabrück uitgeschreven”, “Trouwdag Jan Gies en Miep Santrouschitz” en “Anne over het boek dat Peter niet mocht lezen”. In deze artikelen staan onzichtbare afbeeldingen die zijn toegevoegd met een img-element en die niet verborgen zijn voor schermlezers.
Op pagina https://research.annefrank.org/nl/onderwerpen/eefe9602-8893-47ad-bc48-3dd10392ff86/ komt dit probleem voor onder de kop “Locaties (1)” in het artikel “Achterhuis | Prinsengracht 263”. Op pagina https://research.annefrank.org/nl/onderwerpen/d7ba8d2c-3824-4286-96da-1af0f02ba645/ staan onder de kop “Gebeurtenissen (46)” artikelen zoals “Hermine Santrouschitz komt naar Nederland” en onder de kop “Locaties (56)” artikelen zoals “Geboortehuis van Victor Kugler” waarin ook onzichtbare afbeeldingen niet correct zijn verborgen voor schermlezers. Zorg dat deze img-elementen worden verborgen voor schermlezers. Dit kan worden opgelost door het gebruik van een leeg alt-attribuut (alt="") of het attribuut aria-hidden="true". Dit probleem komt ook op andere pagina’s voor.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ is er een sectie met verborgen content die wordt geopend via “+ Noten”. Het “+”-icoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief. Daardoor weten schermlezers niet dat hier verborgen content aanwezig is. Deze informatie is niet beschikbaar in de vorm van een aria-expanded-attribuut of een verborgen tekst.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ komt hetzelfde probleem voor. Dit probleem is ook op andere pagina’s aanwezig.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staat onder de kop “Digital files (1)” in de sectie “Images” een afbeelding. Bij deze afbeelding staat een icoon dat de afbeelding op volledig scherm opent, maar dit icoon heeft geen tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Voeg de beschrijving toe via een title-element bij het svg-element, een aria-label of een tekst die visueel verborgen is, maar toegankelijk is voor de schermlezer. In het dialoogvenster waarin de afbeelding vergroot wordt weergegeven, mist het “X”-icoon op de sluitknop ook een tekstalternatief.
Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ is hetzelfde probleem te zien onder de kop “Digitale Bestanden (1)”.

Op pagina https://research.annefrank.org/nl/paginas/1831/ staat een logo dat ook een link is en waarin de volledige tekst “Public Domain” te zien is. Het tekstalternatief van dit logo is echter alleen “CCO”. 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. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “Public Domain”. Het logo is te zien onder de koppen “Distributies” en “Distributions”.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://research.annefrank.org/nl/?page=1 is de tekst “Ontdek de verhalen en mensen rondom Anne Frank” geen echte kop, maar deze is wel gemarkeerd met een h2-element. Deze HTML-kop is 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. HTML-koppen 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 HTML-koppen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die in een HTML-kop staat ook echt de functie van kop of tussenkop heeft. Verwijder het h2-element en gebruik een ander element, zoals een p-element. De gewenste stijl kan met CSS worden toegevoegd.
In de zoekresultaten op dezelfde pagina is hetzelfde probleem te zien bij teksten zoals “Amsterdam 27 mei 1904 - 28 januari 1959”. Deze teksten zijn gemarkeerd met h4-elementen, maar geven geen structuur aan de inhoud en moeten dus niet als kop worden weergegeven.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ is hetzelfde probleem te zien bij de tekst “Amsterdam” onder de kop “Locaties (1)”. Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/ gaat het om de tekst “Osnabrück” onder de kop “Locaties (1)”. Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ is dit het geval bij de tekst “Foto uit een album van Abraham Holländer, grootvader van Margot en Anne Frank, 1927” en bij de teksten onder de kop “Events (2)” zoals “Unknown May 20, 1912” en “Aachen May 8, 1925”. Dit probleem komt ook op andere pagina’s voor.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ is het strong-element onjuist gebruikt voor opmaakdoeleinden om teksten vetgedrukt weer te geven. 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. Gebruik hiervoor CSS.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ komt ditzelfde probleem voor. Dit probleem is ook op andere pagina’s aanwezig.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ is het em-element onjuist gebruikt voor opmaakdoeleinden in de sectie die wordt geopend via “+ Noten”. Het em-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, zoals cursieve tekst. Gebruik hiervoor CSS.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ is het em-element op dezelfde manier verkeerd gebruikt. Dit probleem komt ook op andere pagina’s voor.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ bevat de tekst referentielinks in de vorm van genummerde cirkels. Deze elementen zijn gestileerd met visibility: hidden. Deze CSS-code zorgt ervoor dat inhoud volledig wordt verborgen voor zowel toetsenbordgebruikers als schermlezers, waardoor de referenties ontoegankelijk zijn. Gebruik deze eigenschap daarom niet bij interactieve elementen. In de sectie die wordt geopend via “+ Noten” is hetzelfde probleem aanwezig bij de referentielinks.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ komt dit probleem ook voor. Dit probleem is ook op andere pagina’s aanwezig.

Op pagina https://research.annefrank.org/nl/?page=1 staan in de filtersectie drie koppen van niveau 5 direct onder elkaar: “Filteren”, “1220 / 1220 resultaten” en “Gesorteerd op: Relevantie”. Als koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt.

Op pagina https://research.annefrank.org/nl/?page=1 staan onder “Filteren” knoppen die vooraf worden gegaan door de tekst “Type:”. Deze elementen zijn visueel gegroepeerd, maar deze relatie is niet vastgelegd in de HTML-code. Hierdoor weten bezoekers die een schermlezer gebruiken niet dat er een relatie is tussen de groepslabels en de bijbehorende groepen. Zorg dat de groepslabels in de code gekoppeld zijn aan de groepen. Dit kan bereikt worden met aria-labelledby of door het formulier op de juiste manier te structureren met fieldset- en legend-elementen. Bij de invoervelden onder de tekst “Periode:” is hetzelfde probleem aanwezig. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst “Periode:”.

Op pagina https://research.annefrank.org/nl/?page=1 staat boven de zoekresultaten een tekst zoals “1220 / 1220 resultaten”. Deze tekst is toegevoegd met CSS via een ::before-pseudo-element en is niet opgenomen in de HTML-code. Dit kan toegankelijkheidsproblemen veroorzaken, omdat schermlezers en andere hulpsoftware niet altijd inhoud aankondigen die alleen met CSS is toegevoegd. Niet-decoratieve en belangrijke inhoud, zoals het aantal weergegeven resultaten, moet onderdeel zijn van de HTML-code zodat alle bezoekers dezelfde informatie ontvangen.

Op pagina https://research.annefrank.org/nl/?page=1 opent het interactieve element “Filteren” op kleine schermen de sectie met filters. In de code is echter geen programmatische relatie aanwezig tussen de knop en de sectie die ermee wordt aangestuurd. Het element gebruikt geen attributen zoals aria-controls of aria-expanded, en de sectie verwijst ook niet terug naar de knop. Hierdoor worden bezoekers die hulpsoftware gebruiken niet geïnformeerd over de relatie tussen de bediening en de bijbehorende inhoud. De semantische koppeling tussen de elementen ontbreekt, wat verwarring kan veroorzaken, vooral voor schermlezers.

Op pagina https://research.annefrank.org/nl/onderwerpen/eefe9602-8893-47ad-bc48-3dd10392ff86/ worden in koppen zoals “Weekdagen”, “Zaterdag”, “Zondag” en andere zowel een HTML-kop als het strong-element gebruikt. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken, zoals vetgedrukte tekst. Gebruik hiervoor CSS.

In het pdf-document op https://research.annefrank.org/media/Overzicht%20Silberbauer%20in%20Nederland.pdf is een kop aanwezig die niet als kop is gemarkeerd: “Overzicht van activiteiten van Silberbauer in Nederland voor zover bekend”. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door een H1-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

In het pdf-document op https://research.annefrank.org/media/Overzicht%20Silberbauer%20in%20Nederland.pdf staat een lijst van 9 items verspreid over drie pagina’s. In de tags zijn alle lijstitems echter gemarkeerd als afzonderlijke lijsten met telkens één onderdeel. Combineer de lijsten: voeg de afzonderlijke L-tags samen tot één enkele lijst, zodat schermlezers de items als een doorlopende lijst voorlezen. Een andere oplossing is om de lijsten te wijzigen naar kopteksten (H2-tags). Dit lijkt in dit geval de beste oplossing, omdat elk huidig lijstonderdeel veel content bevat en omdat opsommingslijsten in Word altijd worden gesplitst als deze meerdere pagina's omvatten.

In het pdf-document op https://research.annefrank.org/media/Overzicht%20Silberbauer%20in%20Nederland.pdf bevatten de pagina’s voetnoten die de benodigde Reference- en/of Note-tags missen. Omdat deze tags ontbreken, kan voorleessoftware niet goed herkennen welke voetnoot bij welke verwijzing in de tekst hoort. Dit kan verwarrend zijn voor iemand die afhankelijk is van schermlezers, omdat de voetnoten dan als losse tekst worden voorgelezen zonder duidelijke koppeling aan de juiste plek in de hoofdtekst.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://research.annefrank.org/nl/?page=1 is de volgorde van HTML-elementen binnen de filtersectie niet logisch wanneer de site op kleine schermen wordt bekeken. Het interactieve element “Filteren” opent een sectie met filters, maar in de code is de inhoud van deze sectie niet direct na het activerende element geplaatst. Hierdoor komt de visuele volgorde (knop gevolgd door het filterpaneel) niet overeen met de volgorde in de code. Schermlezers en toetsenbordgebruikers kunnen de inhoud van het paneel daardoor buiten de context tegenkomen, wat de interactie verwarrend maakt. Zorg dat de leesvolgorde overeenkomt met de bedoelde logische en visuele volgorde.

In het pdf-document op https://research.annefrank.org/media/Overzicht%20Silberbauer%20in%20Nederland.pdf staan op de pagina’s voetnoten die vóór de tekst zijn geplaatst die naar deze noten verwijst. Ook zijn alle verschillende voetnoten samengevoegd in één Footnote-tag. Zie bijvoorbeeld de noten “2”, “3”, “4”, “5” en andere. Deze voetnoten worden daardoor eerder voorgelezen dan de tekst die ernaar verwijst. Hierdoor ontstaat een onlogische leesvolgorde. Plaats de voetnoten altijd direct ná de tekst waarnaar ze verwijzen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://research.annefrank.org/nl/?page=1 wordt bij de knoppen onder “Type:” in de filters een aangepaste toetsenbordfocusindicator gebruikt. Deze is zichtbaar als een verandering van de achtergrondkleur van wit naar grijs. Het gebruik van alleen kleur om focus aan te geven is hier echter 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. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden, zoals een dikkere rand, een onderstreping of een verandering van de achtergrond.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De combinatie van wit en rood (HEX #E6394E) wordt op verschillende pagina’s van de website gebruikt en heeft een te lage contrastratio van 4,2:1. Deze teksten zijn kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Bovenaan de pagina verschijnt witte tekst op een rode achtergrond wanneer het interactieve element met de tekst “NL” toetsenbordfocus krijgt. Deze kleurcombinatie wordt ook gebruikt bij de link met de tekst “Steun ons” in de footer.
Op pagina https://research.annefrank.org/nl/?page=1 verschijnt in het zoekveld met de placeholdertekst “Zoek gebeurtenissen, personen, locaties of onderwerpen” de ingevoerde tekst in rood op een witte achtergrond. Onder “Type” in de filters hebben de geselecteerde opties witte tekst op een rode achtergrond. In de zoekresultaten staan rode teksten zoals “Amsterdam”, “Gelsenkirchen”, “Frankfurt am Main” en andere op een witte achtergrond met onvoldoende contrastratio. Bij de paginering is het paginanummer ook rood op een witte achtergrond. Deze kleurcombinatie komt ook op andere pagina’s voor.

Bovenaan de pagina https://research.annefrank.org/nl/?page=1 staat een link met rode tekst “Zoek in de Kennisbank” (HEX #E6394E) op een zwarte achtergrond (HEX #222222). De contrastratio is 3,8:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Op pagina https://research.annefrank.org/nl/paginas/1831/ komt hetzelfde probleem voor bij de tekst “Open data”. Op pagina https://research.annefrank.org/nl/kaart/ is dit probleem aanwezig bij de tekst “Kaart”.

Bovenaan de pagina’s verschijnt bij hover de tekst van de navigatielinks in het rood (HEX #CB2F40) op een zwarte achtergrond (HEX #222222). De contrastratio is 3,0:1. Dit moet minimaal 4,5:1 zijn. In de footer komt hetzelfde probleem voor bij de links onder de kop “Ga direct naar”.

Op pagina https://research.annefrank.org/nl/?page=1 staan onder “Filteren” invoervelden voor datums, voorafgegaan door de tekst “Periode:”. De placeholdertekst in deze velden is donkergrijs (HEX #757575) op een lichtgrijze achtergrond (HEX #E7E7E2). De contrastratio is 3,7:1. Dit moet minimaal 4,5:1 zijn.

Op pagina https://research.annefrank.org/nl/?page=1 hebben teksten in de zoekresultaten, zoals datums bijvoorbeeld “27 mei 1904 - 28 januari 1959”, een grijze kleur (HEX #A69B91) op een witte achtergrond. De contrastratio is 2,7:1. Dit moet minimaal 4,5:1 zijn.
Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ komt hetzelfde probleem voor onder de kop “Events (2)”. Op pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ is dit probleem aanwezig onder de kop “Gebeurtenissen (36)”. Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ staat dit probleem onder de kop “Gebeurtenissen (1)”. Dit probleem komt ook op andere pagina’s voor.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ staat in de sectie die wordt geopend via “+ Noten” grijze tekst (HEX #A4A4A4) op een witte achtergrond. De contrastratio is te laag: 2,5:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
Hetzelfde probleem komt voor bij de teksten in de secties die worden geopend via de referentielinks in de hoofdtekst. Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ is hetzelfde probleem aanwezig. Dit komt ook op andere pagina’s voor.
Dezelfde kleurcombinatie wordt ook gebruikt op pagina https://research.annefrank.org/nl/onderwerpen/eefe9602-8893-47ad-bc48-3dd10392ff86/ bij de tekst “Fotograaf: Allard Bovenberg. Collectie: Anne Frank Stichting.”, op pagina https://research.annefrank.org/nl/locaties/84898f4e-5c32-47d1-bff4-d377c343c5b2/ bij de tekst “Vervaardiger onbekend. Stadsarchief Amsterdam Gebruiksrechten: Publiek domein”, en op pagina https://research.annefrank.org/nl/locaties/22e0a51c-c9a1-4f0d-ae8e-b87e8492b352/ bij de tekst “Vervaardiger onbekend. Beeldbank WO2 Gebruiksrechten: Geen restricties bekend”.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ bevat de tekst referentielinks in de vorm van cijfers in cirkels. Wanneer deze links worden aangewezen met de muis (hover) of geactiveerd, staat het witte cijfer op een rode achtergrond (HEX #E6394E). De contrastratio is 4,2:1. Dit is onvoldoende, want de contrastverhouding moet minimaal 4,5:1 zijn.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ is hetzelfde probleem aanwezig. Dit probleem komt ook op andere pagina’s voor.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staan grijze teksten zoals “Oct. 27, 1860”, “Jan. 19, 1927”, “Fotocollectie: Anne Frank Stichting”, “Amsterdam” en “Rechthebbende onvindbaar”. Deze teksten hebben een kleur (HEX #919191) op een witte achtergrond, met een contrastratio van 3,2:1. Dit is te laag. De contrastverhouding moet minimaal 4,5:1 zijn.
Hetzelfde probleem doet zich ook voor op andere pagina's: https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/, https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/, https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/, en https://research.annefrank.org/nl/personen/3bad773b-ee19-4be9-bf7e-bf17c99b9c57/.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staat onder de kop “Digital files (1)” grijze tekst (HEX #999996) op een grijze achtergrond (HEX #E7E7E2). De contrastratio is 2,3:1. Dit is onvoldoende, want de contrastverhouding moet minimaal 4,5:1 zijn. Het gaat om de knoptekst “PDF’s” en in de sectie “Images” om teksten zoals “Copyright: Publiek domein” en “Photographer: De collectie kan worden ingezet voor publiek”.
Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ is dit probleem aanwezig onder de kop “Digitale Bestanden (1)”. Op pagina https://research.annefrank.org/nl/personen/3bad773b-ee19-4be9-bf7e-bf17c99b9c57/ komt hetzelfde probleem voor onder de kop “Digitale Bestanden (1)”.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://research.annefrank.org/nl/?page=1 wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, raakt de placeholdertekst in het zoekveld deels uit beeld. Alles moet nog werken en leesbaar zijn als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.
Op pagina https://research.annefrank.org/nl/kaart/ is hetzelfde probleem aanwezig.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ staat in de sectie die wordt geopend via “+ Noten” een link in lopende tekst, “Verblijf van Gezin Salomon Loeté”. Deze link maakt gebruik van een aangepaste kleur voor de onderstreping (HEX #A4A4A4) met onvoldoende contrast tegen de witte achtergrond. De contrastratio is 2,5:1. Zorg dat het contrast tussen de kleur van de onderstreping en de achtergrond minimaal 3,0:1 is.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ komt hetzelfde probleem voor in links binnen verborgen content. Dit probleem is ook op andere pagina’s aanwezig.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website staat een interactief element met de zichtbare tekst “NL” waarmee de taal van de website kan worden veranderd. Dit interactieve element is niet toegankelijk via het toetsenbord. Zorg dat interactieve elementen, zoals knoppen en links, bediend kunnen worden met zowel de spatiebalk als de Enter-toets.

Op pagina https://research.annefrank.org/nl/?page=1 kunnen de knoppen onder "Type:" in de filters met de muis geselecteerd en gedeselecteerd worden. Voor toetsenbordgebruikers is het echter alleen mogelijk om een knop te selecteren. De mogelijkheid om deze selectie ongedaan te maken is niet toegankelijk via het toetsenbord. Zorg dat de knoppen zowel geselecteerd als gedeselecteerd kunnen worden met het toetsenbord.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ bevat de tekst referentielinks in de vorm van cijfers in cirkels. Deze links zijn niet toegankelijk via het toetsenbord. Wanneer een bezoeker met het toetsenbord navigeert, wordt deze link overgeslagen. Zorg dat alle links ook met de Enter-, Return- of spatietoetsen kunnen worden bediend. In de sectie die wordt geopend via “+ Noten” is hetzelfde probleem aanwezig bij de referentielinks.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ komt dit probleem ook voor. Dit probleem is ook op andere pagina’s aanwezig.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staat onder de kop “Digital files (1)” in de sectie “Images” een afbeelding met een knop om de afbeelding op volledig scherm te openen. Dit interactieve element is niet toegankelijk via het toetsenbord. In het dialoogvenster met de vergrote afbeelding is ook de “X”-knop om het venster te sluiten niet via het toetsenbord te bedienen.
Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ is hetzelfde probleem aanwezig onder de kop “Digitale Bestanden (1)”.

Op pagina https://research.annefrank.org/nl/?page=1 kunnen bezoekers met de Tab-toets naar de knoppen onder “Type” navigeren, maar daarna is het niet mogelijk om verder met Tab te navigeren. De toetsenbordfocus beweegt alleen tussen de knoppen met de pijltjestoetsen. Bovendien wordt een knop automatisch geselecteerd zodra deze via een pijltjestoets focus krijgt. Zorg dat de Tab-navigatie logisch door de filtersectie blijft verlopen. De knoppen moeten focusbaar zijn en bediend kunnen worden met Tab en Shift+Tab om te navigeren, en geactiveerd worden met Enter of Spatie, niet automatisch bij het ontvangen van focus.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina’s van de website bevatten geen skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Uitkomst: Onvoldoende

Bevindingen: Het pdf-document op https://research.annefrank.org/media/Overzicht%20Silberbauer%20in%20Nederland.pdf heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de pdf-instellingen een documenttitel ingesteld worden. Als een pdf geopend wordt in een pdf-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de pdf-metadata is ingesteld, 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. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het pdf-document.

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website komt de toetsenbordfocus na het interactieve element met de zichtbare tekst “NL” terecht op onzichtbare interactieve elementen. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Wanneer de website op kleine schermen wordt bekeken, treedt hetzelfde probleem op. Na de knop met de drie horizontale lijnen komt de toetsenbordfocus ook daar op onzichtbare interactieve elementen terecht.

Bovenaan de website is op kleine schermen een menuknop aanwezig die het navigatiemenu opent. Op dit moment kunnen bezoekers met het toetsenbord buiten het menu navigeren terwijl het menu nog open blijft staan. De toetsenbordfocus verschuift dan naar de onderliggende pagina, wat verwarrend kan zijn. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Op pagina https://research.annefrank.org/nl/?page=1 komt, wanneer de pagina op kleine schermen wordt bekeken, de toetsenbordfocus na het interactieve element “Filteren” terecht op onzichtbare interactieve elementen. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ staan in de sectie die wordt geopend via “+ Noten” referentielinks in de vorm van cijfers in cirkels. Wanneer een bezoeker op deze links klikt, wordt de pagina naar het bijbehorende gedeelte gescrold, maar de toetsenbordfocus verplaatst zich niet mee naar dat gedeelte. Dit is niet logisch en kan verwarrend zijn voor toetsenbordgebruikers en schermlezergebruikers.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ en pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ komt ditzelfde probleem voor. Dit probleem is ook aanwezig op andere pagina’s. Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/ is bij weergave op kleine schermen een vergelijkbaar probleem zichtbaar in de sectie “Betrokken personen (3)”. Wanneer de knop “Toon meer personen” wordt geactiveerd, worden er meer artikelen geladen, maar de toetsenbordfocus verplaatst zich niet naar de nieuw toegevoegde inhoud. Ditzelfde gedrag is ook aanwezig bij soortgelijke knoppen op andere pagina’s, zoals de knop “Toon meer gebeurtenissen” op https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/, de knoppen “Toon meer locaties” en “Toon meer gebeurtenissen” op https://research.annefrank.org/nl/onderwerpen/d7ba8d2c-3824-4286-96da-1af0f02ba645/, en de knop “Toon meer gebeurtenissen” op https://research.annefrank.org/nl/personen/3bad773b-ee19-4be9-bf7e-bf17c99b9c57/.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staat onder de kop “Digital files (1)” in de sectie “Images” een afbeelding met een knop om de afbeelding op volledig scherm te openen. Deze knop opent een dialoogvenster, maar de toetsenbordfocus wordt bij het openen niet automatisch naar dit dialoogvenster verplaatst. Zorg dat de focusvolgorde logisch blijft, door deze naar de nieuwe inhoud te verplaatsen.
Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ is hetzelfde probleem aanwezig onder de kop “Digitale Bestanden (1)”.

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website is ook een link, maar bevat geen beschrijvende tekst over de bestemming van de link. Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt. Dit kan opgelost worden door een alt-tekst aan de afbeelding van het logo toe te voegen, of een tekst die alleen zichtbaar is voor schermlezers, zoals een aria-label-attribuut. Let erop dat deze link niet naar de startpagina van deze subsite gaat.

In de footer functioneren de afbeeldingen van sociale netwerken als links, maar deze afbeeldingen hebben geen tekstalternatief. Daardoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn ook mogelijk.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ staat onder de kop “27 mei 1904 - 28 januari 1959” een kaart die functioneert als een link. Deze link heeft geen herkenbaar linkdoel. Om dit op te lossen moet de link content krijgen. Dit kan 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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website staat een interactief element met de zichtbare tekst “NL” dat wordt gebruikt om van taal te wisselen. Deze tekst beschrijft de functie van het element niet duidelijk. Bezoekers die hulpsoftware gebruiken, kunnen daardoor niet begrijpen dat dit element bedoeld is om de taal van de website te wijzigen. Dit kan verwarring veroorzaken en maakt de functionaliteit minder toegankelijk.

In de footer staat de koptekst “Ga direct naar”, maar deze tekst beschrijft de inhoud die volgt niet goed. Teksten zoals “Snel naar”, “Direct naar” en “Ga naar” zijn te algemeen. Links leiden in principe altijd naar een andere pagina, dit weet iemand ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke kop, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”.

Op pagina https://research.annefrank.org/nl/?page=1 staan in de filtersectie twee invoervelden onder “Periode”. Beide velden hebben dezelfde toegankelijke naam: “dd-mm-jjjj”. Het verschil tussen deze invoervelden is niet duidelijk op basis van de toegankelijke naam. Voor verschillende invoervelden waar andere informatie ingevuld moet worden, mag niet exact hetzelfde label gebruikt worden. Zelfs niet als de velden erg op elkaar lijken. Het verschil moet duidelijk worden uit het label.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ staat onder de kop “27 mei 1904 - 28 januari 1959” een kaart. Op deze kaart staat een kaartmarkering die functioneert als een knop. De toegankelijke naam van deze knop is “Map marker”, maar deze beschrijft de functie van de knop niet duidelijk. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://research.annefrank.org/nl/?page=1 is de toetsenbordfocus niet zichtbaar op het select-element dat vooraf wordt gegaan door de tekst: “Gesorteerd op”. 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. De toetsenbordfocus is ook niet zichtbaar op de knoppen onder “Type:” wanneer deze knoppen geselecteerd zijn.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de website staat een logo dat ook functioneert als een link en waarin de tekst “anne frank stichting” zichtbaar is. De toegankelijke naam van deze link is echter leeg. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

Op pagina https://research.annefrank.org/nl/?page=1 staat in de filtersectie een select-element met de zichtbare tekst: “Gesorteerd op”. Deze zichtbare tekst is echter niet opgenomen in de toegankelijke naam van het select-element. Hierdoor kunnen bezoekers die gebruikmaken van spraaksoftware het element niet bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als de zichtbare tekst niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. 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.

Op pagina https://research.annefrank.org/nl/paginas/1831/ bevatten de links met logo’s de zichtbare tekst “Public Domain”, maar in de toegankelijke naam van deze links staat alleen “CC0”. 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. Dit kan opgelost worden door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ staat onder de kop “Locaties (1)” een artikel dat ook een link is. De zichtbare koptekst “Woning Johannes Kleiman” is echter niet opgenomen in de toegankelijke naam van de link. Dit veroorzaakt een inconsistentie tussen het visuele label en het programmatische label, waardoor het voor gebruikers van hulpsoftware, zoals spraakbesturing, moeilijker wordt om de link te herkennen en te activeren.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/5880a52b-73ae-4a4c-a582-1295cffaaf1b/, pagina https://research.annefrank.org/nl/personen/0855fb95-33ad-4cc8-a549-21853833eff5/ en pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ komt dit probleem ook voor in soortgelijke secties. Dit probleem is ook op andere pagina’s aanwezig.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://research.annefrank.org/nl/?page=1 bevatten pagineringslinks met pijltjesicoon aria-label-attributen met Engelse tekst. De toegankelijke namen van deze links zijn “Go to previous page” en “Go to next page”. Ook het invoerveld voor het instellen van een paginanummer heeft een aria-label met de tekst “Set page number”. Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina, in dit geval Nederlands. Vertaal de teksten van de aria-labels daarom naar het Nederlands.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staan teksten in een andere taal zonder taalcode. Er staan Nederlandse teksten, zoals onder de kop “Abraham Holländer” de tekst “Fotocollectie: Anne Frank Stichting Amsterdam Rechthebbende onvindbaar”, en dezelfde tekst in het alt-attribuut van het img-element met het portret. Ook het title-attribuut van datzelfde img-element bevat Nederlandse tekst: “Foto uit een album van Abraham Holländer, grootvader van Margot en Anne Frank, 1927”. Verder is er Nederlandse tekst aanwezig in de sectie die wordt geopend via referentielink “13” en op andere plaatsen. Daarnaast komt er Duitse tekst voor in de secties die worden geopend via referentielinks “1”, “2”, “3a” en andere. Deze teksten worden 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 “en”. De schermlezer moet hier echter op de taal van deze zin overschakelen. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Als de tekst bijvoorbeeld in het Nederlands is, voeg dan lang="nl" toe aan het element.

Op pagina https://research.annefrank.org/nl/paginas/1831/ staan teksten in een andere taal zonder taalcode. De taal van de pagina is ingesteld op Nederlands, maar de teksten zijn in het Engels. Dit geldt onder andere voor de linktekst “For English see below” en voor de teksten in de sectie onder “Linked Open Data”. Geef deze anderstalige inhoud daarom een lokaal lang-attribuut met de juiste waarde. Als de tekst bijvoorbeeld in het Engels is, voeg dan lang="en" toe aan het element.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het logo bovenaan de website is ook een link, maar heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft.

Bovenaan de website staat een interactief element met de zichtbare tekst “NL” dat wordt gebruikt om de taal van de website te wijzigen. Dit interactieve element heeft niet de juiste toegankelijke rol. Elk HTML-element heeft standaard een bepaalde rol die bepaalt welke functie het element heeft en hoe schermlezers en andere hulpmiddelen ermee omgaan. Schermlezers moeten de correcte rol van elk element op een webpagina kennen om duidelijk te kunnen uitleggen wat het element doet. Geef dit interactieve element daarom de juiste toegankelijke rol, bijvoorbeeld via een button-element.

Bovenaan de website staat een interactief element met de zichtbare tekst “NL”, waarmee de taal van de website kan worden gewijzigd. Dit element bevat een submenu, maar een blinde bezoeker krijgt geen informatie over de toestand van dat submenu — of het open of gesloten is. Als er een link of knop is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu kunnen bepalen. Gebruik hiervoor het aria-expanded-attribuut. Zo wordt aan schermlezers duidelijk of het submenu zichtbaar of verborgen is.

Bovenaan de website ontbreekt op kleine schermen een toegankelijke naam bij de knop met drie horizontale lijnen die het navigatiemenu opent. Ditzelfde probleem is aanwezig bij de “X”-knop waarmee het menu wordt gesloten. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de functie is van de knop. Geef deze knoppen een toegankelijke naam die het doel van de knop beschrijft.

In de footer functioneren de afbeeldingen van sociale netwerken als links, maar deze links hebben geen toegankelijke namen. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze links een toegankelijke naam die het doel van de links beschrijft.

Op pagina https://research.annefrank.org/nl/?page=1 is de sectie met filters gemarkeerd met een form-element. Dit element bevat het attribuut aria-expanded="true", maar dit attribuut is niet toegestaan op een form-element. Volgens de ARIA-specificatie ondersteunt elke rol alleen bepaalde toestanden en eigenschappen. Het gebruik van niet-ondersteunde attributen resulteert in ongeldige ARIA, waardoor hulpsoftware het element kan negeren of verkeerd interpreteren. Verwijder aria-expanded van het form-element en gebruik dit alleen op interactieve elementen die het wel ondersteunen, zoals knoppen of elementen die inhoud tonen of verbergen.

Op pagina https://research.annefrank.org/nl/?page=1 staat in de filtersectie een keuzelijst (select-element) met het visuele label “Gesorteerd op”. De toegankelijke naam ontbreekt echter. Hierdoor is het element niet toegankelijk voor bezoekers die hulpsoftware gebruiken. Geef het select-element een toegankelijke naam, bijvoorbeeld door het te koppelen aan het visuele label met een label-element of door het gebruik van een aria-label of aria-labelledby.

Op pagina https://research.annefrank.org/nl/?page=1 functioneert op kleine schermen het interactieve element met de zichtbare tekst “Filteren” als knop om een sectie met verborgen inhoud te openen. Dit element heeft echter niet de juiste interactieve rol. Het element dat verborgen content toont of verbergt, is niet gemarkeerd als knop. De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als knop voor die delen. Daarom moeten deze teksten ook de juiste toegankelijke rol van een knop hebben. Markeer de tekst als knop. De juiste structuur is dan bijvoorbeeld: <h2><button>Titel van de sectie</button></h2>. Het attribuut role="button" is dan niet meer nodig.
Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ is hetzelfde probleem aanwezig bij het interactieve element dat de verborgen content opent en sluit met de tekst “+ Noten”.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ staat onder de kop “27 mei 1904 - 28 januari 1959” een kaart die functioneert als een link. Deze link heeft geen toegankelijke naam. Hierdoor is het voor bezoekers die een schermlezer gebruiken niet duidelijk wat het doel of de bestemming van de link is. Geef deze link een toegankelijke naam die het doel van de link beschrijft.

Op pagina https://research.annefrank.org/nl/gebeurtenissen/a3fe11e5-db57-4efb-bc79-6c5641daeede/ is er een sectie met verborgen inhoud die wordt geopend via het interactieve element “+ Noten”. De open of gesloten toestand van deze sectie is visueel duidelijk, maar wordt niet programmatisch gecommuniceerd aan schermlezers. Voor bezoekers die de pagina kunnen zien, is het direct zichtbaar of een sectie is in- of uitgeklapt. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken, is dat niet het geval. Dit kan opgelost worden door een aria-expanded-attribuut toe te voegen aan de knop waarmee de sectie wordt geopend en gesloten, of door visueel verborgen tekst toe te voegen die de toestand van de sectie beschrijft.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staat onder de kop “Digital files (1)” een knop met de tekst “Images”. Deze knop kent meerdere toestanden (zoals ingedrukt of niet ingedrukt), maar deze toestand wordt niet programmatisch aangegeven in de code. Hierdoor kan hulpsoftware deze informatie niet doorgeven en weten blinde bezoekers niet wat de huidige toestand van de knop is. Zorg dat de toestand van de knop ook in de code wordt weergegeven, bijvoorbeeld met het attribuut aria-pressed.
Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ is hetzelfde probleem aanwezig bij de knop “Images” onder de kop “Digitale Bestanden (1)”. Op pagina https://research.annefrank.org/nl/personen/3bad773b-ee19-4be9-bf7e-bf17c99b9c57/ komt dit probleem voor bij de knop “PDF’s” onder de kop “Digitale Bestanden (1)”.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staat onder de kop “Digital files (1)” in de sectie “Images” een afbeelding met een knop om de afbeelding op volledig scherm te openen. Deze knop heeft niet de juiste toegankelijke rol en mist ook een toegankelijke naam. Elk HTML-element heeft standaard een rol, die bepaalt hoe schermlezers en andere hulpmiddelen het element interpreteren. Als een element niet de correcte rol heeft, kunnen hulpmiddelen niet op de juiste manier communiceren wat het doet. Zorg dat deze knop de juiste toegankelijke rol heeft, bijvoorbeeld role="button" als er geen native button-element wordt gebruikt. Geef daarnaast een toegankelijke naam die het doel van de knop beschrijft, bijvoorbeeld met aria-label.
In het dialoogvenster met de vergrote afbeelding is hetzelfde probleem aanwezig bij de “X”-knop om het venster te sluiten. Ook deze knop heeft geen correcte toegankelijke rol en geen beschrijvende toegankelijke naam. Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ komt hetzelfde probleem voor onder de kop “Digitale Bestanden (1)”.

Op pagina https://research.annefrank.org/en/personen/c518edcb-25b4-49b4-abf0-e3fcc9f6181d/ staat onder de kop “Digital files (1)” in de sectie “Images” een afbeelding met een knop om deze afbeelding op volledig scherm te openen. Deze knop opent een dialoogvenster, maar dit venster heeft geen correcte ARIA-rol en geen toegankelijke naam. Hierdoor kunnen schermlezers niet doorgeven dat het om een dialoogvenster gaat en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") of een aria-describedby en role="dialog".
Op pagina https://research.annefrank.org/nl/personen/1fc1151b-dc08-4299-9ad4-f267b43dbe79/ is hetzelfde probleem aanwezig onder de kop “Digitale Bestanden (1)”.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://research.annefrank.org/nl/?page=1 worden in de filters de zoekresultaten aangepast en wordt een melding zoals “258 / 1220 resultaten” overeenkomstig bijgewerkt zonder dat de pagina wordt herladen. Deze melding, die een statusbericht is, wordt echter niet automatisch voorgelezen door schermlezers. Dat zou wel moeten gebeuren. Statusberichten moeten automatisch voorgelezen worden zodra ze verschijnen of veranderen. Dit kan opgelost worden door een aria-live-attribuut toe te voegen aan de melding, zodat schermlezers de update herkennen en doorgeven aan de gebruiker.