WCAG-EM rapport iisg.amsterdam 2025-06-07

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U201

U202: Afbeeldingen die decoratief zijn, of waar een tekstueel alternatief zou leiden tot herhaling voor de gebruiker, hebben geen tekstueel alternatief Onvoldoende

Toelichting

Als afbeeldingen gebruikt worden als een link, en er ook tekst in de link staat, moet er geen alt-tekst toegevoegd worden als deze dezelfde informatie zou geven.

Om decoratieve afbeeldingen goed te delen kan je CSS background images gebruiken, je kan het alt-attribuut leeg laten, of je kan role="presentation" op de afbeelding zetten.

Bevindingen per richtlijn

Afbeelding niet opgemaakt als decoratief

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een decoratieve afbeelding gevonden die hulpprogramma’s niet kunnen negeren.

Zie bijvoorbeeld de foto’s van de medewerkers op de pagina Staff (EN), achter https://iisg.amsterdam/en/about/staff

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

U203: Video's en animaties hebben een titel nodig die het onderwerp beschrijft Onvoldoende

Toelichting

Video's en animaties moeten een titel hebben die het onderwerp beschrijft. Hier wordt verwacht dat het element een titel heeft van wat de content van de video of animatie is.

Dit kan je doen door een kop boven de video of tekst te zetten. Als je bijvoorbeeld een video op de website zet waarin een introductie wordt gegeven over digitale toegankelijkheid, is het afdoende om een kop met de tekst "Introductie digitale toegankelijkheid" te plaatsen.

Bevindingen per richtlijn

Video zonder titel

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een video gevonden zonder titel. De titel informeert schermlezergebruikers over de inhoud van de video.

Twee voorbeelden:

1. European Social Science History Conference (EN)
De video ESSHC 2023 Impressions.

2. Mission and vision (EN)
De video Internationaal Instituut voor Sociale Geschiedenis.

Dit probleem komt voor op onder andere de volgende pagina’s:

European Social Science History Conference (EN) https://esshc.iisg.amsterdam/en
Mission and vision (EN) https://iisg.amsterdam/en/about/mission

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U203

U212: Een kaart heeft een titel en beschrijving die het doel van de kaart beschrijft Onvoldoende

Toelichting

Als een plattegrond wordt toegevoegd aan de pagina, moet er een titel worden toegevoegd aan de plattegrond. Op deze manier is het duidelijk voor gebruikers wat de context en onderwerp is van de plattegrond.

Bevindingen per richtlijn

Plattegrond of kaart zonder titel of beschrijving

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de pagina Plan uw bezoek is onder de kop routebeschrijving een kaart (Google Maps) zonder toegankelijke titel of beschrijving. Google Maps kent veel losse elementen die hulpprogramm’s allemaal langsloopt. Door een titel te geven - en plaats daar bij voorkeur ook een skiplink bij - worden deze gebruikers gewaarschuwd voor een kaart en hebben ze de optie de kaart te negeren of juist te besturen.

Link naar de pagina: https://iisg.amsterdam/nl/collecties/plan-uw-bezoek

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U212

1.2.1 Alleen audio en alleen video (vooraf gemaakt)

U204: Vooraf opgenomen audio fragmenten hebben een gelijk tekstueel alternatief Niet van toepassing

Toelichting

Een link naar de text versie is voldoende, maar het moet duidelijke gelabeld zijn zodat de gebruiker het makkelijk kan vinden

1.2.2 Bijschriften (vooraf opgenomen)

U205: Alle vooraf opgenomen video content heeft ondertiteling Niet van toepassing

Toelichting

Om te voldoen aan de EN 301 549 en WCAG richtlijnen moeten de ondertitelingen in dezelfde taal zijn als de video.

1.2.3 Audiobeschrijving of media-alternatief (vooraf opgenomen)

U213: Er is audiobeschrijving of een media-alternatief voor video's Onvoldoende

Toelichting

Er wordt een alternatief geleverd voor video’s. Hier kan op twee manieren aan worden voldaan:

Het aanbieden van audiobeschrijving: Een audiobeschrijving legt uit wat er visueel gebeurt in een video in de vorm van een audiotrack. Er wordt zo context toegevoegd aan visuele informatie. Dit is dus een extra toevoeging aan de normale bijschriften van een video, zoals ondertiteling. Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.
Of het aanbieden van een media-alternatief: Hieronder valt bijvoorbeeld een volledig teksttranscriptie van de video.

Er zijn uitzonderingen:

Wanneer de video zelf al een alternatief is en is duidelijk als zodanig gemarkeerd.
Je hebt geen audiobeschrijving nodig als alle informatie in de video in de reguliere soundtrack wordt verstrekt.

Bevindingen per richtlijn

Vooraf opgenomen video zonder alternatief of audiobeschrijving

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er zijn vooraf opgenomen video’s met audiotracks gevonden, zonder een tekstueel alternatief of audiobeschrijving die de belangrijke video-inhoud beschrijft.

Twee voorbeelden:

1. European Social Science History Conference (EN)
De video ESSHC 2023 Impressions.

2. Mission and vision (EN)
De video Internationaal Instituut voor Sociale Geschiedenis. Tip: Er is een transcript beschikbaar op YouTube. Plaats deze bij de video of verwijs ernaar.

