Gedaan met laden. U bevindt zich op: Aan de slag met toegankelijke webinhoud Digitale toegankelijkheid

Aan de slag met toegankelijke webinhoud

Ga aan de slag met tips om uw digitale inhoud toegankelijker te maken.

Dit overzicht is geen vervanging van de WCAG 2.1 richtlijnen. Die bevatten uitgebreid alle voorwaarden, richtlijnen en succescriteria.

In dit overzicht vindt u tips om aan de slag te gaan met de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) voor niveau A en niveau AA, het niveau waar overheidsorganisaties aan moeten voldoen. De voorwaarden van niveau AAA zijn in dit overzicht niet opgenomen.

Afhankelijk van de gemaakte afspraken en het gebruikte systeem, kunnen toegankelijkheidsverbeteringen intern aangepakt worden of moet dit via de ontwikkelaar of bouwer van de website of applicatie.

1. Waarneembaar

1.1 Tekstalternatieven (alt-tekst)

Geef alle inhoud, die niet uit tekst bestaat, ook weer in de vorm van tekst.

1.1.1 Niet-tekstuele content (niveau A)

  • Geef informatieve afbeeldingen en afbeeldingen met een bestemming of functie een alt-tekst.
    • Een informatieve afbeelding is een afbeelding informatie bevat die gebruikers moeten weten. Voeg een alt-tekst in die beschrijft wat gebruikers moeten weten.
    • Een afbeelding met een bestemming of functie is een afbeelding die gebruikers kunnen aanklikken. Beschrijf de functie in de alt-tekst en niet de afbeelding.
  • Stel bij decoratieve afbeeldingen de alt-tekst zo in dat een hulpmiddel, zoals een schermlezer, de afbeelding overslaat. Een decoratieve afbeelding is een afbeelding die alleen bedoeld is om de pagina er mooier te doen uitzien, zonder extra info of een andere functie.

1.2 Op tijd gebaseerde media (beeld, geluid en video)

Op tijd gebaseerde media is media met een bepaalde tijdsduur, zoals beelden, geluiden en video. Zorg ervoor dat gebruikers die geen beelden zien of geluiden horen op een andere manier de inhoud van beelden, geluiden en video’s krijgen.

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (niveau A)

  • Opgenomen geluid zonder beeld, bijvoorbeeld een podcast.
  • Opgenomen video zonder geluid, bijvoorbeeld een video zonder geluid.

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (niveau A)

Vb. interview

  • Geef video’s die op voorhand zijn opgenomen een ondertiteling.
  • Zorg dat de ondertitels gelijktijdig met het geluid en de video lopen.
  • Zorg dat de ondertitels alle gesproken inhoud bevat.
  • Geef alle extra informatie die belangrijk is, bijvoorbeeld de naam van een spreker of belangrijke geluidseffecten.

1.2.3 Audiobeschrijving of media-alternatief (vooraf opgenomen) (niveau A)

Vb. instructievideo

Maak een audiobeschrijving of een transcript dat de visuele informatie van de video beschrijft.

1.2.4 Ondertitels voor doven en slechthorenden (live) (niveau AA)

Vb. videoconferentie

  • Geef live video’s een ondertiteling.
  • Zorg dat de ondertitels gelijktijdig met het geluid en de video lopen.

1.2.5 Audiodescriptie (vooraf opgenomen) (niveau AA)

Maak een audiobeschrijving dat de visuele informatie van de video beschrijft.

1.3 Aanpasbaar

Maak inhoud die gebruikers op verschillende manieren kunnen weergeven zonder dat ze informatie of het overzicht verliezen.

1.3.1 Info en onderlinge verhoudingen (niveau A)

vb. tabellen, lijsten, koppen, paragrafen, opsommingen, formuliervelden

Geef inhoud niet alleen de juiste opmaak maar ook de juiste code. Zo herkennen hulpmiddelen ze ook en geven ze de inhoud juist weer.

  • Zorg voor een goede en makkelijk te begrijpen opbouw, zoals kopniveaus die logisch op elkaar volgen, bijvoorbeeld een hoofdtitel met kopniveau 1, de titel daaronder met kopniveau 2 enzovoort.
  • Geef pagina’s een duidelijke titel.

