Webrichtlijnen Made Easy

Transcriptie

1

2 Webrichtlijnen Made Easy De nieuwe richtlijnen voor toegankelijkheid, uitgelegd in begrijpelijk Nederlands Het e-book is geoptimaliseerd voor gebruik op een e-reader. Meer hierover kun je lezen op Uitgever: Auteur: Met dank aan: Datum: Datum 1e versie: The Internet Academy Jaap van de Putte, The Internet Academy Jules Ernst, trainer bij The Internet Academy en eigenaar van 200 OK Martijn Houtepen en Wilco Fiers, Accessibility 2 februari december 2014 Bronnen: WebAIM, WCAG 2.0, Webrichtlijnen, Dit e-book hoort bij: de opleiding Webmanager de training Webrichtlijnen 2 Made Easy Copyright (C) 2016 Jaap W.B. van de Putte Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is available on

3 1. Inleiding Richtlijnen voor een toegankelijke website Opbouw WCAG 2.0 en Webrichtlijnen Waarneembaar Bedienbaar Begrijpelijk Robuust Universeel De verschillen met Webrichtlijnen versie Zelf toetsen Zelf testen met een screenreader Waarneembaar Afbeeldingen Kleur en contrast Geo-informatie Semantiek Video en audio Tabellen Bedienbaar Bedienbaar met toetsenbord en muis Skiplinks naar onderdelen van je site Zichtbaar zijn waar je bent Koppen Hyperlinks Plaatsaanduiding

4 5. Begrijpelijk Taal van de pagina Taal van tekstfragmenten Begrijpelijke taal Robuust en universeel Correcte HTML-code Taalkeuze Inline frame of iframe Javascript in aparte bestanden Duidelijke foutmeldingen Duidelijke webadressen Bijzondere onderwerpen Video en audio Pdf en andere digitale documenten Geo-informatie Formulieren Afwijken van WCAG Gebruik geen CAPTCHA's Voorzie video altijd van ondertiteling Plaats bij een video altijd een transscript Zorg altijd voor een goed contrast Zorg altijd voor keyboard-focus Zorg dat links betekenisvol zijn Geef dit aan je vormgever Kleur van letters Afbeeldingen van tekst

5 9.3 Voorkom narcisme of organisatiegericht denken Toegankelijkheid en overheden Europese Unie: eigen websites moeten toegankelijk zijn Je moet voldoen, mits een hele goede reden Geen boetes als je niet voldoet Voldoen aan toegankelijkheid is slim en sociaal Conformiteit claimen van een webpagina Toegankelijkheidsverklaring Toetsen kan iedereen Omvang van de toets Opbouw steekproef Principes, richtlijnen en succescriteria Principe 1: Waarneembaar Principe 2: Bedienbaar Principe 3: Begrijpelijk Principe 4: Robuust Principe Universeel

6 1. Inleiding In dit e-book bespreken we de Webrichtlijnen versie 2. Het doel van dit e-book is om de richtlijnen op een begrijpelijke manier uit te leggen. We hopen dat we daar enigszins in zijn geslaagd. De Webrichtlijnen zijn uiterst complex. Zelfs de experts weten niet altijd precies wat nu wel en wat nu niet is toegestaan. Wat we hier gedaan hebben is de essentie proberen te verwoorden en de belangrijkste issues aan te kaarten. Dit boek is echter verre van compleet. Onze missie is om je een basisbegrip van de richtlijnen te bieden en je voldoende vertrouwen te geven om ermee aan de slag te gaan. Alle succescriteria zijn in het laatste hoofdstuk in dit e-book opgenomen. Dit e-book net als onze andere e-books wordt gevoed door lezers zoals jij. Heb je een opmerking, bijvoorbeeld een taalfout, een onwaarheid of een aanvulling, laat het ons graag weten. Wij verwerken dat en plaatsen weer een nieuwe versie van het e-book online. Nog even een reclameblokje: wij geven ook trainingen over dit onderwerp: Training WCAG en de Webrichtlijnen (2 dagen) Opleiding Webmanager (12 dagen) Zo, genoeg woorden. Aan de slag. Veel leesplezier. 6

7 2. Richtlijnen voor een toegankelijke website Digitale toegankelijkheid gaat over de bruikbaarheid van digitale content voor mensen die op een of andere manier beperkt zijn in het gebruik hiervan. De richtlijnen hiervoor zijn de Web Content Accessibility Guidelines (WCAG), in Nederland aangevuld met een 5e principe tot de Webrichtlijnen. 2.1 Opbouw WCAG 2.0 en Webrichtlijnen 2 De internationele richtlijnen voor webtoegankelijkheid zijn de Web Content Accessibility Guidelines (WCAG), versie 2.0. De Nederlandse overheid hanteert de Webrichtlijnen. Hierin is WCAG volledig opgenomen en er is nog een set van richtlijnen aan toegevoegd. Webrichtlijnen is opgebouwd uit: 5 principes (4 WCAG + 1 extra Webrichtlijnen) 22 richtlijnen (12 WCAG + 10 Webrichtlijnen) 51 succescriteria op niveau A en AA (41 WCAG + 10 Webrichtlijnen) Een groot aantal technieken: het aantal hiervan is variabel. 7

8 De principes, richtlijnen en succescriteria zijn vast en veranderen niet meer. We noemen dit deel normatief: het is de norm. De technieken veranderen: er komen technieken bij en er kunnen technieken afvallen. De technieken noemen we het informatieve deel. Principes WCAG bevat 4 principes: Waarneembaar (Perceivable) Bedienbaar (Operable) Begrijpelijk (Understandable) Robuust (Robust) In het Engels zijn ze af te korten tot het acroniem (en ezelsbruggetje) POUR. De Webrichtlijnen voegen daar nog een 5e principe aan toe: Universeel. Richtlijnen De principes bestaan uit 22 richtlijnen (12 WCAG-richtlijnen en 10 extra vanuit de Webrichtlijnen). Voorbeeld van een richtlijn Richtlijn 2.1 Toetsenbordtoegankelijk: Maak alle functionaliteit beschikbaar vanaf een toetsenbord Succescriteria De richtlijnen omvatten succescriteria, ingedeeld in 3 niveaus: A, AA en AAA. Criteria van niveau A zijn het eenvoudigst om aan te voldoen, niveau AAA is het meest complex. Op niveau A en AA zijn er 51 criteria. Deze succescriteria staan centraal bij het toetsen van je website en staan ook centraal in dit e-book. Het toetsen van een website gebeurt op basis van de succescriteria. 8

9 Voorbeeld van een succescriterium Toetsenbord: Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten. (Niveau A) Helaas is de leesbaarheid van de succescriteria bijzonder slecht, zoals je wellicht hierboven al gemerkt hebt. We zullen je daarom niet teveel lastig vallen met de volledige omschrijvingen van de succescriteria. In Nederland geldt voor overheden de verplichting dat websites voldoen aan niveau A en AA. De criteria van niveau AAA zijn soms zeker zinvol om na te streven, maar volledig voldoen aan niveau AAA is bijna niet haalbaar. Zelfs het W3C zelf uitgever van WCAG adviseert om niveau AAA niet na te streven. Technieken Onder de succescriteria hangen weer technieken. Met deze technieken kun je beoordelen of je voldoet. Er zijn 3 soorten technieken: afdoende techniek: gebruik je deze techniek, dan voldoe je aan het succescriterium. aanbevolen techniek: deze techniek biedt extra toegankelijkheid, maar gebruik alleen is niet afdoende afgekeurde techniek: dit is een techniek die fout is en zorgt dat je niet aan het succescriterium voldoet. Voorbeeld van een afdoende techniek H91: Using HTML form controls and links De technieken zijn genummerd en voor het nummer staat een of meerdere letters. Enkele voorbeelden: G: General: een algemene techniek H: HTML-techniek PDF: PDF-techniek FLASH: Flash-techniek 9

10 Het aantal technieken is wisselend, want er komen technieken bij en er vallen technieken af. De technieken zijn het dynamische deel van WCAG en de Webrichtlijnen. De principes, richtlijnen en succescriteria zijn onveranderlijk. Zo, dat is in een notendop hoe de Webrichtlijnen in elkaar zitten. WCAG of Webrichtlijnen De Webrichtlijnen zijn verplicht voor overheden. Organisaties uit andere sectoren, die hun site toegankelijk willen maken, kunnen zich beperken tot WCAG. Maar ook voor hen kan het zinvol zijn om sommige succescriteria uit de Webrichtlijnen mee te nemen, want ze dragen ook bij aan de kwaliteit van de website. 2.2 Waarneembaar Het 1e principe van WCAG is waarneembaar. Voor het waarnemen van digitale informatie gebruiken we 3 zintuigen: ogen, oren en tast (voor onder andere braille). Hieronder een voorbeeld van een braille-leesregel. 10

11 Als iemand informatie niet kan zien, dan kan hij deze mogelijk wel waarnemen als de informatie is omgezet naar hoorbare of voelbare informatie. Voorbeeld: blind Een afbeelding is niet zichtbaar voor iemand die blind is (zie schema hieronder). Je kunt deze afbeelding voorzien van alternatieve tekst (1). Deze kan voor hen worden opgelezen (2) of worden uitgevoerd op een braille-leesregel (3). De informatie gaat dus van visueel eerst naar tekst en vanuit tekst weer naar auditief en tactiel. Bij video kan informatie die zichtbaar is ook worden toegevoegd als spraak (audiodescriptie) (4). Het extra voordeel van het omzetten van visuele informatie naar tekst is dat zoekmachines de content zo ook kunnen indexeren. 11

12 Voorbeeld: doof Iemand die doof is kan bijvoorbeeld de spraak bij een video niet horen (zie afbeelding hieronder). Zij hebben dus ondertiteling nodig. Dat kan door in een speciaal tekstbestand de tekst op te slaan (1). Deze wordt dan als ondertiteling bij de video getoond (2). Dat zijn closed captions. Deze ondertiteling kan ook worden uitgevoerd naar een braille-leesregel (3) en deze is ook beschikbaar voor zoekmachines. Ook kan de ondertiteling in de video worden gebrand (4); de tekst is dan niet als losse tekst beschikbaar en ook niet indexeerbaar door zoekmachines. Doof-blinden krijgen de tekst als braille of via gebarentaal. Zij voelen de gebaren in de handen van de ander (zie afbeelding hieronder). 12

13 Er is ook een grote groep mensen die slechtziend of slechthorend is. Voor hen hoeft de informatie niet omgezet worden, maar helpt het als het zien of horen makkelijker gemaakt wordt. Bijvoorbeeld door te zorgen voor voldoende contrast tussen tekst en achtergrond. Of voor voldoende verschil in voorgrondgeluid en achtergrondgeluid in een video. 2.3 Bedienbaar Het 2e principe van WCAG is dat content bereikbaar moet zijn. De hulpmiddelen hiervoor zijn het toetsenbord en de muis. En tegenwoordig nog het aanraakscherm (touchscreen), maar dit is in deze context vergelijkbaar met de muis. Ook hier is de redenering weer analoog aan de zintuigen. Mensen die de muis niet kunnen gebruiken, zijn aangewezen op het toetsenbord. Alles moet dus werken met het toetsenbord. Andersom zijn er mensen die geen of moeilijk een toetsenbord kunnen gebruiken, zoals mensen met een hoge dwarslaesie. Voor hen is het weer belangrijk dat alles met de muis werkt. 2.4 Begrijpelijk Het 3e principe is begrijpelijk. Content moet begrijpelijk zijn voor mensen die laaggeletterd zijn. Ook moet duidelijk zijn in welke taal een tekst wordt aangeboden, want dit is belangrijk wanneer de tekst wordt omgezet naar spraak. Bij dit principe zijn de succescriteria op niveau AAA interessant om ook mee te nemen. Deze hebben we daarom ook verwerkt in het volgende hoofdstuk. 13