Links naar de pagina’s:

European Social Science History Conference (EN) https://esshc.iisg.amsterdam/en
Mission and vision (EN) https://iisg.amsterdam/en/about/mission

WCAG SC:

1.2.3

EN 301 549:

9.1.2.3, 10.1.2.3

Aceit:

U213

1.2.4 Bijschriften (live)

U206: Er worden ondertitels voor doven en slechthorende geleverd voor alle live audiocontent in gesynchroniseerde media Niet van toepassing

1.2.5 Audiobeschrijving (vooraf opgenomen)

U208: Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media Onvoldoende

Toelichting

Een audiobeschrijving legt uit wat er visueel gebeurt in de video aan gebruikers die niet kunnen zien. Dit wordt vaak gedaan als een aparte video met een audiodescriptie, maar kan ook worden gedaan als een extra audiotrack op de originele video dat de gebruiker kan aan- en uitzetten.

Voorbeelden van visuele informatie die moet worden opgenomen in de audiobeschrijving zijn tekstlabels en naamborden.

Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.

Hier is een voorbeeld van een audiobeschrijving: https://www.youtube.com/watch?v=O7j4_aP8dWA

Bevindingen per richtlijn

Vooraf opgenomen video zonder audiobeschrijving

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er zijn vooraf opgenomen video’s met audio gevonden, zonder audiobeschrijving van de visueel gepresenteerde informatieve inhoud van de video’s.

Twee voorbeelden:

1. European Social Science History Conference (EN)
De video ESSHC 2023 Impressions.

2. Mission and vision (EN)
De video Internationaal Instituut voor Sociale Geschiedenis. Tip: Er is een transcript beschikbaar op YouTube. Plaats deze bij de video of verwijs ernaar.

Links naar de pagina’s:

European Social Science History Conference (EN) https://esshc.iisg.amsterdam/en
Mission and vision (EN) https://iisg.amsterdam/en/about/mission

WCAG SC:

1.2.5

EN 301 549:

9.1.2.5, 10.1.2.5, 11.1.2.5

Aceit:

U208

1.3.1 Info en relaties

U302: Alle visuele koppen zijn in de code weergeven als semantische koppen met het bijbehorende kop-niveau Onvoldoende

Toelichting

Gebruik HTML elementen H1 tot H6. Als dat niet mogelijk is kunt u WAI-ARIA gebruiken.

Bevindingen per richtlijn

Kop niet programmatisch opgemaakt (1/2)

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Op deze drie pagina’s gaat het om koppen in de lopende tekst die niet zijn opgemaakt als kop.

1 en 2. Schemas / Vocabulary Page (Value Lists)
‘’Census schemas (IPUMS, MOSAIC, NAPP)’’ en ‘’Historical person data (IDS, LINKS-gen, PiCo)’’.

3. Privacy
De tussenkopjes in de contactgegevens.

Dit probleem komt voor op onder andere de volgende pagina’s:

Schemas (EN) https://iisg.amsterdam/nl/node/1348
Vocabulary Page (Value Lists) (EN) https://iisg.amsterdam/en/blog/vocabulary-page-value-lists
Privacy https://iisg.amsterdam/nl/privacy

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U302

Kop niet programmatisch opgemaakt (2/2)

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Twee verschillende bevindingen:

Bevinding 1
Op de zoekpagina is er een lege kop aan het begin van de zoekresultaten. Deze wordt opgepikt door hulptechnologieën en wordt dus doorgegeven aan webbezoekers die deze gebruiken.

Bevinding 2
Op de onderstaande pagina’s zijn de tussenkopjes in de code opgemaakt met het element <strong> in plaats van geprogrammeerde koppen:

Cookieverklaring https://iisg.amsterdam/en/node/1412
Plan uw bezoek https://iisg.amsterdam/nl/collecties/plan-uw-bezoek
Schemas (EN) https://iisg.amsterdam/nl/node/1348
Colofon https://iisg.amsterdam/nl/colofon
Vocabulary Page (Value Lists) (EN) https://iisg.amsterdam/en/blog/vocabulary-page-value-lists

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U302

U303: Er worden geen kop-niveaus overgeslagen Voldoende met advies

Toelichting

H1 zou gevolgd moeten worden door een andere H1 of H2 kop. H2 zou gevolgd moeten worden door H1, H2 of H3 enz. Ga niet direct van H1 naar H4.

Bevindingen per richtlijn

Sla geen kopniveaus over

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Het overslaan van kopniveaus kan verwarrend zijn en moet waar mogelijk worden vermeden, omdat het voor schermlezergebruikers effect kan hebben op de betekenis van onderdelen.

Op de pagina’s Recente boeken en News zijn bijvoorbeeld de titels van de pagina’s opgemaakt met kopniveau 1, terwijl de tussenkoppen die direct daarna volgen opgemaakt zijn met een kopniveau 3.

Dit probleem komt voor op onder andere de volgende pagina’s:

News https://iisg.amsterdam/en/news#main-content
Recente boeken https://iisg.amsterdam/nl/publicaties/recente-boeken

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U303

U304: Er worden geen witregels of lege paragrafen gebruikt om ruimte te maken in de tekst Voldoende met advies

Toelichting

Typografie is belangrijk voor leesbaarheid. Onderdeel van typografie is de witruimte tussen tekstregels en rondom headings. Ruimte tussen tekst moet door formatting gemaakt worden, niet door witregels toe te voegen.

Witregels met meerdere line breaks of met lege paragrafen worden voorgelezen door hulpsoftware als "leeg" wat een vervelende UX tot gevolg heeft.

Bevindingen per richtlijn

Gebruik gemaakt van witregel voor opmaak

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Op twee pagina’s is de code gebruik gemaakt van het element <br> om witruimte te creëren, terwijl css geschikter is.

Twee voorbeelden:

1. Recente boeken
Er wordt bij de informatie van de boeken veel gebruik gemaakt van gecodeerde witruimtes.

2. Schemas
In de tabel wordt veel gebruikgemaakt van gecodeerde witregels voor visuele doeleinden, vermoedelijk om de inhoud van cellen te centreren.

Dit probleem komt voor op onder andere de volgende pagina’s:

Recente boeken https://iisg.amsterdam/nl/publicaties/recente-boeken
Schemas (EN) https://iisg.amsterdam/nl/node/1348

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U304

U305: Lijsten hebben een juiste opmaak in de code Onvoldoende

Toelichting

In HTML zijn er drie verschillende soorten lijsten:

Niet-gesorteerde lijsten, gemaakt met ul en li elementen
Gesorteerde lijsten, gemaakt met ol en li elementen
Omschrijvende lijsten, gemaakt met dl, dt en dd elementen

Bevindingen per richtlijn

Lijst niet (voldoende) programmatisch opgemaakt

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Twee bevindingen:

1. Zoekpagina
Op de zoekpagina zijn in de zoekresultaten elementen gevonden die in de code zijn opgemaakt als een lijst, terwijl ze geen lijst zijn. Dit is verwarrend voor bezoekers die gebruikmaken van hulptechnologie.

Link: https://iisg.amsterdam/nl/search?search=amsterdam.

2. Plan uw bezoek
De lijst onder de kop ‘’Openingstijden studiezaal’’ is in de code niet opgemaakt als een lijst.

WCAG SC:

https://www.w3.org/WAI/tutorials/page-structure/content/#blockquote

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U305

U306: Het blockquote HTML-element wordt gebruikt voor langere citaten, en q voor kortere citaten Voldoende

Toelichting

Informatie over het blockquote element kan je vinden op:

Informatie over het q element kan je vinden op:

https://www.w3.org/TR/WCAG20-TECHS/H49

Denk er aan zelf geen aanhalingstekens te gebruiken bij q- en blockquote-elementen. Dit wordt door de browser of user agent gedaan.

U307: Er wordt correct gebruik gemaakt van WAI-ARIA Niet van toepassing

Toelichting

WAI-ARIA, oftewel ARIA, staat voor *Web Accessibility Initiative - Accessible Rich Internet Applications.* Dit zijn extra attributen die ontbrekende informatie kan melden aan hulptechnologieën.

Hiervoor is het belangrijk aria-attributen op correcte wijze te gebruiken. Als er gebruik gemaakt van onjuiste of overbodige aria-attributen, kan dit verwarring opleveren, vooral bij gebruik van een schermlezer.

U308: Regel- en kolomkoppen worden met th-elementen aangegeven en hebben het juiste scope- of header-attribuut Onvoldoende

Toelichting

Het th-element wordt gebruikt om header-cellen van een tabel aan te geven. Dit kan een regel of kolom zijn, maar ook meerdere regels of kolommen. Zorg er voor dat cellen met data en cellen met headers goed aangegeven zijn. Dat kan bijvoorbeeld met het scope attribuut.

Het scope attribuut kan de volgende waardes hebben:

row = een rij
col = een kolom
rowgroup = alle regels na deze cel binnen een tbody-element
colgroup = alle volgende kolommen in een groep binnen een colgroup-element

In complexere tabellen kan je header-attributen gebruiken.

Bijvoorbeeld:

<th id=”aheading”>A heading</th>

<th id=”asecondheading”>A second heading</th>

<td headers=”aheading asecondheading”>Data cell with two headings</td>

Let op dat header cellen zelf kunnen linken aan andere header cellen.

Bevindingen per richtlijn

Tabelkoppen programmatisch niet goed opgemaakt

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De pagina Cookieverklaring bevat drie tabellen. De kolomkoppen van de tweede en derde tabel zijn in de code niet goed opgemaakt.

Daarbij nog een vrijblijvend advies. In de tabelkoppen wordt gebruikgemaakt van het element <br>, met als gevolg dat ‘’type [pauze] cookie’’ wordt voorgelezen in plaats van ‘’type en cookie’’.

Link: https://iisg.amsterdam/en/node/1412

WCAG SC:

Link: https://iisg.amsterdam/files/2021-07/jaarrekening%202020%20plus%20accountantsverklaring.pdf

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U308

U309: Alle tabellen zijn opgemaakt met de juiste HTML tabel Onvoldoende

Toelichting

Gebruik native HTML elementen (table, thead, tbody, caption, tr, th, td) of respectievelijke WAI-ARIA rollen

Bevindingen per richtlijn

Tabel bevat lege cel(len) in de tabelkop

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

