Handboek Toegankelijk schrijven voor het web Schrijf teksten die toegankelijk, begrijpelijk en vindbaar zijn

Auteur: Jaap van de Putte

Cursus volgen? Bekijk ons cursusaanbod op The Internet Academy, www.theinternetacademy.nl.

Auteur:

Jaap van de Putte

Met bijdragen van: Ab Bertholet (Ab&Co) Iacobien Riezebosch (Iacobien.nl), Tom Hessels (Bartimeus), Tim van Schie (Stichting Accessibility), Gerard Copinga (Stichting Accessibility), Sandra Uittenbogaart (Taak & Tekst) Versie:

14 februari 2013

Dit handboek wordt regelmatig bijgewerkt. De laatste versie vindt u op www.theinternetacademy.nl/handboek.

Copyright (C) 2013 Drs. J.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. Verantwoording.................................................................... 7 2. Inleiding............................................................................. 9 3. Hoe lezen mensen op het web?..............................................11 3.1 Mensen lezen langzamer en onrustiger.......................................11 3.2 Mensen lezen in een F-vorm....................................................11 3.3 Mensen scrollen echt wel als het interessant is.............................12 3.4 Eenvoudige teksten zijn goed voor iedereen................................14 3.5 Zoekmachines zijn net mensen.................................................15 4. Principes van goed webschrijven............................................17 4.1 Schrijf voor de taak van de bezoeker.........................................17 4.2 Zet de belangrijkste informatie bovenaan...................................18 4.3 Gebruik verzorgde spreektaal..................................................19 4.4 Kies de woorden van de bezoekers............................................21 4.5 Maak teksten scanbaar..........................................................22 4.6 Zorg voor zelfstandige webcontent............................................23 4.7 Bespreek één onderwerp per pagina..........................................25 4.8 In 10 stappen naar een goede structuur van je webtekst .................25 5. Toegankelijkheid voor mensen met een functionele beperking.......27 5.1 Online toegankelijkheid is voldoen aan WCAG ..............................27 5.2 Mensen met een beperking.....................................................27 5.3 Browsen met een screenreader................................................28 5.4 Je website aanpassen............................................................ 31 5.4.1 5.4.2 5.4.3 5.4.4

Zorg voor tekstalternatieven...................................................... 31 Maak alles bereikbaar met het toetsenbord.................................... 31 Maak de vormgeving toegankelijk ...............................................31 Gebruik eenvoudige taal ..........................................................32

5.5 Toegankelijkheid in perspectief................................................ 32 5.5.1 Usability.............................................................................. 33 5.5.2 Findability............................................................................ 34

3

5.5.3 En waar moeten we nu voor kiezen?.............................................34

5.6 Webtoegankelijkheid geborgd in richtlijnen.................................35 5.6.1 Start van het internet ............................................................. 35 5.6.2 Start van het W3C .................................................................. 35 5.6.3 Publicatie WCAG 1.................................................................. 35 5.6.4 Europese commissie adviseert WCAG 1.0....................................... 35 5.6.5 DrempelsWeg en Waarmerk drempelvrij.nl.....................................36 5.6.6 Webrichtlijnen 1..................................................................... 36 5.6.7 WCAG 2.0 ............................................................................ 36 5.6.8 Webrichtlijnen 2..................................................................... 37 5.6.9 Alle richtlijnen voor toegankelijkheid op een rijtje...........................38 5.6.10 Alle toegankelijkheidslogo's op een rijtje.....................................38

6. Een goed CMS als voorwaarde.................................................39 6.1 Vorm gescheiden van structuur................................................39 6.2 De WYSIWYG-editor van het CMS..............................................40 6.3 Wat de editor niet mogelijk moet maken.................................... 41 6.4 Wat de editor wel moet kunnen................................................41 6.5 Tekst invoeren via de editor....................................................42 6.6 Meer weten over de richtlijnen voor editors.................................42 7. Richtlijnen voor webredacties................................................ 43 7.1 Indeling richtlijnen............................................................... 43 7.2 Structuur........................................................................... 43 7.2.1 7.2.2 7.2.3 7.2.4 7.2.5 7.2.6

Zet de belangrijkste informatie bovenaan...................................... 44 Geef iedere pagina een titel die de kern van het artikel samenvat........44 Plaats onder de titel een samenvatting.........................................46 Kies één onderwerp per artikel................................................... 47 Gebruik visuele ankerpunten...................................................... 47 Gebruik een pagina-index bij lange webpagina's............................... 48

7.3 Betekenisvol opmaken........................................................... 49 7.3.1 7.3.2 7.3.3 7.3.4 7.3.5 7.3.6

4

Gebruik kopopmaakprofielen voor koppen...................................... 50 Sla bij de kopregels geen niveaus over..........................................50 Gebruik een apart opmaakprofiel voor de opmaak van de samenvatting. .51 Gebruik vet om nadruk te leggen op woorden of zinsdelen..................51 Gebruik een [Enter] om naar een nieuwe alinea te gaan.....................52 Gebruik bij opsommingen de opsommingsopties van de teksteditor.......53

7.3.7 Vermijd quick & dirty-opmaak....................................................55

7.4 Taal .................................................................................55 7.4.1 Schrijf taakgericht. Zorg voor relevantie.......................................55 7.4.2 Houd het kort........................................................................ 56 7.4.3 Gebruik verzorgde spreektaal .................................................... 56 7.4.4 Kies de woorden die de bezoekers gebruiken...................................56 7.4.5 Beperk het gebruik van beeldspraak ............................................57 7.4.6 Geef aan als 2 of meer woorden in een andere taal zijn.....................58 7.4.7 Gebruik geen superscript of subscript...........................................61 7.4.8 Gebruik cijfers bij getallen........................................................ 62 7.4.9 Gebruik afkortingen zo weinig mogelijk.........................................63 7.4.10 Gebruik het blockquote-element voor zelfstandig geplaatste citaten....64

7.5 Afbeeldingen......................................................................65 7.5.1 7.5.2 7.5.3 7.5.4

Soorten afbeeldingen............................................................... 65 Geef elke betekenisvolle afbeelding een kort tekstueel alternatief.......66 Gebruik geen alt-tekst bij niet-informatieve afbeeldingen..................67 Plaats een langere beschrijving als dat nodig is...............................68

7.6 Hyperlinks..........................................................................70 7.6.1 7.6.2 7.6.3 7.6.4 7.6.5 7.6.6

Gebruik relevante inhoudswoorden in de linktekst............................70 Houd de linktekst kort.............................................................73 Open geen nieuwe vensters of tabs..............................................73 Zorg dat hyperlinks duidelijk te herkennen zijn...............................74 Maak duidelijk als het een externe link is......................................75 Beschrijf bij een aanklikbare afbeelding het doel in de alt-tekst..........75

7.7 Downloads en e-mailadressen..................................................76 7.7.1 7.7.2 7.7.3 7.7.4 7.7.5 7.7.6

Gebruik downloads voor print of archivering................................... 76 Zorg dat downloads toegankelijk zijn............................................77 Bied downloads ten minste ook in een open standaard aan..................77 Open downloads in hetzelfde venster/tab......................................78 Meld bij downloads het type bestand en de grootte..........................79 Vermeld in e-maillinks het volledige e-mailadres............................. 80

7.8 Tabellen............................................................................ 80 7.8.1 7.8.2 7.8.3 7.8.4 7.8.5

Bij een tweekolomstabel is extra opmaak niet nodig ........................80 Gebruik het th-element en scope-element voor rij- en kolomkoppen......81 Gebruik afkortingen bij lange rij- en kolomlabels............................. 82 Geef tabellen een titel............................................................. 83 Geef complexe tabellen een beschrijving in de vorm van een summary . .83

5

7.8.6 Vermijd het samenvoegen van rijen en kolommen............................84