1.3.2 Betekenisvolle volgorde (niveau A)

Voorzie een zinvolle en betekenisvolle leesvolgorde.

  • Geef de onderliggende code dezelfde volgorde als de volgorde van de visuele inhoud.
  • Denk vooraf na hoe u uw inhoud logisch opbouwt.

1.3.3 Zintuiglijke eigenschappen (niveau A)

  • Geef informatie en uitleg ook altijd weer in tekst en niet alleen via dingen die u alleen ziet of hoort, zoals kleuren, beelden of geluiden.
  • Zet informatie uit grafieken om in tekst.

1.3.4 Weergavestand (niveau AA)

Zorg dat uw inhoud is afgestemd op schermen met verschillende verhoudingen.

  • Zorg ervoor dat uw inhoud zich vanzelf aanpast aan de verhouding van het beeldscherm van de gebruikers.
  • Maak uw inhoud makkelijk om te begrijpen en te gebruiken, zowel in een liggende als staande weergave.

1.3.5 Identificeer het doel van de input (niveau AA)

Maak het doel van invoervelden van formulieren duidelijk.

  • Voorzie dat informatie van de gebruiker automatisch ingevuld kan worden (autocomplete).
  • Geef velden in een formulier de juiste invoertypes, bijvoorbeeld geboortedatum: dd-mm-jjjj.
  • Geef ieder veld een duidelijke benaming, bijvoorbeeld ‘voornaam’, ‘achternaam’, ‘gemeente’. Zet de benaming niet in de invoervelden zelf, want dan verdwijnt die zodra de gebruiker begint te typen.

1.4 Onderscheidbaar

Zorg ervoor dat gebruikers belangrijke informatie makkelijk kunnen onderscheiden. Maak het voor bezoekers gemakkelijker om inhoud te horen en te zien en maak het onderscheid tussen voorgrond en achtergrond duidelijk.

1.4.1 Gebruik van kleur (niveau A)

Gebruik niet enkel kleur om verschillende inhoud van elkaar te onderscheiden.

  • Geef tekst die door kleur een speciale betekenis heeft, ook een andere indicator zoals een zichtbare rand en label, onderstreping of een ander visueel effect.
    • Geef links in een tekst nog een andere opmaak dan alleen de vaste blauwe kleur, bijvoorbeeld de herkenbare onderlijning.
    • Voorzie naast kleur in grafieken ook een andere indicator om betekenis te duiden, zoals arcering.
  • Test of de informatie waarneembaar en begrijpelijk is in grijstinten.

1.4.2 Geluidsbediening (niveau A)

  • Test dat geluid of beeldinhoud dat automatisch wordt afgespeeld niet langer duurt dan drie seconden.
  • Als geluid of beeldinhoud dat automatisch wordt afgespeeld langer duurt dan drie seconden: zorg ervoor dat uw bezoekers geluid op pauze kunnen zetten of stoppen.

1.4.3 Contrast (minimum) (niveau AA)

Gebruik genoeg contrast tussen de kleur van de voorgrond en achtergrond van uw tekst en afbeeldingen.

  • Standaardtekst en afbeeldingen van tekst: contrastverhouding van minstens 4,5:1.
  • Grote tekst en afbeeldingen van grote tekst (18 punten of 14 punten in het vet): contrastverhouding van minstens 3:1.

1.4.4 Herschalen van tekst (niveau AA)

Vergroot de tekst van uw pagina tot 200% en ga na of u de inhoud nog altijd kunt lezen.

  • Klopt de regelafstand bijvoorbeeld nog altijd?
  • Kunt u alles nog gebruiken?

1.4.5 Afbeeldingen van tekst (niveau AA)

  • Gebruik tekst in plaats van afbeeldingen van tekst.
  • Als u geen tekst kunt gebruiken in plaats van een afbeelding van tekst, zet dan de tekst die in de afbeelding staat ook boven of onder de afbeelding.