In de tabellen die in het Financieel verslag 2020 (pdf) staan ontbreekt in de eerste kolom meestal een titel. Dit kan verwarrend zijn en problemen opleveren bij het gebruik van hulptechnologie.

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U309

U311: Tabel-onderschriften zijn gemaakt het caption-element Voldoende met advies

Toelichting

Gebruik het <caption> element om een tabel-onderschrift te maken. Als dit niet mogelijk is, kan je een normale heading gebruiken met het juiste h-niveau (H1-H6).

Bevindingen per richtlijn

Tabel zonder (correct gekoppelde) titel

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de pagina Cookieverklaring staan tabellen de titel niet programmatisch aan de tabellen zijn gekoppeld. Bij het gebruik van hulpsoftware is het prettig als tabellen duidelijke omschrijvende en goed gekoppelde titels hebben, zodat de juiste informatie relatief snel gevonden kan worden. Het beste is om hierbij gebruik te maken van een <caption>-element.

Link: https://iisg.amsterdam/en/node/1412

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U311

U316: Foutmeldingen die te maken hebben met specifieke formuliervelden zijn gekoppeld aan het bijbehorende element Niet van toepassing

Toelichting

Dit kan je doen door de foutmelding in het label-element te zetten, of door aria-describedby attributen te gebruiken.

U317: Formuliervelden die bij elkaar horen, zijn gegroepeerd, zijn in dezelfde fieldset en hebben een omschrijvende legenda Voldoende

Toelichting

Gebruik het fieldset-element om gerelateerde functionaliteiten binnen formulieren te linken, zoals radio buttons. Gebruik het legend-element om een korte omschrijving aan de groep te geven. Let er op dat de legenda het eerste child-element van de fieldset moet zijn.

Je kan ook het respectievelijke WAI-ARIA attribuut role="group" gebruiken en aria-labelledby

U318: Alle omschrijvingen en labels zijn in de code gekoppeld aan het bijbehorende formulierveld Onvoldoende

Toelichting

Dit wordt meestal gedaan door het visuele label in het label-element te zetten, en deze te koppelen met form control. Als het nodig is, kan je aria-label gebruiken om instructies in de code toe te voegen aan form control zonder deze visueel te tonen.

Bevindingen per richtlijn

Checkbox of radiobutton zonder programmatisch (correct) gekoppeld groepslabel

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

In het zoekveld wordt gebruikgemaakt van het html-element ‘combobox’, maar het element werkt niet als een combobox.

Link naar de zoekpagina: https://iisg.amsterdam/nl/search?search=amsterdam.

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U318

U324: Waar mogelijk wordt gebruik gemaakt van semantische HTML Voldoende met advies

Toelichting

Het wordt aanbevolen dat HTML wordt gebruikt op een manier waarmee mensen bekend zijn. Dit betekent het gebruik van semantische HTML en de conventies volgt die we vaak op het internet zien. Deze consistentie zorgt ervoor dat mensen ermee kunnen communiceren zoals ze gewend zijn, wat de cognitieve belasting zal verminderen.

Bijvoorbeeld links in tekst die niet zijn opgemaakt zijn als link, hierdoor zijn ze niet aanklikbaar met de muis en ook niet bedienbaar via het toetsenbord. Dit is verwarrend voor gebruikers, met name gebruikers van schermlezers of mensen met een cognitieve beperking, omdat de verwachting is dat je een link direct kunt aanklikken en niet nog los hoeft te selecteren en kopiëren.

Bevindingen per richtlijn

Maak tekstuele links werkend

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Maak de telefoonnummers in de footer en op de pagina Privacy op als links. Gebruikers met bijvoorbeeld een motorische of cognitieve beperking hoeven dan niet het nummer handmatig over te typen op hun telefoon.

Link naar de pagina Privacy: https://iisg.amsterdam/nl/privacy

WCAG SC:

Link: https://iisg.amsterdam/files/2025-02/Jaarverslag%20IISG%202023_video.pdf

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U324

U325: Alle visuele relaties die zichtbaar zijn in de content, zijn ook zichtbaar in de code Onvoldoende

Toelichting

Denk bijvoorbeeld aan een chat widget. Je kan zien dat de linker berichten van de andere persoon zijn, en de rechter berichten van jou. Dit moet ook duidelijk zijn in de code.

Bevindingen per richtlijn

Pdf is niet getagd

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Annual Report 2023 (pdf) is niet gecodeerd waardoor deze ontoegankelijk is voor hulptechnologieën. Daardoor is het niet mogelijk om de documenten te toetsen op koppen, lijsten, tabellen, etcetera.

WCAG SC:

Link: https://iisg.amsterdam/files/2021-07/jaarrekening%202020%20plus%20accountantsverklaring.pdf

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

Pdf met verkeerde tag opmaak

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Het pdf-bestand Financieel Verslag 2020 heeft wel een tag- of elementenstructuur, maar deze is niet goed opgebouwd, waardoor de tags niet voldoende overeenkomen met de semantische structuur. Het is belangrijk de tags altijd goed te controleren, met name als je software gebruikt om de tags automatisch toe te voegen, zodat hulpsoftware het document goed uit kan lezen.

Zie bijvoorbeeld de inhoudsopgave: deze wordt niet in de juiste volgorde ingelezen door hulptechnologieën.

Bovendien zijn de pagina’s 14, 15 en 16 niet getagd. Daardoor is het niet toegankelijk voor mensen die gebruikmaken van hulptechnologie en konden deze pagina’s niet geheel getoetst worden op toegankelijkheid.

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

Semantische en visuele opmaak komen niet overeen

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een verschil tussen wat visueel getoond wordt en hoe dit semantisch in de code verwerkt is. Dit kan verwarring opleveren, vooral bij gebruik van ondersteunende technologieën, zoals een schermlezer.

Twee voorbeelden:

1. Zoekpagina
In het filtermenu op de zoekpagina krijgen gebruikers van hulptechnologie niet mee dat of waar een een filter kan worden verwijderd.

Link: https://iisg.amsterdam/nl/search?search=amsterdam

2. European Social Science History Conference (EN)
Na het klikken op de grote ronde afspeelknop gaat de focus met een schermlezer uit de video, in plaats van dat de focus op de video-afspeelbalk terecht komt. Met enkel een toetsenbord gebeurd dit niet.

Link: https://esshc.iisg.amsterdam/en

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

Onterecht strong-element gebruikt

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de onderstaande lijst aan pagina’s is gebruik gemaakt van het element <strong> voor opmaakdoeleinden. In dit geval moet daar css voor gebruikt worden.

Zie bijvoorbeeld ‘’PhD students are invited to enter their paper for the Prof. Jan Lucassen Award for best paper by a PhD student in the conference programme.’’, op de pagina European Social Science History Conference. Lokaliseer deze en andere met de zoekfunctie in de inspectortool.

Dit probleem komt voor op onder andere de volgende pagina’s:

Footer
Cookieverklaring https://iisg.amsterdam/en/node/1412
News (EN) https://iisg.amsterdam/en/news
Colofon https://iisg.amsterdam/nl/colofon
Vocabulary Page (Value Lists) (EN) https://iisg.amsterdam/en/blog/vocabulary-page-value-lists

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

Enkel de koptekst als linktekst gebruiken en de rest van de kaart klikbaar met CSS

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de pagina’s News en Staff zijn zowel de kop als de overige content programmatisch in de linktekst geplaatst. Hierdoor wordt de link te uitgebreid om te volgen met hulptechnologie. Gebruik enkel de kop als linktekst en maak de rest van het kaartje met behulp van css klikbaar.

Links:

News (EN): https://iisg.amsterdam/en/news#main-content
Staff (EN): https://iisg.amsterdam/en/about/staff#main-content

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

U326: Help-teksten en instructies voor een specifiek formulierveld zijn in de code aan dit formulierveld gekoppeld Voldoende met advies

Toelichting

Dit betreft hulpteksten in instructieteksten, niet het label zelf.

Je kan de aria-labelledby of aria-describedby attributen gebruiken om te refereren aan een hulptekst.

Gebruik aria-labelledby als de instructie het formulier volledig omschrijft.

Gebruik het aria-describedby als de hulptekst een extra omschrijving geeft, of als er al een label is gelinked aan het formulier.

Bevindingen per richtlijn

Kop of label voor content mist

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er zijn koppen niet in de code opgemaakt als een kop. Dit is niet verplicht, maar maakt het voor schermleesgebruikers prettiger om door de pagina te navigeren. Zij hebben namelijk vaak een functie waarmee ze van kop naar kop kunnen navigeren.

De manier waarop de pagina News is opgebouwd is een voorbeeldcasus van een goed opgebouwde pagina.

Drie voorbeelden:

1. Datasets
Het zou fijn zijn als iedere dataset opgebouwd is als een kop.

2. Schemas / Vocabulary Page (Value Lists)
Op deze pagina’s gaat het om koppen in de lopende tekst die niet zijn opgemaakt als kop, bijvoorbeeld: ‘’Census schemas (IPUMS, MOSAIC, NAPP)’’ en ‘’Historical person data (IDS, LINKS-gen, PiCo)’’.

3. Privacy
De tussenkopjes in de contactgegevens.

Dit probleem komt voor op onder andere de volgende pagina’s:

Datasets https://iisg.amsterdam/nl/data/datasets
Schemas (EN) https://iisg.amsterdam/nl/node/1348
Vocabulary Page (Value Lists) (EN) https://iisg.amsterdam/en/blog/vocabulary-page-value-lists
Privacy https://iisg.amsterdam/nl/privacy

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U326

U631: Het menu staat binnen een nav-element Voldoende met advies

Toelichting

Het nav-element wordt gebruikt om gebruikers met een visuele beperking te laten weten dat dit links zijn voor websitenavigatie.

Bevindingen per richtlijn

Navigatie niet (correct) programmatisch opgemaakt

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Het broodkruimel-element bovenaan de content op bijna alle pagina’s ziet er visueel niet altijd duidelijk uit als een broodkruimelnavigatie. Er staat alleen ‘’Home’’, terwijl de bezoeker zich dan niet op de homepagina bevindt. Kijkende webbezoekers zien het broodkruimelmenu mogelijk over het hoofd.

WCAG SC:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U631

1.3.2 Betekenisvolle volgorde

U319: Elementen zijn in een logische volgorde geplaatst in de broncode Voldoende

Toelichting

