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 www.theinternetacademy.nl/digitaal-lezen.
Uitgever:
Auteur:
Met dank aan:
Datum:
Bronnen:
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
6 december 2014
WebAIM, www.webaim.org
WCAG 2.0, www.w3.org/TR/WCAG20/
Webrichtlijnen, www.webrichtlijnen.nl
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 http://www.gnu.org/licenses/fdl.html.
Inhoudsopgave
1. Inleiding.........................................................12
2. Richtlijnen voor een toegankelijke website.............13
2.1 Opbouw WCAG 2.0 en Webrichtlijnen 2......................................13
Principes.................................................................................... 13
Richtlijnen.................................................................................. 13
Succescriteria..............................................................................14
Technieken.................................................................................14
WCAG of Webrichtlijnen..................................................................15
2.2 Waarneembaar.....................................................................15
2.3 Bedienbaar..........................................................................19
2.4 Begrijpelijk..........................................................................19
2.5 Robuust..............................................................................20
2.6 Universeel...........................................................................20
2.7 De verschillen met Webrichtlijnen versie 1.................................20
2.8 Zelf toetsen.........................................................................21
2.9 Zelf testen met een screenreader.............................................21
3. Waarneembaar.................................................23
3.1 Afbeeldingen........................................................................23
Omschrijving...............................................................................23
Succescriteria..............................................................................23
Toepassen................................................................................... 23
3.2 Kleur en contrast..................................................................28
Omschrijving...............................................................................28
Succescriteria..............................................................................28
Toepassen................................................................................... 28
3.3 Geo-informatie.....................................................................32
3.4 Semantiek...........................................................................33
Inhoudsopgave
6
Omschrijving...............................................................................33
Succescriteria..............................................................................33
Toepassen................................................................................... 33
3.5 Video en audio.....................................................................35
Omschrijving...............................................................................35
Succescriteria..............................................................................35
Toepassen................................................................................... 35
3.6 Tabellen..............................................................................37
Omschrijving...............................................................................37
Succescriteria..............................................................................38
Toepassen................................................................................... 38
4. Bedienbaar......................................................39
4.1 Bedienbaar met toetsenbord en muis.........................................39
Omschrijving...............................................................................39
Succescriteria..............................................................................39
Toepassen................................................................................... 39
4.2 Skiplinks naar onderdelen van je site.........................................40
Omschrijving...............................................................................40
Succescriterium............................................................................41
Toepassen................................................................................... 41
4.3 Zichtbaar zijn waar je bent.....................................................41
Omschrijving...............................................................................41
Succescriterium............................................................................42
Toepassen................................................................................... 42
4.4 Koppen...............................................................................42
Omschrijving...............................................................................42
Succescriteria..............................................................................42
Toepassen................................................................................... 42
4.5 Hyperlinks...........................................................................43
Omschrijving...............................................................................43
Succescriteria..............................................................................43
Toepassen................................................................................... 43
4.6 Plaatsaanduiding...................................................................44
Inhoudsopgave
7
Omschrijving...............................................................................44
Succescriteria..............................................................................44
Toepassen................................................................................... 44
5. Begrijpelijk.....................................................46
5.1 Taal van de pagina.................................................................46
Omschrijving...............................................................................46
Succescriterium............................................................................46
Toepassen................................................................................... 46
5.2 Taal van tekstfragmenten........................................................46
Omschrijving...............................................................................46
Succescriterium............................................................................46
Toepassen................................................................................... 47
5.3 Begrijpelijke taal..................................................................48
Omschrijving...............................................................................48
Succescriteria..............................................................................48
Toepassen................................................................................... 48
6. Robuust en universeel........................................51
6.1 Correcte HTML-code..............................................................51
Omschrijving...............................................................................51
Succescriteria..............................................................................51
Voldoen..................................................................................... 51
6.2 Taalkeuze............................................................................54
Omschrijving...............................................................................54
Succescriterium............................................................................54
Toepassen................................................................................... 54
6.3 Inline frame of iframe............................................................55
Omschrijving...............................................................................55
Succescriterium............................................................................55
Toepassen................................................................................... 55
6.4 Javascript in aparte bestanden.................................................57
Omschrijving...............................................................................57
Succescriterium............................................................................57
Toepassen................................................................................... 57
Inhoudsopgave
8
6.5 Duidelijke foutmeldingen........................................................57
Omschrijving...............................................................................57
6.6 Duidelijke webadressen..........................................................58
Omschrijving...............................................................................58
Succescriterium............................................................................58
Toepassen................................................................................... 58
7. Bijzondere onderwerpen....................................61
7.1 Video en audio.....................................................................61
Video in MPEG4-formaat..................................................................61
Toegankelijke player......................................................................62
7.2 Pdf en andere digitale documenten...........................................62
Omschrijving...............................................................................62
Succescriteria..............................................................................62
Toepassen................................................................................... 63
7.3 Geo-informatie.....................................................................64
Omschrijving...............................................................................64
Succescriteria..............................................................................64
Toepassen................................................................................... 65
7.4 Formulieren.........................................................................67
Omschrijving...............................................................................67
Succescriteria..............................................................................67
Toepassen................................................................................... 67
8. Afwijken van WCAG 2.0......................................72
8.1 Gebruik geen CAPTCHA's.........................................................72
8.2 Voorzie video altijd van ondertiteling........................................73
8.3 Plaats bij een video altijd een transscript...................................73
8.4 Zorg altijd voor een goed contrast.............................................74
8.5 Zorg altijd voor keyboard-focus................................................74
8.6 Zorg dat links betekenisvol zijn................................................74
9. Geef dit aan je vormgever...................................76
Inhoudsopgave
9
9.1 Kleur van letters...................................................................76
9.2 Afbeeldingen van tekst...........................................................76
9.3 Voorkom narcisme of organisatiegericht denken...........................76
10. Principes, richtlijnen en succescriteria.................78
10.1 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...........................................................82
10.2 Principe 2: Bedienbaar.........................................................83
Richtlijn 2.1 Toetsenbordtoegankelijk.................................................83
Richtlijn 2.2 Genoeg tijd.................................................................83
Richtlijn 2.3 Toevallen....................................................................84
Richtlijn 2.4 Navigeerbaar...............................................................84
10.3 Principe 3: Begrijpelijk.........................................................85
Richtlijn 3.1: Leesbaar...................................................................85
Richtlijn 3.2 Voorspelbaar................................................................86
Richtlijn 3.3: Assistentie bij invoer.....................................................87
10.4 Principe 4: Robuust..............................................................88
Richtlijn 4.1: Compatibel................................................................88
10.5 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
Inhoudsopgave
11
1. Inleiding
In dit e-book bespreken we de Webrichtlijnen versie 2. Het doel van dit ebook 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
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
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
2.1.1 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
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
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
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
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
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
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
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
Meer hierover kun je lezen op
http://webaim.org/articles/screenreader_testing/.
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
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
•
1.1.1 Niet-tekstuele content (niveau A)
•
1.4.5 Afbeeldingen van tekst (niveau AA)
•
2.2.2 Pauzeren, stoppen en verbergen (niveau A)
•
2.3.1 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
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="http://twitter.com"><img 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
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
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
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
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
•
1.4.1 Gebruik van kleur (niveau A)
•
1.4.3 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
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
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
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
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
https://addons.mozilla.org/nl/firefox/addon/colorblind-simulator/
•
Colour Contrast Analyser (Win en Mac)
www.paciellogroup.com/resources/contrastAnalyser
3.3 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
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
•
•
1.1.1 Niet-tekstuele content (niveau A) (specifiek frametitels)
1.3.1 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
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 www.schema.org.
Inhoudsopgave
34
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
•
1.2.1 Geluidsopnames en video-opnames zonder geluid (niveau A)
•
1.2.2 Ondertiteling bij video-opnames (niveau A)
•
1.2.3 Tekstalternatief bij video-opnames (niveau A)
•
1.2.4 Ondertitels voor doven en slechthorenden, live video (niveau AA)
•
1.2.5 Audiodescriptie bij video-opnames (niveau AA)
•
1.4.2 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
•
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
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 http://mediaelementjs.com/.
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 € 1.500 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
Succescriteria
•
1.3.1 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
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
•
1.3.2 Betekenisvolle volgorde (niveau A)
•
2.1.1 Toetsenbord (niveau A)
•
2.1.2 Toetsenbordval (niveau A)
•
2.4.1 Blokken overslaan (niveau A)
•
2.4.7 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
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, www.theinternetacademy.nl. 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
Succescriterium
•
2.4.1 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 www.theinternetacademy.nl.
4.3 Zichtbaar zijn waar je bent
Omschrijving
Succescriterium 2.4.7 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
Succescriterium
•
2.4.7 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
•
2.4.2 Paginatitel (niveau A)
•
2.4.6 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
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
•
2.4.4 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
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
•
1.3.3 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
Inhoudsopgave
45
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
•
3.1.2 Taal van onderdelen
Inhoudsopgave
46
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
•
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
•
3.1.3 Ongebruikelijke woorden (Niveau AAA)
•
3.1.4 Afkortingen (Niveau AAA)
•
3.1.5 Leesniveau (Niveau AAA)
Toepassen
Leesniveau
Om een lang verhaal kort te maken: zorg dat je tekst eenvoudig leesbaar is.
Inhoudsopgave
48
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
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
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
•
4.1.1 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
•
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
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
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="https://www.facebook.com/sharer/sharer.php?
u=http://www.leukdomein.nl/verslag-congres&t=bijdrage">
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
•
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
•
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
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 www.ncdt.nl.
6.4 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
•
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:
www.theinternetacademy.nl/xyz
6.6 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.
Een duidelijke URL is een URL die normale woorden bevat en zo goed leesbaar
is, bijvoorbeeld:
http://www.nngroup.com/reports/
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:
www.gemeentebest.nl/afval-en-klikos/ophaaldagen-afval/
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:
Inhoudsopgave
58
https://loket.bergennh.nl/Loket/prodcat/products/getProductDetailsAction.do?
name=Antireclamesticker
Het adres hieronder is ook niet goed:
https://secure.beverwijk.nl/simeform.php?
simaction=content&pagid=1&form=00416158bd6039f0fbea5a1fc422e61d5522
3c2affa0d2a
Het adres hieronder is nog net wél goed:
http://www.beverwijk.nl/internet/nieuws_3281/item/geluidsoverlast-doorwerkzaamheden_62495.html
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.
Dit adres hieronder is ook goed, maar het is nogal onbenullig om te melden
dat je op internet zit ...:
www.beverwijk.nl/internet/haven_3127/
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:
www.vught.nl/geboorte
Klik je daarna op 'Aangifte geboorte', dan krijg je als adres:
Inhoudsopgave
59
www.vught.nl/aangifte-geboorte
Zo krijg je superkorte en superleesbare webadressen.
Inhoudsopgave
60
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)
Inhoudsopgave
61
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
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
Inhoudsopgave
62
•
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.
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
Inhoudsopgave
63
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 1.7
•
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
•
1.1.1 Niet-tekstuele content
•
1.4.1 Gebruik van kleur
•
1.4.2 Geluidsbediening
Inhoudsopgave
64
•
1.4.3 Contrast (minimum)
•
2.1.1 Toetsenbord
•
2.1.2 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.
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.
Inhoudsopgave
65
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.
Inhoudsopgave
66
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
•
•
•
•
•
•
•
•
•
•
•
1.1.1 Niet-tekstuele content (niveau A)
1.3.1 Info en relaties (niveau A)
2.2.1 tijd is aanpasbaar
3.2.1 Wijziging bij focus
3.2.2 Wijziging bij input
3.3.1 Fouten voorkomen en herstellen (niveau A)
3.3.2 Labels of instructies (niveau A)
3.3.3 Foutsuggestie (niveau AA)
3.3.4 Foutpreventie, wettelijk, financieel, gegevens (niveau AA)
4.1.2 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.
Inhoudsopgave
67
Toetsenbordtoegankelijk
Als een formulier niet toetsenbordtoegankelijk is, dan is deze volledig
onbruikbaar voor gebruikers van screenreaders. Meestal is verkeerd gebruik
van JavaScript het probleem.
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 labelid-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
Inhoudsopgave
68
•
◦
radiobuttons
◦
dropdowns
het value-attribuut bij:
◦
submit
◦
reset
•
tekst tussen button-tags bij een button
•
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.
Inhoudsopgave
69
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
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.
Inhoudsopgave
70
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.
Succescriterium 2.2.1 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.
Inhoudsopgave
71
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
Inhoudsopgave
72
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.
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.
Inhoudsopgave
73
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.
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 hoogcontrast-versie. 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:
Inhoudsopgave
74
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.
Inhoudsopgave
75
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.
Inhoudsopgave
76
•
Gebruik NOOIT bewegende content, zoals caroussels. Niet overtuigd?
Kijk op shouldiuseacarousel.com.
•
Moet er een caroussel komen, zorg voor een duidelijke stop/pauzeknop.
•
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.
Inhoudsopgave
77
10. 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
www.webrichtlijnen.nl/richtlijnen.
10.1 Principe 1: Waarneembaar
Content is waarneembaar voor de zintuigen (zicht, gehoor en/of tast).
Richtlijn 1.1: Lever tekstalternatieven voor niet-tekstuele content
1.1.1 Niet-tekstuele content (niveau A)
4. 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.
5. Afbeeldingen die geen betekenis overbrengen, zijn opgenomen in de CSS
als achtergrond. Kan dat niet, dan krijgen ze een leeg alxt-attribuut
(alt=""). Het gaat hier om decoratieve afbeeldingen of afbeeldingen die
informatie bevatten die in de tekst al is overgebracht.
6. 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)
7. 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.
8. Formulierknoppen hebben een alternatieve tekst.
9. Invoervelden zijn gekoppeld aan de beschrijving van de invoervelden.
10. Video en audio zijn voorzien van een alternatieve tekst.
11. Frames hebben een titel die de inhoud van het frame duidelijk maakt.
Inhoudsopgave
78
Richtlijn 1.2: Lever alternatieven voor video en audio
1.2.1 Geluidsopnames en video-opnames zonder geluid, niet live (niveau
A)
1. Bied bij geluidsopnames ook een uitgeschreven tekst (transcript) aan,
inclusief auditieve informatie. Denk hierbij aan MP3-bestanden en
podcasts.
2. Voeg aan video-opnames zonder geluid een tekstalternatief of een
audiobeschrijving toe.
1.2.2 Ondertiteling bij video-opnames (niveau A)
1. 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.
Ondertiteling is niet alleen handig voor doven of slechthorenden, maar voor
iedereen die de video bekijkt zonder geluid en daarnaast ook voor
laaggeletterden.
1.2.3 Tekstalternatief bij video-opnames (niveau A)
1. 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.
1.2.4 Ondertitels voor doven en slechthorenden, live (niveau AA)
2. Alle auditieve informatie van een live video-uitzending is beschikbaar als
ondertiteling.
1.2.5 Audiodescriptie, vooraf opgenomen (niveau AA)
1. Alle hoorbare informatie in een video-opname is aan de video toegevoegd
als spraak (audiodescriptie).
Inhoudsopgave
79
Richtlijn 1.3: Aanpasbaar
Maak content zo dat deze op verschillende manieren gepresenteerd kan
worden zonder dat de informatie of de structuur verloren gaat.
1.3.1 Info en relaties (niveau A)
1. 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>).
2. 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.
3. 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.
4. Vermijd de JavaScript-functies document.write() en object.innerHTML.
1.3.2 Betekenisvolle volgorde (niveau A)
1. De leesvolgorde en de volgorde van de navigatie (bepaald bij de volgorde
van de code) zijn logisch en intuïtief.
Inhoudsopgave
80
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.
1.3.3 Zintuiglijke eigenschappen (niveau A)
1. 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.'
2. Instructies zijn niet afhankelijk van geluid, bijvoorbeeld 'Bij het
pieptoontje mag je verder gaan.'
Inhoudsopgave
81
Richtlijn 1.4 Onderscheidbaar
Maak content makkelijk hoorbaar en zichtbaar, inclusief het onderscheid
voorgrond-achtergrond.
1.4.1 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.
1.4.2 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.
1.4.3 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.
1.4.4 Aanpassen van de grootte van tekst (niveau AA)
•
De pagina is leesbaar en functioneert nog steeds goed als de
tekstgrootte verdubbeld wordt.
1.4.5 Afbeeldingen van tekst (niveau AA)
•
Een afbeelding van tekst wordt niet gebruikt als de tekst in
vergelijkbare lay-out ook als tekst gepresenteerd kan worden.
Inhoudsopgave
82
10.2 Principe 2: Bedienbaar
Formulieren, bedieningsknoppen en navigatie zijn bedienbaar.
Richtlijn 2.1 Toetsenbordtoegankelijk
Maak alles bedienbaar met het toetsenbord.
2.1.1 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.
2.1.2 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.
2.2.1 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
Inhoudsopgave
83
2.2.2 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
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.
2.3.1 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.
2.4.1 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.
2.4.2 Paginatitel (niveau A)
•
Webpagina's hebben een beschrijvende en informatieve paginatitel.
2.4.3 Focusvolgorde (niveau A)
•
De volgorde van de links van bijvoorbeeld menu en formulieren is logisch
en intuïtief.
Inhoudsopgave
84
2.4.4 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.
2.4.5 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.
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.
2.4.7 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.
10.3 Principe 3: Begrijpelijk
Informatie en de bediening van de gebruikersinterface zijn begrijpelijk.
Richtlijn 3.1: Leesbaar
Maak tekst leesbaar en begrijpelijk.
3.1.1 Taal van de pagina (niveau A)
•
De taal van de pagina is aangegeven met het lang-attribuut van het
HTML-element (<html lang="nl">).
Inhoudsopgave
85
3.1.2 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.
3.2.1 Bij focus (niveau A)
3. Als een pagina-element focus krijgt, geeft dat geen wijziging, die
verwarrend kan zijn voor de gebruiker. Denk hierbij aan:
• wijziging van de pagina
• het openen van een pop-upvenster
• een wijziging van de focus
3.2.2 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
Inhoudsopgave
86
• elke andere verandering die de gebruiker kan verwarren
3.2.3 Consistente navigatie (niveau AA)
•
Navigatie die herhaald wordt op meerdere pagina's wijzigt niet van
volgorde.
3.2.4 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.
3.3.1 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.
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.
3.3.3 Foutsuggestie (niveau AA)
•
Als het formulier een invoerfout aangeeft, geef dan tijdig en op een
toegankelijke manier suggesties voor het herstellen van de fout.
3.3.4 Foutpreventie, wettelijk, financieel, gegevens (niveau AA)
4. Als een gebruiker wettelijke of financiële gegevens kan aanpassen, dan
moet de gebruiker minimaal 1 van de volgende mogelijkheden hebben:
Inhoudsopgave
87
• Ongedaan maken: aanpassingen kunnen annuleren
• Controleren: aanpassingen controleren en kunnen herstellen
• Bevestigen: aanpassingen bevestigen voordat ze definitief zijn
10.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.
4.1.1 Parsen (niveau A)
•
Een webpagina moet valideren. Dit kun je controleren op
http://validator.w3.org/.
•
De HTML-elementen voorzien zijn van volledige begin- en eindtags.
4.1.2 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.
10.5 Principe Universeel
Content is betekenisvol, bruikbaar, uitwisselbaar en duurzaam.
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.
Inhoudsopgave
88
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).
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.
Inhoudsopgave
89
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.
Inhoudsopgave
90
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.
Inhoudsopgave
91

Kwaliteit van belastingrechtspraalc belicht

WC verhalen - Free Musketeers

gezocht: communicatie verantwoordelijke (m/v)

Disclaimer Deze website wordt u aangeboden door

Instructie voor docenten Electric Slide Net

PSG Accessories 2013 Datasheet New Font - HP - Hewlett

Fixico B.V. Keizersgracht 285 1016 ED Amsterdam KvK

VOORGENOMEN BESLUIT PIEK- EN NIET-VEILDAGEN 2015

Maattabel IJD-trui (maten in cm) Omschrijving XS S M L XL H05

Hewa zelfaanzuigende centrifugaalpomp City

Samenvatting Summary