1.4.10 Reflow (niveau AA)

Zoom in en test op verschillende apparaten of uw inhoud goed in beeld blijft. Als u een liggende schuifbalk ziet, is dat niet het geval.

1.4.11 Contrast van niet-tekstuele content (niveau AA)

Gebruik genoeg contrast tussen de kleur van de voorgrond en achtergrond van niet-tekstuele inhoud, zoals afbeeldingen, knoppen, iconen, grafieken of invoervelden. Het contrast tussen de kleur van de voorgrond en achtergrond moet ten minste 3:1 zijn.

1.4.12 Tekstafstand (niveau AA)

Ga op verschillende apparaten na of er geen inhoud wegvalt en of alles nog werkt wanneer een gebruiker:

  • de hoogte van een regel 1,5 keer groter maakt dan de grootte van de letters.
  • de afstand tussen alinea’s 2 keer groter maakt dan de grootte van de letters.
  • de afstand tussen letters 0,12 keer groter maakt dan de grootte van de letters.
  • de afstand tussen woorden 0,16 keer groter maakt dan de grootte van de letters.

1.4.13 Content bij hover of focus (niveau AA)

Zorg ervoor dat de gebruiker uw extra inhoud makkelijk kan gebruiken, aanzetten of uitschakelen. Voorbeelden van extra inhoud zijn een pop-up en knopinfo.

  • Plaats extra inhoud zo dat deze geen andere belangrijke informatie overlapt waardoor die informatie niet meer waarneembaar is. Anders zien gebruikers de inhoud eronder niet meer en moeten ze eerst de boodschap sluiten.
  • Zorg voor een manier om de extra inhoud eenvoudig te verwijderen, zoals door op Escape te drukken of een sluitknop te selecteren.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

Alles wat gebruikers op de website kunnen doen, moet ook kunnen als ze alleen een toetsenbord gebruiken.

2.1.1 Toetsenbord (niveau A)

  • Ga na of u met het toetsenbord naar alle inhoud en alle actieve onderdelen kunt gaan. Bekijk zeker of u dingen zoals links, formuliervelden, knoppen, media, pop-ups, menu’s of een winkelwagentje kunt bedienen. Bij een pop-up bijvoorbeeld zien gebruikers vaak de inhoud eronder niet meer en moeten ze eerst de boodschap sluiten.

  • Ga na of u met het toetsenbord alles wat moet werken, kunt gebruiken, bijvoorbeeld een keuze maken of iets zichtbaar wijzigen.

  • Ga na of u met het toetsenbord een vervolgkeuzelijst kunt kiezen en de pijltjestoetsen kunt gebruiken om door de keuzes te bladeren, zonder dat er meteen iets geactiveerd wordt.

Test het zelf
  • Tab-toets: naar volgend interactief element
  • Shift + Tab-toets: naar vorig interactief element
  • Enter-toets: een link of knop activeren
  • Spatie-toets: een optie selecteren
  • Pijltjes omhoog en omlaag: keuze maken in een lijst

2.1.2 Geen toetsenbordval (niveau A)

Ga na of u met het toetsenbord niet vast komt te zitten en dus niet meer verder of terug kunt.

Een voorbeeld: gebruikers moeten een formulier via het toetsenbord kunnen bereiken, maar ook weer kunnen verlaten. Anders zitten ze vast in een ‘toetsenbordval’.

Test het zelf
  • Tab-toets: naar volgend interactief element
  • Shift + Tab-toets: naar vorig interactief element
  • Enter-toets: een link of knop activeren
  • Spatie-toets: een optie selecteren
  • Pijltjes omhoog en omlaag: keuze maken in een lijst

2.1.4 Enkel teken sneltoetsen (niveau A)

Als uw website sneltoetsen heeft:

  • Ga na of sneltoetsen uit te schakelen zijn.
  • Ga na of gebruikers sneltoetsen kunnen veranderen.

2.2 Genoeg tijd

Geef gebruikers genoeg tijd om uw inhoud te lezen, begrijpen en gebruiken.

