Zes basisprincipes van digitale toegankelijkheid

Gebruik deze zes principes bij het maken of aanpassen van cursuspagina’s, documenten, presentaties en media. Ze geven aan wat je verbetert, ongeacht de applicatie waarin je werkt. Wil je eerst de achtergrond begrijpen? Lees de Introductie over het belang van digitale toegankelijkheid en WCAG principes

In dit artikel staan praktische aanbevelingen naast verwijzingen naar WCAG-eisen. Een aanbevolen lettertype of rustige opmaak is niet op zichzelf een WCAG-eis. De genoemde succescriteria helpen om de inhoudelijke eisen terug te vinden.

1 Gebruik een duidelijke structuur en opmaak

• Geef onderdelen een beschrijvende kop en gebruik de ingebouwde kopstijlen. Alleen grotere of vetgedrukte tekst geeft niet dezelfde herkenbare structuur.
• Kies kopniveaus die bij de inhoud passen: hoofdonderdelen, subonderdelen en zo nodig verdere onderverdelingen. Houd de hiërarchie logisch.
• Maak lijsten met de functies voor opsommingstekens of nummering. Gebruik nummers wanneer de volgorde belangrijk is.
• Zorg dat tekst, afbeeldingen en toelichtingen in een betekenisvolle volgorde worden aangeboden. Controleer dat vooral bij kolommen en losse tekstvakken.
• Schrijf afkortingen de eerste keer voluit en plaats instructies dicht bij de handeling waarop ze betrekking hebben.

Praktisch leesbaarheidsadvies: gebruik korte alinea’s, links uitgelijnde lopende tekst, voldoende witruimte en een beperkt aantal vertrouwde lettertypen. Vermijd lange passages in hoofdletters of cursief. Laat pagina’s bij vergroting zoveel mogelijk meeschalen.

Voorbeeld: gebruik ‘Inleveren’ als kop boven de deadline en de inleverinstructie. Maak de deadline niet uitsluitend herkenbaar door een grotere rode tekst.

Dit raakt onder meer WCAG 1.3.1 (informatie en relaties) en 1.3.2 (betekenisvolle volgorde).

2 Geef afbeeldingen een passend tekstalternatief

• Beschrijf bij een informatieve afbeelding de betekenis of functie in de context van jouw les.
• Markeer een afbeelding als decoratief wanneer deze geen informatie of functie heeft.
• Geef bij een complexe grafiek of een schema ook de benodigde gegevens of een uitgebreide uitleg in tekst. Een korte alt-tekst hoeft niet alle details te bevatten.
• Gebruik gewone tekst voor instructies. Staat noodzakelijke tekst alleen in een afbeelding, maak die informatie dan ook als tekst beschikbaar.

Voorbeeld: ‘Het slagingspercentage stijgt van 62% naar 78%’ geeft meer informatie dan ‘Grafiek met blauwe balken’. Vermeld daarnaast relevante jaren en overige gegevens wanneer studenten die nodig hebben.

Controleer zelf: kan de student de afbeelding missen en toch de opdracht begrijpen? Een automatisch gegenereerde beschrijving moet je altijd op betekenis controleren.

Dit sluit aan bij WCAG 1.1.1 (niet-tekstuele content).

3 Gebruik voldoende contrast en maak kleur niet onmisbaar

• Gebruik voor normale tekst minimaal een contrast van 4,5:1 tussen tekst en achtergrond.
• Voor grote tekst geldt minimaal 3:1. Met groot bedoelt WCAG ten minste 18 pt of 14 pt vet. Het criterium bevat specifieke uitzonderingen, bijvoorbeeld voor logo’s.
• Meet het contrast met een contrastcontrole; beoordeel het niet alleen op het oog.
• Geef betekenis ook met woorden, vormen of symbolen. Kleur alleen is onvoldoende.
• Maak links herkenbaar, bijvoorbeeld met onderstreping naast kleur.

Voorbeeld: voeg ‘Voltooid’ toe bij een groen statusvak. Gebruik in een grafiek labels of verschillende lijnpatronen naast verschillende kleuren.

Een rustige kleurenkeuze hoeft geen laag contrast te betekenen. Voldoende licht-donkercontrast en weinig visuele onrust kunnen goed samengaan.

Zie WCAG 1.4.3 over tekstcontrast en 1.4.1 over kleurgebruik. Voor betekenisvolle grafische onderdelen en bedieningselementen gelden afzonderlijke contrastregels (1.4.11).

4 Maak tabellen herkenbaar en eenvoudig

• Gebruik tabellen voor gegevens die per rij en kolom bij elkaar horen; gebruik ze bij voorkeur niet om een pagina op te maken.
• Stel de rij- en kolomkoppen in met de tabelfuncties. Alleen vetdrukken of een achtergrondkleur geven legt de relaties niet vast.
• Houd de tabelstructuur eenvoudig en vermijd onnodig samengevoegde cellen.
• Geef de tabel een herkenbare titel of toelichting wanneer dat helpt om de gegevens te begrijpen.
• Controleer na export of omzetting of de tabelstructuur behouden is.

Voorbeeld: bij de kolommen ‘Onderdeel’, ‘Deadline’ en ‘Inleverlocatie’ moet een student kunnen bepalen bij welk onderdeel en welke kolom een datum hoort.

Dit sluit aan bij WCAG 1.3.1 (informatie en relaties).

5 Maak links en aanwijzingen duidelijk

• Benoem de bestemming of het doel van een link, bijvoorbeeld ‘Bekijk de studiewijzer’.
• Vermijd algemene linkteksten zoals ‘Klik hier’ wanneer de bestemming daardoor onduidelijk blijft.
• Vermeld het bestandstype als dat nuttig is, bijvoorbeeld ‘Download de studiewijzer (PDF)’.
• Beschrijf handelingen met de naam of functie van een knop. Verwijs niet uitsluitend naar kleur, vorm of plaats.

Voorbeeld: ‘Selecteer Opslaan’ is duidelijker dan ‘Klik op het groene vinkje rechts’. Bij een pictogram zonder zichtbaar label beschrijf je de functie en geef je zo nodig aanvullende uitleg.

WCAG 2.4.4 vereist dat het linkdoel uit de tekst of de programmatisch bepaalde context is af te leiden. Zelfstandig begrijpelijke linkteksten zijn een praktische aanbeveling. Aanwijzingen die uitsluitend van zintuiglijke kenmerken afhangen, raken WCAG 1.3.3.

W3C over het doel van links.

6 Maak audio en video toegankelijk

• Voeg aan vooraf opgenomen video met relevant geluid gecontroleerde ondertiteling toe. Neem ook belangrijke geluiden en noodzakelijke sprekeridentificatie op.
• Geef bij vooraf opgenomen audio zonder beeld een gelijkwaardig tekstalternatief, zoals een transcript.
• Zorg dat essentiële visuele informatie in video ook hoorbaar beschikbaar is. Een extra beschrijving is niet nodig als de bestaande audio die informatie al overbrengt.
• Laat gebruikers media bij voorkeur zelf starten en bied bruikbare bediening aan.
• Vermijd flitsende content.

Voorbeeld: bij een demonstratie is ‘Klik hier’ zonder verdere uitleg onvoldoende wanneer de handeling alleen zichtbaar is. Benoem de knop en de handeling ook in de gesproken uitleg.

Ondertiteling valt onder WCAG 1.2.2 (A); audiodescriptie bij vooraf opgenomen video met geluid valt onder 1.2.5 (AA). Een transcript vervangt bij video niet automatisch deze voorzieningen. Het gaat bij audiodescriptie om ontbrekende visuele informatie, niet alleen om de complexiteit van de video.

WCAG 2.3.1 verbiedt meer dan drie flitsen per seconde, tenzij de flitsen onder de vastgelegde drempels blijven. Materiaal zonder flitsen is de eenvoudigste praktische keuze.

W3C over audiodescriptie en flitsende content.

Van richtlijn naar controle

Pas de principes toe in het bronbestand of de editor waarin je werkt. Controleer daarna de versie die studenten daadwerkelijk krijgen. Gebruik bij Brightspace-pagina’s de handleiding voor de toegankelijkheidscontrole in Brightspace. Controleer Word-, PowerPoint- en PDF-bestanden afzonderlijk in de betreffende applicatie.

Een automatische controle is een hulpmiddel. De betekenis van een beschrijving, de begrijpelijkheid van instructies en de daadwerkelijke bediening vragen ook om eigen beoordeling. De zes principes dekken niet alle WCAG-eisen; gebruik voor een volledige toets de WCAG 2.2-referentie.