Dit is belangrijk voor gebruikers van schermlezers, omdat de volgorde in de broncode de leesvolgorde bepaalt. Als regel moet de volgorde van de paginainhoud zinvol zijn, zelfs wanneer CSS is uitgeschakeld.

U617: Componenten die bedoeld zijn als modal dialogs staan gebruikers niet toe om content op de achtergrond te selecteren Onvoldoende

Toelichting

Modal dialogs zijn componenten die bovenop normale content op de pagina getoond worden. Er wordt van de gebruiker verwacht dat er iets gedaan wordt met deze content, voordat de gebruiker verder kan met de originele content. Modals moeten worden aangegeven in HTML met aria-modal="true".

Een belangrijk aspect hierbij is dat gebruikers die met het toetsenbord navigeren en gebruikers met schermlezers de focus in het modale dialoogvenster moeten behouden totdat ze hun mening over de inhoud hebben gevormd en het actief hebben gesloten. Daarom zou je niet per ongeluk de focus op de achtergrond moeten kunnen krijgen.

Bevindingen per richtlijn

Focusindicator verlaat modal, maar modal sluit niet

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de zoekpagina op mobiele weergave kunnen filters toegepast worden. De focusindicator verlaat dit menu echter voordat er een keuze gemaakt is. De focusindicator moet het dialoogvenster blijven doorlopen tot er een keuze gemaakt is, of het dialoogvenster moet automatisch worden gesloten zodra de focus erbuiten komt.

Link: https://iisg.amsterdam/nl/search?search=amsterdam

WCAG SC:

1.3.2

EN 301 549:

9.1.3.2, 10.1.3.2, 11.1.3.2.1, 11.1.3.2.

Aceit:

U617

1.3.3 Zintuiglijke kenmerken

U402: Instructies zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten Voldoende

Toelichting

Vermijd "klik op de knop aan de rechterkant" en soortgelijke uitdrukkingen.

Je kunt richtingen, grootte, vormen en kleuren gebruiken in je instructies, maar er niet volledig op vertrouwen. Bijvoorbeeld "klik op de knop 'ja' aan de rechterkant" zou acceptabel zijn omdat het ook het zichtbare label bevat.

1.3.4 Weergavestand

U506: De website/ app kan worden gebruikt in alle schermoriëntaties Voldoende

1.3.5 Identificeer het doel van de input

U406: Het doel van elk invoerveld is gespecifieerd in de opmaak Voldoende

Toelichting

Wanneer mogelijk, moet je markup gebruiken om het doel van elk invoerveld aan te geven. Dit kan gedeeltelijk worden gedaan door het juiste element/type/markup te kiezen.

In HTML moet je het attribuut autocomplete gebruiken om te verklaren welk type gegevens de gebruiker moet invoeren in invoervelden die gegevens over de gebruiker verzamelen. Dit maakt het gemakkelijker voor browsers en ondersteunende technologie om eerder opgeslagen gegevens automatisch in te vullen. Lees meer over het attribuut en mogelijke waarden hier:

1.4.1 Gebruik van kleur

U403: Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden Voldoende

Toelichting

Voor gebruikers die moeite hebben met het onderscheiden van kleuren, of die cognitieve beperkingen hebben, is het belangrijk dat kleur niet de enige manier is om een status of informatie door te geven.

Kleur mag je niet als het enige visuele middel gebruiken om informatie over te brengen, om een actie aan te geven, tot een reactie op te roepen of om een visueel element te kunnen onderscheiden.

Kleuren en vormen worden meestal decoratief gebruikt, maar soms vervullen ze ook een communicatieve functie of zijn ze essentieel om de inhoud van een webpagina te begrijpen. Dit ijkpunt gaat, naast kleur, ook over het gebruik van vormen of verwijzingen naar locaties op het scherm. Denk hierbij aan foutmeldingen, bevestigingen of aanduidingen van beschikbaarheid.

U404: Links zijn niet alleen herkenbaar door hun kleur Onvoldoende

Toelichting

Je kan onderstrepen of icoontjes, dikgedrukte tekst, of andere visuele indicatoren gebruiken,

Het is niet voldoende als deze indicatoren alleen zichtbaar zijn als je over het element hovered, omdat ze dan niet toegankelijk zijn voor hulpsoftware.

Het moet makkelijk te zien zijn welk element op een pagina interactief is, zonder op de elementen te hoeven focussen.

Bevindingen per richtlijn

Link binnen tekst enkel met kleur te onderscheiden

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

In het Annual Report 2023 (pdf) is een link gevonden binnen tekst, waarbij kleur het enige visuele middel is om het verschil tussen de link en tekst te zien. Zie bijvoorbeeld de blauwe links binnen de zwarte tekst. Deze zijn alleen te herkennen door kleur. Dit is te zien op bijvoorbeeld bladzijde 20.

Link naar het pdf-document: https://iisg.amsterdam/files/2025-02/Jaarverslag IISG 2023_video.pdf

WCAG SC:

1.4.1

EN 301 549:

9.1.4.1, 10.1.4.1, 11.1.4.1

Aceit:

U404

1.4.2 Audiobesturing

U429: Elk geluid dat automatisch start en meer dan 3 seconden speelt, kan worden gepauzeerd of uitgeschakeld Voldoende

Toelichting

Dit criterium is van toepassing op geluiden die minstens 3 seconden duren.