2.2.1 Timing aanpasbaar (niveau A)

  • Gebruik zoveel mogelijk inhoud die altijd beschikbaar is en dus niet tijdelijk.

  • Toch tijdelijke inhoud? Geef gebruikers de mogelijkheid om de tijd stop te zetten, aan te passen of langer te maken.

2.2.2 Pauzeren, stoppen, verbergen (niveau A)

Vb. animaties, video’s, knipperende tekst, fotocarrousel

  • Gebruik inhoud die niet of minder dan vijf seconden automatisch beweegt, verschuift of knippert.
  • Toch bewegende inhoud, zoals video’s of animaties? Geef gebruikers de mogelijkheid om bewegende inhoud op pauze te zetten, te stoppen of te verbergen.

2.3 Toevallen en fysieke reacties

Gebruik geen inhoud die aanvallen van epilepsie of andere lichamelijke reacties kan uitlokken. Zorg voor een veilig ontwerp.

2.3.1 Drie flitsen of beneden drempelwaarde (niveau A)

Gebruik geen inhoud die meer dan drie keer per seconde flitst of knippert.

2.4 Navigeerbaar

Help gebruikers de weg en inhoud vinden door een goede, duidelijke opbouw.

2.4.1 Blokken omzeilen (niveau A)

  • Voorzie een snelle link naar de hoofdinhoud van uw pagina, bijvoorbeeld ‘naar inhoud’.
  • Plaats deze link naar de hoofdinhoud in het begin van de webpagina.

2.4.2 Paginatitel (niveau A)

Geef elke webpagina een duidelijke titel

  • die uniek is binnen het volledige aanbod.
  • die het onderwerp of doel omschrijft.

2.4.3 Focus volgorde (niveau A)

  • Ga na of u op een logische manier alles van begin tot eind met het toetsenbord kunt bereiken en gebruiken, ook zoekvelden en formulieren.
  • Ga na of de volgorde in de code hetzelfde is als de volgorde die u ziet.

2.4.4 Linkdoel (in context) (niveau A)

  • Geef links naar dezelfde bestemming dezelfde beschrijving. Geef links die naar verschillende bestemmingen gaan, ook verschillende beschrijvingen.
  • Schrijf een beschrijvende linktekst, bijvoorbeeld ‘de openingsuren van het gemeentehuis’ in plaats van ‘klik hier’.
  • Als de link achter een afbeelding zit, omschrijf dan het doel van de link in de alt-tekst.

2.4.5 Meerdere manieren (niveau AA)

Bied meerdere manieren aan om webpagina’s te bereiken.

  • Zorg voor een duidelijk menu, dat altijd hetzelfde blijft. Zo vinden bezoekers makkelijk de weg.

  • Zorg ook voor een zoekbalk.

2.4.6 Koppen en labels (niveau AA)

  • Gebruik koppen en onderliggende koppen met een goede beschrijving: beschrijf het doel of onderwerp van de inhoud.
  • Geef alle onderdelen een label: beschrijf het doel van de velden.

2.4.7 Focus zichtbaar (niveau AA)

Zorg voor een zichtbare rand of omtrek rond het onderdeel dat de toetsenbordfocus heeft, bijvoorbeeld een link, knop, afbeelding of invulveld.

2.5 Input modaliteiten

Gebruikers moeten websites en apps kunnen gebruiken met verschillende apparaten waarmee je dingen kan aanwijzen en gegevens kan invoeren. Dus niet alleen met een toetsenbord.

Twee voorbeelden van een apparaat waarmee gebruikers een computer, tablet of smartphone gebruiken en gegevens invoeren: een touchscreen of aanraakscherm en een aanwijzer met een laser die je met je hoofd bedient.

2.5.1 Aanwijzergebaren (niveau A)

Vb. vergroten of verkleinen door met een knijpbeweging met je vingers, van links naar rechts met je vinger te vegen

  • Laat gebruikers alles doen met eenvoudige gebaren.
  • Toch ingewikkelde gebaren nodig? Zorg dan ook voor een andere manier om hetzelfde te doen, bijvoorbeeld de pijlen links en rechts op het toetsenbord gebruiken in plaats van met de vingers over het scherm vegen en de toetsen + en – gebruiken om te vergroten en verkleinen in plaats van een knijpbeweging te maken met de vingers op het scherm.