7.9 Video................................................................................84 7.9.1 Video volgens de WCAG1-richtlijnen ............................................85 7.9.2 Video volgens de WCAG2-richtlijnen............................................. 86

7.10 Audio.............................................................................86 8. Zelf testen van je content ....................................................87 8.1 Vaststellen contrast tekstkleur en achtergrondkleur.......................87 8.2 Eenvoudig Nederlands ...........................................................87 8.3 Duplicate content................................................................88 8.4 Alt-teksten afbeeldingen .......................................................88 8.5 Gebruik van kopstijlen voor koppen ..........................................89 Bijlage 1: Webredactierichtlijnen...............................................90 Bijlage 2: Belangrijke termen....................................................93 Bijlage 3 Infographic alternatieve tekst afbeelding..........................96 Bijlage 4 Afbeeldingenregister...................................................97

6

Inhoudsopgave

1. Verantwoording Centraal in dit handboek staan de richtlijnen voor het toegankelijk invoeren en beheren van content. Met content bedoelen we teksten, afbeeldingen en multimedia zoals flashbanners, video en audio. De informatie in dit handboek is afkomstig van een aantal bronnen. Om te beginnen de volgende: • Webrichtlijnen, versie 2: http://versie2.webrichtlijnen.nl/norm/20101224 • WCAG 2.0: www.w3.org/TR/WCAG20 • www.webaim.org • www.accessibility.nl, de site van de Stichting Accessibility • www.useit.com, de website van Jakob Nielsen en dan met name de Alert Boxen Wij hebben ook veel kennis vergaard vanuit de LinkedIn-groepen “Webrichtlijnen” en “Webredactie en de Webrichtlijnen”. Om toegankelijke content te kunnen bieden is meer nodig dan een goede webredactie. Voorwaarden voor toegankelijke content zijn een goede technische inrichting van de site en een goed CMS. Op deze aspecten gaan we in deze syllabus niet verder in. Wij streven ernaar dit handboek up to date te houden. Met regelmaat passen we deze aan. Heb je een feedback? Stuur deze naar [email protected]. Jouw reactie is welkom. Het handboek verschijnt onder de zogenaamde GNU Free Doc License. In grote lijnen houdt deze licentie in dat je het recht hebt het handboek onbeperkt te kopiëren, uit te printen en te verspreiden zonder dat je licentiekosten verschuldigd bent, mits je de auteur(s) vermeldt. Deze syllabus is gratis te downloaden. Je kunt bij ons ook een geprinte versie bestellen. Deze leveren wij tegen onkostenvergoeding. 7

Inhoudsopgave Wij verzorgen ook cursussen, workshops en lezingen. Je kunt ons bereiken: • via de website www.theinternetacademy.nl/contact • per mail:[email protected] Wij hopen dat dit handboek bijdraagt aan de webtoegankelijkheid in het algemeen en aan jouw bedrijfsvoering in het bijzonder.

8

Inhoudsopgave

2. Inleiding Dit handboek is ontstaan vanuit het perspectief van toegankelijkheid. Toegankelijk schrijven betekent het inrichten van je content, zodat ook mensen met een beperking er gebruik van kunnen maken. Waar we al snel achter kwamen is dat toegankelijk schrijven ook vindbaar schrijven is. En ook begrijpelijk schrijven. En daarmee ook gebruiksvriendelijk schrijven. Alle richtlijnen die in dit handboek staan zijn goed voor alle type bezoekers, zelfs de robots van Google. Je hoeft je schrijven niet aan te passen aan een blinde, of aan een zoekmachine (die ook blind is) of aan een hoogopgeleide doelgroep. De regels blijven hetzelfde. Het leveren van toegankelijke content wordt ook steeds meer de norm. Op verschillende manieren is toegankelijkheid in verschillende sectoren verplicht geworden: • Overheden Gemeenten, waterschappen, provincies en de rijksoverheid moeten zich aan de toegankelijkheidsrichtlijnen houden. • HBO-instellingen en universiteiten • Bij HBO-instellingen en universiteiten is digitale toegankelijkheid opgenomen in het accreditatiestelsel. • Banken en verzekeraars Banken en verzekeraars moeten van de Algemene Financiële Autoriteit hun informatie in eenvoudig Nederlands aanbieden. Veel organisaties zien de toegevoegde waarde van toegankelijke content. Toegankelijke content is vooral geoptimaliseerde content, die vindbaar is en sterk gericht is op de eisen die nu en in de nabije toekomst aan ons gesteld worden, zoals het gebruik op smart phones en tablets. Door informatie toegankelijk aan te bieden is de kwaliteit van de informatievoorziening ook beter. Centraal in dit handboek staan de richtlijnen die wij ontwikkeld hebben en die we de Webredactierichtlijnen noemen. Ze zijn apart opgenomen in 9

Inhoudsopgave bijlage 1. Als je deze webredactierichtlijnen toepast voldoe je redactioneel volledig aan de nieuwe Webrichtlijnen, versie 2. Het handboek besteedt ook aandacht aan een aantal aspecten die belangrijk zijn voor ons begrip van het lezen op het web. Het eerstvolgende hoofdstuk gaat over hoe mensen nu eigenlijk lezen op het web (ze lezen niet, ze scannen ook niet, maar ze hoppen). Daarna bespreken we onze 5 algemene principes van goed schrijven. In de hoofdstukken daarna staan we eerst stil bij wat toegankelijkheid op het web eigenlijk betekent. In hoofdstuk 8 komen we uit de kern van dit handboek, de webredactierichtlijnen. Als je dit handboek gebruikt in een eigen training, dan kun je de volgende indeling aanhouden:  Hoofdstukken 3, 4 en 5 tot en met paragraaf 5.4 voor mensen voor wie het webschrijven niet hun hoofdactiviteit is, bijvoorbeeld decentrale webredacteuren.  Alle hoofdstukken voor mensen die dagelijks voor het web schrijven.

10

Inhoudsopgave

3. Hoe lezen mensen op het web? 3.1 Mensen lezen langzamer en onrustiger Het lezen vanaf een beeldscherm is moeilijker dan het lezen vanaf papier. Niet alleen leest het langzamer - ongeveer 10 tot 30 % langzamer [1] - maar het blijkt ook moeilijker om de concentratie en aandacht vast te houden. Mensen lezen onrustiger vanaf een beeldscherm. Het lezen van een internetpagina voegt nog een dimensie toe, want op een webpagina is ook vaak veel afleiding. Deze kenmerken resulteren in een bepaald leesgedrag: • Mensen lezen vluchtiger en oppervlakkiger. • Mensen lezen niet een hele tekst, maar hoppen van ankerpunt naar ankerpunt door de tekst heen. Ankerpunten zijn bijvoorbeeld tussenkopjes, hyperlinks en opsommingen. • Mensen lezen globaal. Ze proberen aan de hand van trefwoorden in de tekst zo snel mogelijk te bepalen of de tekst relevant is voor hen.

3.2 Mensen lezen in een F-vorm Hoe mensen precies een pagina scannen is uitgebreid onderzocht via zogenaamd eye-tracking-onderzoek. Hierbij wordt gekeken naar de oogbewegingen bij het lezen. Uit dit onderzoek komt naar voren dat we webpagina’s vaak lezen in een F-vormig patroon [2].

1 Zie Reading Online or on Paper: Which is Faster?, Sri H. Kurniawan and Panayiotis Zaphiris http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.12.2890 2 Zie www.useit.com/alertbox/reading_pattern.html 11

Inhoudsopgave

Afbeelding 1: F-vormige patronen bij het lezen van een webpagina. Bron: Jakob Nielsen's Alertbox, F-Shaped Pattern For Reading Web Content Hieruit concluderen we het volgende: • De tekst bovenaan is het belangrijkst. • Het begindeel van een kop is belangrijk. Mensen lezen vaak alleen het linkerdeel.

