In Nederland hanteert de overheid de WCAG richtlijnen voor toegankelijkheid (WCAG). Het gaat hier om de Web Content Accessibility Guidelines. Vanaf 23 september 2020 moeten websites en mobiele apps van de overheid aan de toegankelijkheidseisen gaan voldoen, zo is vastgelegd in het Tijdelijk besluit digitale toegankelijkheid overheid.
De meest belangrijkste zaken uit de WCAG webrichtlijnen, eisen aan digitoegankelijkheid, beschrijf ik in deze blog. Zodat je weet wat je kunt aanpakken voor jou website, waarbij je zinnig omgaat met alle eisen en niet teveel betaalt voor websitebouw.
In deze blog maak ik dus een selectie van uitvoerbare maatregelen voor meer toegankelijkheid van de website voor gehandicapten en/of voor mensen met minder digitale vaardigheden of minder taalbegrip.
Gebruik het en deel het met je communicatiecollega’s!
VN-verdrag en digitale toegankelijkheid
In september 2016 wordt in New York het VN-verdrag bekrachtigd waarin gesteld wordt dat digitale toegankelijkheid een universeel mensenrecht is. Dit betekent voor de overheid dat zij principes van digitale toegankelijkheid, oftewel accessibility, moeten toepassen in hun digitale middelen; hun websites en apps. Juist om gebruik ervan voor mensen met een beperking mogelijk te maken. Denk daarbij aan een visueel, auditief, fysiek, taal- en/of leesprobleem. Zo staat vastgelegd in artikel 9 van dit VN-verdrag als het gaat om toegankelijk maken van informatie, communicatie en algemene (electronische) diensten.
De vraag is steeds: hoe kun je iedereen toegang geven tot de complete informatie die er ontsloten wordt, ondanks de beperking. Ik leerde van Bianca van der Horst, die 100% slechthorend is, dat je pas voelt dat je meetelt als je alles kunt volgen en eraan kunt deelnemen. Niets zo vervelend om informatie maar deels te ontvangen… Ik zag het gebeuren tijdens een groepsdiscussie tijdens het NCDT congres, wanneer haar speciale microfoon niet werd gebruikt, kon Bianca van der Horst de discussie niet langer volgen. Je begrijpt hoe dat voelt. Voor mij een les om nooit te vergeten. Overtuig dus iedereen van het belang van webrichtlijnen en het gebruik van toegankelijk design.
Is je website met een toetsenbord te bedienen?
Iemand zonder beperking staat er niet bij stil dat zijn/haar website met alleen een toetsenbord niet te bedienen valt… Vandaar dat het mij goed lijkt om de belangrijkste webrichtlijnen voor de overheid in deze blog voor je op een rij te zetten.
Web Content Accessibility Guidelines (WCAG webrichtlijnen) | Het overzicht
Wat staat er in de Web Content Accessibility Guidelines (WCAG webrichtlijnen) voor de overheid? Bekijk het overzicht van de meest uitvoerbare webrichtlijnen overheid, versie 2.
wcag website richtlijnen in het kort
“leder mens heeft het recht om te leven als ieder ander en mee te doen in de maatschappij. Gebruikmaken van de mogelijkheden die het internet,computers en smartphones ons bieden hoort daarnatuurlijk bij. Juist daarom is het belangrijk datdigitale dienstverlening toegankelijk is vooriedereen”. Bron: www.digitoegankelijk.nl
Samenvatting WCAG richtlijnen voor toegankelijkheid WCAG
In deze blog maak ik een praktische vertaalslag op basis van de officiële richtlijn WCAG overheid, want de richtlijnen voor toegankelijkheid zijn nogal technisch omschreven.
Dus leer nu wat de webrichtlijnen inhouden of kijk bij de link onder onderstaande opsomming voor concrete eisen per type content.
- introductie webrichtlijnen: waarom kiezen voor drempelvrije websites?
- programmeercode en opmaak (CSS) volgens de webrichtlijnen
- navigatie volgens WCAG versie 2 (menu, links, knoppen)
- content ontsluiten volgens webrichtlijnen overheid (carrousel, tekst, afbeelding, video)
- toegankelijkheid van speciale contenttypen (404 pagina, formulieren, tabellen)
- webrichtlijnen en voorleessoftware
NB Trouwens, ook stichting Accessibility heeft een artikel over wat in de WCAG staat, in gewonere taal.
Uitleg van eisen voor digitale toegankelijkheid WCAG 2020-2021
De overheid stelt eisen aan de toegankelijkheid van websites, deze uitleg van eisen kun je vinden op de website digitoegankelijkheid.nl van de landelijke overheid.
1. Introductie webrichtlijnen overheid (WCAG)
Waarom kiezen voor drempelvrije websites via webrichtlijnen versie 2?
Toegankelijkheid maken van je website heeft voordeel voor ALLE gebruikers; dus niet alleen voor personen met een visuele of auditieve beperking. Het pleit voor zowel de website als de bouwers ervan om alle gebruikers goed te willen ondersteunen met een drempelvrije website. Dit betekent bijvoorbeeld video’s zelf hosten in verschillende formaten, aangevuld met transcripties en ondertiteling en dergelijke.
2. code WCAG richtlijnen voor toegankelijkheid overheid
De Web Content Accessibility Guidelines (WCAG webrichtlijnen) schrijven voor de technische implementatie van websites dit voor:
- HTML programmeercode: volgens universele standaarden. Geen afgekeurde HTML gebruiken.
- Opmaak/CSS: Inhoud en opmaak zijn gescheiden via gebruik van CSS. In HTML mag hooguit ‘vet’ worden toegevoegd. WCAG: geen opmaak in HTML code.
- CSS kleuren:voldoende contrast tekst/achtergrond, ook links (ook niet-actieve links). Dit is te testen via de Firefox Add-on: Color Blind(ness) simulator. Richtlijnen Contrast: 4:1 gewone tekst, 3:1 voor grote tekst en links
- Javascript: Altijd aparte bestanden gebruiken voor Javascript! (ivm. Voorleesprogramma’s), dus geen Javascript in de HTML plaatsen! Javascript is opgeslagen in gescheiden bestanden en staat dus niet in de HTML (dit is alleen een universele eis voor kwaliteit; niet nodig voor voorleesprogramma’s)
- Taalkeuze. Elke pagina heeft een taalattribuut in HTML d.w.z.: <html lang=nl>
- Engels: navigatie kan op 3 manieren: ‘English’, ‘EN’, of ‘icoon Engelse vlag’.
- Vriendelijke url’s: webadressen bevatten normale woorden, geen vreemde tekens of reeksen, hooguit 7 cijfers. Bijv. https://www.bunnik.nl/inkoopvoorwaarden
- Title-tag: deze is altijd leesbaar, beschrijvend en begrijpelijk, net zoals de url.
- H1 hoofdkop,H2 subkop, H3 tussenkop: automatisch voor elke contentpagina, elke tussenkop kan voorzien worden van een H3 tussenkop (vorm: <h3>kop</h3>). Dit kan gewoon via de CMS editor gedaan worden.
- Lettertype: gebruik een UTF-8 karakterset (standaard) d.w.z. <meta charset=”utf-8” />
- Validatie. Een webpagina moet valideren. Te testen via Validator.w3.org/
De Web Content Accessibility Guidelines (WCAG webrichtlijnen) stellen deze eisen aan de navigatie op websites van de overheid:
- Zowel via toetsenbord als via de muis moet bediening website kunnen plaatsvinden: navigeren op webpagina is dus ook mogelijk met alleen het toetsenbord. Dit betekent gebruik van de ‘Tab-toets’ en ‘stippellijntje’ onder het menu-item waar je bent (focus).
- Plaatsing menu-items: als menu wordt herhaald op vervolgpagina, blijft de plek gelijk en blijft ook de item-volgorde gelijk van het betreffende menu.
- Links: altijd onderstreept weergeven, mag ook alleen bij Mouse-over. Links moeten voldoende contrast hebben met achtergrond, ook in ‘niet actieve’ kleur.
- Knoppen: knoptekst staat apart van de afbeelding, gebruik van HTML en CSS.
- Banners: teksten in de banner staan los van de afbeelding. Tekst staat nooit door foto’s heen, maar altijd tegen gelijkmatige, contrasterende achtergrond.NB: Testen is mogelijk via: NVDA; NonVisual Desktop Access (gratis software)
WCAG richtlijnen toegankelijkheid overheid voor Iframes en video mp4
Een quick win voor correcte toepassing van een webrichtlijn ligt bijvoorbeeld op het vlak van video’s. Drempelvrije video’s, zijn video’s waar ondertiteling aan is toegevoegd en waarbij de woordelijk tekst ook uitgeschreven is.
Video kent vele eisen, terwijl gebruik van Iframes zoveel sneller is. Je vermijdt dan wel een webrichtlijn van de overheid, want een Iframe ruimte is een gebied binnen je webpagina dat je uitbesteedt aan een andere website. Binnen het Iframe gebied kan een webgebruiker zich niet bewegen door alleen het toetsenbord te gebruiken. Het is wel een webrichtlijnen eis dat navigeren OOK via het toetsenbord moet kunnen en niet alleen via een muis of aanraakscherm. Maar…
Wel of geen Iframes toepassen met oog op WCAG webrichtlijnen?
Youtube embedden is zeker te overwegen, wanneer de keuze wordt gemaakt om onder het filmpje (bijvoorbeeld) navigatie (lees: links) op te nemen naar andere content. Immers bij alle navigatie die rondom de Iframe zichtbaar is, kan een webgebruiker WEL komen, om ook via het toetsenbord te kunnen navigeren volgens webrichtlijnen.
4. Content WCAG richtlijnen voor toegankelijkheid overheid
De Web Content Accessibility Guidelines (WCAG toegankelijkheid) geven ook richtlijnen voor juiste ontsluiting van content:
- Tekst / tekstuele inhoud: tekst kan tot tweemaal zo groot weergegeven worden, tot 18 punts en vet 14 punts) en heeft voldoende contract met de achtergrond (4:1). Design ondersteunt dit contrast via CSS.
- Plaatjes: Alt-tekst is mogelijk om in te voeren via CMS. Bijv. <img src=”schuur.png” alt=”Schuur in tuin” />
- Video: Mp4 video kan (via Iframe) ingevoerd worden. Videolink kan buiten Iframe geplaatst worden in de content direct onder de video, door de webredactie zelf. Bijvoorbeeld in een tekst die video beschrijf (alinea).
- PDF webrichtlijnen: Webbouwer gaat uit van formaat PDF/A-1a . En zorgt dat beschrijving kan worden toegevoegd voor zoekmachines. Webredactie leert secretariaat ook H1,H2,H3 koppen in Word toe te passen, alvorens de PDF wordt aangemaakt. Zorg ervoor dat SEO zoektermen voorin de subkoppen staan (de h2 en h3 headers etcetera) staan. Gebruik ook actieve (werk)woorden in elke titel om de tekst aantrekkelijk te houden om te lezen.
5. Speciale contenttypen WCAG richtlijnen voor toegankelijkheid
De website richtlijnen voor toegankelijke overheid websites gelden voor specifieke onderdelen binnen websites en apps:
404 pagina: ‘Pagina Niet gevonden’ webrichtlijnen, versie 2:
Een 404 pagina is de pagina waar webbezoekers op terecht komen in het geval een link naar een webpagina niet meer werkt. Als je een 4040 pagina gaat inrichten, zorg dan dat de niet-gevonden pagina de volgende zaken bevat:
- Uitleg over de fout en welke opties je hebt, bijvoorbeeld: Ga naar Zoeken.
- Uitleg over hoe je aan de webredactie de fout kunt doorgeven
- Link naar home
- Links naar de hoofdmenu items op je website
- Zoekveld of directe link naar de zoekfunctie
- Link naar het contactformulier of mogelijkheid tot directe feedbackformulier.
Carrousel / slider toegankelijkheidseisen:
Het moet mogelijk zijn om elke carrousel te pauzeren. Het kunnen stoppen van de carrousel is nodig voor spraakprogramma’s. Deze gaan anders, bij elke verversing, opnieuw voorlezen… Elke carrousel bevat een || knop, voor pauzeren/stoppen. Ook via toetsenbord kunnen stoppen, is echt een officiele eis, zie verder over voorlees software.
Toegankelijkheidseisen contactformulier / toegankelijkheid eisen formulier:
Als een formulier niet toetsenbordtoegankelijk is, dan is deze volledig onbruikbaar voor gebruikers van screenreaders. Meestal is verkeerd gebruik van Javascript het probleem. Belangrijk is dat Beschrijving en Invoerveld gekoppeld zijn.
- Zorg ervoor dat het ‘for-attribuut’ bij het label en het ‘id-attribuut’ gelijk zijn bij het input element. In code: <label for=”voornaam”> Voornaam*”</label> en <input id=”voornaam” name=”voornaam” type=”text”>
- Denk aan label-id-koppeling bij de velden: text,textarea,checkboxen,radiobuttons,dropdowns.
- Instructies opnemen in het label-attribuut (bijv. ‘geef 4 cijfers’)
- Opties in een <select> element zijn met elkaar verbonden via het <optgroup> element
- Denk aan het value-attribuut bij: submit,reset
- Zorg voor een tekst tussen button-tags bij gebruik van een online knop
- Denk aan Alt-tekst bij afbeelding. Dus bij de Verzend knop bijv.
- Velden die bij elkaar horen via <fieldset> element, en daarbij een Legend-element om de groep een naam te geven.
- Vermijd de Javascript-functies document.write() en object.innerHTML.
- (velden met * zijn verplicht), deze intro altijd bovenin het formulier zetten, en niet eronder.
- Bij foute invoer, wordt zo specifiek mogelijk aangegeven hoe dit op te heffen is. Liefst juiste veld direct noemen, dat aangepast moet worden.
- Gebruik nooit een CAPTCHA, mogelijk is wel om spam tegen te gaan met deze vraag: ‘Hoeveel is 1+1?’
- Wil je meer weten? Google dan op ‘Creating Accessible Forms WebAIM’
Toegankelijkheidseisen tabellen opmaak en webrichtlijnen versie 2:
Er zijn webrichtlijnen voor de wijze waarop tabellen online ontsloten worden. Deze som ik op. Praktisch gaat het erom hoe een tabel in HTML eruit moet zien om te voldoen aan webrichtlijnen? Zie dit voorbeeld van een tabel volgens web- en seo-richtlijnen. Eisen tabel:
- Tabellen zijn nodig om data goed weer te geven, het gaat niet om het type opmaak
- Voorzie tabellen altijd van een titel (heading) en van het caption element.
- Rijkoppen/kolomkoppen hebben het <th> element (table heading)
- Tabellen hebben een summary (mogelijk om deze in CMS in te voeren)
- Je kunt in tekst aangeven wat de relatie is tussen rijen. In de titel of ‘id’-veld indien beschikbaar.
- Zie ook de opbouw van een tabel in HTML, voorbeeld HTML code.
Toegankelijkheidseisen GEO-kaart webrichtlijnen overheid:
- Locaties niet alleen via kleurverschil, maar ook via symboolverschil (in uiterlijke vorm ook variëren)
- Adressen in de kaart, zijn ook los van de kaart (in lijst) te raadplegen.
- Je kunt een geografische kaart maken via Google Maps.
6. WCAG toegankelijkheidseisen voorleessoftware
Ondersteunen van voorleessoftware. Dit is een erg belangrijk aspect, dat ik daarom uitlicht. Als je in ieder geval wilt dat je website te lezen is via voorleesprogramma’s, kom je deze technische eisen uit:
- Carrousel op de pagina is te pauzeren, via visuele knop en toetsenbord. Voorkomt afleiding en maakt langer lezen van iets mogelijk. Ook moet het voorleesprogramma het zo kunnen voorlezen.
- Content en opmaak zijn gescheiden via gebruik HTML/CSS, valide code is daarbij erg belangrijk!
- Navigeren door de site kan ook met toetsenbord (tab-toets)(verplicht)
- Via stippellijn onder menu-items zie je waar je bent op de pagina.
- Alle templates hebben linksboven een link naar de hoofdcontent, repeterende content is altijd over te slaan (verplicht). Dus bij gebruik van toetsenbordnavigatie en/of voorleesprogramma komt deze optie.
- N.B. Doelgroep van blinden en slechtzienden heeft tegenwoordig eigen voorleessoftware.
- Kies nieuwsbrieven software uit dat voldoet aan deze eisen, zoals LaPosta.
Voorleessoftware binnen je website
In de website ingebakken voorleessoftware is wel optie voor lezers met dyslexie of mensen die de Nederlandse taal moeilijk te lezen vinden. Maar niet nodig voor personen die blind zijn. Dit alles heb ik getoetst via de helpdesk van https://www.accessibility.nl.
Video: Wildgroei overheidswebsites (1800 websites Rijksoverheid)
Naast alle eisen aan de digitale toegankelijk van overheidswebsites, heb je nog het probleem van de vele overheidswebsites. Een burger kan in deze veelheid verdwalen. En dat pleit voor meer centralisering van campagnes van de overheid, met als doel veel minder urls. In Engeland heeft GOV.UK ervoor gezorgd dat er veel minder urls zijn. Dat terzijde. Bekijk de video die dit probleem aan de orde stelt: (3 minuten).
In deze video: In de Avondshow van 31 januari 2023 toont Arjen Lubach overtuigend aan dat 1800 websites van de rijksoverheid natuurlijk behoorlijk veel is. Burgers kunnen zich afvragen bij welke site ze moeten zijn. En het bekend maken en vullen van websites kost natuurlijk veel effort….red…. Bovenstaande video, is slechts een fragment van deze show (citaatrecht Auteurwet). Ga naar Avondshow 31-01-2023.
Meer informatie over WCAG richtlijnen voor toegankelijkheid
In mijn zoektocht ontdekte ik dat websitebouwers altijd een servicedesk kunnen bellen om te sparren over de WCAG toegankelijkheidseisen. Meer informatie is te toetsen bij de helpdesk van de Accessibility servicedesk die tijdens kantooruren telefonisch 030-2398270 voor webdevelopers.
Heb je inhoudelijke aanvullingen?
Meld ze meteen onderin dit bericht! Dank je wel voor het lezen en delen!
Veel succes,
Gerben G van Dijk, online specialist regio Utrecht.
Inclusieve communicatie
Er is een gezegde: “diversiteit betekent dat je wordt uitgenodigd voor het feest, inclusiviteit betekent dat je wordt gevraagd om op dat feest te dansen.” Tot slot nog een boektip over Inclusieve communicatie.
Boektip over Inclusieve communicatie, te koop bij Bol.com
Ook geeft de Engelse overheid schrijftips als het gaat om schrijven over personen met beperkingen. Zie ook wat je moet weten over b1 teksten maken en voorbeelden.
Het creëren en beheren van content kost vaak meer tijd dan je denkt. Daarom heeft Gerben Webredactie blog opgezet. Hier deelt hij niet alleen praktische handleidingen en online tips met jou, maar ook met zichzelf: "Oh ja, zo moet ik dat aanpakken!".
Naast zijn bijdragen aan Webredactie blog, schrijft Gerben voor Frankwatching.nl en heeft hij een boek over communicatiewerk organiseren op Amazon.com. De afgelopen tijd onderzoekt hij hoe ChatGPT SEO kan bijdragen aan contentcreatie.