14 2.5 Robuust Bij robuust, het 4e principe, gaat het erom dat browsers en andere lezers van de HTML-code op een juiste manier de code interpreteren. Als er bijvoorbeeld <h1> in de code staat, dan moet de browser weten dat hij hiervan een kop 1 moet maken. HTML kun je zien als een taal. HTML heeft ook een grammatica. Nu is het van belang dat websites zich houden aan deze grammaticale regels. Alleen dan heb je enige garantie dat je content ook goed wordt gepresenteerd. Het principe Robuust stelt vrij milde eisen. HTML hoeft niet foutloos te zijn, maar in de basis moet deze wel goed omgezet kunnen worden door een browser. 2.6 Universeel Webrichtlijnen 2 bevat naast de 4 principes van WCAG nog een 5e principe: het principe Universeel. De richtlijnen van dit principe gaan over verschillende onderwerpen, zoals betere techniek en betere zoekmachinevriendelijkheid. 2.7 De verschillen met Webrichtlijnen versie 1 Er zijn heel veel verschillen tussen versie 1 en 2. Grofweg zijn er 2 belangrijke verschillen: Alle content moet toegankelijk zijn. Dus ook PDF. Maar: ontoegankelijk mag, alleen moet je dan wel een toegankelijk alternatief bieden. Dit geldt alleen niet voor video, die moet altijd toegankelijk zijn. (Ook weer niet altijd, zie daarvoor paragraaf 3.4.) Door sommigen worden de nieuwe richtlijnen wel verguisd vanwege de onhaalbaarheid van PDF-toegankelijkheid. Het zou echter aan de andere kant vreemd zijn dat alles toegankelijk gemaakt moet worden, maar dat het wel ontoegankelijk mag zijn als je het in een PDF stopt. De nieuwe verplichting voor de toegankelijkheid van PDF heeft als positieve effect dat er veel meer discussie is over het nut van PDF. En of dat nog wel een integraal onderdeel moet zijn van je digitale communicatie. De 2e verandering is dat content ontoegankelijk mag zijn. Maar dan moet je wel een toegankelijk alternatief bieden, direct bij de ontoegankelijke content. Dat kan makkelijk zijn, bijvoorbeeld als je graag toch een PDF wilt aanbieden en deze niet 14

15 toegankelijk kunt maken. Als je naast deze PDF ook de content toegankelijk aanbiedt, bijvoorbeeld in HTML, dan voldoe je volgens de nieuwe richtlijnen ook. Wel geldt de eis dat deze ontoegankelijke content de toegang tot andere delen van de pagina niet mag blokkeren. Dat is het principe van non-interferentie. Dus een carrousel die ontoegankelijk is, mag niet de toegang tot de hele pagina blokkeren, bijvoorbeeld omdat de carrousel bij elke wisseling de spraakuitvoer opnieuw start. 2.8 Zelf toetsen Er zijn online veel toetsen waarmee je vrij eenvoudig veel richtlijnen kunt toetsen. We hebben deze beschreven in ons e-book Webtechniek. Wat niet in het e-book Webtechniek staat is de software voor spraakuitvoer. Daarom even een heel kort stukje hierover. 2.9 Zelf testen met een screenreader Tekst in de site kan met een zogenaamde screenreader worden omgezet in spraak voor spraakuitvoer en in braille voor uitvoer op een braille-leesregel. Zie het begin van het hoofdstuk voor een afbeelding van zo'n braille-leesregel. Om een idee te krijgen van de toegankelijkheid van je tekst kun je een screenreader downloaden. Even een waarschuwing: het gebruik is nogal complex en zeker de 1e keren frustrerend. Neem er even de tijd voor om het te leren (een dagdeel) of vraag iemand die werkt met screenreaders om uitleg (zeker een paar uur...). Meer hierover kun je lezen op De volgende screenreaders kun je gebruiken: JAWS, Job Access With Speech, is een betaald programma, maar kun je in een probeerversie 40 minuten gebruiken. Daarna moet je de computer herstarten voor een volgende 40 minuten. JAWS werkt alleen op Windows met een recente versie van Internet Explorer NVDA, NonVisual Desktop Access, is een gratis reader, die alleen werkt op Windows en dan nog het liefst met Firefox. Voiceover: zit standaard op de Apple-computers en werkt alleen met Safari. 15

16 3. Waarneembaar Waarneembaar betekent dat iemand het moet kunnen waarnemen, ook al is hij blind, doof, slechthorend of slechtziend. 3.1 Afbeeldingen Omschrijving Afbeeldingen kunnen betekenis overbrengen of decoratief zijn. Brengt een afbeelding betekenis over, dan moet je zorgen dat deze informatie er ook is voor mensen die de afbeelding niet kunnen zien. Succescriteria Niet-tekstuele content (niveau A) Afbeeldingen van tekst (niveau AA) Pauzeren, stoppen en verbergen (niveau A) Drie flitsen of onder de drempelwaarde (niveau A) Toepassen Een uitgebreidere uitleg vind je in ons e-book Toegankelijk schrijven voor het web. Betekenisvolle afbeeldingen Brengt een afbeelding betekenis over, dan moet je deze afbeelding voorzien van een alternatieve tekst. Deze tekst verwoordt wat er op de afbeelding is te zien. Deze tekst plaats je met het alt-attribuut. Dat hoeft niet met het title-attribuut. Wel goed: <img src="monkeys.png" alt="2 apen in een boom" /> Hieronder is het title-attribuut gebruikt. Dat is niet goed. 16

17 Niet goed: <img src="monkeys.png" title="2 apen in een boom" /> <img src="monkeys.png" alt="2 apen in een boom" title="2 apen in een boom" /> Mensen die spraaksoftware gebruiken krijgen in bovenstaand voorbeeld opgelezen 2 apen in een boom 2 apen in een boom, dus 2 keer hetzelfde. Ook daarom is het dus beter om het title-attribuut niet te gebruiken. Is de afbeelding ook aanklikbaar, dan geeft de tekst de bestemming van de afbeelding aan. <a href=" src="icon-twitter.png" alt="twitter" /> Niet-informatieve afbeeldingen Op bijna elke site zijn er ook afbeeldingen, die geen extra informatie overbrengen. Sommige daarvan zijn enkel bedoeld als decoratie. Zo'n afbeelding staat bij voorkeur in de CSS. Kan dat niet, plaats deze dan in de HTML met een leeg alt-attribuut. <a href="/afval/"><img src="trash.png" alt="" />Afvalkalender</a> Er zijn ook vaak afbeeldingen die wel informatie overbrengen, maar waarbij die informatie ook al in de tekst op de pagina staat. In dat geval mag je ook de alt-tekst leeg laten, want de leesbare tekst is dan voldoende. Betekent dit dat je bijna alle afbeeldingen niet-informatief zijn? En dat een alt-tekst dus bijna altijd leeg kan blijven? Ja, dat klopt. Mijns inziens is in de praktijk de alttekst bijna nooit nodig. Afbeeldingen van tekst In WCAG 2.0 mag je geen afbeeldingen van tekst meer gebruiken, zoals de banner hieronder van de afvalkalender. 17

18 Dergelijke banners moet je opmaken met HTML/CSS, zodat de tekst apart is van de afbeelding. Hieronder zie je een voorbeeld waarin dat wel goed is gedaan: Hieronder nog een voorbeeld. De banner is opgebouwd uit 3 elementen: foto van het zwembad half doorzichtige grijze afbeelding tekst Via CSS wordt het samengevoegd tot 1 banner. 18

19 Bewegende afbeeldingen Er zijn nogal wat overheidssites die een carrousel op de homepage hebben, waar ze nieuws tonen. Deze carrousel bestaat uit enkele afbeeldingen, vaak ook tekst, en deze beweegt automatisch van de ene afbeelding naar de andere. WCAG zegt dat je dergelijke bewegende (on)dingen moet kunnen starten en stoppen (pauzeren). Ook moet de carrousel bedienbaar zijn met enkel het toetsenbord. Complexe afbeeldingen Complexe afbeeldingen zijn bijvoorbeeld grafieken of infographics. Het makkelijkst is het om een gelijkwaardig alternatief in de omringende tekst aan te bieden. Een andere mogelijkheid is de beschrijving in een aparte pagina te plaatsen. Naar die pagina is een link of een verwijzing via een longdesc-attribuut. Er zijn ook meer technische oplossingen, bijvoorbeeld om met JavaScript grafieken te genereren, die volledig toegankelijk zijn. Flitsen in afbeeldingen en video Een afbeelding of video mag niet hele snelle flitsen bevatten, want dat kan epilepsie veroorzaken. 3.2 Kleur en contrast Omschrijving Als je minder goed waarneemt, dan is voldoende contrast tussen kleuren belangrijk. Ook mag je niet alleen met kleur betekenis overbrengen. Succescriteria Gebruik van kleur (niveau A) Contrast, minimum (niveau AA) 19

20 Toepassen Betekenis niet alleen met kleur overbrengen Als je informatie overbrengt met alleen kleur, dan kan het zijn dat iemand met kleurenblindheid dit niet begrijpt. In de afbeelding hieronder is dat goed zichtbaar bij een verkeerslicht. De pijl naar rechts is rood (rechtsaf mag niet). Ben je roodgroen-kleurenblind, dan zie je niet dat de pijl rood is. Bron: Maatschappelijke belemmeringen voor kleurenblinden In het geval van dit verkeerslicht wordt dus informatie alleen met kleur overgebracht. Normaal wordt bij een stoplicht de informatie, behalve met kleur, ook met de positie overgebracht. Een ander voorbeeld is de afbeelding hieronder van de afvalkalender van een gemeente. Met kleur is aangegeven wanneer bepaald afval wordt opgehaald: restafval is grijs, GFT is bruin en papier is groen. De onderste afbeelding is het beeld dat iemand met rood-groen-kleurenblindheid ziet. Het onderscheid tussen GFT en papier is niet of nauwelijks meer zichtbaar. 20

21 De oplossingen zijn vaak makkelijk, zoals in het voorbeeld hierna van een kaart. Linksboven het origineel (1), linksonder de versie bij kleurenblindheid (2). Het 21

22 onderscheid dat met rood-groen was aangebracht is verdwenen. Rechtsboven (3) en rechtsonder (4) de aangepaste afbeelding. Hierbij is de betekenis ook met een icoontje van een huis en een boom overgebracht. En zo blijft de afbeelding ook begrijpelijk als je minder goed kleuren ziet. Bron: Geonovum Linkkleur en linkvorm Een link hoeft niet meer blauw en onderstreept te zijn (alhoewel daar ook niets op tegen is). Belangrijk is dat de kleur die je gebruikt een contrastwaarde heeft van minimaal 3:1 met de normale tekst. En er moet een verandering van vorm zijn: de link moet bijvoorbeeld onderstreept zijn of worden bij mouse-over. Contrast Tekst moet in kleur afwijken van de achtergrond, anders is de tekst niet goed te zien. Het minste contrast heb je bijvoorbeeld bij een witte tekst op een witte 22

23 achtergrond. Zwarte tekst op een witte achtergrond is het maximale contrast wat je kunt krijgen. Voor contrast is een maat, contrastratio. Wit op wit heeft een contrastratio van 1:1, wit op zwart 21:1. De Webrichtlijnen eisen dat het contrast minimaal 4,5 moet zijn (vaak korten we het af tot alleen het eerste getal). Wil je een beter contrast, kies dan voor minimaal 7. Dat is het vereiste contrast bij niveau AAA. In het algemeen is zwart op wit het beste leesbaar. Voor sommige mensen is dat contrast juist te hoog, dan is het wit te wit. Voor hen kan het prettig zijn als de achtergrond licht grijs is. Ten onrechte wordt vaak verondersteld dat je daarom beter grijze tekst op een witte achtergrond kunt hebben, maar dat is voor iedereen slechter leesbaar. Let er op dat het contrast ook goed is bij de verschillende versies van een link: bij mouse-over (hover) als je er met de muis of cursor op staat (focus) als je er op klikt (active) als de link bezocht is (visited) Voor grote tekst geldt dat het contrastratio minimaal 3 moet zijn. Dus voor koppen mag het contrast iets lager zijn dan voor gewone tekst. Je kunt contrast en het effect van kleurenblindheid goed zelf testen: Color blindness simulator, add on voor Firefox Colour Contrast Analyser (Win en Mac) Geo-informatie Kaarten zoals Google Maps zijn heel handig, maar ze zijn niet altijd toegankelijk. In hoofdstuk 7 besteden we hier apart aandacht aan. Heel in het kort kun je alvast het volgende meenemen: een kaartje mag ontoegankelijk zijn, als je ook een toegankelijk alternatief biedt. Dit toegankelijke alternatief moet wel direct aangeboden worden bij de ontoegankelijke kaart. 23

24 3.4 Semantiek Omschrijving Semantiek of betekenisvol opmaken is een van de basisprincipes van het internet. Met semantiek bedoelen we dat we duidelijk maken wat de betekenis is van bepaalde informatie. Dan doen we door meta-informatie aan tekst mee te geven. Zeg maar de code onder water, die aangeeft wat de betekenis is van de tekst. Voorbeeld Je hebt bijvoorbeeld een artikel met als titel Fietsen in Nederland. Ziende mensen zien door de opmaak van de pagina dat dit de titel is, maar Google ziet niet of iets groot of vet is en weet dan niet wat de titel is. Met HTML-code kun je wel de betekenis duidelijk maken. De code wordt dan: <h1>fietsen in Nederland</h1>. Op deze manier hebben we betekenis toegevoegd aan de tekst. Zo is duidelijk voor Google, maar ook voor gebruikers van spraakuitvoer en braille-uitvoer, dat deze tekst de titel is van de pagina. Door bij teksten de juiste opmaakstijlen te kiezen voeg je deze semantiek toe aan de teksten. Succescriteria Niet-tekstuele content (niveau A) (specifiek frametitels) Info en relaties Toepassen Wellicht het bekendste voorbeeld voor semantiek is het gebruik van kopstijlen voor alle koppen op je pagina: de titel bovenaan heeft een h1-stijl, de tussenkoppen h2 en de koppen van het volgende niveau h3, zie het voorbeeld hieronder. 24

25 Voorbeeld <h1>zoogdieren</h1> <h2>olifanten</h2> <h3>afrikaanse olifant</h3> <h3>aziatische olifant</h3> <h2>leeuwen</h2> [enzovoort] Een ander voorbeeld is het HTML-element strong (vet). Dit heeft de betekenis nadruk. Je mag daarom dit element niet gebruiken om hele zinnen of koppen vet te maken. Je mag best zorgen dat het er vet uitziet, maar dat doe je met CSS. De CSS ziet er dan bijvoorbeeld zo uit:.summary { font-weight:bold; } Enkele andere voorbeelden van betekenisvol opmaken: Opsommingen Frametitels Tabelkoppen Een uitgebreide uitleg van betekenisvol opmaken vind je in ons Handboek Toegankelijk schrijven voor het web. Het op deze manier betekenisvol opmaken van je tekst is belangrijk voor de vindbaarheid in Google, maar ook voor mensen met screenreaders. Er zijn nog veel meer mogelijkheden om betekenis aan teksten toe te voegen, onder andere met rich snippets. Zie voor meer informatie 25

26 3.5 Video en audio Omschrijving Video waarin gesproken wordt is zonder ondertiteling niet te begrijpen voor dove mensen. Voor hen is ondertiteling erg belangrijk. Daarnaast zijn er meer mensen die baat hebben bij ondertiteling, bijvoorbeeld laaggeletterden en mensen die geen geluid kunnen afspelen. Voor geluidsopnames, zoals podcasts, geldt om dezelfde redenen dat er een tekstalternatief moet zijn. Ondertiteling kan als los bestand bij de video worden aangeboden. De ondertiteling kan dan aan en uitgezet worden. Deze vorm van ondertiteling heet closed captions. Vergelijk dit met een videofilm, die je huurt of koopt en waarbij je ook kunt kiezen of je ondertiteling uit- of aanzet. Een andere vorm van ondertiteling is als deze in de video zit. Je kunt deze dan niet uit- of aanzetten. Deze vorm heet open captions. Een video moet ook begrijpelijk zijn voor blinden. Soms is er daarom aanvullend nog spraak nodig. Dit heet audiodescriptie. Succescriteria Geluidsopnames en video-opnames zonder geluid (niveau A) Ondertiteling bij video-opnames (niveau A) Tekstalternatief bij video-opnames (niveau A) Ondertitels voor doven en slechthorenden, live video (niveau AA) Audiodescriptie bij video-opnames (niveau AA) Geluidsbediening (niveau A) U.7.1 Alternatief voor geneste weergavekaders (niveau AA) Toepassen WCAG is wat ingewikkeld te lezen op dit onderdeel, maar eigenlijk is het vrij makkelijk wat er nu precies verplicht is. Het gaat om de volgende aspecten: de video zelf de player de wijze waarop de player is geplaatst 26

27 Toegankelijkheid video Als de video talige informatie overbrengt: Niveau A en AA: ondertiteling (captions) NIveau A: audiodescriptie óf volledig transcript Niveau AA: audiodescriptie Een video die niet-talig is hoeft geen ondertiteling of audiodescriptie. Bijvoorbeeld een 360-graden-video van een trouwzaal van een gemeente. Bestandsformaat video Het is voldoende om de video alleen in MP4-formaat aan te bieden. WMF (Windows Media Player) hoeft niet. De player Bruikbaar met toetsenbord Knopjes voor ondertiteling en indien gebruikt audiodescriptie Plaatsing in de site Via iframe (MPEG4-video en HTML5): met toetsenbord bij de video komen en er weer uit komen aparte link naar de video binnen of onder het iframe Via object-element (Flash-video): met toetsenbord bij de video komen en er weer uit komen Het is voldoende om het volgende te plaatsen: de video, voorzien van ondertiteling en eventueel audiodescriptie downloadversie waarbij ondertiteling en audiodescriptie in de mp4 zijn ingebakken als je het goed wil doen: volledig transcript (txt-formaat) Ondertitelen Video met spraak moet ondertiteld worden, om 3 redenen: 1. Voor de 1,5 miljoen doven en slechthorenden in Nederland. 2. Voor een ongeveer even grote groep van mensen die geen geluid kunnen gebruiken, bijvoorbeeld omdat ze in de trein zitten, omdat ze op een flexibele werkplek 3. Ondertiteling maakt een video beter vindbaar, want de tekst is indexeerbaar en maakt aan een zoekmachine duidelijk waar de video over gaat. 27

28 Transcript Het is handig om een transscript aan te bieden. Dat maakt de video ook bruikbaar voor doof-blinden en de video kan beter geïndexeerd worden door zoekmachines. Audiodescriptie Video waarin ook informatie te zien is bijvoorbeeld de naam van een spreker moet ook voorzien zijn van extra spraak. Bij de productie van de video kun je al voorkomen dat audiodescriptie nodig is. Tips om je video toegankelijk te produceren vind je in het artikel 10 tips voor de productie van een toegankelijke video. Het aanbieden van audiodescriptie kon tot voor kort alleen met Flash. Het is nu ook mogelijk met HTML5, zie bijvoorbeeld Ook bij live-video WCAG 2.0 eist op het niveau AA ook dat live-video ondertiteld is. Dat is gezien de kosten voor sommige organisaties niet haalbaar. Het live ondertitelen kost ongeveer per dagdeel. Dat is voor een congres wellicht haalbaar, maar niet bij een tweewekelijkse raadsvergadering van de gemeenteraad. 3.6 Tabellen Omschrijving Het doel van een tabel is het bondig en overzichtelijk weergeven van een grotere hoeveelheid informatie. Vaak zijn dit getallen, maar het kan ook gewoon tekst zijn. Succescriteria Info en relaties (niveau A) U.1.1 Semantisch correcte opmaak (niveau A) Toepassen Een tabel, die data presenteert, is in principe heel handig en toegankelijk, mits de tabel goed is opgemaakt. Een tabel goed opmaken is meestal niet erg ingewikkeld. Belangrijk is dat je de tabelopbouw eenvoudig houdt. Uitgebreide informatie over tabellen vind je in ons e-book Toegankelijk schrijven voor het web. 28

29 4. Bedienbaar 4.1 Bedienbaar met toetsenbord en muis Omschrijving Mensen die blind zijn kunnen geen muis gebruiken, want ze zien niet waar de muis zich op het beeldscherm bevindt. Zij zijn dus voor de invoer aangewezen op het toetsenbord. Ook voor mensen met motorische problemen of mensen met RSI kan het gebruik van de muis moeilijk zijn. Een groot verschil tussen het werken met een toetsenbord en een muis is dat het werken met een toetsenbord altijd lineair is. Met een muis kun je direct op een link klikken, waar die ook op de pagina staat. Met een toetsenbord begin je normaal gesproken linksboven en moet je alle links een voor een langs om te komen bij de link die je aan wilt klikken. Succescriteria Betekenisvolle volgorde (niveau A) Toetsenbord (niveau A) Toetsenbordval (niveau A) Blokken overslaan (niveau A) Focus zichtbaar (niveau AA) Toepassen Alles moet bereikbaar zijn met het toetsenbord. Dat gaat soms mis bij video. De video is dan niet bereikbaar met het toetsenbord of als je in de video zit kom je er niet meer uit. Dat heet een toetsenbordval. Een andere probleem is verkeerd geïmplementeerd JavaScript. Bij het tabben door de site blijf je haken op een tekst, waar dit script onderzit. Je kunt zelf heel eenvoudig testen of je website toetsenbordtoegankelijk is. Kijk of je met de tab-toets door de hele site kunt navigeren. Kijk vooral of je ook bijvoorbeeld een video kunt afspelen: kun je bij de video komen en kun je ook weer de video verlaten, enkel met toetsenbord? 29

30 4.2 Skiplinks naar onderdelen van je site Omschrijving Voor zowel mensen die alleen een toetsenbord gebruiken (dus geen muis) of die gebruik maken van spraakuitvoer of braille-uitvoer, is het belangrijk dat zij blokken content kunnen overslaan. Bijvoorbeeld dat ze direct bij de hoofdinhoud van een pagina kunnen springen. Blokken overslaan kan heel goed met zogenaamde 'skiplinks'. Normaal zie je die niet, maar als je door de site tabt worden die wel zichtbaar. Probeer dat maar eens op onze site, Als je met de tabtoets door de site gaat, worden de skiplinks zichtbaar, bijvoorbeeld de skiplink Naar hoofdinhoud. Deze zichtbaarheid is handig voor toetsenbordgebruikers. Gebruikers van screenreaders komen deze skiplinks als een van de eerste links tegen en kunnen zo ook makkelijk delen van de pagina overslaan. Deze skiplinks worden vaak zichtbaar als je mobiel browst. Dat is gelijk het extra voordeel: de skiplinks maken het navigeren voor mobiele gebruikers ook een stuk makkelijker. 30

31 Succescriterium Blokken overslaan (niveau A) Toepassen De skiplinks worden in de template van je website ingebouwd. De skiplinks zijn normaal niet zichtbaar omdat ze via de CSS buiten beeld zijn geplaatst. Hoe het verder technisch precies werkt voert hier te ver. Online zijn er veel voorbeelden, bijvoorbeeld op Zichtbaar zijn waar je bent Omschrijving Succescriterium geeft aan dat zichtbaar moet zijn waar je met de tab-toets in de site bent. Normaal geeft je browser een stippellijntje om de link waar je op dat moment bent (de focus), zoals hieronder is te zien (stippellijntje om Programma). Webbouwers halen dit lijntje soms weg en dat is niet de bedoeling. 31

32 Succescriterium Focus zichtbaar Toepassen 1. Ga met je tabtoets door je site en controleer of je steeds kunt zien waar je met de tabtoets zit. 2. Zie je dat niet, dan is de focus mogelijk verwijderd door de webbouwer. Let er ook dat de focus zichtbaar is bij aanklikbare afbeeldingen. 4.4 Koppen Omschrijving Koppen geven een pagina betekenis en structuur. Vandaar dat het belangrijk is dat de kopteksten betekenisvol zijn en dat je ook de juiste kopstijlen gebruikt. Succescriteria Paginatitel (niveau A) Koppen en labels (niveau AA) U.1.3 Kopregelhiërarchie (niveau A) Toepassen Zie voor meer informatie ons Handboek Toegankelijk schrijven voor het web. 32

33 Paginatitel Een webpagina moet een titel hebben die het onderwerp of doel beschrijft. Deze titel heeft het opmaakprofiel h1. De titel kun je zien als een ultrakorte samenvatting van de pagina. Tussenkoppen Behalve de kop bovenaan de pagina is het ook belangrijk dat de tussenkoppen betekenisvol zijn. De tussenkoppen kun je zien (en zou je moeten kunnen lezen) als een inhoudsopgave van de pagina. Kopregelhiërarchie Voor het opmaken van koppen gebruik je HTML-kopstijlen, zoals h1, h2 en h3. Met deze koppen geef je de structuur aan van de pagina. Zorg dat de volgorde van de koppen logisch is: Na een h1 volgt altijd een h2. Na een h2 kan weer een h2 of een h3 volgen. Na een h1 kan NIET een h3 volgen. 4.5 Hyperlinks Omschrijving Bij een link moet duidelijk zijn waar de link naar toegaat, anders wordt het een grote verrassing als je erop klikt. Succescriteria Linkdoel, in context (niveau A) Toepassen Het succescriterium is vrij soepel: niet per se de link hoeft betekenisvol te zijn, maar de context waarin de link staat. Dus dit is ook goed: Meer over de nieuwe burgemeester leest u hier. De context kun je definiëren als het HTML-element waarbinnen de linktekst staat, bijvoorbeeld een alinea. 33

34 Wat ons betreft is die soepelheid jammer en slecht voor toegankelijkheid. Ons advies is daarom om altijd de linktekst zelf betekenisvol te maken. Zie ook onze opmerkingen hierover in het hoofdstuk 'Afwijken van WCAG'. Zie voor meer informatie ons Handboek Toegankelijk schrijven voor het web. 4.6 Plaatsaanduiding Omschrijving Het lijkt zo logisch om te schrijven 'In het submenu aan de rechterkant kunt u (...)', maar voor blinden is de rechterkant niet zo logisch. Ook niet voor responsive sites, want daarbij kan het zijn dat wat op een normaal scherm rechts staat op een mobiel scherm eronder komt. Verwijzingen naar de positie rechts of links op een site zijn daarom niet toegestaan. Onder en boven kun je vaak wel gebruiken. Succescriteria Zintuiglijke eigenschappen (niveau A) Toepassen Gebruik geen aanwijzigingen als rechts of links, of 'horizontaal menu'. Hieronder een voorbeeld waarbij verwezen wordt naar een horizontaal menu; voor een blinde is het niet duidelijk welk menu bedoeld wordt. 34

35 5. Begrijpelijk Vreemd genoeg zeggen de WCAG-richtlijnen op het niveau van Level A en AA erg weinig over de begrijpelijkheid van je informatie. Ze zeggen alleen iets over het aangeven van in welke taal een pagina (level A) of een stukje tekst (level AA) op de site wordt aangeboden. Pas op Level AAA wordt het interessant met de richtlijnen voor taalniveau, afkortingen en eenvoudig woordgebruik/ 5.1 Taal van de pagina Omschrijving De taal van de pagina moet in de HTML-code aangegeven zijn. In ons geval is dat meestal Nederlands. Succescriterium Toepassen Bovenaan de pagina staat dit aangegeven, zie het voorbeeld hieronder. <html lang="nl"> 5.2 Taal van tekstfragmenten Omschrijving Als er in een Nederlandse zin een aantal woorden in het Engels staan, dan moet dat ook in de HTML-code worden aangegeven. Dit is belangrijk voor spraakuitvoer, want dan wordt het ook in de juiste uitspraak opgelezen. Ook voor zoekmachines is dit belangrijk, want zij weten dan hoe de tekst geïndexeerd moet worden. Succescriterium Taal van onderdelen Toepassen Heb je 2 of meer woorden in een andere taal dan de taal van de pagina, geef dit aan met het lang-attribuut. Bijvoorbeeld: 35

36 <p>met de leuze <span lang="en">in Search of Excellence</span> probeert deze site zich te onderscheiden van haar concurrentie.</p> Deze lang-tag is vaak niet nodig. Ze is niet nodig in deze situaties: Er is slechts 1 woord in een andere taal, bijvoorbeeld: <p>deze mogelijkheid is een nieuwe feature van het CMS.</p> De tekst is een naam, bijvoorbeeld: <p>het project In Search of Excellence gaat op 3 april van start.</p> Een moeilijke situatie is bijvoorbeeld als je een Engelse pagina hebt in een Nederlandse site. In veel gevallen zijn dan het menu en andere onderdelen in het Nederlands, en is de primaire content in het Engels. Zie het voorbeeld hieronder. Dat kan je dan bijvoorbeeld als volgt oplossen: Kies als basistaal Nederlands. Plaats om de content die in het Engels is een zogenaamde div, en geef deze het lang-attribuut 'en': 36

37 <div lang="en"> <h1>english</h1> [alle Engelstalige content] </div> Je kunt dit ook omdraaien als dat handig is. Dus dan wordt de basistaal Engels en zet je om alle Nederlandstalige delen een lang-attribuut met 'nl'. 5.3 Begrijpelijke taal Omschrijving Er zijn 3 succescriteria op AAA-niveau, die niet verplicht zijn, maar ons inziens wel bijzonder belangrijk: leesniveau, afkortingen en ongebruikelijke woorden. Eigenlijk doen de Webrichtlijnen relatief weinig voor de mensen die laaggeletterd zijn. Waarschijnlijk hebben de blinde en dove groeperingen ooit beter gelobbyd toen de richtlijnen werden opgesteld... Succescriteria Ongebruikelijke woorden (Niveau AAA) Afkortingen (Niveau AAA) Leesniveau (Niveau AAA) Toepassen Leesniveau Om een lang verhaal kort te maken: zorg dat je tekst eenvoudig leesbaar is. Het lange verhaal is dat je tekst geen hoger taalniveau vereist dan van drie jaar middelbaar onderwijs. In Nederland zijn we hiervoor de Europese taalniveaus voor 2e taalverwerving gaan hanteren en gebruiken we B1 als niveau om teksten op te schrijven. Maar nergens is duidelijk gedefinieerd wat dat is en ook is de taalclassificatie bedoeld voor 2e taalverwerving, terwijl wij het hier gebruiken voor een stuk 1e taalverwerving. Er is dus nogal wat af te dingen op de definitie B1niveau. Daarom maar het korte verhaal: hou het eenvoudig. 37

38 Het voert te ver om hier uitgebreider te beschrijven waaraan teksten dan moeten voldoen. Een uitgebreide uitleg staat in ons e-boek Toegankelijk schrijven voor het web. Ongebruikelijke woorden Als er een woord in de tekst staat dat niet veel in onze taal voorkomt, dan moet je dit toelichten. Mensen denken wel eens dat je moeilijke woorden niet mag gebruiken, maar dat is niet waar. Vooral omdat het vaak niet mogelijk is om de woorden te vermijden. Maar als je het woord gebruikt, licht het even toe. Afkortingen De regels voor het goed gebruiken van afkortingen zijn wellicht nog bekend van onze basisschool: Schrijf bij eerste gebruik van een afkortingen deze volledig uit, plaats de afkorting daarna tussen haakjes. Daarna kun je de afkorting gebruiken. Verder: Afkortingen in titels mogen. Wel gelijk daarna uitleggen. Bekende afkortingen mag je gebruiken, zoals PC, airco, GSM en SMS. Hieronder een voorbeeld waarbij een afkorting goed is gebruikt. VWS moet bezuinigen Ook op het ministerie van Volksgezondheid, Wetenschap en Sport (VWS) moet er de komende jaren flink bezuinigd worden. Dat bleek uit de gisteren uitgelekte Miljoenennota. Zie voor een uitgebreidere uitleg het artikel Afkortingen op het web: liever niet. 38

39 6. Robuust en universeel 6.1 Correcte HTML-code Omschrijving Een browser vertaalt HTML-code naar een zichtbaar opgemaakte website. Voor deze vertaling moet de browser weten hoe zij de HTML-code precies moet vertalen. De kans dat dat goed gaat is het grootst als de HTML-code correct is. WCAG stelt daarom een aantal eisen aan de kwaliteit van de HTML. De Webrichtlijnen zijn hierin nog wat strenger: daar mag helemaal geen opmaakcode in de HTML zitten en mag je geen HTML-tags gebruiken voor andere doeleinden gebruiken dan waar ze voor bedoeld zijn. Succescriteria Parsen (niveau A) U.1.1 Semantisch correcte opmaak (niveau A) U.1.2 Geen afgekeurde en afgeraden HTML (niveau A) U.2.1 Opmaak niet in HTML (niveau A) U.8.1 Specificeer UTF-8 (niveau A) Voldoen Voor WCAG moet je op het volgende letten: HTML-elementen hebben een start- en een eindtag. HTML-elementen zijn correct genest. HTML-elementen bevatten geen duplicate attributen. ID's zijn uniek. De Webrichtlijnen voegen daar nog aan toe: Je mag geen opmaakcode in de HTML hebben. Alle opmaakcode staat in CSSbestanden. Een style-attribuut mag dus niet voorkomen. Je moet de HTML-tags gebruiken waar ze voor bedoeld zijn. Dus geen tableelement gebruiken voor lay-out. 39

40 Je mag geen afgekeurde of afgeraden HTML gebruiken. Gebruik niet het style-atttribuut Hieronder een voorbeeld waarbij het style-attribuut is gebruikt: <p style="font-size: 15px">Er zijn in de gemeente Uvelen ongeveer 120 beschermde monumenten.</p> Vaak komt dergelijke code per ongeluk mee met het kopiëren van een tekst vanuit Word. De oplossing is dan meestal om deze code gewoon te verwijderen. Wat je in het voorbeeld hierboven dan overhoudt is: <p>er zijn in de gemeente Uvelen ongeveer 120 beschermde monumenten.</p> Gebruik geen afgekeurde HTML Een voorbeeld van afgekeurde HTML is het valign-attribuut om bijvoorbeeld een tekst in een tabelcel uit te lijnen: <table> <tr> <th>maand</th> <th>uitgaven</th> </tr><tr> <td valign="top">januari</td> <td valign="top"> 250</td> </tr> </table> Deze uitlijning moet je namelijk doen met css en niet met het valign-attribuut. Gebruik UTF-8 De Webrichtlijnen eisen ook dat je de karakterset op je site definieert als UTF-8. Dit is bijzonder belangrijk, want als je dat niet doet, is je site vatbaar voor hacking. Gelukkig gebruiken tegenwoordig vrijwel alle sites dit. Je vindt deze code in het head-gedeelte van de HTML-code van je site. Bij voorkeur staat deze direct onder de <head>tag: 40

41 Gebruik geen inline eventhandlers Alle inline eventhandlers die in de paginabron op de server te vinden zijn, zijn fout. Ongeacht of ze functioneel zijn of niet. Dat kan nogal onhandig zijn. Bijvoorbeeld als je downloads in je webstatistieken wilt meten kan dat handig met een onclick-event. Wat je kan doen is de onclick events toevoegen met javascript, omdat dit succescriterium alleen naar de bron op de server kijkt. Parsen versus valide HTML Een punt dat moeilijk is om goed te begrijpen is het verschil tussen parsen en valideren. Met parsen van HTML wordt bedoeld dat de HTML goed verwerkt moet kunnen worden door de browser. Het omzetten van de code naar een opgemaakte webpagina heet parsen. Valideren betekent dat de HTML valide is, namelijk voldoet aan de officiële specificaties van de HTML-versie van de pagina. De specificaties zijn de grammaticale regels van de HTML-versie. Volgens het principe Robust en ook volgens het principe Universeel hoeft HTML niet te valideren. Met name in toetsingen is het verschil tussen valideren en parsen niet altijd duidelijk. Een voorbeeld dat wij tegenkwamen is <a href=" u= Deze link valideert niet omdat er een ampersand (&) in staat, die niet correct (valide) is geschreven. Echter, dit is niet in strijd met de specificaties van HTML. Dus volgens de Webrichtlijnen mag dit wel. 41

42 6.2 Taalkeuze Omschrijving Als jouw website de content in meerdere talen aanbiedt, dan moet de link naar de andere taal of talen makkelijk zijn te vinden. Dat betekent: op elke pagina op een logische plek op een begrijpelijke manier Succescriterium U.6.1 Taalkeuze (niveau A) Toepassen Net als in Webrichtlijnen 1 is ook in Webrichtlijnen 2 opgenomen dat de taalkeuze makkelijk gemaakt moet kunnen worden. Het gaat bijvoorbeeld om een knop English als de content op een Nederlandse site ook in het Engels wordt aangeboden. Dat betekent onder andere: De taalkeuze is op een logische plek. Dat is eigenljk altijd rechtsboven. De tekst van de taalkeuzes is in de betreffende taal. Dus naar de Engelse variant is het English en naar de Duitse is het Deutsch. Taalaanduiding in de 2letterige ISO-code is ook goed, dus bijvoorbeeld NL en EN. Enkel een vlaggetje van het land is onvoldoende. Nog even wat voorbeelden om het duidelijk te maken. Hieronder een site die met vlaggetjes de taalmogelijkheden aangeeft. Dat is dus niet goed. Het voorbeeld hieronder is ook niet goed: hoe ver kom jij met het herkennen van de vlaggen? 42

43 En hieronder een site waarbij dit wel goed gaat: 6.3 Inline frame of iframe Omschrijving Content die in een frame wordt aangeboden moet ook buiten dat frame worden aangeboden, bijvoorbeeld via een link. In de praktijk gaat het hier bijna altijd om inline frames of iframes. Succescriterium U.8.1 Gebruik van frames Toepassen Er zijn 3 veelvoorkomende situaties waarin iframes regelmatig worden gebruikt: inbedden van video inbedden van twitterstream inbedden van externe applicatie, zoals een formulierenapplicatie Het probleem bij iframes is vaak dat de pagina niet met het toetsenbord is te bedienen: je komt niet bij de content in het iframe of als je in het iframe bent, kom je er met het toetsenbord niet meer uit. Hieronder een voorbeeld waarbij een formulierenapplicatie via een iframe op een site wordt aangeboden. Een iframe is meestal onzichtbaar gemaakt, hier hebben we het iframe met een stippellijntje zichtbaar gemaakt. 43

44 Een video vanaf bijvoorbeeld YouTube of Vimeo kun je embedden op je site. Dat kan op 2 manieren: via een iframe met de oudere object-code Plaats je de video met een iframe, zorg er dan voor dat er ook een link naar de content staat: of binnen de iframe-tags of er direct onder. Plaats je via de objectcode, dan hoef je verder niets te doen. Bij het inbedden van twitter is de beste oplossing om dit server-side te doen. Zie bijvoorbeeld de twitterstream op de website Javascript in aparte bestanden Omschrijving De Webrichtlijnen geven aan dat het belangrijk is om in de code content te scheiden van gedrag. Vertaald betekent dit dat JavaScript in aparte bestanden moet staan. Succescriterium U.2.2 Scheiding van content en gedrag 44

45 Toepassen Plaats JavaScript niet als losse code in de pagina's, maar plaats dit in aparte bestanden en niet in de HTML. 6.5 Duidelijke foutmeldingen Omschrijving Succescriterium U.4.1 zegt dat een foutmelding de bezoeker moet helpen. Het gaat hier vooral om de 404-melding 'Pagina niet gevonden'. Deze pagina moet minimaal 3 van de volgende opties bevatten: link naar de homepage hoofdmenu link naar de sitemap zoekfunctie contactinformatie Verder moet er in staan: uitleg over de fout informatie over hoe de fout hersteld kan worden of hoe de fout bij de webeigenaar gemeld kan worden Een 404-pagina kun je zelf oproepen door een niet-bestaand adres op je website in te voeren, bijvoorbeeld: Duidelijke webadressen Omschrijving Succescriterium U.10.1 eist duidelijke URI's. URI's is vrijwel hetzelfde als een URL. URL staat voor Uniform Resource Locator en is een mooie woordcombinatie voor een webadres. 45

46 Een duidelijke URL is een URL die normale woorden bevat en zo goed leesbaar is, bijvoorbeeld: Succescriterium U.10.1 Het doel van de URI van een webpagina kan bepaald worden uit enkel de in de URI aanwezige informatie (Niveau AA) Toepassen Een goed webadres laat zien op welke pagina je in de site bent. Hieronder zie je een voorbeeld waarbij je ziet op welke pagina je bent en waar je in de structuur bent: Een webadres wordt afgekeurd als het webadres meer dan 7 tekens heeft 'die geen inhoudelijke relatie heeft met de content'. Dat is bijvoorbeeld hieronder het geval: name=antireclamesticker Het adres hieronder is ook niet goed: simaction=content&pagid=1&form= bd6039f0fbea5a1fc422e61d55223c2affa 0d2a Het adres hieronder is nog net wél goed: Maar desondanks zou ik me schamen als webbouwer om zulke URL's te produceren: de getallen in de URL zijn onnodig en slecht voor de leesbaarheid en de toegankelijkheid. 46

47 Dit adres hieronder is ook goed, maar het is nogal onbenullig om te melden dat je op internet zit...: Eigenlijk moet je zeggen: een goede URL bevat niet 1 onnodig teken. Het voorbeeld hierboven bij de gemeente Best is een voorbeeld van zoals het zou moeten. Bij de gemeente Vught is het iets anders opgelost, maar eigenlijk nog beter: achter het domein staat altijd gelijk de naam van de pagina, bijvoorbeeld: Klik je daarna op 'Aangifte geboorte', dan krijg je als adres: Zo krijg je superkorte en superleesbare webadressen. 47

48 7. Bijzondere onderwerpen Video en audio Pdf en andere digitale documenten Geo-informatie Formulieren 7.1 Video en audio Nog te vaak wordt video niet toegankelijk aangeboden. Zeker de Rijksoverheid zondigt hier vaak in. Iets wat ik toch onbegrijpelijk vind, want er zijn 1,5 miljoen doven en slechthorenden. En bijvoorbeeld ondertiteling is voor heel veel mensen van belang. En voor een goede vindbaarheid in Google. In paragraaf 3.5 hebben we al de eisen voor video besproken. Op deze plek besteden we nog even aandacht aan de wijze waarop video op de website moet worden aangeboden. Bij een video op een website moet het volgende geregeld zijn: De video in MPEG4-formaat De ondertiteling in een srt-bestand (closed captions) De audiodescriptie in de vorm van een extra audiospoor in de video Volledig uitgeschreven transcript (niet verplicht, maar wel 'good practice') Toegankelijke player: ondersteuning van ondertiteling (closed captions) ondersteuning van audiodescriptie bedienbaar met toetsenbord Video in MPEG4-formaat Een video online bekijken betekent altijd een behoorlijke belasting van je verbinding. Het is daarom zinvol om 2 video's aan te bieden: hoge kwaliteit (scherp maar veel MB) en lage kwaliteit (minder scherp maar ook minder MB) In de hoge kwaliteit zijn 2 formaten gangbaar: Hoge resolutie: HD: 1920 bij 1080 pixels HD Ready: 1024 bij 720 pixels Lage resolutie: 640 bij 360 pixels 400 bij 242 pixels 48

49 Je kunt dus het beste kiezen voor een MP4 in hoge resolutie en een MP4 in lage resolutie. Daarnaast is het verplicht om de video ook als download aan te bieden. De meest gebruiksvriendelijke manier is om in die video de ondertiteling en de audiodescriptie op te nemen. Resumerend betekent dit dat je het beste de video in 3 formaten aanbiedt: MP4 in hoge resolutie MP4 in lage resolutie MP4 waar de ondertiteling en audiodescriptie in zit opgenomen Toegankelijke player Er zijn 2 soorten players: Flash-player, zoals de player van de Rijksoverheid HTML5-player # nog verder uitwerken. 7.2 Pdf en andere digitale documenten Omschrijving Word-bestanden, pdf's of andere bestanden op je website moeten toegankelijk zijn. De Webrichtlijnen eisen nog iets extra's: het formaat van het bestand moet voldoen aan de open standaard. Succescriteria Bijna alle succescriteria van WCAG 2.0 U.1.3 U.9.1 Toepassen WCAG of Webrichtlijnen Wil je voldoen aan WCAG, dan kun je ook je bestanden in Word gebruiken. Moet je voldoen aan de Webrichtlijnen, dan moet je PDF gebruiken. 49

50 Moet je wel pdf gebruiken? Pdf is het overgangsformaat van papier naar digitaal. De meeste pdf's worden niet meer uitgeprint, maar ze zijn nog wel vrijwel allemaal opgemaakt voor print. Is dat niet gek? Misschien niet, maar het toont wel aan dat de meesten van ons nog zijn blijven hangen in de papieren wereld, terwijl een groot deel van onze informatie al in de digitale wereld staat. Pdf heeft als formaat veel voordelen..., voor de afzender! Het is vooral makkelijk (druk op de knop in Word). Voor de ontvanger is het niet zo handig. De content is vaak slecht, want de pdf valt buiten de reguliere eindredactie. De opmaak is slecht, want deze valt buiten de reguliere huisstijlcontrole. Pdf is vooral handig voor de afzender omdat deze ongecontroleerd zijn informatie online kan krijgen. Maar, pdf is soms wel handig voor de ontvanger. Grotere documenten zoals een Jaarverslag lezen niet makkelijker in HTML. Als pdf kun je het downloaden en later nog eens lezen op je e-reader. Dit e-book is ook in pdf, want als e-book kun je deze ook lezen als je offline bent. En eerlijk gezegd, voor ons is het ook handig, want bijwerken en lay-outen is nog altijd een stuk makkelijker in een tekstverwerkingsprogramma dan in HTML. Wel is deze pdf geoptimaliseerd voor gebruik op e-readers. Ergo: bekijk goed of informatie wel in pdf gepubliceerd moet worden. Is de informatie belangrijk voor je klanten EN is de informatie relatief eenvoudig om te zetten in HTML, kies dan voor HTML. Voor pdf en andere bestanden gelden dezelfde richtlijnen als voor HTML De richtlijnen voor de toegankelijkheid van PDF en Word zijn gelijk aan die van HTML. Dus gebruik kopstijlen, geef betekenisvolle afbeeldingen een alternatieve tekst en geef bestanden een titel mee. Een volledige uitleg vind je in ons e-book Word en toegankelijke PDF. Open format De Webrichtlijnen eisen nog iets extra's, namelijk dat de bestanden ook voldoen aan de open standaard. In de praktijk betekent dit dat je het bestand moet aanbieden in een bepaald PDF-formaat: PDF/A-1a (PDF 1.4) PDF

51 PDF/A2a (PDF 1.7) PDF/UA PDF/UA is een formaat dat specifiek ontwikkeld is voor toegankelijkheid: UA staat voor Universal Accessibility. Onze ervaring tot nu toe is dat PDF/UA zoveel eisen stelt dat het af te raden is om die te gebruiken. In het algemeen kun je het volgende aanhouden: Is je brondocument Word of LibreOffice, kies PDF/A-1a. Is je brondocument Adobe Indesign, kies PDF/A-2a. 7.3 Geo-informatie De kaart van de toekomst is geen kaart het is ingekaderde informatie, die je wordt aangeboden op basis van je locatie. Ed Parsons, Geo-ICT-er bij Google Omschrijving Met geo-informatie bedoelen we kaarten, zoals Google Maps. Succescriteria Niet-tekstuele content Gebruik van kleur Geluidsbediening Contrast (minimum) Toetsenbord Geen toetsenbordval Toepassen Geo-informatie kan bijna altijd toegankelijk Geo-informatie is bijna altijd volledig toegankelijk aan te bieden. Dit concludeert Geonovum, een groep van geo-experts. Zij weten waarover zij praten, want zij zijn immers de experts! Meer hierover staat in hun publicatie Webrichtlijnen en geo 1.0 Beta. 51

52 Alternatief mag WCAG 2.0 stelt dat iets ontoegankelijk mag zijn, mits er een toegankelijk alternatief is. In veel gevallen kun je geo-informatie op deze manier al toegankelijk maken. In het voorbeeld hieronder is de informatie van het kaartje het adres ook als tekst aanwezig. Dus is er een alternatief. In driekwart van de kaarten op gemeentesites kun je op deze manier de kaarten al toegankelijk maken. Toegankelijk maken van kaarten Kaarten zelf kunnen ook uitstekend toegankelijk gemaakt worden. In grote lijnen zijn dit de aandachtspunten: Zorg voor voldoende contrast. Breng belangrijke informatie niet enkel met kleur over. Maak de kaart toetsenbordtoegankelijk. Op deze manier kun je bijna alle kaarten toegankelijk aanbieden. 52

53 7.4 Formulieren Omschrijving Voor de toegankelijkheid van formulieren zijn vrij veel succescriteria. En terecht, want de toegankelijkheid van formulieren is enorm belangrijk en het gaat vaak mis. Vooral voor mensen die gebruik maken van een screenreader betekenen fouten in formulieren vaak dat ze volledig onbruikbaar zijn. Mensen met andere beperkingen hebben minder last van foutief gecodeerde formulieren. Dat het mis gaat komt meestal door gebrek aan kennis bij de ontwikkelaars, niet omdat het te moeilijk of te kostbaar is. Bij het toetsen van je website op toegankelijkheid is het belangrijk dat je dit deel goed toetst of laat toetsen. Formulieren zijn vrij complex om te toetsen. Succescriteria Niet-tekstuele content (niveau A) Info en relaties (niveau A) tijd is aanpasbaar Wijziging bij focus Wijziging bij input Fouten voorkomen en herstellen (niveau A) Labels of instructies (niveau A) Foutsuggestie (niveau AA) Foutpreventie, wettelijk, financieel, gegevens (niveau AA) naam, rol, waarde U.5.1 Ondersteuning bij formulieren (niveau A) Toepassen Om goed te begrijpen hoe je formulieren toegankelijk maakt, ontkom je er niet aan om de HTML-code te bekijken. Dus hierbij de waarschuwing: enige HTML-kennis is nodig. Toetsenbordtoegankelijk Als een formulier niet toetsenbordtoegankelijk is, dan is deze volledig onbruikbaar voor gebruikers van screenreaders. Meestal is verkeerd gebruik van JavaScript het probleem. 53

54 Koppeling van beschrijving en invoerveld Een gewoon tekstinvoerveld heeft een beschrijving en een invoerveld. Deze moeten aan elkaar gekoppeld zijn om ze te kunnen gebruiken als je een screenreader gebruikt. Zo'n koppeling kun je maken door te zorgen dat het for-attribuut bij het label en het id-attribuut bij het input-element gelijk zijn. Dit noemen we de label-id-koppeling. De bijbehorende HTML-code is <label for="voornaam">voornaam*</label> <input id="voornaam" name="voornaam" type="text"> Een uitgebreidere uitleg van dit onderwerp vind je in Creating Accessible Forms van WebAIM. Voor het koppelen van de beschrijving en de formulierknop is het volgende belangrijk: label-id-koppeling bij de velden: text textarea checkboxen radiobuttons dropdowns het value-attribuut bij: submit reset tekst tussen button-tags bij een button 54

55 alt-tekst bij een afbeelding Groeperen van velden Velden die bij elkaar horen groepeer je met het fieldset-element. Direct na <fieldset> komt het legend-element: daarmee geef je een naam aan de groep velden. Fieldsets zijn altijd nodig als de labels van losse invoervelden te weinig informatie geven, bijvoorbeeld in het volgende voorbeeld. Daarbij zijn de labels 'ja' en 'nee'. Wilt u de nieuwsbrief ontvangen? O ja O nee Meer hierover vind je in Toegankelijke formulieren in Webrichtlijnen 2 op de website van de Stichting Accessibility. Instructies en foutmeldingen Instructies Geef je bij een veld een instructie (bijvoorbeeld 'Gebruik 4 cijfers' ), dan moet deze staan in het label-attribuut. Verplichte velden Bij verplichte velden moet vooraf aangegeven worden op welke manier de verplichte velden zijn aangegeven. Hieronder een voorbeeld waarbij dat niet goed gaat, want de melding wordt pas na de verplichte velden aangegeven. Hieronder een voorbeeld hoe het wel moet: de instructie wordt vooraf gegeven. Foutmeldingen 55

56 Als een veld niet goed is ingevuld en het formulier geeft een foutmelding terug, dan moet deze foutmelding expliciet vermelden op welk veld deze betrekking heeft. Alleen de melding 'Invoer verplicht' of zo is niet voldoende, want dan is niet duidelijk bij welk veld deze melding hoort. Hieronder een adequate foutmelding. Voldoende ondersteuning Succescriterium U.5.1 eist dat er voldoende ondersteuning wordt geboden bij het invullen van een formulier. Denk hierbij aan het volgende: Als het formulier uit meerdere stappen (meerdere pagina's) bestaat, meld duidelijk het aantal stappen. Als er bepaalde documenten of bijzondere informatie nodig is, meld dat vooraf. Bijvoorbeeld als DigiD nodig is. Of je BSN-nummer. Tijdslimiet Soms zit er een tijdslimiet op een webpagina. Een voorbeeld is het gebruik van DigiD: daar moet je om de zoveel tijd iets intypen, want om veiligheidsredenen word je automatisch uitgelogd als je niets doet. 56

57 Succescriterium eist dat de tijdslimiet aanpasbaar is: de gebruiker moet de tijdslimiet kunnen uitzetten of aanpassen. Contextwijziging Als je met de muis beweegt, mag er niet opeens iets gebeuren. Dat kan soms zo gemaakt zijn in een formulier. Er mag dus pas iets gebeuren als je op iets klikt. (succescriterium 3.2.1) Hetzelfde geldt als je tekst of iets anders invoert in een formulier: er mogen dan niet automatisch grote wijzigingen plaatsvinden. 57

58 8. Afwijken van WCAG 2.0 De richtlijnen van WCAG 2.0 zijn uiteindelijk een compromis van een grote groep betrokkenen. Zo'n compromis betekent altijd dat er dingen in zitten waar niet iedereen blij van wordt en dat er dingen in ontbreken die mensen er wel graag in hadden willen hebben. Hieronder hebben we een paar punten genoemd die ons inziens ook belangrijk zijn voor toegankelijkheid. Je kunt zelf kiezen om je website ook te laten voldoen aan deze punten. Het is echter wel subjectief en geen verplichting als je enkel wilt voldoen aan WCAG of aan de Webrichtlijnen. Deze paragraaf is grotendeels geïnspireerd door het artikel WCAG Next op WebAIM. 8.1 Gebruik geen CAPTCHA's Een CAPTCHA is een visuele presentatie van een stukje tekst, zie het voorbeeld hieronder. Doel is om te voorkomen dat formulieren geautomatiseerd worden ingevuld door spamrobots. Voor mensen die de code niet kunnen lezen wordt vaak een audio-alternatief gegeven. Deze zijn meestal ook rampzalig slecht. Ten eerste zijn ze meestal in het Engels, dus moet je eerst nog de vertaalslag van Engels naar Nederlands maken. Ten tweede lijken ze soms ingesproken te zijn door mensen die het Engels net zo goed beheersen als de auteurs van 'All your base are belong to us'. Ten derde zijn ze vaak slecht verstaanbaar doordat er achtergrondruis is toegevoegd om het weer voor spamrobots die spraak kunnen verstaan moeilijk te maken. 58

59 CAPTCHA's zijn voor iedereen erg vervelend. Gebruik ze dus niet. Zelfs bij online bankieren gebruiken ze geen CAPTCHA's. Er zijn genoeg technische en andere oplossingen om spam te voorkomen. Enkele manieren: Gebruik een vraag als 'Hoeveel is 1 plus 1?'. Vrijwel alle robots stranden hierop. Iets moeilijker kan ook, zoals 'Wat is het derde woord in deze zin?' Neem een hidden field op in je formulier. Dit veld moet leeg zijn om het formulier te kunnen versturen. Spamrobots vullen automatisch alle velden in en stranden dus op dit veld. 8.2 Voorzie video altijd van ondertiteling In WCAG mag je video aanbieden zonder ondertiteling als de video zelf een alternatief is voor content. Dus als je een transcript (tekst van de video uitgeschreven) van een video aanbiedt, en je biedt bij dit transcript een link aan naar de video, dan voldoe je. Het doel van WCAG is dat het voor gebruikers van gebarentaal het handig kan zijn dat de video voorzien is van gebarentaal. Met die gedachte in het achterhoofd is deze uitzondering beschreven. Echter, organisaties misbruiken dit door niet-ondertitelde video's aan te bieden als alternatief van een transcript. Ons advies: doe dat niet. Een video die niet ondertiteld is, is ontoegankelijk voor doven en slechthorenden. En is slechter vindbaar in zoekmachines. 8.3 Plaats bij een video altijd een transscript Als je ondertiteling en audiodescriptie toevoegt, dan is een transcript niet nodig voor niveau A of AA. Echter, een transcript heeft veel voordelen. Dit helpt bijvoorbeeld ook doof-blinden en zoekmachines. En het kost meestal weinig om het toe te voegen. 8.4 Zorg altijd voor een goed contrast Als je alleen gaat voor niveau A, dan geldt er geen enkele contrast-eis voor tekst. Een goed contrast is echter voor heel veel mensen erg belangrijk. Bijvoorbeeld ook voor de mensen die op een ipad in een lichte omgeving een tekst willen lezen. Ons advies is om altijd te zorgen voor goed contrast. 59

60 Nog een maas in de regelgeving is dat je tekst mag aanbieden in onvoldoende contrast met de achtergrond, mits je ook een knop aanbiedt naar een hoog-contrastversie. Wij denken dat er genoeg mensen zijn die wel last hebben van het lage contrast, maar de knop Hoog contrast niet opmerken, gewoon omdat men niet het idee heeft dat er een knop is die het contrast kan verhogen. Zeker mensen met lage digitale vaardigheden zullen zo'n knop niet vinden. Daarom adviseren we ook hierbij: zorg gewoon voor een goed contrast en laat die knop Hoog contrast achterwege. 8.5 Zorg altijd voor keyboard-focus Keyboard-focus is dat je ziet waar je bent op de pagina met je toetsenbord. Voor mensen die alleen een toetsenbord kunnen gebruiken is het zichtbaar zijn van de keyboard-focus essentieel om te kunnen navigeren. In WCAG is dit een eis op niveau AA, ons advies is om dit ook te gebruiken als jouw site alleen aan niveau A moet voldoen. Er is namelijk geen voordeel bij het weghalen van de focus, dus je kunt het maar beter altijd wel gebruiken. 8.6 Zorg dat links betekenisvol zijn In de nieuwe richtlijnen hoeft de linktekst zelf niet betekenisvol zijn, wel de link in combinatie met zijn context. Concreet betekent dit dat dit mag: Meer over de nieuwe burgemeester leest u hier. Zowel voor screenreadergebruikers als voor zoekmachines is dat een slechte linktekst. Op niveau AAA is pas een betekenisvolle link weer verplicht. Ons advies is om altijd betekenisvolle links te gebruiken. In bovenstaand voorbeeld zou dat bijvoorbeeld zijn: Op 1 april 2014 is onze nieuwe burgemeester in dienst getreden. 60

61 9. Geef dit aan je vormgever 9.1 Kleur van letters Het beste leest zwarte letters op een witte achtergrond(nielsen, Prioritizing Web Usability). Echt waar. Grijzige teksten zijn een trend, maar maken het lezen slechter. Denk je dat minder contrast beter is, kies dan voor een minder witte achtergrond. Contrast tussen tekst en achtergrond: contrastratio minimaal 4,5 : 1 voor gewone tekst minimaal 3,0 : 1 voor grote tekst Kleur van links: minimale contrastratio 3 : 1 met de omringende tekst. Links moeten behalve in kleur ook afwijken in underlining. Deze underlining is bij voorkeur altijd zichtbaar, maar kan ook alleen bij mouse-over. (In CSS kiezen voor underlining, niet voor border-bottom.) Zet NOOIT tekst op een oneffen achtergrond, zoals een foto. 9.2 Afbeeldingen van tekst Een afbeelding van tekst mag niet in WCAG. Dit kun je oplossen door dit te doen met HTML/CSS. Uitzonderingen hierop zijn: Logo's Als de vormgeving van de tekst niet is na te bootsen in HTML/CSS, bijvoorbeeld als het een geschreven tekst is. 9.3 Voorkom narcisme of organisatiegericht denken Uitingen van narcisme zijn: headerfoto's in de headers, carrousels en banners om eigen content te promoten. Probeer de header (logo, eventueel pay-off, menu) zo klein mogelijk te houden, maximaal 120 pixels hoog (liever minder). Gebruik geen fotomateriaal in de header, maar doe dat in het contentvlak. Gebruik NOOIT bewegende content, zoals caroussels. Niet overtuigd? Kijk op shouldiuseacarousel.com. 61

62 Moet er een caroussel komen, zorg voor een duidelijke stop/pauze-knop. Gebruik geen banners op je eigen site om je eigen content te promoten. Werk daarentegen met microcontent: titel, lead, eventueel foto. In bovenstaande carrousel doet de provincie Brabant wel heel veel verkeerd: Carrousel met nutteloze foto's. Carrousel beweegt en kan niet gestopt worden. Tekst op een oneffen ondergrond. Te weinig contrast van grijze tekst op donkergrijze achtergrond. 62

63 10. Toegankelijkheid en overheden 10.1 Europese Unie: eigen websites moeten toegankelijk zijn Alle websites die beheerd worden door overheden moeten toegankelijk zijn. Dat is de boodschap van een amendement1 dat door de Europesche Commissie in februari 2014 is aangenomen. In het bijbehorende persbericht2 staat: All websites managed by public sector bodies must be accessible to everyone, including the elderly and the disabled, said internal market MEPs on Thursday. They amended draft rules to enable over 100 million people who have difficulty accessing public websites to use e-services, for example, to submit a tax declaration, claim unemployment benefit or enroll a child at a kindergarten. Dit geeft wellicht iets meer duidelijkheid, maar er blijven genoeg twijfelgevallen. Bijvoorbeeld een website over afval, die beheerd wordt door een externe partij: hoeft de overheid dit niet toegankelijk te maken? Gaat het hier letterlijk over "beheer van de website", of is de overheid ook verantwoordelijk voor het uitbesteden van informatietaken die wel de verantwoordelijkheid van de overheid zijn? Ook moet de content toegankelijk zijn op tablets en mobiele telefoons: In addition, MEPs say content on these websites that can be accessed with a mobile device (such as a mobile phone or tablet) must also be covered by the webaccessibility rules. Toegankelijk moet in ieder geval zijn: raadsinformatie alle formulieren apps En dat is al moeilijk genoeg

64 10.2 Je moet voldoen, mits een hele goede reden De Webrichtlijnen zijn geplaatst op de lijst van open standaarden. Overheden zijn verplicht zich te houden aan deze open standaarden. Voor deze standaarden geldt het zogenaamde Pas-toe-of-leg-uit-principe. Dat betekent dat een overheid moet voldoen aan deze standaard of als zij niet voldoet, dit uit moet leggen. Dit 'uitleggen' is overigens nog niet zo eenvoudig. Dit staat er op de website van het Forum Standaardisatie: Overheden en semi-overheden mogen alleen afwijken (d.w.z. 'niet toepassen') ingeval van redenen van bijzonder gewicht. Organisaties zijn verplicht om afwijkingen gemotiveerd vast te leggen in de administratie en zijn verplicht om zich te allen tijde over de mate van naleving te verantwoorden in het jaarverslag. Op de pagina "'Leg uit' in de praktijk" wordt verder uitgelegd hoe je precies je moet verantwoorden als je niet voldoet. Gangbaar is om deze uitleg te doen op de pagina '/toegankelijk' Geen boetes als je niet voldoet Heikel punt in deze hele regelgeving is dat er geen sanctiebeleid is als je als overheid niet voldoet. Dat komt er ook niet op korte termijn. Voor veel overheden is dit voldoende reden om ook niet te voldoen Voldoen aan toegankelijkheid is slim en sociaal Zoals je gezien hebt krijg je als overheid geen boete als je niet voldoet. Waarom zou je je dan inspannen voor al die regels. We zouden daar nog een heel hoofdstuk aan kunnen weiden, maar we kiezen even voor de korte uitleg. Er zijn 2 belangrijke reden om zo goed mogelijk te voldoen aan de richtlijnen voor toegankelijkheid: 1. Bijna alle WCAG2-succescriteria zijn goed voor de kwaliteit en beheersbaarheid van de site. Voldoe je aan de criteria, dan is jouw site ook: gebruiksvriendelijker beter vindbaar in zoekmachines beter (goedkoper) onderhoudbaar 2. Als overheid heb je ook een maatschappelijke plicht naar de gebruikers van je site. Het gaat niet alleen om blinden, maar ook om doven en slechthorenden (1,5 miljoen mensen), laaggeletterden (1,5 miljoen mensen), ouderen 64

65 enzovoort. Soms denken mensen dat het gaat om marginale aantallen, maar het gaat om 1 op de 4 mensen Conformiteit claimen van een webpagina Je kunt jouw site (laten) toetsen of deze voldoet aan WCAG. Als deze voldoet, dan kun je aangeven dat deze voldoet aan WCAG. Je claimt dan conformiteit aan de WCAG-norm. De pagina moet voldoen aan de volgende 5 eisen: 1. De pagina voldoet aan alle succescriteria van een van de niveaus van WCAG: A, AA of AAA. 2. De volledige pagina voldoet. 3. Als de pagina onderdeel is van een proces, dan moet dit volledige proces toegankelijk zijn. 4. De pagina is volledig bruikbaar met de gebruikelijke software en hardware die mensen met een functionele beperking gebruiken. 5. Ontoegankelijke content op de pagina blokkeert niet het gebruik van andere delen van de pagina (eis van non-interferentie). Intermezzo Overigens kun je volgens WCAG alleen conformiteit claimen voor een pagina, niet voor een hele site. Bij een toetsing gaat het wel vaak om een domein. Maar ook dat is niet volledig logisch, want veel content wordt via verschillende sites aangeboden. Zo start een inschrijving voor een training op onze site op maar vindt de daadwerkelijke inschrijving plaats op catia.theinternetacademy.nl, waar ons administratiesysteem op staat. Denken in websites is eigenlijk niet meer van deze tijd. Logischer is om te denken in termen van afzender of eigenaar of verantwoordelijke. Dus het gaat om alle kerninformatie van een gemeente, niet om het domein van een gemeente Toegankelijkheidsverklaring Overheden zijn dus verplicht te rapporteren over hun toegankelijkheid. Dat kunnen ze doen in een zogenaamde Toegankelijkheidsverklaring. Meer daarover kun je lezen op 65

66 10.7 Toetsen kan iedereen Een onderdeel van de Toegankelijkheidsverklaring is dat je duidelijk specificeert per succescriterium - of je voldoet, en zo niet, een adequate uitleg waarom niet. De eenvoudigste methode is middels een extern onderzoek. Dit kan je tegenwoordig door elk bureau laten doen, maar ook daar zitten goede en slechte bureaus bij. Bedenk goed waarom je het doet voordat je een bureau inhuurt. Als je een logo Waarmerk drempelvrij.nl wilt krijgen moet dat met een officiële toetsingsinstantie. Maar dit logo is niet verplicht en het logo heeft op dit moment nog weinig echte waarde. Voor het voldoen aan de Webrichtlijnen heb je dit logo in ieder geval helemaal niet nodig Omvang van de toets Als je hebt besloten dat je website toegankelijk moet zijn, is het vervolgens nog een complexe vraag wat nu precies je website is: Alles wat op het hoofddomein staat, bijvoorbeeld Alles wat op het domein staat en een vergelijkbare vormgeving heeft? Een goede poging om hier duidelijkheid in te brengen is gedaan door de voormalige Normcommissie met het Evaluatiedocument. Bij het vaststellen van de scope is het uitgangspunt dat de pagina publiekelijk is. Dat betekent: bereikbaar zonder login. Overigens zijn de pagina's die via een DIGID-procedure ook publiekelijk, want daarin is sprake van authenticatie en niet van inloggen (ik zal je de uitleg besparen...). De volgende beslispunten bepalen of een pagina binnen een onderzoek meegenomen moet worden: 1. De pagina staat op hetzelfde (sub)domein. 2. De pagina is deel van een proces. 3. De lay-out van de pagina is vergelijkbaar. 4. De pagina mag uitgesloten worden als deze bij een archief hoort EN als het aanpassen hiervan redelijke wijs niet mogelijk is. 66

67 10.9 Opbouw steekproef Meestal is een website te groot om alle pagina's te toetsen. In dat geval wordt er een steekproef genomen. In het Evaluatiedocument staat beschreven op welke wijze de steekproef moet worden samengesteld. 67

68 11. Principes, richtlijnen en succescriteria Hieronder een volledig overzicht van alle principes, richtlijnen en succescriteria van Webrichtlijnen 2. De teksten hebben we soms aangepast, zodat deze beter leesbaar is. De originele teksten vind je op Principe 1: Waarneembaar Content is waarneembaar voor de zintuigen (zicht, gehoor en/of tast). Richtlijn 1.1: Lever tekstalternatieven voor niet-tekstuele content Niet-tekstuele content (niveau A) Als afbeeldingen betekenis overbrengen, dan is deze betekenis ook als tekst beschikbaar. Het gaat hierbij ook om afbeeldingsbuttons in formulieren en hot spots in image maps, zoals in Google Maps. Afbeeldingen die geen betekenis overbrengen, zijn opgenomen in de CSS als achtergrond. Kan dat niet, dan krijgen ze een leeg alt-attribuut (alt=""). Het gaat hier om decoratieve afbeeldingen of afbeeldingen die informatie bevatten die in de tekst al is overgebracht. Aanklikbare afbeeldingen hebben een alternatieve tekst die de bestemming van de link duidelijk maakt. Afbeeldingen met tekst krijgen als tekstalternatief de tekst die zichtbaar is in de afbeelding (Let op: bij niveau AA mogen meestal geen afbeeldingen van tekst) Complexe afbeeldingen die betekenis overbrengen hebben een gelijkwaardige alternatief in de context of in een aparte pagina. Naar die pagina is een link of een verwijzing via een longdesc-attribuut. Het gaat hier bijvoorbeeld om grafieken of infographics. Formulierknoppen hebben een alternatieve tekst. Invoervelden zijn gekoppeld aan de beschrijving van de invoervelden. Video en audio zijn voorzien van een alternatieve tekst. Frames hebben een titel die de inhoud van het frame duidelijk maakt. 68

69 Richtlijn 1.2: Lever alternatieven voor video en audio Geluidsopnames en video-opnames zonder geluid, niet live (niveau A) Bied bij geluidsopnames ook een uitgeschreven tekst (transcript) aan, inclusief auditieve informatie. Denk hierbij aan MP3-bestanden en podcasts. Voeg aan video-opnames zonder geluid die informatie overbrengen een tekstalternatief of een audiobeschrijving toe. Video-opnames die geen informatie overbrengen en alleen decoratief zijn hoeven geen alternatieve tekst of audiobeschrijving Ondertiteling bij video-opnames (niveau A) Voorzie video-opnames van gesynchroniseerde ondertiteling (captions). Uitzondering hierop is als de video zelf wordt aangeboden als alternatief voor tekst EN ook als zodanig wordt gelabeld. Noot: ondertiteling is niet alleen handig voor doven of slechthorenden, maar voor iedereen die de video bekijkt zonder geluid en daarnaast ook voor laaggeletterden Tekstalternatief bij video-opnames (niveau A) Video-opnames hebben een tekstalternatief OF een audiobeschrijving in een geluidsspoor. Noot: als je audiodescriptie toevoegt (is niveau AA, zie 1.2.5) voldoe je ook aan dit criterium Ondertitels voor doven en slechthorenden, live (niveau AA) Alle auditieve informatie van een live video-uitzending is beschikbaar als ondertiteling Audiodescriptie, vooraf opgenomen (niveau AA) Alle hoorbare informatie in een video-opname is aan de video toegevoegd als spraak (audiodescriptie). Richtlijn 1.3: Aanpasbaar Maak content zo dat deze op verschillende manieren gepresenteerd kan worden zonder dat de informatie of de structuur verloren gaat. 69

70 1.3.1 Info en relaties (niveau A) Semantische opmaak is gebruikt om betekenis mee te geven aan content. Denk hierbij aan koppen (<h1>), opsommingen (<ul>, <ol>, and <dl>), tekst met nadruk (<strong>, <em>) of speciale tekst (<code>, <abbr>, <blockquote>). 4. Tabellen: (zie aparte uitleg over tabellen) Tabellen worden gebruikt voor het weergeven van data. Rijkoppen en kolomkoppen hebben een <th>-element (table heading). Bij tabellen met samengevoegde cellen of meerdere rijen en/of kolommen is de relatie tussen de cel en de rijen en de koppen aangegeven via het id en header. Tabellen hebben een titel. Dat kan met een heading en een caption. Tabellen met een complexe structuur hebben een summary die deze structuur beschrijft. 5. Formulieren: In formulieren zijn de beschrijvingen geassocieerd met de inputvelden. Gerelateerde velden in een formulier zijn gegroepeerd met fieldset en legend. Opties in een <select>-element zijn met elkaar verbonden via het <optgroup>element. 6. Vermijd de JavaScript-functies document.write() en object.innerhtml Betekenisvolle volgorde (niveau A) De leesvolgorde en de volgorde van de navigatie (bepaald bij de volgorde van de code) zijn logisch en intuïtief. Noot: er staat niet dat de focusvolgorde de visuele volgorde moet volgen, maar alleen dat de volgorde juist moet blijven, waardoor betekenis en bedienbaarheid behouden blijven Zintuiglijke eigenschappen (niveau A) Instructies zijn niet afhankelijk van vorm, grootte of de zichtbare locatie op de pagina, zoals 'klik op het vierkante icoontje om door te gaan' of 'De instructies staan in de rechterkolom.' 70

71 Instructies zijn niet afhankelijk van geluid, bijvoorbeeld 'Bij het pieptoontje mag je verder gaan.' Richtlijn 1.4 Onderscheidbaar Maak content makkelijk hoorbaar en zichtbaar, inclusief het onderscheid voorgrond-achtergrond Gebruik van kleur (niveau A) Kleur is niet de enige manier waarop informatie wordt overgebracht, Kleur is ook niet de enige manier om links te herkennen, tenzij het contrast tussen de link en de omringende tekst een contrastratio van minimaal 3:1 heeft EN de link ook zichtbaar afwijkt door bijvoorbeeld een onderstreping bij mouse-over of bij focus Geluidsbediening (niveau A) Geluid dat automatisch start, kan gestopt, gepauzeerd, uitgezet worden. Ook kan de gebruiker het volume aanpassen, onafhankelijk van het geluidsvolume van het systeem. Dit geldt niet voor geluid korter dan 3 seconden Contrast, minimum (niveau AA) Tekst en afbeeldingen van tekst hebben een contrastratio van minimaal 4,5:1. Grote tekst en afbeeldingen van grote tekst hebben een contrastratio van minimaal 3:1. Grote tekst is gedefinieerd als meer dan 18 punts or 14 punts vetgedrukt. Deze eis geldt niet voor tekst of afbeeldingen van tekst die decoratief of niet zichtbaar zijn. En het geldt ook niet voor logo's Aanpassen van de grootte van tekst (niveau AA) De pagina is leesbaar en functioneert nog steeds goed als de tekstgrootte verdubbeld wordt Afbeeldingen van tekst (niveau AA) Een afbeelding van tekst wordt niet gebruikt als de tekst in vergelijkbare layout ook als tekst gepresenteerd kan worden. 71

72 11.2 Principe 2: Bedienbaar Formulieren, bedieningsknoppen en navigatie zijn bedienbaar. Richtlijn 2.1 Toetsenbordtoegankelijk Maak alles bedienbaar met het toetsenbord Toetsenbord (niveau A) Alle functionaliteit is bedienbaar met het toetsenbord, tenzij het onmogelijk is om die functionaliteit met een toetsenbord te doen (zoals een tekening maken). Sneltoetsen moeten niet conflicteren met de sneltoetsen van de browser en de screenreader. Maak geen gebruik van de tabindex Toetsenbordval (niveau A) De focus van het toetsenbord is altijd verplaatsbaar en is nooit gevangen in een bepaalde positie van de pagina. De gebruiker kan navigeren naar alle navigeerbare elementen van de pagina met alleen het toetsenbord. Zie ook conformiteitseis 5: Niet-Interferentie. Richtlijn 2.2 Genoeg tijd Geef genoeg tijd om content te lezen en te gebruiken Tijd is aanpasbaar (niveau A) Als een functie een tijdslimiet heeft, dan kan de gebruiker deze limiet uitzetten, aanpassen of de tijdslimiet verlengen. Deze eis geldt niet: bij real-time-gebeurtenissen, zoals veilingen, waar de tijdslimiet een eis is als de tijdslimiet langer is dan 20 uur Pauzeren, stoppen en verbergen (niveau A) Als content langer dan 5 seconden vanzelf beweegt, kan de gebruiker deze pauzeren, stoppen of verbergen. Als content automatisch wijzigt, kan gebruiker deze pauzeren, stoppen, verbergen of handmatig aanpassen. Het gaat hier bijvoorbeeld om een 72

73 fotocarrousel, het automatisch doorsturen of verversen van een pagina, een formulierveld dat via Ajax wordt aangepast of het automatisch verversen van nieuwsberichten. Richtlijn 2.3 Toevallen Zorg dat content geen toevallen veroorzaakt Drie flitsen of onder de drempelwaarde (niveau A) Op een webpagina zijn geen flikkeringen van meer dan 3 keer per seconde OF de flikkeringen zijn lager dan de algemene flits- en rodeflitsdrempelwaarden. Richtlijn 2.4 Navigeerbaar Help gebruikers met navigeren, content te vinden en te bepalen waar ze zijn Blokken overslaan (niveau A) Via een link kan de gebruiker de navigatie en andere pagina-elementen overslaan ('Direct naar de inhoud'). Het gaat hier om pagina-elementen die op elke pagina herhaald worden Paginatitel (niveau A) Webpagina's hebben een beschrijvende en informatieve paginatitel Focusvolgorde (niveau A) De volgorde van de links van bijvoorbeeld menu en formulieren is logisch en intuïtief Linkdoel, in context (niveau A) Het doel van elke link kan bepaald worden uit de linktekst of uit de directe context van de link, zoals een alinea, een opsommingsitem, tabelcel of tabelkop. Links met dezelfde tekst maar verschillende bestemmingen, zijn makkelijk van elkaar te onderscheiden. Dit geldt ook voor aanklikbare afbeeldingen Meerdere manieren (niveau AA) Er zijn minimaal 2 manieren om een pagina op een website te vinden. Bijvoorbeeld een menu, een sitemap en een zoekfunctie. 73

74 2.4.6 Koppen en labels (niveau AA) Koppen en labels op formulieren zijn informatief. Voorkom duplicate koppen of labels, zoals 'Meer informatie' of 'Lees verder', tenzij de structuur zorgt voor voldoende onderscheid Focus zichtbaar (niveau AA) Het is zichtbaar als een pagina-element de focus heeft. Met andere woorden: als je met de tabtoets door de pagina gaat, kun je zien waar je bent Principe 3: Begrijpelijk Informatie en de bediening van de gebruikersinterface zijn begrijpelijk. Richtlijn 3.1: Leesbaar Maak tekst leesbaar en begrijpelijk Taal van de pagina (niveau A) De taal van de pagina is aangegeven met het lang-attribuut van het HTMLelement (<html lang="nl">) Taal van tekstgedeelten (niveau AA) Zinnen of zinsdelen in een andere taal dan de basistaal van de pagina, zijn aangeven met het lang-attribuut. Bijvoorbeeld: <p lang="en"> Dit hoeft niet bij: 1 woord in de andere taal namen (zoals de naam van een rapport of een project) technische termen anderstalige termen die vernederlandst zijn, zoals computer, beamer of uploaden Richtlijn 3.2 Voorspelbaar Maak het uiterlijk en de bediening van webpagina's voorspelbaar Bij focus (niveau A) Als een pagina-element focus krijgt, geeft dat geen wijziging, die verwarrend kan zijn voor de gebruiker. Denk hierbij aan: 74

75 wijziging van de pagina het openen van een pop-upvenster een wijziging van de focus Bij input (niveau A) Als een gebruiker content invoert of een knop gebruikt, veroorzaakt dat geen grote wijziging, tenzij de gebruiker hierover vooraf is geïnformeerd. Denk bij deze wijzigingen aan: substantiële wijziging van de pagina het openen van een pop-up een wijziging van de focus elke andere verandering die de gebruiker kan verwarren Consistente navigatie (niveau AA) Navigatie die herhaald wordt op meerdere pagina's wijzigt niet van volgorde Consistente identificatie (niveau AA) Elementen die op meerdere pagina's dezelfde functionaliteit hebben, moeten consistent zijn aangegeven. Bijvoorbeeld de zoekfunctie boven aan de site moet altijd op dezelfde manier gelabeld zijn. Richtlijn 3.3: Assistentie bij invoer Help gebruikers om fouten te vermijden en ze te verbeteren. Zie ook de aparte uitleg over formulieren Fouten voorkomen en herstellen (niveau A) Formuliervelden of velden die een specifieke invoer eisen, bevatten deze informatie in het label van het element. Foutmeldingen worden op een efficiënte, intuïtieve en toegankelijke manier gepresenteerd. De fout is duidelijk aangegeven, de gebruiker krijgt direct toegang tot de foutieve invoer en de gebruiker kan eenvoudig de fout herstellen en het formulier weer insturen. 75

76 3.3.2 Labels of instructies (niveau A) Toereikende labels, aanwijzigingen en instructies worden gegeven bij verplichte invoervelden of interactieve elementen via instructies, voorbeelden en goed geplaatste formulierlabels Foutsuggestie (niveau AA) Als het formulier een invoerfout aangeeft, geef dan tijdig en op een toegankelijke manier suggesties voor het herstellen van de fout Foutpreventie, wettelijk, financieel, gegevens (niveau AA) Als een gebruiker wettelijke of financiële gegevens kan aanpassen, dan moet de gebruiker minimaal 1 van de volgende mogelijkheden hebben: Ongedaan maken: aanpassingen kunnen annuleren Controleren: aanpassingen controleren en kunnen herstellen Bevestigen: aanpassingen bevestigen voordat ze definitief zijn 11.4 Principe 4: Robuust Content is robuust voor een betrouwbare interpretatie door user agents. Richtlijn 4.1: Compatibel Maximaliseer compatibiliteit met huidige en toekomstige user agents, met inbegrip van hulptechnologieën Parsen (niveau A) Een webpagina moet valideren. Dit kun je controleren op De HTML-elementen voorzien zijn van volledige begin- en eindtags Naam, rol, waarde (niveau A) Opmaak is zo gebruikt dat het de toegankelijkheid faciliteert. Dit houdt in dat de HTML/XHTML-specificaties gevolgd zijn en dat bijvoorbeeld formulieren, formulierlabels en frametitels goed gebruikt zijn Principe Universeel Content is betekenisvol, bruikbaar, uitwisselbaar en duurzaam. 76

77 Richtlijn U.1 Semantisch Pas technologieën voor webcontent op betekenisvolle wijze toe. U.1.1 Semantisch correcte opmaak (niveau A) Pas opmaaktalen toe op de in de specificatie beschreven wijze. U.1.2 Geen afgekeurde en afgeraden HTML (niveau A) Gebruik geen afgekeurde eigenschappen en afgeraden eigenschappen, zoals verouderde HTML-code. U.1.3 Kopregelhiërarchie (niveau A) Sla geen niveaus over in de hiërarchie van kopregels. Richtlijn U.2 Gescheiden Scheid content van presentatie en van gedrag. U.2.1 Scheiding van content en presentatie (niveau A) Scheid content van presentatie. Opmaak staat dus in de CSS. U.2.2 Scheiding van content en gedrag (niveau AA) Scheid content en gedrag. Het gaat hier vooral om het gebruik van specifieke JavaScript-code, zoals de zogenaamde 'inline event handlers'. Zorg dat deze in aparte bestanden staat en niet in de HTML-code. Richtlijn U.3 Bouw gelaagd Borg de beschikbaarheid van basiscontent en basisfunctionaliteit. U.3.1 Gelaagd bouwen (niveau A) Zorg dat content en functionaliteit beschikbaar zijn en functioneert, ook als een bepaalde technologie niet werkt. Richtlijn U.4 Foutmeldingen Zorg voor bruikbare foutmeldingen. U.4.1 Aangepaste foutmeldingen (niveau A) Bied bij door het systeem gegenereerde foutmeldingen de gebruiker mogelijkheden om verder te gaan. Denk hierbij vooral aan 404-meldingen (pagina niet gevonden). 77

78 Richtlijn U.5 Formulieren Maak formulieren optimaal bruikbaar. U.5.1 Ondersteuning bij formulieren (niveau A) Bied de gebruiker afdoende informatie en ondersteuning om een formulier succesvol te kunnen invullen en indienen. Richtlijn U.6 Meertaligheid: Maak anderstalige content eenvoudig bereikbaar U.6.1 Taalkeuze (niveau A) Als webcontent beschikbaar is in meerdere talen, worden aan de gebruiker een of meer mechanismen aangeboden om tussen de verschillende talen te wisselen. Richtlijn U.7 Geneste weergavekaders Sluit niemand uit bij het aanbieden van content middels geneste weergavekaders. U.7.1 Alternatief voor geneste weergavekaders (niveau AA) De gebruiker kan content in een frame ook op een andere manier bereiken. Richtlijn U.8 Identificatie van tekens en symbolen Specificeer karaktercodering U.8.1 Specificeer UTF-8 (niveau A) Specificeer voor tekstuele content die door middel van een opmaaktaal is vastgelegd de UTF-8 karakterset. Richtlijn U.9 Openheid Belemmer niet de creatie, publicatie en uitwisseling van content. U.9.1 Gebruik ten minste open specificaties (niveau AA) Gebruik bij het aanbieden van content ten minste open, niet leveranciersafhankelijke en voor webcontent bedoelde specificaties. En geef bij gelijke geschiktheid de voorkeur aan open standaarden. Richtlijn U.10 URI's URI's zijn duidelijk, uniek en duurzaam. 78

79 U.10.1 Duidelijke URI's (niveau AA) De bestemming van de URI van een webpagina kan bepaald worden uit enkel de in de URI aanwezige informatie. Met een URI wordt in veel gevallen een URL bedoeld: een Uniform Resource Locator, oftewel een webadres. 79