In Nederland hanteert de overheid de WCAG 2.0 webrichtlijnen versie 2. Anno 2018 bericht de NOS dat veel gemeenten nog altijd niet voldoen aan de website eisen voor gehandicapten. Het gaat hier om de Web Content Accessibility Guidelines. Het niet correct volgen van deze’ WCAG webrichtlijnen’ blijkt een organisatorisch probleem is geen technisch probleem. De toegankelijkheid van de website blijkt geen (speer)punt op de agenda, terwijl het website bouwen volgens webrichtlijnen tegenwoordig prima mogelijk is.

De belangrijkste zaken uit de WCAG webrichtlijnen versie 2 beschrijf ik in deze blog. Het is mijn doel om je een praktische leiddraad voor websitebouw te geven. Vanaf 2019 moeten websites en mobiele apps van de overheid gefaseerd aan toegankelijkheidseisen gaan voldoen, zo is vastgelegd in het Tijdelijk besluit digitale toegankelijkheid overheid.

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. 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.

 

webrichtlijnen-overheid-samenvatting

“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 webrichtlijnen overheid versie 2

In deze blog maak ik een praktische vertaalslag op basis van de officiële webrichtlijnen overheid versie 2 (twee checklisten), want dat document is nogal technisch, terwijl ik het idee heb dat zelfs de basis nog niet geworteld is in menig webpraktijk. Dus leer nu wat de webrichtlijnen inhouden of kijk bij de link onder onderstaande opsomming voor concrete eisen per type content.

  1. introductie webrichtlijnen: waarom kiezen voor drempelvrije websites?
  2. programmeercode en opmaak (CSS) volgens de webrichtlijnen 
  3. navigatie volgens WCAG versie 2 (menu, links, knoppen)
  4. content ontsluiten volgens webrichtlijnen overheid  (carrousel, tekst, afbeelding, video)
  5. toegankelijkheid van speciale contenttypen (404 pagina, formulieren, tabellen)
  6. webrichtlijnen en voorleessoftware

Contenteisen toegankelijkheid per contenttype

De overheid stelt eisen aan de toegankelijkheid van websites, deze 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. Als webredacteur gebuik ik liever Iframes om direct vanuit Youtube video’s te hosten; al ‘mag’ het eigenlijk niet.

 

 

2. code webrichtlijnen 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. http://www.bunnik.nl/20150612/leveringsvoorwaarden
  • 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 http://validator.w3.org/

3. Navigatie webrichtlijnen overheid

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)

Webrichtlijnen 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 bij 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 webrichtlijnen overheid

De Web Content Accessibility Guidelines (WCAG webrichtlijnen) 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.




5. Speciale contenttypen webrichtlijnen versie 2

De website richtlijnen gelden voor specifieke onderdelen van bijna elke website:

 

 

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 webrichtlijnen:

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.

Webrichtlijnen 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’

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.

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.

6. webrichtlijnen 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




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 blinden. Dit alles heb ik getoetst via de helpdesk van https://www.accessibility.nl.

Meer informatie over overheid webrichtlijnen

Webrichtlijnen 2 helpdesk voor developers

In mijn zoektocht ontdekte ik dat websitebouwers altijd een servicedesk kunnen bellen om te sparren over de WCAG webrichtlijnen overheid, versie 2. 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!

Gerben G van Dijk



 

 

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *