In Nederland hanteert de overheid de WCAG 2.0 webrichtlijnen versie 2. Een voorbeeld zijn drempelvrije video’s, waarbij dus ondertiteling aanwezig is, of de uitgeschreven tekst. 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. Gebruik het en deel het!

Actuele ontwikkelingen: VN-verdrag 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. Iemand zonder beperking staat er niet bij stil dat zijn/haar website met alleen een toetsenbord niet te bedienen valt… Vandaar dat het goed is om de belangrijkste webrichtlijnen voor de overheid in deze blog te gaan lezen.

webrichtlijnen-overheid-samenvatting

Samenvatting webrichtlijnen overheid versie 2

Bekijk het overzicht van de meest uitvoerbare webrichtlijnen overheid, versie 2.

  1. introductie vooraf
  2. programmeercode HTML/CSS/Javascript (scheiding opmaak en vormgeving)
  3. navigatie (menu, links, knoppen)
  4. content  (pauzeerbare carrousel, tekst, afbeelding, video)
  5. speciale contenttypen (404 pagina, formulieren, tabellen)
  6. webrichtlijnen voorleessoftware

1. Introductie webrichtlijnen overheid

Dit zijn niet de officiële webrichtlijnen overheid versie 2, want ik heb ‘praktisch te moeilijke eisen’ eruit gehouden.

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.

Praktische samenvatting webrichtlijnen 2

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

Webrichtlijnen 2 helpdesk

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.

2. code webrichtlijnen overheid

  • 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

  • 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

Video kent vele eisen, terwijl gebruik van Iframes zoveel sneller is. Je ontloopt dan wel een webrichtlijn van de overheid, want binnen een Iframe kun je niet navigeren (zonder technische ingrepen in de websitebouw). Je komt dan ‘vast te zitten’. Je kunt hier omheen werken als webredactie door buiten het Iframe een link op te nemen naar de video-site / bronwebsite (Youtube meestal), zodat men via het toetsenbord bij de link kan komen om de video aldaar te kijken.

4. Content webrichtlijnen overheid

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

  • Bevat uitleg over de fout en welke opties je hebt:
  • Bevat uitleg over hoe je aan de webredactie de fout kunt doorgeven
  • Bevat link naar home
  • Bevat links naar hoofdmenu items.
  • Bevat evt. zoekveld/zoekfunctie
  • Bevat link naar contactformulier of 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
  • Denk aan tekst tussen button-tags bij een button
  • 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:

  • Tabellen zijn niet voor opmaak, maar voor weergave van data nodig.
  • Tabellen hebben een titel. (heading en caption element). Zie ook het html voorbeeld van een tabel volgens web- en seo-richtlijnen op deze blog.
  • 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 (juni 2015).

Heb je inhoudelijke aanvullingen?
Meld ze meteen onderin dit bericht! Dank je wel voor het lezen en delen!

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

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