2.5.2 Aanwijzerannulering (niveau A)

Zorg voor een oplossing om een actie of invoer ongedaan te maken, te stoppen of te annuleren, bijvoorbeeld de Esc-toets gebruiken of een ongedaan maken-knop toevoegen.

2.5.3 Label in naam (niveau A)

Zorg ervoor dat de naam van het label in de code dezelfde naam heeft als de zichtbare naam van het label.

2.5.4 Bewegingsactivering (niveau A)

  • Zorg voor een andere manier om dingen te doen in plaats van beweging van het apparaat of het maken van gebaren, bijvoorbeeld iets aanklikken met de muis of het scherm aanraken.
  • Geef gebruikers de mogelijkheid om acties door bewegingen uit te zetten. Zo gebeurt er niets als ze bewegingen maken zonder dat dat de bedoeling is.

3. Begrijpelijk

3.1 Leesbaar

Zorg ervoor dat iedereen uw inhoud kan lezen en begrijpen. Of het nu gaat om inhoud die gebruikers zien, horen of voelen.

3.1.1 Taal van de pagina (niveau A)

Stel in de code de hoofdtaal in voor elke webpagina.

3.1.2 Taal van onderdelen (niveau A)

Voeg in de code een taalkenmerk toe aan inhoud die niet in de hoofdtaal is.

3.2 Voorspelbaar

Geef inhoud in een voorspelbare volgorde weer en gebruik dezelfde vormgeving voor dezelfde onderdelen.

3.2.1 Bij focus (niveau A)

Zorg ervoor dat er bij focus op een onderdeel geen verandering plaatsvindt. Enkel als de gebruiker daar een actie voor doet, zoals bijvoorbeeld via de Enter-toets.

3.2.2. Bij input (niveau A)

  • Zorg ervoor dat gebruikers kunnen voorspellen wat een element, zoals een knop of menu, zal doen als deze focus krijgt.
  • Gebruik verzendknoppen. Zo verandert de inhoud van de pagina pas als een gebruiker de knop aanklikt. Zorg er bijvoorbeeld voor dat formulieren niet verzonden worden zonder dat de gebruiker iets doet, zoals klikken op ‘verzenden’.

3.2.3 Consistente navigatie (niveau AA)

  • Geef de keuzes van terugkerende inhoud, zoals een menu, altijd in dezelfde volgorde.
  • Zet alle vaste onderdelen op alle pagina’s op dezelfde plaats, bijvoorbeeld de zoekbalk rechts bovenaan de pagina.

3.2.4 Consistente identificatie (niveau AA)

Geef onderdelen met dezelfde functie herkenbare labels en benamingen die met elkaar overeenstemmen. Bijvoorbeeld

  • Geef een pictogram overal dezelfde alt-tekst.
  • Geef knoppen als ‘Volgende’, ‘Vorige’ en ‘Doorgaan’ overal waar ze worden gebruikt hetzelfde label.
  • Geef invoervelden van formulieren met hetzelfde doel overal waar ze worden gebruikt hetzelfde label.

3.3 Assistentie bij invoer

Geef gebruikers genoeg informatie zodat ze geen fouten maken of begrijpen wat er misgaat en dat recht kunnen zetten.

3.3.1 Foutidentificatie (niveau A)

  • Beschrijf de fout altijd in tekst. Duid de fout niet alleen met kleur.
    Bijvoorbeeld: Is een verplicht veld leeg? Duid het dan duidelijk aan, niet alleen met kleur. Leg uit dat gebruikers dit veld moeten invullen en wat ze moeten invullen.
  • Koppel de fout aan het veld waarop die betrekking heeft. Leg uit wat er mis is en hoe de gebruiker dat oplost.
  • Vat meerdere fouten samen bovenaan het formulier.