1.4.3 Contrast (minimaal)

U409: Alle tekst heeft voldoende contrast ten opzichte van de achtergrond Onvoldoende

Toelichting

Kleine tekst (lager dan 14px bold of 18px regular) minimaal een contrastverhouding van 4.5:1

Grote tekst (14px bold of hoger en 18px regular of hoger) minimaal een contrastverhouding van 3.0:1.

Als de achtergrond varieert, meet dan waar de contrast het laagste is.

https://developer.paciellogroup.com/resources/contrastanalyser/

Bevindingen per richtlijn

Tekst met onvoldoende contrast (web)

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Op alle onderzochte pagina’s zijn er teksten met een te laag kleurcontrast ten opzichte van de achtergrondkleur.

De vereiste contrastverhouding op een rijtje:

Normale tekst: minimaal 4,1:1.
Vette tekst (vanaf 14px): minimaal 3:1.
Grote tekst (vanaf 24px): minimaal 3:1.

Zes voorbeelden:

1. Header
Alle witte tekst, inclusief de zeer grote en dikgedrukte, heeft een te laag contrast ten opzicht van de lichtblauwe achtergrond. Let op: dit geldt ook voor de hoofdnavigatie.

Wat ook onderdeel is van deze bevinding is het hoofdnavigatiemenu. Deze kan uitgeklapt worden. Dan verandert de kleur naar een zwart-op-witte-verhouding. Dit is oké, maar let op: zodra de tekst een focus krijgt, dan wordt het weer de lichtblauw-op-wit en dat is onvoldoende.

Huidig: 2,8:1
Vereist: 4,5:1 voor reguliere tekst. 3,1 voor vette of grote tekst.

2. Home / Datasets / Staff
De lichtblauwe knoppen met witte tekst.
Huidig: 2,8:1
Vereist: 3:1

3. News
De lichtblauwe datums onder nieuwskoppen.
Huidig: 2,8:1
Vereist: 4,5:1

4. European Social Science History Conference
De ‘’CALL FOR PAPERS’’. Een deel van de witte of zwarte tekst tegen een lichtblauwe achtergrond.

Het is niet mogelijk om te specificeren welk contrast specifiek onvoldoende is, omdat de tekst onderdeel van een afbeelding is.

5. Footer
In de footer zijn de volgende lichtgrijze logo’s tegen de witte achtergrond onvoldoende: clio infra, IRSH, TSEG en International Institute of Social History European Social Science Conference 2020.

Het logo van vijfeeuwenmigratie is technisch gezien voldoende, maar we adviseren sterk om de leesbaarheid te vergroten.

6. Recente boeken
De tekst met ‘’Blog Jan Lucassen’’.
Huidig: 2,8:1
Vereist: 4,5:1

Links naar uitgelichte webpagina’s:

Datasets: https://iisg.amsterdam/nl/data/datasets
European Social Science History Conference: https://esshc.iisg.amsterdam/en
News: https://iisg.amsterdam/en/news
Recente boeken: https://iisg.amsterdam/nl/publicaties/recente-boeken
Staff: https://esshc.iisg.amsterdam/en

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

Tekst met onvoldoende contrast (pdf)

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

In het Annual Report 2023 (pdf) is tekst gevonden met een kleur die een te lage contrastverhouding heeft ten opzichte van de achtergrondkleur. Zie bijvoorbeeld de lichtblauwe tekst op grijze achtergrond op het voorblad.

Huidig: 2,2:1
Vereist: 3:1

Link: https://iisg.amsterdam/files/2025-02/Jaarverslag IISG 2023_video.pdf

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

Tekstkleur met onvoldoende contrast met achtergrond afbeelding

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

In het Annual Report 2023 (pdf) zijn een aantal teksten waarvan de contrastration onvoldoende is, bijvoorbeeld:

De paginanummers op pagina’s 2 en 18 (vereist 4,5:1).
De hoofdstuktitels op pagina’s 3, 4 en 13 (vereist: 3:1).

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

1.4.4 Formaat wijzigen

U503: Gebruikers kunnen de tekstinhoud minstens 200 procent vergroten Voldoende

Toelichting

Voor veel gebruikers is het belangrijk om de tekstgrootte te kunnen vergroten. Dit is niet alleen belangrijk voor gebruikers met een visuele beperking, maar ook voor gebruikers die de website/ app op een klein apparaat zoals een smartphone gebruiken of in fel zonlicht.

Om aan de criteria in WCAG en EN 301 549 te voldoen, is het voldoende om een mechanisme in de website/ app aan te bieden waarmee gebruikers de tekst met 200% kunnen vergroten, maar voor veel gebruikers is het belangrijk om de website/ app op andere manieren te kunnen vergroten. Blokkeer de mogelijkheid van gebruikers niet om de website/ app in een webbrowser te vergroten. Probeer ervoor te zorgen dat de website/ app reageert op de instellingen van gebruikers binnen de webbrowser en het besturingssysteem. Om aan dit criterium in WCAG en EN 301 549 te voldoen, hoef je dit niet te doen, maar er is een ander criterium in EN 301 549 die vereist dat de website/ app luistert naar gebruikersinstellingen binnen het besturingssysteem. Lees hier meer over op U510/U511.

