De Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) in begrijpelijke taal
Lees de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG 2.1) in begrijpelijke taal.
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)
Niet-tekstuele content is inhoud die niet uit tekst bestaat. Geef informatie in afbeeldingen, grafieken pictogrammen en infographics ook weer als tekst. Een andere naam daarvoor is alt-tekst.
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)
Vb. MP3-bestand, podcast, video zonder geluid
Voorzie inhoud met alleen geluid of alleen video van een audiobeschrijving of een tekstversie. Dit zorgt ervoor dat informatie ook beschikbaar is voor gebruikers die moeilijk of niet zien of horen
1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (niveau A)
Vb. interview
Geef video’s die op voorhand zijn opgenomen een ondertiteling. Dit zorgt ervoor dat de informatie beschikbaar is voor gebruikers die het moeilijk of niet kunnen horen.
1.2.3 Audiobeschrijving of media-alternatief (vooraf opgenomen) (niveau A)
Vb. instructievideo
Geef eerder opgenomen video een audiobeschrijving of zet wat er te horen en te zien is om in een uitgeschreven tekst. Een ander woord daarvoor is een transcript. Dit zorgt ervoor dat visuele informatie ook beschikbaar is voor gebruikers die het moeilijk of niet zien
1.2.4 Ondertitels voor doven en slechthorenden (live) (niveau AA)
Vb. videoconferentie
Geef live video een ondertiteling.
1.2.5 Audiodescriptie (vooraf opgenomen) (niveau AA)
Geef op voorhand opgenomen video een audiobeschrijving. Dit zorgt ervoor dat visuele informatie ook beschikbaar is voor gebruikers die het moeilijk of niet zien.
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, invoervelden van formulieren
Leg in de code van uw website vast wat de verhouding is tussen de verschillende onderdelen van uw webpagina. Wat visueel wordt weergegeven, moet ook waarneembaar zijn door ondersteunende technologieën, zoals schermlezers, schermvergrotingssoftware en spraakherkenningssoftware.
1.3.2 Betekenisvolle volgorde (niveau A)
Zorg dat gebruikers de inhoud in een logische volgorde kunnen waarnemen, of dat nu met hun ogen is of met ondersteunende technologie zoals een schermlezer. Daarvoor moet u alles de juiste code geven.
1.3.3 Zintuiglijke eigenschappen (niveau A)
Zorg ervoor dat uw inhoud nooit bestaat uit dingen die gebruikers alleen maar kunnen zien of horen, zoals vormen, kleuren, grootte of geluiden. Dit zorgt ervoor dat instructies ook worden begrepen door gebruikers die de informatie niet of moeilijk herkennen via zintuiglijke kenmerken.
1.3.4 Weergavestand (niveau AA)
Zorg dat uw inhoud is afgestemd op schermen met verschillende verhoudingen. En dat uw inhoud in verschillende weergaves goed leesbaar is: staand en liggend. Gebruikers met een beperking moeten de inhoud kunnen bekijken in de stand die voor hen het beste werkt. Zo kan het vergroten van de tekstgrootte makkelijker leesbaar zijn in liggende stand. Een toestel kan ook gemonteerd zijn in staande en liggende stand.
1.3.5 Identificeer het doel van de input (niveau AA)
Maak het doel van invoervelden van formulieren duidelijk. Zorg voor een goede opbouw en uitleg bij de invoervelden zodat dit begrijpelijk is voor verschillende webbrowsers en ondersteunende technologieën, zoals een schermlezer.
1.4 Onderscheidbaar
Zorg ervoor dat gebruikers belangrijke informatie makkelijk kunnen onderscheiden. Maak het voor gebruikers 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)
Gebruikt u kleuren om informatie mee te geven of onderdelen te onderscheiden? Maak de info of het onderscheid dan ook duidelijk op een andere manier. Dit zorgt ervoor dat mensen die moeilijk of geen kleuren kunnen zien of onderscheiden, een andere manier hebben om de informatie te begrijpen.
1.4.2 Geluidsbediening (niveau A)
Hebt u inhoud met geluid dat vanzelf afspeelt en langer duurt dan 3 seconden? Zorg ervoor dat uw gebruikers dat op pauze kunnen zetten, stoppen of aanpassen. Dit zorgt ervoor dat gebruikers die inhoud beluisteren met een schermlezer dit kunnen doen zonder dat het wordt overstemd door geluid.
1.4.3 Contrast (minimum) (niveau AA)
Gebruik genoeg contrast tussen de kleur van de voorgrond en achtergrond van uw tekst en afbeeldingen. Zorg dat iedereen alles goed kan lezen.
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)
Zorg ervoor dat gebruikers uw tekst kunnen groter maken tot 200%, terwijl ze de inhoud nog altijd goed kunnen lezen en de pagina nog altijd goed kunnen gebruiken. Dit zorgt ervoor dat slechtziende gebruikers de inhoud comfortabel kunnen lezen.
1.4.5 Afbeeldingen van tekst (niveau AA)
Tekst mag niet worden weergegeven als onderdeel van een afbeelding omdat het formaat ervan niet kan worden aangepast en de kwaliteit ervan verslechtert wanneer het wordt vergroot.
1.4.10 Reflow (niveau AA)
Zorg dat alle inhoud op het scherm past. De inhoud moet altijd ‘teruglopen’. Dat betekent dat hij volledig zichtbaar blijft over de breedte van uw beeldscherm, welk apparaat u ook gebruikt.
1.4.11 Contrast van niet-tekstuele content (niveau AA)
Alle onderdelen die niet uit tekst bestaan, moeten kleuren hebben met genoeg contrast, bijvoorbeeld 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)
Zorg dat er geen inhoud of functionaliteit verloren gaat als de regelhoogte, letter- of woordafstand wordt aangepast. Gebruikers kunnen meer ruimte tussen regels, woorden en letters nodig hebben om tekst beter of sneller te kunnen lezen.
1.4.13 Content bij hover of focus (niveau AA)
Uw gebruikers moeten uw extra inhoud makkelijk kunnen gebruiken, aanzetten of uitschakelen.
Voorbeelden van extra inhoud:
- Een pop-up is een boodschap die over de inhoud van een webpagina verschijnt, vaak via een nieuw venster.
- 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.
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)
Zorg dat alles wat gebruikers kunnen zien en gebruiken ook te bereiken en bedienen is met alleen een toetsenbord, bijvoorbeeld formulieren, menu’s of een winkelwagentje. Dit zorgt ervoor dat mensen met mobiliteits- of behendigheidsbeperkingen die geen muis gebruiken, kunnen doen wat de bedoeling is.
2.1.2 Geen toetsenbordval (niveau A)
Voorkom dat gebruikers niet verder kunnen en vast komen te zitten als ze alleen het toetsenbord gebruiken. In andere woorden: een valkuil door het toetsenbord.
Zorg er dus voor dat gebruikers de logische opbouw van uw website kunnen volgen met een toetsenbord. Is er een onderdeel waarnaar gebruikers toe moeten kunnen? Dan moeten ze daar met het toetsenbord kunnen geraken en ook weer weg kunnen.
2.1.4 Enkel teken sneltoetsen (niveau A)
Zorg dat gebruikers sneltoetsen zelf kunnen instellen als uw website sneltoetsen heeft. Sommige sneltoetsen zijn niet voor iedereen handig of makkelijk.
Daarom moeten gebruikers ze uit kunnen zetten en opnieuw kunnen toewijzen. Verder mag een sneltoets voor een onderdeel alleen actief zijn wanneer dat onderdeel de focus heeft.
2.2 Genoeg tijd
Geef gebruikers genoeg tijd om uw inhoud te lezen, begrijpen en gebruiken.
2.2.1 Timing aanpasbaar (niveau A)
Hebt u inhoud die alleen tijdelijk beschikbaar is? Bijvoorbeeld inhoud die verloopt of niet meer te gebruiken is na een bepaalde tijd, zoals een formulier dat u binnen een bepaalde tijd moet invullen? Zorg er dan voor dat gebruikers kunnen aanpassen hoe lang de inhoud beschikbaar is. Zo krijgt iedereen genoeg tijd om informatie te lezen en te begrijpen.
2.2.2 Pauzeren, stoppen, verbergen (niveau A)
Vb. animaties, video’s, knipperende tekst, fotocarrousel
Geef gebruikers de mogelijkheid om inhoud, die langer dan vijf seconden automatisch beweegt, op pauze te zetten, te stoppen of te verbergen. Dit zorgt ervoor dat mensen met cognitieve beperkingen die de focus en concentratie beïnvloeden, niet worden afgeleid door beweging.
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)
Zorg ervoor dat uw inhoud niet meer dan drie keer per seconde flitst of knippert. Dit zorgt ervoor dat mensen met aandoeningen zoals lichtgevoelige epilepsie worden beschermd tegen aanvallen.
2.4 Navigeerbaar
Help gebruikers de weg en inhoud vinden door een goede, duidelijke opbouw.
2.4.1 Blokken omzeilen (niveau A)
Zorg ervoor dat gebruikers onderdelen die herhaald worden, kunnen overslaan om onmiddellijk naar het begin van de hoofdinhoud te gaan. Bijvoorbeeld een hoofding of een menu met links. Dit zorgt ervoor dat gebruikers die geen muis gebruiken snel en gemakkelijk de hoofdinhoud van de pagina bereiken, in plaats van eerst alle links van het menu daarboven te moeten doorlopen.
2.4.2 Paginatitel (niveau A)
Geef uw webpagina’s een unieke titel die de inhoud of het doel van de pagina beschrijft. Ook zonder de inhoud te kennen, moeten gebruikers meteen begrijpen waar de pagina over gaat. Dit zorgt ervoor dat gebruikers met cognitieve beperkingen snel hun weg vinden en het doel van de pagina kennen zonder de hele inhoud door te moeten nemen.
2.4.3 Focus volgorde (niveau A)
Voorzie een logische volgorde om door de inhoud te gaan. De volgorde die u ziet moet hetzelfde zijn als de volgorde in de broncode.
2.4.4 Linkdoel (in context) (niveau A)
Gebruikers moeten links duidelijk en makkelijk begrijpen. De tekst van de link moet de bestemming of het doel ervan duidelijk maken. Dit zorgt ervoor dat gebruikers van een schermlezer het doel van links begrijpen zonder de omliggende inhoud te lezen. Dit zorgt er ook voor dat gebruikers van spraakherkenning links kunnen kiezen met behulp van spraakopdrachten.
2.4.5 Meerdere manieren (niveau AA)
Bied meerdere manieren aan om inhoud te vinden en de weg te vinden op uw webpagina’s. Verschillende mensen hebben verschillende voorkeuren, bijvoorbeeld iemand met een cognitieve beperking kan de voorkeur geven aan het bladeren door een overzicht van alle links om inhoud te vinden. Terwijl iemand die vergroting gebruikt misschien liever een zoekopdracht gebruikt in plaats van door een lang overzicht te scrollen.
2.4.6 Koppen en labels (niveau AA)
Gebruik duidelijke, beschrijvende koppen en tussenkoppen in uw teksten. Zo geeft u de inhoud een overzichtelijke opbouw. Geef onderdelen zoals een formulier, zoekbalk of tabel een label, zodat gebruikers weten waarvoor ze dienen. Dit zorgt ervoor dat mensen met leesproblemen het doel van de inhoud kunnen begrijpen en dat gebruikers van schermlezers gemakkelijk de weg vinden in uw inhoud.
2.4.7 Focus zichtbaar (niveau AA)
Maak zichtbaar welk onderdeel van een pagina de toetsenbordfocus heeft. Gebruikers van een toetsenbord moeten kunnen zien waar op de pagina ze zich bevinden.
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
Op een aanraakscherm zijn er soms vingerbewegingen nodig om de onderdelen te kunnen gebruiken. Zorg dat gebruikers op meer dan één manier de inhoud kunnen bedienen. Sommige gebruikers met een handicap hebben eenvoudige invoer of bewegingen nodig om taken uit te voeren en selecties te maken. Complexe bewegingen of bewegingen die handigheid of nauwkeurigheid vereisen, kunnen moeilijk zijn voor hen.
2.5.2 Aanwijzerannulering (niveau A)
Als gebruikers iets doen wat niet de bedoeling is op een aanraakscherm, dan moeten ze dat kunnen stoppen of annuleren. Dit is bedoeld om te voorkomen dat dingen per ongeluk worden geactiveerd op een pagina.
2.5.3 Label in naam (niveau A)
Geef onderdelen een label met een duidelijke naam die het doel beschrijft. Gebruikers die spraakinvoer gebruiken, kunnen zo onderdelen activeren. Gebruikers die voorleessoftware gebruiken, weten zo welke actie er met een onderdeel samenhangt.
2.5.4 Bewegingsactivering (niveau A)
Kunnen gebruikers dingen doen op uw website of app door hun apparaat te bewegen of door gebaren te maken? Zorg dan ook voor een andere manier om dezelfde dingen te kunnen doen. Dit helpt mensen die niet in staat zijn om te kantelen, schudden of gebaren te maken of als het apparaat gemonteerd is.
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)
Geef op elke pagina de hoofdtaal van de tekst aan. Zo spreekt een schermlezer de tekst met het juiste accent en de juiste uitspraak uit.
3.1.2 Taal van onderdelen (niveau A)
Geef aan wanneer de taal op een pagina verandert of wanneer een gedeelte van de tekst in een andere taal is. Dit zorgt ervoor dat schermlezers overschakelen naar het juiste accent en de juiste uitspraak voor die taal.
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 geen enkel onderdeel verandert op het moment dat het focus krijgt, zoals het laden van een nieuwe pagina. Laat gebruikers zelf beslissen of ze iets willen doen. Dit voorkomt dat er onverwachte dingen gebeuren zonder dat gebruikers van schermlezers en schermvergroters zich hiervan bewust zijn.
3.2.2. Bij input (niveau A)
Als een onderdeel de focus heeft, mag de focus niet vanzelf veranderen. Tenzij de gebruiker op de hoogte is gebracht van deze verandering voordat hij dat onderdeel gebruikt. De focus mag bijvoorbeeld niet vanzelf naar het volgende veld in een formulier springen zodra een gebruiker het veld met de focus heeft ingevuld.
3.2.3 Consistente navigatie (niveau AA)
Wanneer inhoud op meerdere pagina’s wordt herhaald, moet deze steeds in dezelfde volgorde worden weergegeven. Hierdoor kunnen gebruikers gemakkelijker hun weg vinden.
3.2.4 Consistente identificatie (niveau AA)
Wanneer onderdelen die dezelfde functie hebben op meerdere plaatsen worden herhaald, moeten deze steeds dezelfde vormgeving en herkenbare beschrijving hebben. Hierdoor kunnen gebruikers gemakkelijker hun weg vinden.
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)
Toon wanneer er een fout optreedt waar de fout zit en beschrijf duidelijk wat er fout is. Dit zorgt ervoor dat de fout beschikbaar is voor mensen die kleuren niet kunnen zien, onderscheiden of pictogrammen en andere visuele aanwijzingen niet begrijpen.
3.3.2 Labels of instructies (niveau A)
Vb. contactformulier, aanmelding nieuwsbrief
Zorg ervoor dat gebruikers begrijpen wat ze moeten invullen in een veld van een formulier. Als gegevens in een bepaald formaat moeten worden ingegeven, leg dan uit hoe dat moet. Dit zorgt ervoor dat iedereen de voorwaarden voor het invoeren van gegevens begrijpt.
3.3.3 Foutsuggestie (niveau AA)
Stel oplossingen voor wanneer gebruikers fouten maken, tenzij de voorgestelde oplossing de veiligheid in gevaar brengt. Toon waar de fout zit en doe een voorstel om het te verbeteren. Dit helpt om problemen gemakkelijker op te lossen. En het helpt gebruikers die het verwerken van informatie moeilijk vinden.
3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (niveau AA)
Zorg ervoor dat gebruikers hun ingevoerde informatie kunnen bekijken, corrigeren en bevestigen als ze vertrouwelijke gegevens invoeren, zoals bij wettelijke, financiële of persoonlijke gegevens.
4.1 Compatibel
Compatibel betekent dat uw website werkt met alle webbrowsers en ondersteunende technologieën en uw applicatie met alle ondersteunende technologieën.
4.1.1 Parsen (niveau A)
Zorg dat de code van de pagina juist is opgebouwd zodat verschillende webbrowsers en ondersteunende technologieën deze code juist kunnen lezen en verwerken.
4.1.2 Naam, rol, waarde (niveau A)
Ontwikkelt u onderdelen waarmee gebruikers iets kunnen doen? Hou er dan rekening mee dat ze die ook met ondersteunende technologieën kunnen gebruiken. Dit zorgt ervoor dat gebruikers van schermlezers deze onderdelen begrijpen.
4.1.3 Statusberichten (niveau AA)
Vb. voortgang van een proces, foutmelding, bevestiging
Doet u belangrijke veranderingen aan uw inhoud? Laat dat dan weten aan uw gebruikers met een statusbericht. Hou er rekening mee dat het statusbericht ook met ondersteunende technologieën kan worden waargenomen. Zo moeten bijvoorbeeld gebruikers van een schermlezer, die uw wijzigingen niet kunnen zien, een melding krijgen met info over wat er veranderd is.
Wettelijke verplichting
Alle websites en mobiele applicaties van overheidsorganisaties moeten voldoen aan de richtlijnen van niveau AA van de WCAG 2.1 binnen de voorwaarden van de Europese Norm voor digitale toegankelijkheid (EN 301 549 V1.1.2)(PDF bestand opent in nieuw venster). Deze verplichting komt van 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.