3.3.2 Labels of instructies (niveau A)

Vb. contactformulier, aanmelding nieuwsbrief

  • Hou labels eenvoudig en duidelijk, bijvoorbeeld ‘voornaam’, ‘achternaam’ of ‘e-mail’.
  • Moet een veld een bepaald formaat krijgen? Beschrijf het dan en toon een voorbeeld, bijvoorbeeld datum: dd-mm-jjjj.
  • Koppel de voorwaarden voor het invoeren van gegevens aan het relevante invoerveld van het formulier.

3.3.3 Foutsuggestie (niveau AA)

  • Stel een oplossing voor om het probleem op te lossen wanneer gebruikers fouten maken.
  • Is een verplicht veld leeg? Duid het dan duidelijk aan, niet alleen met kleur. Leg uit dat gebruikers dit veld moeten invullen en wat ze moeten invullen.
  • Verzenden gebruikers een formulier terwijl het nog niet volledig juist is ingevuld? Zorg ervoor dat de gegevens die al juist zijn ingevuld blijven staan. Zo moeten gebruikers niet alles opnieuw invullen als ze een fout maken.

3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (niveau AA)

  • Gaat het om een belangrijk formulier? Geef gebruikers de mogelijkheid om de ingevulde gegevens te controleren, te corrigeren, te bevestigen en te annuleren via bijvoorbeeld een tussentijdse pagina, waarschuwing of statusbericht.
    Het gaat bijvoorbeeld om gegevens met betrekking tot
    • juridische zaken
    • financiële zaken
    • een update van persoonlijke gegevens
  • Controleer vertrouwelijke gegevens op invoerfouten en geef gebruikers de kans om ze te verbeteren.

4. Robuust

4.1 Compatibel

Compatibel betekent dat uw website werkt met alle webbrowsers, apparaten en hulpmiddelen en uw applicatie met alle apparaten en hulpmiddelen.

4.1.1 Parsen (niveau A)

Contacteer een ontwikkelaar met kennis over normen voor webtoepassingen en toegankelijkheid.

4.1.2 Naam, rol, waarde (niveau A)

Contacteer een ontwikkelaar met kennis over normen voor webtoepassingen en toegankelijkheid.

4.1.3 Statusberichten (niveau AA)

Vb. voortgang van een proces, foutmelding, bevestiging

Contacteer een ontwikkelaar met kennis over normen voor webtoepassingen en toegankelijkheid.

Wettelijke verplichting

Overheidsorganisaties moeten de richtlijnen van niveau AA van de WCAG 2.1 volgen om te voldoen aan de Europese richtlijn, de Belgische wetgeving en het Bestuursdecreet in Vlaanderen.

Termen in begrijpelijke taal

  • Een alt-tekst of tekstalternatief is tekst die de informatie in de afbeelding kort weergeeft. Daarmee kunnen gebruikers die de inhoud niet zien de informatie ook begrijpen, zoals gebruikers van schermlezers.
  • Audiobeschrijving of audiodescriptie is extra geluid dat u aan een video toevoegt. Een stem beschrijft dan wat er in beeld gebeurt. Zo begrijpen gebruikers de inhoud van de video ook door er alleen naar te luisteren, zonder de beelden te zien.
  • Een brailleleesregel zet de tekst op het scherm via een schermlezer om in braille.
  • Knopinfo is informatie voor de gebruiker die je krijgt door met de muis over een bepaald onderdeel te zweven, of met een ander woord, hoveren.
  • Op tijd gebaseerde media is media met een bepaalde tijdsduur, zoals beelden, geluiden en video.
  • Een pop-up is een boodschap die over de inhoud van een webpagina verschijnt, vaak via een nieuw venster.
  • Een schermlezer leest voor wat er op het scherm te zien is.

  • Spraakherkenning zet gesproken taal om in tekst of acties.

  • Een transcript of tekstversie is een uitgeschreven tekst die de inhoud van een geluidsbestand of video weergeeft. Er moet alle belangrijke informatie uit de video of het geluidsbestand in staan.
Volg Inter op