Let op dat je niet per se zo'n functie in je website/ app nodig hebt. Het is veel beter voor de gebruiker om gebruikersinstellingen binnen de browser en het besturingssysteem te respecteren. Dat zou de belangrijkste aanpak moeten zijn.

1.4.5 Afbeeldingen van tekst

U411: Gebruik tekst, geen afbeeldingen van tekst Onvoldoende

Toelichting

In complexe afbeeldingen zoals diagrammen is het acceptabel dat sommige tekst als onderdeel van de afbeelding wordt weergegeven.

Logotypen zijn ook een acceptabele uitzondering.

Bevindingen per richtlijn

Afbeelding bevat essentiële tekst

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de pagina Schemas (EN) is een kleine infographic waarin tekst is ingesloten in de afbeelding. Deze tekst is niet toegankelijk voor gebruikers van schermlezers of mensen die de opmaak van tekst willen wijzigen om het toegankelijker te maken voor hen.

Link: Schemas (EN) https://iisg.amsterdam/nl/node/1348

WCAG SC:

1.4.5

EN 301 549:

9.1.4.5, 10.1.4.5, 11.1.4.5.1, 11.1.4.5.

Aceit:

U411

1.4.10 Reflow

U501: De lay-out is responsive en past zich aan aan de grootte van het scherm Onvoldoende

Toelichting

Alle content moet responsief zijn, maar het wettelijke criterium staat enkele uitzonderingen toe. Situaties waarin het moeilijk of onmogelijk is om de functionaliteit te behouden wanneer de viewport- of schermgrootte te klein wordt, zijn acceptabele uitzonderingen. Uitzonderingen zijn onder meer complexe tabellen, kaarten, spelletjes en videospelers. Onze aanbeveling is om de inhoud indien mogelijk volledig responsief te maken.

Bevindingen per richtlijn

Verlies van functionaliteit bij reflow

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de pagina’s Mission and vision (EN) en in de header zijn componenten gevonden met verlies van functionaliteit tijdens reflow.

1. Mission and vision (EN)
De YouTube-speler wordt afgesneden.
Link: https://iisg.amsterdam/en/about/mission

2. Header
Veel tekst in het menu wordt afgesneden met “…” en is daardoor niet voldoende leesbaar.

WCAG SC:

1.4.10

EN 301 549:

9.1.4.10, 10.1.4.10, 11.1.4.10

Aceit:

U501

Reflow tweedimensioneel scrollen

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de pagina Cookieverklaring kan horizontaal gescrold worden. Voor kleine schermen is het belangrijk dat de inhoud in één beweging gelezen kan worden. De oorzaak ligt waarschijnlijk aan de drie tabellen. Het gedeelte waarop de tabel zich bevindt mag wel horizontaal bediend worden, maar in dit geval zorgt het ervoor dat de hele pagina bewegelijk is.

Link https://iisg.amsterdam/en/node/1412

WCAG SC:

1.4.10

EN 301 549:

9.1.4.10, 10.1.4.10, 11.1.4.10

Aceit:

U501

1.4.11 Contrast van niet-tekstuele content

U408: Grafische inhoud die wordt gebruikt voor interactieve besturingselementen, het tonen van status of het verstrekken van informatie, heeft voldoende contrast ten opzichte van de achtergrond. Onvoldoende

Toelichting

Onderdelen van de interface en grafische objecten moeten een contrastverhouding van ten minste 3:1 hebben ten opzichte van de aangrenzende kleuren.

https://developer.paciellogroup.com/resources/contrastanalyser/

Bevindingen per richtlijn

Focusindicator met onvoldoende contrast

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Op alle onderzochte webpagina’s is het contrast van de focusindicator onvoldoende.

Wanneer het element focus krijgt, is het contrast tussen de focusindicator en de omliggende kleuren niet voldoende. Dit moet 3,0:1 zijn. Hierdoor kan dit makkelijk gemist worden en is het niet (goed) zichtbaar voor bijvoorbeeld mensen met een vorm van kleurenblindheid, of personen die slechtziend zijn. Het is belangrijk een goed zichtbare focusindicator te gebruiken.

WCAG SC:

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

Grafisch object met onvoldoende contrast

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Op de pagina Schemas is de contrastratio van de paarse en gele pijlen in de afbeelding onvoldoende ten opzichte van de witte achtergrondkleur.

Paarse pijlen:
Huidig: 2,5:1
Vereist: 3,0:1

Gele pijlen:
Huidig: 1,6:1
Vereist: 3,0:1

Link: https://iisg.amsterdam/nl/node/1348

WCAG SC:

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

Ontwerp een aangepaste focusindicator

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Zorg op alle webpagina’s voor een beter zichtbare focusindicator. De huidige focusindicator heeft niet overal genoeg contrast met de webonderdelen die om de indicator heen liggen. Ook is de omlijning van de indicator op sommige plekken erg dun.

Zoek je meer informatie over het maken van een verbeterde versie? We adviseren om de handleiding van Sara Soueidan te volgen. Zie: https://www.sarasoueidan.com/blog/focus-indicators/

WCAG SC:

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

Knop met onvoldoende contrast

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

De skiplink in de header heeft bijna dezelfde achtergrond- en randkleur als het hoofdnavigatiemenu. Daardoor is de knop amper zichtbaar.

WCAG SC: