Webrichtlijnen Made Easy

Transcriptie

1

2

3

4 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: The Internet Academy Auteur: Jaap van de Putte, The Internet Academy Met dank aan: Jules Ernst, trainer bij The Internet Academy en eigenaar van 200 OK Martijn Houtepen en Wilco Fiers, Accessibility Datum: 6 december 2014 Bronnen: WebAIM, WCAG 2.0, Webrichtlijnen, Dit e-book hoort bij: de opleiding Webmanager de training Webrichtlijnen 2 Made Easy Copyright (C) 2014 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

5

6 Inhoudsopgave 1. Inleiding Richtlijnen voor een toegankelijke website Opbouw WCAG 2.0 en Webrichtlijnen Principes...13 Richtlijnen...13 Succescriteria...14 Technieken...14 WCAG of Webrichtlijnen Waarneembaar Bedienbaar Begrijpelijk Robuust Universeel De verschillen met Webrichtlijnen versie Zelf toetsen Zelf testen met een screenreader Waarneembaar Afbeeldingen...23 Omschrijving...23 Succescriteria...23 Toepassen Kleur en contrast...28 Omschrijving...28 Succescriteria...28 Toepassen Geo-informatie Semantiek...33 Inhoudsopgave 6

7 Omschrijving...33 Succescriteria...33 Toepassen Video en audio...35 Omschrijving...35 Succescriteria...35 Toepassen Tabellen...37 Omschrijving...37 Succescriteria...38 Toepassen Bedienbaar Bedienbaar met toetsenbord en muis...39 Omschrijving...39 Succescriteria...39 Toepassen Skiplinks naar onderdelen van je site...40 Omschrijving...40 Succescriterium...41 Toepassen Zichtbaar zijn waar je bent...41 Omschrijving...41 Succescriterium...42 Toepassen Koppen...42 Omschrijving...42 Succescriteria...42 Toepassen Hyperlinks...43 Omschrijving...43 Succescriteria...43 Toepassen Plaatsaanduiding...44 Inhoudsopgave 7

8 Omschrijving...44 Succescriteria...44 Toepassen Begrijpelijk Taal van de pagina...46 Omschrijving...46 Succescriterium...46 Toepassen Taal van tekstfragmenten...46 Omschrijving...46 Succescriterium...46 Toepassen Begrijpelijke taal...48 Omschrijving...48 Succescriteria...48 Toepassen Robuust en universeel Correcte HTML-code...51 Omschrijving...51 Succescriteria...51 Voldoen Taalkeuze...54 Omschrijving...54 Succescriterium...54 Toepassen Inline frame of iframe...55 Omschrijving...55 Succescriterium...55 Toepassen Javascript in aparte bestanden...57 Omschrijving...57 Succescriterium...57 Toepassen...57 Inhoudsopgave 8

9 6.5 Duidelijke foutmeldingen...57 Omschrijving Duidelijke webadressen...58 Omschrijving...58 Succescriterium...58 Toepassen Bijzondere onderwerpen Video en audio...61 Video in MPEG4-formaat...61 Toegankelijke player Pdf en andere digitale documenten...62 Omschrijving...62 Succescriteria...62 Toepassen Geo-informatie...64 Omschrijving...64 Succescriteria...64 Toepassen Formulieren...67 Omschrijving...67 Succescriteria...67 Toepassen 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...76 Inhoudsopgave 9

10 9.1 Kleur van letters Afbeeldingen van tekst Voorkom narcisme of organisatiegericht denken Principes, richtlijnen en succescriteria Principe 1: Waarneembaar...78 Richtlijn 1.1: Lever tekstalternatieven voor niet-tekstuele content...78 Richtlijn 1.2: Lever alternatieven voor video en audio...79 Richtlijn 1.3: Aanpasbaar...80 Richtlijn 1.4 Onderscheidbaar Principe 2: Bedienbaar...83 Richtlijn 2.1 Toetsenbordtoegankelijk...83 Richtlijn 2.2 Genoeg tijd...83 Richtlijn 2.3 Toevallen...84 Richtlijn 2.4 Navigeerbaar Principe 3: Begrijpelijk...85 Richtlijn 3.1: Leesbaar...85 Richtlijn 3.2 Voorspelbaar...86 Richtlijn 3.3: Assistentie bij invoer Principe 4: Robuust...88 Richtlijn 4.1: Compatibel Principe Universeel...88 Richtlijn U.1 Semantisch...88 Richtlijn U.2 Gescheiden...89 Richtlijn U.3 Bouw gelaagd...89 Richtlijn U.4 Foutmeldingen...89 Richtlijn U.5 Formulieren...89 Richtlijn U.6 Meertaligheid: Maak anderstalige content eenvoudig bereikbaar. 90 Richtlijn U.7 Geneste weergavekaders...90 Richtlijn U.8 Identificatie van tekens en symbolen...90 Richtlijn U.9 Openheid...90 Richtlijn U.10 URI's...90 Inhoudsopgave 10