3.3 Mensen scrollen echt wel als het interessant is Mag je zo schrijven dat mensen moeten scrollen om alles te kunnen lezen? Het antwoord is: ja, scrollen is niet erg als je er maar voor zorgt dat de kern van de boodschap boven de fold te lezen is. Doe je dat niet dan loop je de kans lezers kwijt te raken, omdat ze denken dat de pagina niet interessant is. Als ze het interessant vinden lezen ze echt wel verder. De term fold komt uit de krantensector. Daar is de fold de vouw waarop de krant wordt gevouwen. Bij een krant is de regel dat het belangrijkste nieuws boven de fold staat.

12

Inhoudsopgave Voor een webpagina is de fold de onderkant van het beeldscherm. Alles wat onder de fold zit kunnen mensen pas lezen als ze scrollen. Deze fold is geen vast gegeven, want beeldschermen hebben veel verschillende resoluties. Gangbaar is om als “fold”-grens aan te houden 768 pixels. Ongeveer 90 % van Afbeelding 2: Gevouwen internetters heeft deze of een hogere krant resolutie. Dit is echter niet de ruimte die er

Afbeelding 3: Schermresolutie 768 px, effectief 619 pixels voor de website is. Een deel van die ruimte wordt nog gebruikt door de browser zelf en door werkbalken. Dit varieert ook weer per gebruiker. Hieronder een voorbeeld (Firefox). De effectieve ruimte is gedaald van 768 naar 619 pixels. Wat opvalt is dat er op deze resolutie niet veel meer dan de foto met tekst wordt getoond.

13

Inhoudsopgave Deze richtlijn is in de loop van de jaren veranderd. Eind jaren '90, toen het internet nog in zijn kinderschoenen stond, was de richtlijn “niet scrollen” [3], maar in de jaren daarna kwam men hier op terug. Scrollen is helemaal niet erg, zolang de kern van de boodschap maar boven de fold staat. En dat bereik je met het schrijven in de omgekeerde piramidevorm. Alle informatie over één onderwerp op één pagina heeft meer voordelen: • Mensen kunnen direct doorlezen en hoeven niet te klikken voor een nieuwe pagina. • Bij het printen of bij het opslaan staat ook alles in 1 printversie of in 1 bestand. • Zoekmachines indexeren die ene pagina sterker, want het hele onderwerp staat op één pagina.

3.4 Eenvoudige teksten zijn goed voor iedereen Jakob Nielsen heeft onderzocht wat de verbetering is in het lezen van een tekst wanneer deze vereenvoudigd is [4]. Interessant in zijn onderzoek is dat hij dit onderzoek gedaan heeft bij laaggeletterden én hooggeletterden. De algemene gedachte is vaak dat het vereenvoudigen van taal niet nodig is voor hooggeletterden, sterker nog, schertsend wordt het soms afgedaan als jipen-janneketaal, die alleen maar leidt tot irritatie. De resultaten van het onderzoek van Nielsen staan in onderstaande tabellen.

3 Zie www.useit.com/alertbox/9606.html 4 Zie www.useit.com/alertbox/20050314.html 14

Inhoudsopgave Succesvolle afronding taak ('Succes Rate') Originele webpagina

Herschreven webpagina

Laaggeletterden

46 %

82 %

Hooggeletterden

68 %

93 %

Tijdsbesteding taak ('Total Task Time') Originele webpagina

Herschreven webpagina

Laaggeletterden

22,3 minuten

9,5 minuten

Hooggeletterden

14,3 minuten

5,1 minuten

Tevredenheid* ('Satisfaction'), schaal: 1-5 schaal, 5 hoogste score Originele webpagina

Herschreven webpagina

Laaggeletterden

3,5

4,4

Hooggeletterden

3,7

4,8

Tabel 1: Resultaten onderzoek laaggeletterdheid, bron: Jakob Nielsen De conclusies zijn: • Een vereenvoudigde tekst wordt beter begrepen (success rate ofwel effectiviteit) • Een vereenvoudigde tekst wordt sneller gelezen (total task time ofwel efficiëntie). • Het vereenvoudigen van taal leidt tot een beter begrip van de tekst (satisfaction). • Genoemde verbeteringen gelden voor laaggeletterden én hooggeletterden. Met andere woorden: het vereenvoudigen van teksten is goed voor iedereen.

3.5 Zoekmachines zijn net mensen Er zijn nogal eens discussies tussen redacties en marketeers over voor wie de teksten nu geschreven worden: voor mensen of voor de zoekmachines. Een feit is dat zoekmachines enorm belangrijk zijn voor een site. Een misvatting 15

Inhoudsopgave is het echter om te denken dat teksten voor mensen en zoekmachines verschillen [5]. De wijze waarop zoekmachines teksten indexeren is in de loop van de jaren ook enorm veranderd en verbeterd. Een deel van het misverstand is daar wellicht op gebaseerd, namelijk omdat mensen zich baseren op de technieken van enkele jaren geleden. Zoekmachines gebruiken wiskundige algoritmes om teksten te indexeren. Deze algoritmes worden voortdurend aangepast. Daarbij streven ze ernaar om de teksten te indexeren zoals "mensen" ze waarderen [6]. Het heeft dus geen zin om een tekst vol te stoppen met trefwoorden enkel met als doel een betere indexatie. Dat kan zelfs contra-productief werken, omdat Google dit kan beoordelen als “over-optimalisatie” en daarmee een lagere indexering kan toekennen. Wel zinvol is het om te zoeken naar de woorden die geassocieerd worden met het onderwerp van de tekst. Dat is zinvol, omdat zoekmachines ook gebruik maken van LSI (zie hierboven in een van de vorige paragrafen). Zo zijn er meer parallellen tussen het schrijven voor mensen en voor zoekmachines. Ergo: het maakt niet uit voor wie je schrijft. Goed schrijven kent dezelfde spelregels voor mensen én voor zoekmachines.

5 Zie het www.2useit.nl/usabilityupdate/schrijven-voor-mensen-en-voorzoekmachines.php 6 Zie www.google.com/support/webmasters/bin/answer.py? hl=nl&topic=15260&answer=35769#1 16

Inhoudsopgave

4. Principes van goed webschrijven Goed schrijven is volgens ons meer dan toegankelijk schrijven. Het gaat om content voor het web die begrijpelijk en prettig is voor iedereen. En daarnaast ook optimaal geschikt is voor zoekmachines. We bespreken hier een aantal basisprincipes van goed schrijven voor het web: • Schrijf voor de taak van de bezoeker • Zet de belangrijkste informatie bovenaan • Gebruik verzorgde spreektaal • Kies de woorden van de bezoekers • Maak teksten scanbaar • Zorg voor zelfstandige webcontent • Bespreek één onderwerp per pagina

4.1 Schrijf voor de taak van de bezoeker Mensen komen niet voor informatie op jouw site, maar omdat ze iets willen doen. Ze hebben een taak, bijvoorbeeld achterhalen wanneer het huisvuil wordt opgehaald. Dat betekent dat de informatie die je op de site plaatst in de eerste plaats relevant moet zijn voor de taak die de bezoeker met de site heeft. Stel vast met welke taak jouw bezoeker op jouw site komt en richt je tekst in op zijn vragen [7]. Mensen zoeken niet naar informatie (“Informatie over paspoorten”), maar hebben een taak waarvoor ze op de site zijn (“Paspoort aanvragen”). Zorg dat in ieder geval in de titel en de samenvatting antwoord wordt gegeven op de vraag van de bezoeker. Wanneer je schrijft voor de taak van de bezoeker is de content relevant voor de bezoeker. Relevante content is wellicht het belangrijkste waar je op moet letten bij het beheren van de content van een site. En informatie is relevant als het aansluit op de taak van de bezoeker. 7 Meer weten over taakgericht schrijven? Zie The Stranger's Long Neck van Steve McGovern 17

Inhoudsopgave Hoe vind je nu de taken van de bezoeker? Gerry McGovern geeft in zijn boek “The Stranger's Long Neck” aan dat elke website slechts 3 tot 5 toptaken heeft. Veel sites hebben hun site onvoldoende ingericht op de toptaken. Gevolgen zijn volgens McGovern: • Menu's en links zijn verwarrend. • Zoekresultaten zijn slecht. • Informatie is verouderd. Het is daarom goed om informatie die niet behoort tot de taken van de bezoeker te verwijderen. Deze informatie staat de andere informatie in de weg in menu's en zoekresultaten. Vaak lukt het niet om deze informatie goed te onderhouden, waardoor er verouderde en soms onjuiste informatie op de website staat. Een idee van de taken die wel belangrijk zijn kun je vinden door dit na te vragen in jouw eigen organisatie. Medewerkers die klantcontact hebben weten vrij goed wat belangrijke items voor bezoekers zijn. Check vervolgens in de site of die informatie eenvoudig te vinden is. In veel gevallen zul je merken dat daar nog het nodige te verbeteren is.

4.2 Zet de belangrijkste informatie bovenaan Omdat mensen op een webpagina vluchtig lezen is het belangrijk dat de boodschap zo snel mogelijk duidelijk wordt. Dat kan door de belangrijkste informatie bovenaan te zetten, onder andere door een beschrijvende titel en een goede samenvatting bovenaan. Dit principe is bekend vanuit het schrijven van persberichten en ook hoe kranten geschreven zijn. Kranten weten dat mensen “koppensnellen”. Lezers willen door de voorpagina van de krant te scannen direct weten wat er speelt in de wereld. Voor het web is dat niet anders. Deze manier van schrijven wordt de omgekeerde piramidevorm genoemd (zie afbeelding hieronder). Dit houdt in: • De belangrijkste boodschap staat bovenaan. 18

Inhoudsopgave •

•

Na de kernboodschap komt ook belangrijke informatie, maar die is een uitbreiding van de inhoud die bovenaan staat. Als men geïnteresseerd is kan men de details hier lezen. De lezer kan op elk moment stoppen met lezen en heeft op elk moment de boodschap begrepen.

Afbeelding 4: Schrijven volgens de omgekeerde piramide

4.3 Gebruik verzorgde spreektaal Eenvoudig taalgebruik is goed voor iedereen. In hoofdstuk 3 hebben we laten zien dat een vereenvoudigde tekst beter is voor laaggeletterden én hooggeletterden. Eenvoudig Nederlands is vergelijkbaar met verzorgde spreektaal. Dus de taal die we gebruiken bij het spreken is in grote lijnen ook de taal die we kunnen gebruiken bij het schrijven. Maar wat is nu een eenvoudige tekst? Een manier om de complexiteit in te schatten is door gebruik te maken van het Europees Referentiekader. Het

19

Inhoudsopgave Europees Referentiekader kent 6 niveaus van taalgebruik. Voor het lezen zijn dat deze niveaus: A1 Ik kan vertrouwde namen, woorden en zeer eenvoudige zinnen begrijpen, bijvoorbeeld in mededelingen, op posters en in catalogi. A2 Ik kan zeer korte, eenvoudige teksten lezen. Ik kan specifieke voorspelbare informatie vinden in eenvoudige, alledaagse teksten zoals advertenties, folders, menu's en dienstregelingen en ik kan korte, eenvoudige, persoonlijke brieven begrijpen. B1 Ik kan teksten begrijpen die hoofdzakelijk bestaan uit hoogfrequente, alledaagse of aan mijn werk gerelateerde taal. Ik kan de beschrijving van gebeurtenissen, gevoelens en wensen in persoonlijke brieven begrijpen. B2 Ik kan artikelen en verslagen lezen die betrekking hebben op eigentijdse problemen, waarbij de schrijvers een bepaalde houding of standpunt innemen. Ik kan eigentijds literair proza begrijpen. C1 Ik kan lange en complexe feitelijke en literaire teksten begrijpen, en het gebruik van verschillende stijlen waarderen. Ik kan gespecialiseerde artikelen en lange technische instructies begrijpen, zelfs wanneer deze geen betrekking hebben op mijn terrein. C2 Ik kan moeiteloos vrijwel alle vormen van de geschreven taal lezen, inclusief abstracte, structureel of linguïstisch complexe teksten, zoals handleidingen, specialistische artikelen en literaire werken. Tabel 2: Europees Referentiekader, onderdeel lezen Eenvoudig Nederlands is taalniveau B1 (Bron: Kees ter Beek, Toegankelijke teksten op toeslagen.nl?). Dit taalniveau is voor 80 % van de Nederlanders begrijpelijk. Ook mensen met weinig scholing begrijpen taal op dit niveau. Teksten blijken echter vaak op een hoger niveau aangeboden te worden: het aanbodniveau is meestal C1, twee niveaus hoger dan het optimale niveau. Op www.accessibility.nl/kennisbank/tools/leesniveau-tool is een toets die een indicatie geeft van het taalniveau van een tekst. De tool kijkt naar woordlengte, zinslengte en woordfrequentie. Zoals bij de tool zelf ook is te 20

Inhoudsopgave lezen, geeft de tool niet meer dan een globaal idee van de technische leesbaarheid van de site. Want er zijn meer punten die van belang zijn voor de leesbaarheid, zoals de taakgerichtheid, de structuur en de schrijfstijl van een tekst. De tool is vooral illustratief en vanuit die optiek vaak een "eyeopener" bij het bespreken van een tekst.

4.4 Kies de woorden van de bezoekers Mensen scannen vluchtig of een tekst aansluit op wat zij zoeken. Bewust en onbewust blijft hun blik hangen bij woorden die ze bewust en onbewust associëren met het onderwerp dat zij zoeken. Een onderwerp is voor iemand nooit beperkt tot één woord. Mensen hebben een wolk van woorden die geassocieerd zijn met een bepaald onderwerp. Neem bijvoorbeeld iemand die informatie zoekt over slapeloosheid. Dit onderwerp is niet afgegrensd tot het woord slapeloosheid, maar hij zal tal van woorden associëren: slapen, bed, spanning, nacht, koffie, enzovoort. Deze manier van associëren wordt Latent Semantic Indexing (LSI) genoemd. LSI is voor het eerst in de jaren 50 en 60 in de neurolinguïstiek als verschijnsel beschreven. "Latent" refereert aan het feit dat deze associaties vaak onbewust aanwezig zijn, "semantic" betekent dat het om inhoudelijke gerelateerde woorden gaat. Wat is nu het belang van LSI voor jou als schrijver? We weten dat mensen vluchtig een webpagina beoordelen op relevantie. Bij deze beoordeling gebruiken ze LSI. Ze kijken dus niet alleen naar 1 of 2 specifieke trefwoorden, maar hebben een wolk van geassocieerde woorden waarmee ze zoeken naar de relevantie van de tekst. Het is daarmee van belang om niet alleen enkele specifieke trefwoorden te gebruiken, maar juist ook de woorden te gebruiken waarmee mensen het onderwerp zullen associëren. En dat zijn vaak alledaagse woorden. En geen ambtelijke woorden of organisatie-eigenwoorden.

21

Inhoudsopgave

Afbeelding 5: Iemand zoekt naar “twitter” ...

Afbeelding 6: ... en associeert dit bewust en onbewust met heel veel andere woorden.

Een voorbeeld. Wij zochten op een gemeentesite naar de tijden waarop vuilnis werd opgehaald. Via de zoekfunctie zochten we op vuilnis, maar vonden niets. Uiteindelijk blijkt dat het afval heet. Door in de tekst bij het vuilnis ook het woord afval te gebruiken zal dit meer herkenning oproepen bij de bezoeker. En het wordt beter gevonden in zoekmachines.

4.5 Maak teksten scanbaar Vaak wordt geschreven dat mensen op het web een tekst scannen, maar wij noemen dat liever hoppen. Scannen suggereert toch een snelle, maar lineaire actie, terwijl een lezer in feite met schokjes door een tekst gaat. Het lezen is sterk reactief: lezers reageren steeds op bepaalde wijzigingen in de layout van de tekst. De punten waar de lezer stopt met scannen en start met lezen zijn de visuele ankerpunten. De lezer hopt van ankerpunt naar ankerpunt. Ankerpunten zijn: 22

Inhoudsopgave • • • • • •

titel eerste alinea bovenste alinea('s) subkopjes opsommingen hyperlinkteksten afbeeldingen

Aangezien mensen bij het scannen zoeken naar relevante trefwoorden (LSI) is het van belang dat de ankerpunten relevante trefwoorden bevatten. Een hyperlinktekst met "klik hier" is om die reden niet geschikt, beter is met inhoudswoorden te verwijzen naar het onderwerp, bijvoorbeeld "medicijnen tegen slapeloosheid". Metaforen in subkopjes zijn bijvoorbeeld ook niet geschikt. Hoe creatief deze wellicht zijn vanuit schrijversperspectief, al scannend slaat de lezer ze snel over.

4.6 Zorg voor zelfstandige webcontent Een groot verschil tussen een krant en een website is dat de content op een website op allerlei manieren getoond wordt. In een krant niet: het papier ziet er bij iedereen hetzelfde uit. Als er een titel staat met een grote foto erbij is voor iedereen die lay-out hetzelfde. Anders is het met webcontent. Een artikel wordt als microcontent op andere plekken ook weer gepubliceerd, bijvoorbeeld (zie afbeelding hieronder): • als titel en samenvatting • als losse titel bij een nieuwsblok • als RSS-feed • als titel met een foto

23

Inhoudsopgave

Afbeelding 7: Voorbeelden van microcontent op De Telegraaf.nl Een titel van een bericht moet daarom begrijpelijk zijn zonder verdere context. Hetzelfde geldt voor een samenvatting of voor een paragraaf. Zelfs tot op zeker hoogte voor een alinea. Dit bedoelen we met het principe van zelfstandige content. Een groot voordeel van het schrijven in zelfstandige eenheden is dat de teksten goed herbruikbaar zijn [8]. Zo kan een tekst op meerdere plekken in de site gebruikt worden. Voor nieuwsachtige berichten speelt dit nog meer. Deze berichten kunnen bijvoorbeeld ook als RSS verspreid worden. Teksten worden zo geschreven dat ze herbruikbaar zijn. Moderne Content Management Systemen sluiten daar ook bij aan door informatie niet in pagina's op te slaan, maar in andere eenheden, die op meerdere plekken in 8 Write for Reuse, Jakob Nielsen's Alertbox, March 2, 2009. http://www.useit.com/alertbox/writing-reuse.html 24

Inhoudsopgave de website en eventueel in andere websites bruikbaar zijn (bijvoorbeeld als RSS).

4.7 Bespreek één onderwerp per pagina Mensen bepalen al scannend of een webpagina interessant is. Die beslissing wordt vaak al genomen op basis van de titel. Het is moeilijk om in één titel twee onderwerpen te benoemen. Het is ook moeilijk om de samenvatting zo te schrijven dat er twee onderwerpen duidelijk naar voren komen. Door toch twee onderwerpen in één artikel op te nemen is de kans groot dat de lezer één van de twee onderwerpen niet opmerkt. Ook voor Google is het beter om één onderwerp op één pagina te plaatsen. Het advies is daarom: bespreek slechts één onderwerp per pagina. Een site die dit toepast is de Wikipedia. Elke uitweiding naar een ander onderwerp wordt elders neergezet en via een link wordt daarnaar verwezen.

4.8 In 10 stappen naar een goede structuur van je webtekst In 2010 publiceerden wij een artikel met de titel “In 10 stappen naar een goede structuur van je webtekst “. Het volledige artikel is online [9] te vinden, wij volstaan hier met de 10 aandachtspunten. Deze aandachtspunten zijn goed als checklist te gebruiken. •

Het artikel

1. Bepaal het onderwerp. Kies per artikel één onderwerp. 2. Zorg voor zelfstandige, herbruikbare tekstblokken. 3. Bouw het artikel op met een titel, een lead en een body, tenzij het artikel daar te kort voor is. In dat geval kunnen de lead en de body worden samengevoegd tot 1 of enkele alinea's. •

De titel

4. Maak de titel kort en duidelijk. Vat het artikel samen in de titel. Ook zonder lead of afbeelding moet de titel duidelijk zijn. 9 www.2useit.nl/usabilityupdate/structureer-je-webtekst-in-10stappen.php 25

Inhoudsopgave 5. Gebruik relevante inhoudswoorden. De belangrijkste woorden staan aan het begin. •

De lead

6. Maak een samenvatting van het artikel. Deze samenvatting vormt de lead. De lead is geen introductie, zoals je vaak ziet in (lange) gedrukte teksten. 7. Zorg dat de essentie van de lead in de eerste 150 tekens staat. De lead zelf mag langer zijn. •

De body

8. Bouw de body op uit kleinere onderdelen, bijvoorbeeld alinea's en paragrafen. Elk onderdeel gaat over 1 subonderwerp. 9. Zorg voor ankerpunten die snel scannen faciliteren. De ankerpunten zijn tussenkopjes, opsommingen en hyperlinkteksten. 10. Kies relevante inhoudswoorden in de ankerpunten. Plaats de belangrijkste informatiewoorden aan het begin (“front-loaded”).

26

Inhoudsopgave

5. Toegankelijkheid voor mensen met een functionele beperking Toegankelijkheid van websites gaat over de toegankelijkheid van het web voor mensen met een beperking. Dat is dus een heel specifieke betekenis. Toegankelijkheid richt zich op inclusie, namelijk dat iedereen de kans moet krijgen om volwaardig deel te nemen aan onze maatschappij.

5.1 Online toegankelijkheid is voldoen aan WCAG Online toegankelijkheid is vastgelegd in internationale richtlijnen, de Web Content Accessibility Guidelines. Als je zegt dat je website toegankelijk is, dan geef je daarmee min of meer aan dat de website voldoet aan deze richtlijnen.

5.2 Mensen met een beperking Mensen met een beperking hebben minder mogelijkheden ten aanzien van gedrag of activiteiten [10]. Het aantal mensen met een beperking varieert van 1 tot 4 miljoen in Nederland, afhankelijk van de definitie. Het gaat bijvoorbeeld om: • blinden en slechtzienden • kleurenblinden • doven en slechthorenden • mensen met een motorische beperking • laaggeletterden • dyslectici • mensen met problemen in het verwerken van informatie, zoals mensen met niet-aangeboren hersenletsel, ADHD-ers en autisten • ouderen met vaak meerdere (kleinere) beperkingen Hoe groot deze groep is, is voer voor statistieken. In ieder geval is het een grote groep en is het voor grotere organisaties moeilijk vol te houden dat ze deze mensen niet in hun doelgroep hebben. 10 http://mens-en-samenleving.infonu.nl/pedagogiek/84742-het-verschiltussen-een-stoornis-beperking-en-een-handicap.html 27

Inhoudsopgave Voor deze mensen is het belangrijk dat websites voldoen aan enkele eisen, zodat zij die websites ook kunnen gebruiken. Een bijzondere groep vormen mensen met een verstandelijke beperking. Deze beperking stelt zoveel extra eisen aan een website dat het aanpassen van een algemene site niet toereikend is. Als een site zich richt op deze doelgroep is het nodig om daar een aparte vorm en inhoud – en dus een aparte website - voor te kiezen.

5.3 Browsen met een screenreader Blinden en ernstig slechtzienden kunnen geen beeldscherm gebruiken. Zij hebben dus iets anders nodig om de informatie van een webpagina te

Afbeelding 8: Blinde man met brailleleesregel krijgen. Zij gebruiken daarvoor een schermleesprogramma of screenreader, zoals Jaws of Supernova. Met een screenreader wordt de tekst van een website uitgevoerd als spraak. Aan een screenreader kan een brailleleesregel

28

Inhoudsopgave (zie afbeelding hierboven) worden gekoppeld, waarmee de spraak wordt uitgevoerd als braille. Het lezen van braille is complex. Veel blinden, zeker degenen die op latere leeftijd blind geworden zijn, beheersen geen braille en zijn aangewezen op de iets langzamere en soms minder handige spraakuitvoer. Spraakuitvoer wordt door veel meer mensen gebruikt. Behalve door blinden en slechtzienden wordt het bijvoorbeeld ook gebruikt door dyslectici. Een groot nadeel van spraak- en braille-uitvoer is dat de gebruiker het overzicht mist. Wanneer je een pagina kunt zien. zie je ook wat belangrijk is. Je ziet waar het menu staat, waar de (primaire) content staat, waar het nieuwsblok staat en waar de zoekfunctie te vinden is. Blinden missen dat overzicht. Om toch overzicht te krijgen kunnen ze direct bepaalde informatie opvragen: • koppenlijst (heading list, zie afbeelding hieronder): een lijst met alle kopregels, dus de h1, h2 enzovoort • linklijst (link list, zie afbeelding hieronder): een lijst met alle hyperlinkteksten Wanneer de headings goed zijn toegepast krijgt iemand met spraak-/brailleuitvoer snel een goed beeld van de inhoud van de pagina. Uiteraard is het dan ook belangrijk dat de teksten betekenisvol zijn (dus bijvoorbeeld niet "Wat heeft u er aan?", maar "Helderder beeld door LED-technologie"). Met een link lijst krijgt iemand snel overzicht van de inhoud, met name als iemand nog verder wil zoeken. Ook hierbij is het nodig dat de linkteksten betekenisvol zijn: 10 keer "klik hier" helpt dan niet, wel een tekst als "specificaties beamer 123".

29

Inhoudsopgave

Afbeelding 9: Voorbeeld koppenlijst (headings list) (software JAWS)

Afbeelding 10: Voorbeeld linklijst (link list) (software JAWS) 30

Inhoudsopgave

5.4 Je website aanpassen Om het mogelijk te maken dat mensen met een beperking je website goed kunnen gebruiken moet de website daar op aangepast zijn. In grote lijnen zijn de belangrijkste aanpassingen:  Zorg dat afbeeldingen en andere niet-tekstuele content die betekenis overbrengen een tekstalternatief hebben.  Maak alles bereikbaar met het toetsenbord.  Zorg dat de vormgeving geschikt is, bijvoorbeeld voldoende contrast  Zorg voor eenvoudige taal 5.4.1 Zorg voor tekstalternatieven Als je plaatjes gebruikt om betekenis over te brengen, dan moet je deze afbeeldingen een alternatieve tekst geven. Alleen dan worden de plaatjes ook begrepen door iemand die werkt met een screenreader. Nog een voordeel: zoekmachines zoals Google hebben dan ook de informatie. Wij leggen dit uit in paragraaf 7.5 (Afbeeldingen). 5.4.2 Maak alles bereikbaar met het toetsenbord Probeer eens je website te gebruiken zonder muis: kun je overal bij? Kun je bijvoorbeeld het menu openklappen? En kun je een video starten, stoppen en ook daarna weer verder browsen in je website? Het toegankelijk zijn van je website met een toetsenbord is een van de belangrijkste eisen voor een toegankelijke website. En dus makkelijk zelf te testen! 5.4.3 Maak de vormgeving toegankelijk Voor toegankelijkheid gelden ook een aantal eisen in de vormgeving van de website:  Zorg voor voldoende contrast tussen tekst en achtergrond. Als minimale norm geldt een contrastratio van 4,5:1 tussen tekst en achtergrond. Ook in afbeeldingen is het belangrijk dat er voldoende contrast is. Meer hierover kun je vinden hoofdstuk 8, Zelf toetsen van je content.  Breng geen betekenis over met kleur alleen. Denk bijvoorbeeld aan mensen met kleurenblindheid.  Sommige mensen hebben ook baat bij een rustige webpagina. Voor laaggeletterden is het prettig als de lay-out rustig is, want het lezen zelf 31

Inhoudsopgave is al inspannend genoeg. Ook mensen met een autistisch spectrum stoornis (ass) of mensen met ADHD hebben baat bij een rustige lay-out.  Verduidelijk de informatie op je website met icoontjes en andere afbeeldingen. 5.4.4 Gebruik eenvoudige taal De Stichting Lezen en Schrijven schat het aantal laaggeletterden op 1,5 miljoen mensen. Daarbij is de grens een taalvaardigheid gelijk aan groep 8 van de basisschool. Over dit onderwerp zijn wij een aparte syllabus aan het ontwikkelen. Het vereenvoudigen van taal is dus belangrijk voor een grote groep. Zoals in het voorgaande hoofdstuk is uitgelegd is het vereenvoudigen van taal goed voor elke lezer, dus het aanpassen van de taal is sowieso zinvol. Ondanks video, afbeeldingen en animaties is veel informatie nog gewoon tekst. Een beperking in het beheersen van de Nederlandse taal is een grote belemmering in het goed kunnen gebruiken van websites. Een beperking in de taal kan komen doordat Nederlands niet je moedertaal is, maar er zijn ook veel autochtone Nederlands die laaggeletterd zijn. Verder zijn er nog meer taalbeperkingen, zoals dyslexie en afasie, een taalstoornis na hersenletsel. Ook de ouderen vallen onder deze categorie: zij hebben minder goede ogen, een minder goede handfunctie en een tragere verwerkingssnelheid.

5.5 Toegankelijkheid in perspectief Zodra het gesprek over toegankelijkheid gaat verzuchten sommige websiteeigenaren dat er wel meer is dat belangrijk is voor hun site. En ze hebben helemaal gelijk. Naast toegankelijkheid zijn er nog 2 aspecten belangrijk voor websites (zie afbeelding hieronder), namelijk: 32

Inhoudsopgave  usability: ofwel de gebruiksvriendelijk en bruikbaarheid van een site  findability: de vindbaarheid van de site in zoekmachines

Afbeelding 11: Driehoek usability, findability en accessibility 5.5.1 Usability Usability is niet met één Nederlands woord te vertalen. Het is het beste te vertalen met gebruiksvriendelijkheid en bruikbaarheid. Usability is een vaag begrip, net zo vaag als bijvoorbeeld kwaliteit. De International Standards Organization definieert usability als volgt [11]: Usability is de mate waarin een product door bepaalde gebruikers in een bepaalde gebruikersomgeving kan worden gebruikt om bepaalde doelen effectief, efficiënt en naar tevredenheid te bereiken. In grote lijnen gaat het er om dat een site doet wat hij moet doen. Dat de site efficiënt en effectief antwoord geeft op de vraag van de bezoeker. En dat de bezoeker daarna tevreden is.

11 ISO DIS 9241-11, Guidance on usability 33

Inhoudsopgave 5.5.2 Findability Waar het bij usability om mensen gaat, gaat het bij findability om de nietmenselijke bezoekers van een site, namelijk zoekmachines. Zoekmachines – in Nederland vooral Google – zijn niet meer weg te denken van het internet en genereren bij vrijwel elke site veel bezoek. Bij veel sites zorgen de zoekmachines voor 50 % of meer van alle bezoek. Naast externe zoekmachines gaat het ook over interne zoekmachines, zoals SOLR. Globaal hanteren die dezelfde zoekalgoritmen. 5.5.3 En waar moeten we nu voor kiezen? Zowel usability, accessibility als findability stelt elk zijn eisen aan een website. Waar moeten we nu voor kiezen? Voor veel mensen zal usability het belangrijkst zijn, immers iedereen wil graag dat de gewone bezoeker de website gebruikt en waardeert. Anderen zullen ook de findability bijzonder belangrijk vinden, want veel sites “leven” van het verkeer dat de zoekmachines hun brengen. Het goede nieuws is dat de 3 sets van richtlijnen niet strijdig met elkaar zijn. Een betere toegankelijkheid draagt ook bij aan een betere usability en aan een goede findability. Een voorbeeld: een plaatje heeft een alternatieve tekst Bijdrage aan accessibility? Als iemand het plaatje niet kan zien, krijgt hij toch de informatie die het plaatje overbrengt. Bijdrage aan usability? Als de plaatjes niet worden getoond – bijvoorbeeld omdat iemand mobiel browst en plaatjes heeft uitstaan, dan krijgt hij toch de informatie over de afbeelding. Bijdrage aan findability? Via de alternatieve tekst wordt relevante informatie aan de tekst toegevoegd. Dit draagt bij aan een betere vindbaarheid van de pagina.

34

Inhoudsopgave

5.6 Webtoegankelijkheid geborgd in richtlijnen 5.6.1 Start van het internet Als startpunt van toegankelijkheid nemen we het ontstaan van het World Wide Web in 1989. In dat jaar maakt Tim Berners-Lee de eerste webpagina door het systeem van hyperlinking te combineren met het internet [12]. De kracht van zijn uitvinding is dat de informatie op het web bereikbaar (toegankelijk) is op elke computer, ongeacht de gebruikte hardware en software. Hij beschrijft dit als volgt: “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Afbeelding 12: Tim Berners-Lee

5.6.2 Start van het W3C In 1994 wordt het W3C (www.w3.org) opgericht om standaardisatie binnen het internet tot stand te brengen. Directeur van het W3C wordt Tim BernersLee. Het W3C is een samenwerkingsverband van verschillende organisaties en individuen. 5.6.3 Publicatie WCAG 1 In 1999 publiceert het W3C de Web Content Accessibility Guidelines (WCAG). Doel van WCAG is het waarborgen van de toegankelijkheid van internetsites voor mensen met een functiebeperking. WCAG 1.0 bestaat uit 14 richtlijnen, met elk 3 toetsingsniveaus. 5.6.4 Europese commissie adviseert WCAG 1.0 In 2001 adviseert de Europese Commissie haar lidstaten om WCAG 1.0 (prioriteit 1) te volgen. Hoewel het geen verplichting is wordt de boodschap in de hele Europese Unie opgepikt.

12 Wil je hier meer over lezen, lees dan eens Weaving the Web van BernersLee. 35

Inhoudsopgave 5.6.5 DrempelsWeg en Waarmerk drempelvrij.nl De toepassing van de WCAG-richtlijnen in Nederland start in 2004 met het project DrempelsWeg. Later gaat dit project over in de stichting Waarmerk drempelvrij.nl. Met de komst van deze stichting werd het mogelijk om je website ook te laten toetsen op de richtlijnen. Als je voldoet aan de richtlijnen kom je in aanmerking voor het groene logo. Met de Drempelvrij-richtlijnen wordt het belang van een toegankelijk internet ook in brede kring duidelijk. Overheden, banken en bedrijven: in elke sector ontstaat het besef dat het belangrijk is dat websites toegankelijk moeten zijn voor iedereen, ook voor mensen met een functiebeperking. 5.6.6 Webrichtlijnen 1 Nederland besluit echter om verder te gaan dan WCAG 1.0 door er aanvullende kwaliteitscriteria aan toe te voegen en komt in juni 2006 met deze aangevulde set: de Webrichtlijnen. Via een ministerieel besluit (geen wet) komt de verplichting voor rijksoverheden dat hun websites voldoen aan de Webrichtlijnen. In december 2008 ondertekenen gemeenten, provincies en waterschappen het Nationaal Uitvoeringsprogramma Betere Dienstverlening en e-overheid (NUP). Daarin is afgesproken om de Webrichtlijnen te volgen. Afgesproken wordt dat alle websites van deze decentrale overheden op 1 januari 2011 moeten voldoen aan de Webrichtlijnen. Overheden worden aangemoedigd om te voldoen aan de Webrichtlijnen via een systeem van monitoring en ranking. Er geldt geen sanctiebeleid. 5.6.7 WCAG 2.0 Het W3C publiceert in december 2008 WCAG 2.0. WCAG 2.0 volgt na 9 jaar WCAG 1.0 op.

36

Inhoudsopgave WCAG 2.0 is gelaagd gebouwd met principes, richtlijnen, succescriteria en technieken. Bovenaan staan de 4 principes, afgekort met het acroniem POUR: • Perceivable (waarneembaar): informatie en componenten van de gebruikersinterface moeten waarneembaar zijn. • Operable (bedienbaar): componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn. • Understandable (begrijpelijk): informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn. • Robust (robuust): content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala van user agents, met inbegrip van hulptechnologieën. Elk principe kent een aantal richtlijnen, in totaal 12. Vervolgens heeft elk principe weer een aantal succescriteria. Deze succescriteria zijn uiteindelijk de criteria waarop de toegankelijkheid getoetst wordt. Een succescriterium hoort bij een bepaald niveau van conformiteit: level A, level AA en level AAA. Level A is de minimale toegankelijkheid. 5.6.8 Webrichtlijnen 2 In het najaar van 2010 zijn de nieuwe Webrichtlijnen opgesteld. Daarin zijn de WCAG 2.0-richtlijnen integraal opgenomen. En er is nog een principe toegevoegd: • Universeel: Creëer content die betekenisvol, voor iedereen bruikbaar, uitwisselbaar en duurzaam is. Waarschijnlijk kiest de rijksoverheid voor de verplichting aan overheden voor conformiteitsniveau AA.

37

Inhoudsopgave 5.6.9 Alle richtlijnen voor toegankelijkheid op een rijtje Voor het overzicht hebben we hieronder even alle richtlijnen in een schema geplaatst. WCAG-versie Richtlijnen in Nederland

Logo

WCAG 1.0

Waarmerk drempelvrij.nl Nive†au 1 (Prioriteit 1) Waarmerk drempelvrij.nl Niveau 2 (Prioriteit 1 en 2) Webrichtlijnen versie 1

Ja

WCAG 2.0

WCAG 2.0 Level A WCAG 2.0 Level AA WCAG 2.0 Level AAA

Nog niet

Webrichtlijnen 2 Level A Webrichtlijnen 2 Level AA Webrichtlijnen 2 Level AAA Zoek je een checklist voor een van deze sets van richtlijnen, kijk dan bij gratis lesmateriaal op www.theinternetacademy.nl. 5.6.10 Alle toegankelijkheidslogo's op een rijtje Hieronder staan de logo's die verleend worden als een site goedgekeurd is. Logo Gebaseerd op WCAG 1.0

Gebaseerd op WCAG 2.0

Waarmerk drempelvrij Niveau 1 WCAG 2.0/Webrichtlijnen 2 Level A (Prioriteit 1) Waarmerk drempelvrij Niveau 1 WCAG 2.0 Level AA (Prioriteit 1) Webrichtlijnen 1

38

Webrichtlijnen 2.0 Level AA

Inhoudsopgave

6. Een goed CMS als voorwaarde Het invoeren van webcontent gaat in vrijwel alle gevallen met een Content Management Systeem (CMS). Dit is het gereedschap waar webredacties de content mee moeten invoeren. Het is van belang dat het CMS het maken van goede content faciliteert. Dit kan doordat het CMS bepaalde invoer en opmaak juist wel of niet mogelijk maakt.

6.1 Vorm gescheiden van structuur Een belangrijk uitgangspunt van de Webrichtlijnen is dat de opmaak en de structuur van teksten gescheiden is. De scheiding kan verkregen worden door alle opmaak van teksten in aparte bestanden te plaatsen, de zogenaamde Cascading Style Sheets. Een webpagina is geschreven in de opmaaktaal HTML. HTML geeft structuur aan de inhoud van de tekst. Een titel boven een tekst heeft bijvoorbeeld een bepaalde HTML-opmaak:

Dit is de titel.

De opmaak van deze titel wordt gedefinieerd in een zogenaamde stylesheet of voluit: de Cascading Style Sheet, afgekort tot CSS. In de CSS kunnen we bijvoorbeeld aangeven dat het opmaakprofiel h1 groot en vet moet zijn (zie het voorbeeld hieronder). In de browser worden het HTML-bestand en het CSS-bestand samengevoegd tot een webpagina.

39

Inhoudsopgave

Afbeelding 13: HTML en CSS Het idee om structuur en opmaak te scheiden is logisch: zo staat alle informatie over structuur in de HTML en alle informatie over vormgeving in de CSS. De CSS van een website is enigszins te vergelijken met de opmaakprofielen in een tekstverwerker. Ook daar kun je instellen dat teksten standaard een bepaalde opmaak krijgen. Wanneer een website wordt gebouwd bespreekt de webbouwer samen met de webeigenaar welke opmaak er voor de teksten wordt gekozen. Deze afspraken worden vastgelegd in de CSS. Wanneer je als webredacteur ontevreden bent over de opmaak van een bepaalde stijl dan kun je binnen jouw organisatie afspreken dat de lay-out van die stijl wordt gewijzigd. De webbouwer verwerkt dit weer in de CSS.

6.2 De WYSIWYG-editor van het CMS Voor het invoeren van content gebruikt de webredacteur de editor van het CMS. Tegenwoordig is dat een invoertool die werkt volgens het WYSIWYGprincipe: What You See Is What You Get. Dat betekent: wat je op het invoerscherm ziet is gelijk aan wat er op de site verschijnt. Ook dit principe zul je kennen van jouw tekstverwerker.

40

Inhoudsopgave Onderstaand een voorbeeld van zo'n WYSIWYG-editor.

Afbeelding 14: WYSIWYG-editor

6.3 Wat de editor niet mogelijk moet maken Een editor bevat niet de volgende mogelijkheden: • onderstrepen • lettertype • lettergrootte • letterkleur • sub- en superscript • uitvullen (icoontje: ) • doorhalen (tenzij er een goede reden voor is)

6.4 Wat de editor wel moet kunnen De editor dient wel het volgende te ondersteunen: • het gebruik van opmaakprofielen en wel de volgende: ◦ kopstijlen: kop 1 (tenzij in het CMS de titel apart wordt ingevoerd), kop 2, kop 3, eventueel kop 4 ◦ standaard alineastijl ◦ samenvatting • vet (met HTML-tag strong) en cursief (met HTML-code em) • opsommingen, ongeordend en geordend • taal Het is ook belangrijk dat het CMS een zogenaamde HTML-modus kent. In de HTML-modus wordt de WYSIWYG-editor vervangen door een venster waarin je de HTML-code ziet en HTML kunt invoeren. Dat is handig als er met het kopiëren van tekst extra code is meegekomen, die niet meer verwijderd kan worden. In de HTML-modus kun je die code wel weghalen.

41

Inhoudsopgave

6.5 Tekst invoeren via de editor Vaak worden teksten vanuit een ander programma – bijvoorbeeld Word – gekopieerd en vervolgens in de editor geplakt om de tekst voor de website te gebruiken. Iedereen die dit wel eens gedaan heeft zal ook gemerkt hebben dat dat vaak mis gaat. Vanuit het tekstverwerkingsprogramma wordt allerlei code meegekopieerd die er voor zorgt dat de tekst er op de website niet goed uitziet. Hoe kun je nu gemakkelijk teksten plakken in de editor? Er zijn verschillende mogelijkheden, maar we geven de voorkeur aan het gebruik van de HTML-modus van de editor. Dat werkt als volgt: 1. Kopieer de tekst, bijvoorbeeld uit een tekstbestand of een webpagina. 2. Ga via het CMS naar de pagina die aangepast moet worden. 3. Klik in de editor op het icoontje om naar de HTML-modus te gaan. In de editor in de vorige paragraaf is dit het icoontje onderstaande editor het icoontje

, en in

4. Plak alle tekst in het venster. 5. Ga weer terug naar de gewone WYSIWYG-weergave. 6. Maak daar de tekst verder op door opmaakprofielen toe te passen en waar nodig vet en cursief voor nadruk toe te voegen.

6.6 Meer weten over de richtlijnen voor editors Bovenstaande opsommingen over wat de editor wel en niet moet kunnen zijn slechts enkele voorbeelden. De precieze richtlijnen staan beschreven in de ATAG-richtlijnen, eveneens uitgegeven door het WAI van het W3C.

42

Inhoudsopgave

7. Richtlijnen voor webredacties Je kunt nog zo'n goed CMS gebruiken, of de content uiteindelijk voldoet aan de Webrichtlijnen staat of valt met de redacteur die deze content invoert. Daarmee komen we op de eigenlijke inhoud van het handboek, namelijk het toegankelijk invoeren van content.

7.1 Indeling richtlijnen We hanteren bij het bespreken van de richtlijnen de volgende indeling: • Structuur • Betekenisvol opmaken • Taal • Afbeeldingen • Hyperlinks • Downloads • Tabellen • Video en audio Met content bedoelen we 3 verschillende vormen van inhoud: • teksten • afbeeldingen • video en audio, inclusief Flash-banners

7.2 Structuur Elke tekst heeft een bepaalde structuur. Het heeft een titel, tussenkopjes en bepaalde woorden of zinsdelen hebben extra nadruk. Het web is bij uitstek het medium waar informatie direct duidelijk moet zijn. Surfende bezoekers zitten niet te wachten op een lang intro, maar willen direct lezen waar een pagina over gaat. De bezoeker wil de pagina snel scannen om de relevantie te bepalen. Om dat te bereiken brengt de redacteur structuur aan in de teksten.

43

Inhoudsopgave 7.2.1 Zet de belangrijkste informatie bovenaan Het lezen vanaf het web is heel anders dan het lezen vanaf papier. Een belangrijk verschil is dat mensen bij het lezen van een webpagina gelijk willen weten waar een tekst over gaat. Zet daarom het belangrijkste bovenaan. Begin met een titel die beschrijft waar de pagina over gaat. Direct daarna een samenvatting, die kort en krachtig de boodschap vertelt. Er zijn ook uitzonderingen op deze regel, zoals bij teksten die een instructie bevatten of die een overzicht van verschillende onderwerpen behandelen. In dat geval is de bodytekst niet van belangrijk naar minder belangrijk geschreven. Maar dat geldt wel voor de titel en de lead: deze staan boven de body en beschrijven het belangrijkste van de pagina. 7.2.2 Geef iedere pagina een titel die de kern van het artikel samenvat Bovenaan een webpagina staat een titel. Deze titel vat kernachtig de inhoud van de webpagina samen. De titel bevat relevante trefwoorden, woorden die de bezoekers gebruiken. We hebben het hier over de titel die bovenaan een pagina staat. Deze hoort opgemaakt te zijn met een h1-element [13]. De titel is zelfstandig. Dat betekent dat hij begrijpelijk is buiten de context van het artikel. De titel is dus begrijpelijk zonder samenvatting en zonder eventuele foto. In grote lijnen kun je uitgaan van krantentitels. Die zijn geschreven voor "koppensnellen": door alleen de koppen te lezen weet je al wat er in de wereld speelt. Voor het web komt daar nog bij dat de titel begrijpelijk moet zijn zonder verdere context. Op het web kan een artikel op allerlei manieren gepubliceerd zijn: 13 “De titel” is een enigszins verwarrende term voor websites. Er is namelijk ook een andere titel op een pagina, namelijk de titel die zichtbaar is in het venster van je browser en die opgemaakt is met het HTML-element