11 Inhoudsopgave 11

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

13 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 WCAG en de Webrichtlijnen zijn gelaagd opgebouwd uit: Principes Richtlijnen Succescriteria Technieken Principes De basis van de Webrichtlijnen vormt WCAG 2.0. 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). Inhoudsopgave 13

14 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. Deze succescriteria staan centraal bij het toetsen van je website en staan ook centraal in dit e-book. 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. Dit zijn de afdoende technieken: voldoe je aan een techniek dan voldoe je aan het bijbehorende succescriterium. Inhoudsopgave 14

15 Voorbeeld H91: Using HTML form controls and links De technieken zijn genummerd en voor het nummer staat een of meerdere letters. Voor ons was het de eerste keer ook even zoeken wat de letters betekenen, want dat is nergens te vinden. Maar we zijn erachter. Enkele voorbeelden: G: General: een algemene techniek H: HTML-techniek PDF: PDF-techniek FLASH: Flash-techniek Er zijn ook afgekeurde technieken: gebruik je die, dan voldoe je zeker niet aan het succescriterium. 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. Inhoudsopgave 15

16 Als iemand informatie niet kan zien, dan kan hij deze mogelijk wel waarnemen als de informatie is omgezet naar hoorbare of voelbare informatie. Inhoudsopgave 16

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

18 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). 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 Inhoudsopgave 18

19 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 (touch screen), 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 Inhoudsopgave 19

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

21 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 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 noninterferentie. 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...). Inhoudsopgave 21

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

23 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 titleattribuut. Wel goed: <img src="monkeys.png" alt="2 apen in een boom" /> Hieronder is het title-attribuut gebruikt. Dat is niet goed. Inhoudsopgave 23

24 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 alt-tekst 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. Inhoudsopgave 24

25 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: Inhoudsopgave 25

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

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

28 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) 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 rood-groen-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. Inhoudsopgave 28

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

30 De oplossingen zijn vaak makkelijk, zoals in het voorbeeld hierna van een kaart. Linksboven het origineel (1), linksonder de versie bij kleurenblindheid (2). Het onderscheid dat met rood-groen was aangebracht is verdwenen. Inhoudsopgave 30

31 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 Inhoudsopgave 31

32 witte 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 Inhoudsopgave 32

33 zijn, als je ook een toegankelijk alternatief biedt. Dit toegankelijke alternatief moet wel direct aangeboden worden bij de ontoegankelijke kaart. 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 HTMLcode 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. Inhoudsopgave 33

34 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 Inhoudsopgave 34

35 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 Inhoudsopgave 35

36 de wijze waarop de player is geplaatst 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. Inhoudsopgave 36

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

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

39 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 Inhoudsopgave 39

40 ook bijvoorbeeld een video kunt afspelen: kun je bij de video komen en kun je ook weer de video verlaten, enkel met toetsenbord? 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. Inhoudsopgave 40

41 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 tabtoets 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. Inhoudsopgave 41

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

43 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: Inhoudsopgave 43

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

45 Inhoudsopgave 45

46 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 Inhoudsopgave 46

47 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: <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: Inhoudsopgave 47

48 Kies als basistaal Nederlands. Plaats om de content die in het Engels is een zogenaamde div, en geef deze het lang-attribuut 'en': <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. Inhoudsopgave 48

49 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 tevens 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 B1-niveau. Daarom maar het korte verhaal: hou het eenvoudig. 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. Inhoudsopgave 49

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

51 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: Inhoudsopgave 51

52 Je mag geen opmaakcode in de HTML hebben. Alle opmaakcode staat in CSS-bestanden. Een style-attribuut mag dus niet voorkomen. Je moet de HTML-tags gebruiken waar ze voor bedoeld zijn. Dus geen table-element gebruiken voor lay-out. 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 valignattribuut. Inhoudsopgave 52

53 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: 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. Inhoudsopgave 53

54 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. 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 2-letterige ISO-code is ook goed, dus bijvoorbeeld NL en EN. Inhoudsopgave 54

55 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? 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 Inhoudsopgave 55

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

57 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 object-code, 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 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: Inhoudsopgave 57