Handboek Toegankelijk schrijven voor het web

Transcriptie

1 Handboek Toegankelijk schrijven voor het web Schrijf teksten die toegankelijk, begrijpelijk en vindbaar zijn Auteur: Jaap van de Putte

2 Cursus volgen? Bekijk ons cursusaanbod op The Internet Academy, 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 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

3 1. Verantwoording Inleiding Hoe lezen mensen op het web? Mensen lezen langzamer en onrustiger Mensen lezen in een F-vorm Mensen scrollen echt wel als het interessant is Eenvoudige teksten zijn goed voor iedereen Zoekmachines zijn net mensen Principes van goed webschrijven 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 In 10 stappen naar een goede structuur van je webtekst Toegankelijkheid voor mensen met een functionele beperking Online toegankelijkheid is voldoen aan WCAG Mensen met een beperking Browsen met een screenreader Je website aanpassen Zorg voor tekstalternatieven Maak alles bereikbaar met het toetsenbord Maak de vormgeving toegankelijk...31 Gebruik eenvoudige taal Toegankelijkheid in perspectief Usability Findability

4 5.5.3 En waar moeten we nu voor kiezen? Webtoegankelijkheid geborgd in richtlijnen Start van het internet Start van het W3C Publicatie WCAG Europese commissie adviseert WCAG DrempelsWeg en Waarmerk drempelvrij.nl Webrichtlijnen WCAG Webrichtlijnen Alle richtlijnen voor toegankelijkheid op een rijtje Alle toegankelijkheidslogo's op een rijtje Een goed CMS als voorwaarde Vorm gescheiden van structuur De WYSIWYG-editor van het CMS Wat de editor niet mogelijk moet maken Wat de editor wel moet kunnen Tekst invoeren via de editor Meer weten over de richtlijnen voor editors Richtlijnen voor webredacties Indeling richtlijnen Structuur Zet de belangrijkste informatie bovenaan 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 Gebruik visuele ankerpunten Gebruik een pagina-index bij lange webpagina's Betekenisvol opmaken Gebruik kopopmaakprofielen voor koppen 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

5 7.3.7 Vermijd quick & dirty-opmaak Taal Schrijf taakgericht. Zorg voor relevantie Houd het kort Gebruik verzorgde spreektaal Kies de woorden die de bezoekers gebruiken Beperk het gebruik van beeldspraak Geef aan als 2 of meer woorden in een andere taal zijn Gebruik geen superscript of subscript Gebruik cijfers bij getallen Gebruik afkortingen zo weinig mogelijk Gebruik het blockquote-element voor zelfstandig geplaatste citaten Afbeeldingen Soorten afbeeldingen 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 Hyperlinks 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 Downloads en adressen Gebruik downloads voor print of archivering 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 links het volledige adres Tabellen 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 Geef tabellen een titel Geef complexe tabellen een beschrijving in de vorm van een summary..83 5

6 7.8.6 Vermijd het samenvoegen van rijen en kolommen Video Video volgens de WCAG1-richtlijnen Video volgens de WCAG2-richtlijnen Audio Zelf testen van je content Vaststellen contrast tekstkleur en achtergrondkleur Eenvoudig Nederlands Duplicate content Alt-teksten afbeeldingen 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

7 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: WCAG 2.0: de site van de Stichting Accessibility 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 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

8 Wij verzorgen ook cursussen, workshops en lezingen. Je kunt ons bereiken: via de website per Wij hopen dat dit handboek bijdraagt aan de webtoegankelijkheid in het algemeen en aan jouw bedrijfsvoering in het bijzonder. 8

9 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

10 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

11 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 2 Zie 11

12 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

13 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

14 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 4 Zie 14

15 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

16 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 6 Zie hl=nl&topic=15260&answer=35769#1 16

17 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

18 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

19 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

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

21 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

22 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

23 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

24 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,

25 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

26 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

27 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

28 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

29 (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

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

31 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 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) 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! 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

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

33 usability: ofwel de gebruiksvriendelijk en bruikbaarheid van een site findability: de vindbaarheid van de site in zoekmachines Afbeelding 11: Driehoek usability, findability en accessibility 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 , Guidance on usability 33

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

35 5.6 Webtoegankelijkheid geborgd in richtlijnen Start van het internet Als startpunt van toegankelijkheid nemen we het ontstaan van het World Wide Web in 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 Start van het W3C In 1994 wordt het W3C ( 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 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 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

36 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 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 WCAG 2.0 Het W3C publiceert in december 2008 WCAG 2.0. WCAG 2.0 volgt na 9 jaar WCAG 1.0 op. 36

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

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

39 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: <h1>dit is de titel.</h1> 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

40 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

41 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

42 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

43 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

44 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 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 <title>. Dit <title>-element bespreken we hier verder niet. 44

45 als artikel als microcontent op de homepage of in een blok met nieuwsberichten als RSS op een andere site in een inhoudsopgave in een e-reader. Als voorbeeld nemen wij het volgende krantentitel: Altijd op jacht naar het applaus Deze titel is zonder verdere context onbegrijpelijk. In de krant staat boven de titel een grote foto van Peter Post. De titel is dan wel begrijpelijk, vanuit de context waar deze in staat. Een titel van een webpagina moet in elke context begrijpelijk zijn. Dit is het principe van zelfstandige content. Symbolische taal (zoals metaforen) is ook niet geschikt voor titels op het web, terwijl dit voor een krantentitel wel mogelijk is, zoals onderstaande krantentitel: Watersnood Brazilië houdt huis Zonder context is deze titel onvoldoende duidelijk. Op het web is deze titel niet geschikt. Een ander nadeel is dat de titel ook niet bijdraagt aan de vindbaarheid. Een goede webtitel hiervoor is bijvoorbeeld: Watersnood Brazilië komt door regenval en illegaal bouwen Een titel die een vraag stelt is ook geen goede titel. De titel moet namelijk antwoord geven, geen vragen oproepen. Een voorbeeld hoe dit niet moet vinden we op de website een rijksoverheidssite over kindermishandeling. Alle pagina's zijn vragen, bijna allemaal zonder betekenisvolle inhoudswoorden, zoals Ik weet het niet zeker. Bij voorkeur is de titel niet te lang, maar er is geen harde limiet voor de lengte. Als richtlijn kun je maximaal 55 tekens aanhouden. Soms is het voor de betekenis van de titel nodig dat deze iets langer is. 45

46 Bij voorkeur staat het belangrijkste woord bij de eerste 3 woorden. Dit wordt ook wel front-loaded genoemd. De volgende titel is daarom niet goed: Regenval en illegaal bouwen leidt tot watersnood Brazilië De bovengenoemde titel Watersnood Brazilië komt door regenval en illegaal bouwen is wel front-loaded. Naast een titel (de kop van de pagina, opgemaakt met h1) zijn er vaak ook tussenkoppen. Daar gelden globaal dezelfde contentregels voor als voor de titel van de pagina, maar wel minder strikt. Voorbeeld Bij een pagina over Paspoort is een goede titel Paspoort. Een goede tussenkop is dan Kosten. Deze tussenkop is voldoende duidelijk, ook al is deze niet betekenisvol buiten de context van de pagina. Je mag deze tussenkoppen wel betekenisvoller maken als dat kan, bijvoorbeeld Kosten paspoort 80. Leidend hierbij is de leesbaarheid van de teksten: te vaak paspoort hier gebruiken kan ook hinderlijk zijn bij het lezen. Een vraag als tussenkop is in veel gevallen te weinig betekenisvol. Het is per definitie een inleiding op wat gaat komen, en geen samenvatting. En de vraag bevat zo te weinig betekenisvolle woorden en de belangrijkste woorden komen aan het eind van de tussenkop. Als het niet hoeft, gebruik ook geen vraagstelling in een subkop Plaats onder de titel een samenvatting Direct onder de titel komt een samenvatting. Deze samenvatting beschrijft in een notendop de inhoud van het volledige artikel. De samenvatting is geen inleiding of een lekkermakertje, die de inhoud van het artikel nog verbergt [14]. Voor print kan dit werken, voor het web werkt dit niet. Vermijd ook hier symbolische taal. Voor de samenvatting gelden dezelfde principes als bij de titel, zoals het principe van zelfstandige content. Zorg dat de samenvatting begrijpelijk is, 14 Microcontent: How to Write Headlines, Page Titles, and Subject Lines, 46

47 ook zonder context. De samenvatting bevat de relevante trefwoorden die de bezoeker gebruikt voor het onderwerp. Zorg dat de belangrijkste boodschap al in de eerste 150 tekens wordt overbracht. Zoekmachines plaatsen altijd een tekstfragment bij zoekresultaten en dit fragment is ongeveer 150 tekens groot Kies één onderwerp per artikel Een pagina kun je niet voor 2 onderwerpen optimaliseren. Vandaar dat het goed is om per artikel één onderwerp te bespreken. Als je toch 2 onderwerpen bespreekt, loop je het risico dat een van de onderwerpen niet wordt gezien Gebruik visuele ankerpunten Vaak wordt geschreven dat mensen op het web een tekst scannen, maar wij noemen dat liever hoppen. Scannen suggereert een snelle lineaire actie, terwijl een lezer in feite met schokjes door een tekst gaat. Het lezen is sterk reactief: lezers reageren op bepaalde wijzigingen in de lay-out van de tekst. De punten waar de lezer stopt met scannen en start met lezen noemen wij de visuele ankerpunten [15]. De lezer hopt van ankerpunt naar ankerpunt. Ankerpunten zijn: titel bovenste alinea('s) subkopjes topische zin aan het begin van iedere alinea opsommingen hyperlinkteksten afbeeldingen vetgedrukte teksten. Doordat mensen hoppend lezen worden de teksten in de ankerpunten gelezen buiten hun context. Het is daarom van belang dat de ankerteksten van zichzelf al begrijpelijk zijn en de woorden bevat waar mensen op zoeken. Een hyperlinktekst met "klik hier" is om die reden niet geschikt. 15 Met ankerpunten bedoelen we hier niet de technische ankers (anchors) die horen bij een interne link 47

48 Beter is het om met inhoudswoorden te verwijzen naar de doeltekst, bijvoorbeeld "medicijnen tegen slapeloosheid". Metaforen in subkopjes zijn ook niet geschikt. Hoe creatief deze wellicht zijn vanuit schrijversperspectief, ze zijn niet altijd duidelijk buiten de context en daarmee niet effectief voor de lezer Gebruik een pagina-index bij lange webpagina's Bij een lange pagina is het handig een pagina-index op te nemen. Dit is een lijst met links naar informatie op dezelfde pagina. Neem de pagina-index direct ná de samenvatting op. De juiste volgorde is: titel pagina, samenvatting, pagina-index, body-tekst. Deze links worden (HTML-)ankerpunten genoemd en verwijzen naar de techniek erachter (anchors). De links in een pagina-index kunnen verwarrend zijn16]. Bij het klikken op een dergelijke link komt iemand lager op de pagina en daar is het menu en de header niet meer zichtbaar. Zorg dat door een goede lay-out duidelijk is dat het een pagina-index is. En bijvoorbeeld geen hoofdmenu van de site. Een duidelijke pagina-index vind je op Wikipedia (zie afbeelding hieronder). 16 Zie ook 48

49 Afbeelding 15: Pagina-index op Wikipedia. Volgorde is titel, samenvatting, index en body 7.3 Betekenisvol opmaken Met het opmaken van tekst maakt de redacteur de structuur van de tekst zichtbaar voor de lezer. Dit kan door via de editor de teksten van de juiste opmaakcodes te voorzien. Met het aanbrengen van de juiste opmaak wordt de tekst niet alleen zichtbaar gestructureerd. Ook voor mensen met spraaken braille-uitvoer en voor zoekmachines zijn deze codes belangrijk. Het primaire doel van opmaken is dus niet om het mooi te maken, maar om betekenis toe te voegen. Om die reden wordt de WYSIWYG-editor (What You See Is What You Get) ook wel WYSISYM genoemd: What You See Is What You Mean. Het gaat om betekenis geven aan de teksten, om het aanbrengen van structuur. In deze paragraaf benoemen we enkele belangrijke aandachtspunten voor het betekenisvol opmaken van tekst. 49

50 7.3.1 Gebruik kopopmaakprofielen voor koppen Titels van paragrafen en subparagrafen moeten altijd een heading (of kopopmaakprofiel) krijgen. Een titel boven een tekst heeft een heading1opmaakprofiel, kortweg h1. Een kopje daarna geef je een h2-opmaakprofiel, weer een niveau lager kies je voor h3. Met het gebruik van kopjes structureer je een tekst. Door de juiste kopstijlen (zoals h1 en h2) te gebruiken is deze structuur voor iedereen duidelijk, ook voor mensen die bijvoorbeeld een screenreader gebruiken. Gebruikers van screenreaders kunnen tevens zo eenvoudig van kop naar kop springen en zo snel de inhoud van de pagina scannen. En zoekmachines geven tekst in kopstijlen een zwaarder gewicht, dus ook voor de vindbaarheid in zoekmachines is het van belang. Een veel voorkomende fout is dat een redacteur een kopje enkel vet maakt. Het ziet er dan wel uit als een kopje, maar er ontbreekt een kopopmaakprofiel. Blinden nemen deze kop niet waar, want de kop is niet opgenomen in de koppenlijst die hun software kan geven. En ook zoekmachines kunnen de pagina minder op waarde schatten. Zorg dat elk kopje een kopopmaakprofiel heeft. Maak je je zorgen over de vormgeving van de heading? Is deze bijvoorbeeld te groot of heeft deze te veel witruimte? Zorg dan dat de CSS wordt aangepast. Bijkomend voordeel: de aanpassing is direct in de hele site zichtbaar Sla bij de kopregels geen niveaus over Net zoals bij een gewoon tekstdocument is het een goed gebruik om bij de paragraaftitels geen niveaus over te slaan. Na een h1 (de titel) komt een h2 en niet een h3. In een tekstdocument komt na "hoofdstuk 1" ook niet direct "paragraaf 1.1.1". Na een h2 kan een h2 of een h3 komen. De niveaus zijn een weergave van de structuur die een pagina heeft. Door geen niveaus over te slaan dwing je ook een goede structuur af. 50

51 Hieronder een voorbeeld van een goede headingstructuur. <h1>belastingvoordeel voor alleenstaande moeders</h1> <h2>de voordelen op een rij</h2> [stukje tekst] <h3>voordeel 1</h3> [stukje tekst] <h3>voordeel 2</h3> <h2>waar moet u op letten?</h2> <h3>dien uw aanvraag tijdig in</h3> <h4>voor Nederlanders</h4> [stukje tekst] <h4>voor mensen met een tijdelijke verblijfsvergunning</h4> Gebruik een apart opmaakprofiel voor de opmaak van de samenvatting Zoals we hierboven hebben aangegeven heeft een artikel een samenvatting, direct onder de titel. Vaak is er behoefte om de samenvatting een andere opmaak te geven. Doe dit niet door het vet te maken, maar gebruik daar een apart opmaakprofiel voor. Noem deze summary of samenvatting om redacteuren duidelijk te maken dat het een samenvatting moet zijn en bijvoorbeeld geen intro. In de HTML-code ziet dat er dan bijvoorbeeld als volgt uit: <p class="summary">dit is de samenvatting.</p> In veel CMS ontbreekt dit opmaakprofiel en in de meeste gevallen kan de webredactie ook niet zelf opmaakprofielen toevoegen. Vraag in die situatie of de webbouwer het profiel aan de editor kan toevoegen Gebruik vet om nadruk te leggen op woorden of zinsdelen Gebruik vet (in HTML heet dit strong) om een woord of zinsdeel nadruk te geven. Bijvoorbeeld: 51

52 Let op: Op Goede Vrijdag sluit de bilbiotheek al om uur. Gebruik vet niet om een paragraaftitel of een samenvatting op te maken. Als je dat doet geef je niet het goede opmaakprofiel mee, zodat mensen met spraak-/braille-uitvoer en zoekmachines de titels niet zullen opmerken. Gebruik voor paragraafkoppen de headings en voor de samenvatting een aparte profiel. Cursief (in HTML emphasis) kan in principe ook gebruikt worden voor nadruk, maar cursief leest minder goed op het web [17]. Probeer cursief daarom zo veel mogelijk te vermijden. Als je cursief gebruikt, doe dat bij voorkeur enkel voor losse woorden Gebruik een [Enter] om naar een nieuwe alinea te gaan In de meeste CMS-en start een Enter een nieuwe alinea. In plaats van een Enter wordt vaak ook een Shift-Enter (of 2 x keer een Shift-Enter) gebruikt om zo minder of juist meer afstand te krijgen tussen 2 alinea's. Met een Shift-Enter gaat de cursor naar een nieuwe regel en niet naar een nieuwe alinea. In de HTML wordt er geen nieuwe alinea gestart. Het lijkt daardoor dat er een nieuw alinea is gestart, maar in feite is het nog steeds dezelfde alinea. Het is beter om echt een nieuwe alinea te starten, om verschillende redenen: vanuit taalkundig perspectief: het is over het algemeen beter echte alinea's te gebruiken en geen pseudo-nieuwe alinea te starten. Kies voor dezelfde alinea of voor een nieuwe; vanuit usability: door af te spreken om een Enter voor een nieuwe alinea te gebruiken blijft de uniforme huisstijl op de site intact. vanuit vindbaarheid: zoekmachines interpreteren een alinea als een zelfstandige teksteenheid. Wanneer bepaalde trefwoorden samen in een alinea voorkomen geeft een zoekmachine deze een zwaarder gewicht; 17 Onder andere in Prioritizing Web Usability van Jakob Nielsen 52

53 vanuit toegankelijkheid: het scheiden van de tekst in echte alinea's maakt het mogelijk voor gebruikers van screenreaders om te springen van alinea naar alinea. Het scannen van de tekst wordt zo makkelijker. Als de afstand tussen alinea's te groot is, vraag dan de webbouwer om de alineastijl in de CSS aan te passen. Dan is de afstand gelijk in de hele website goed. Gebruik liever geen lege alinea's om ruimte te creëren. Dat regel je beter via de CSS door extra witruimte toe te voegen aan de opmaakprofielen Gebruik bij opsommingen de opsommingsopties van de teksteditor Om een opsomming te maken hebben de meeste CMS-en (en tekstverwerkingsprogramma's) aparte knopjes: één voor een ongeordende opsomming en één voor een geordende opsomming (zie afbeelding hieronder voor een voorbeeld in een editor). De internetterm voor een opsomming is Lijst. Afbeelding 16: Opsommingen in een CMS Om te zorgen dat ook in de HTML-code de tekst als een opsomming gecodeerd wordt, is het belangrijk de opsommingsmogelijkheden uit de editor te gebruiken en lijsten niet op een andere manier op te maken. De HTML van een ongeordende opsomming is bijvoorbeeld: <ul> <li>fietsen</li> 53

54 <li>wandelen</li> </ul> En op de site ziet dat er als volgt uit: Fietsen Wandelen Een genummerde lijst of geordende opsomming heeft als HTML-code bijvoorbeeld: <ol> <li>fietsen</li> <li>wandelen</li> </ol> En op de site ziet dat er als volgt uit: 1.Fietsen 2.Wandelen Omdat een opsomming niet altijd de gewenste opmaak heeft, kiezen webredacteuren er soms voor om de opsomming op een andere manier te maken, bijvoorbeeld door voor een gewone alinea een streepje ("gedachtestreepje") te plaatsen. Of bij genummerde lijsten door er gewoon een cijfer voor te zetten. Dat heeft enkele nadelen: vanuit oogpunt van accessibility: omdat de tekst niet opgemaakt is als een echte lijst zal de spraak- en braille-uitvoer hem ook niet als lijst herkennen. Spraakuitvoerprogramma's geven aan als er een opsomming (list) begint en opsommingen kunnen ook apart als lijst worden opgevraagd (Lists list of List items list); vanuit oogpunt van usability: lijsten, net als kopjes en hyperlinkteksten, zijn visuele ankerpunten bij het lezen. Niet goed vormgegeven lijsten kunnen zo makkelijk over het hoofd gezien worden 54

55 bij het snel scannen van een pagina. En als elke redacteur de opsommingen weer anders invoert maakt dat de site slordig en inconsistent; vanuit oogpunt van findability: goed opgemaakte opsommingen krijgen in zoekmachines een zwaarder gewicht. Soms heeft een opsomming niet de gewenste opmaak, zoals te veel witruimte of te veel inspringen. DE oplossing is ook hier: pas dit aan in de CSS Vermijd quick & dirty-opmaak Gebruik in de teksteditor niet de knoppen voor onderstrepen, lettertype, lettergrootte, letterkleur en achtergrondkleur. Onderstrepen: mensen zullen denken dat het een hyperlink is. Lettertype, lettergrootte, letterkleur en achtergrondkleur aanpassen: gebruik hiervoor de opmaakprofielen. Het lettertype ligt vast in de opmaakprofielen die gebaseerd zijn op de gekozen huisstijl voor de website. Uiteraard is het beter als deze knoppen helemaal niet in de editor aanwezig zijn. 7.4 Taal Taal bestaat uit woorden en zinnen. De keuze van woorden en de opbouw van zinnen bepaalt in hoeverre een tekst ook begrepen en gelezen wordt. De belangrijkste aandachtspunten bij taal zijn: schrijf taakgericht (relevant), houd het kort, schrijf eenvoudig en kies de woorden van de bezoeker Schrijf taakgericht. Zorg voor relevantie Stel jezelf de vraag bij alle tekst die je invoert: waarom is deze tekst zinvol voor de gebruiker? De informatie die je plaatst moet bijdragen aan de taak die de bezoeker met de site heeft. Is de informatie enkel ter promotie van jouw organisatie? Dan heeft het waarschijnlijk geen toegevoegde waarde voor jouw bezoekers en kan de informatie beter weggelaten worden. 55

56 7.4.2 Houd het kort Vanaf een beeldscherm lezen verloopt ongeveer 25 % langzamer dan vanaf papier. Een website maakt dat nog moeilijker, doordat er om de tekst heen allerlei andere informatie staat, die in aandacht concurreert met de tekst die gelezen wordt. Zorg daarom dat teksten kort zijn. Een vuistregel kan zijn: probeer 50 % van je tekst te schrappen, vervolgens nog eens 50% en je komt in de goede richting. Voor een ervaren schrijver voor het web zal dit niet gelden, maar de stelregel is wel illustratief hoe kort een tekst kan zijn. En hoe redundant hij doorgaans is. Met kort wordt niet bedoeld dat alles dicht op elkaar moet staan. Vaak is het beter om een opsomming ook als opsomming op te maken. De tekst neemt dan meer ruimte in, maar is door de betere structuur ook beter leesbaar Gebruik verzorgde spreektaal Met de opkomst van internet is ook het zakelijk taalgebruik informeler geworden. Beperk zoveel mogelijk: technische of juridische vaktaal, organisatiejargon dat bol staat van de afkortingen, ouderwets, ambtelijk taalgebruik. Soms hoor je de suggestie dat we in Jip-en-Janneketaal zouden moeten schrijven. Dat is doorschieten naar de andere kant. Jip en Janneke is voor kleine kinderen en die behoren meestal niet tot onze directe doelgroep. De norm voor zakelijke teksten die zich op een algemeen publiek richten, is verzorgde spreektaal. Dat is vergelijkbaar met het niveau B1 van het Europese Referentiekader (zie ook paragraaf 4.3). Schrijf zoals je het tegen een niet-ingewijde zou vertellen, en dan een tikje netter Kies de woorden die de bezoekers gebruiken Mensen zoeken met de woorden die ze zelf gebruiken. Zorg daarom dat deze woorden terugkomen in de teksten. Het zijn niet alleen de woorden die mensen gebruiken bij het zoeken, maar het zijn ook de woorden die mensen 56

57 associëren met wat zij zoeken. Als iemand zoekt hoe hij een WC moet installeren, zal ook het woord sifon hem opvallen. Niets is zo verleidelijk dan vanuit de organisatie te denken en te formuleren. Stel je bent een organisatie die tuinen onderhoudt en grasmaaiers verkoopt. Je kunt als menuknoppen kiezen "Producten" (de grasmaaiers) en "Diensten" (onderhoud van tuinen). Maar mensen die op zoek zijn naar grasmaaiers en/of tuinonderhoud denken niet in die termen. Beter zijn dan de knoppen "Grasmaaiers" en "Tuinonderhoud". Het voorbeeld klinkt wellicht eenvoudig, maar het probleem komt veel voor. Wat te denken van de term Melding incident openbare ruimte? Weet jij wat je moet doen als jouw stoep kapot is? Inderdaad, een melding incident openbare ruimte doorgeven. Zorg vooral dat de titel en de samenvatting betekenisvolle woorden bevatten. Een titel als Wat zou u doen? is een voorbeeld hoe het niet moet: er staat niet één betekenisvol woord in. Taakgericht schrijven lijkt erg op vraaggericht schrijven. Sommige sites zijn toonbeelden in vraaggericht schrijven, maar slaan toch de plank mis. Wat beide gemeen hebben is dat ze vanuit de 'klant' denken, maar in de tekstuele formulering moet je niet de vraag opschrijven, maar het antwoord. Ook kranten doen dit vaak niet goed. Ze denken nog teveel vanuit de context van een krant, te weinig vanuit het web. En vergeten dat dezelfde teksten steeds meer via het web of via e-readers worden gelezen. In plaats van vraaggericht is het wellicht beter om te spreken over antwoordgericht schrijven Beperk het gebruik van beeldspraak Laaggeletterden hebben meer moeite met het gebruik van beeldspraak of figuurlijk gebruikte taal. Als iemand de plank mis slaat kan dat door iemand die de taal minder goed kent letterlijk worden opgevat. 57

58 Voorbeeld 'Kabinet voor ultieme vuurproef' is een leuke woordspeling, maar geen goede titel boven een artikel over een nieuwe missie in Afghanistan. 'Missie Afghanistan lastig voor kabinet' is in dat opzicht een stuk effectiever. Een ander nadeel van figuurlijk gebruikte taal is dat het niet aansluit op de woorden van de gebruiker. De figuurlijk gebruikte uitdrukkingen zijn geen woorden die horen bij het onderwerp. Een bezoeker zoekt dus ook niet op die woorden om bij het onderwerp te komen. Beeldspraak draagt dus ook niet bij aan de vindbaarheid van de informatie Geef aan als 2 of meer woorden in een andere taal zijn Bij spraakuitvoer wordt de tekst opgelezen volgens de uitspraak van een taal. Zo wordt een Nederlandse pagina met een Nederlandse uitspraak opgelezen. In de code moet wel duidelijk gemaakt worden in welke taal een tekst is geschreven. Hoe dat moet leggen we uit voor 3 verschillende situaties: Hele pagina in een andere taal Bovenaan elke webpagina hoort de taalaanduiding te staan van de taal waarin de webpagina is geschreven. Bijvoorbeeld voor een Nederlandstalige pagina staat boven de content: <html xmlns=" xml:lang="nl" lang="nl"> Deze taalaanduiding is opgenomen in de template van de pagina. Als webredacteur heb je hier niets mee te maken, want deze taalaanduiding wordt door de webbouwer in de template geplaatst. Tekstfragmenten in een andere taal Anders is het als er in de Nederlandse tekst een stukje tekst in een andere taal staat. Dan is het ook belangrijk dat deze tekst in die andere taal wordt gelezen. De anderstalige tekst kun je markeren als Engels, Duits, net welke andere taal het is. Dat stukje tekst wordt dan met de uitspraak van die taal 58

59 opgelezen. Daarnaast is het voor de indexatie door zoekmachines ook van belang dat duidelijk is welke taal het betreft. Onderstaand CMS biedt deze mogelijkheid met een apart knopje voor "taal" (zie afbeelding hieronder). Afbeelding 17: Vereenvoudigde editor met taalkeuze De taal wijzigen van een stukje tekst doe je als volgt: Voer de tekst in. Selecteer het anderstalige deel van de tekst. Kies via de editor de juiste taal. In de code ziet dat er dan als volgt uit. Bijvoorbeeld de zin: Met de slogan Yes we can startte Obama zijn campagne. wordt dan: <p>met de slogan <span lang= en > Yes we can </span> startte Obama zijn campagne.</p> Welke woorden moet je nu zo markeren? Als er in je tekst een tekstfragment is van 2 woorden of meer moet je dit fragment voorzien van zo'n taalwissel. Maar het hoeft niet bij: Losse woorden Leenwoorden als computer, update en browser Namen Content in een andere taal, maar het menu en andere teksten niet Heb je een pagina waarbij de primaire content in een andere taal is, maar het menu en eventuele andere tekstblokken niet? Een voorbeeld hiervan zie je hieronder. 59

60 Afbeelding 18: Engelse pagina op de website van Winterswijk Om de taalwissels op bovenstaande pagina van Winterswijk goed toe te passen, doe je het volgende: Ga naar de pagina in het CMS. De kop van de pagina is The municipality of Winterswijk. Voeg nu iets HTML-code toe: <span lang= en >The municipality of Winterswijk</span> Ga naar het veld waar de content in staat. Kies daar voor de HTML-modus. Typ helemaal bovenaan: <div lang= en > En helemaal onderaan: </div> 60

61 Op die manier heb je de taalwissel precies toegepast op het deel van de pagina dat Engelstalig is Gebruik geen superscript of subscript Superscript zoals de e in 1e en subscript zoals de 2 in x 2 - zijn een stuk kleiner dan gewone tekst en daardoor niet goed leesbaar. Firefox verkleint het tot 78 % van de originele grootte, Internet Explorer zelfs tot 71 %. Het is daarom beter om geen super- en subscript te gebruiken op webpagina's18. Overigens lijkt het superscript ook te verdwijnen uit de gewone taal19. Voor formules kan super- of subscript nodig zijn. De beste manier hiervoor is het schrijven van de formules met MathML20. Kun je dat niet gebruiken plaats dan een afbeelding van de formule (zie afbeelding hieronder). Formules worden meestal gemaakt met speciale formule-editors, zoals OpenOffice Math of MathType (voor Word-gebruikers). Plaats als alternatieve tekst bij de afbeelding de formule die in de formule-editor staat. Voor de formule in de afbeelding hieronder is de alternatieve tekst : PV=\frac {FV} Afbeelding 19: Voorbeeld van een formule (formule voor koopkracht), alternatieve tekst bij de afbeelding is PV=\frac {FV} {(1+i)^{t}}1 {(1+i)^{t}}21. Het verbaast je wellicht, maar voor blinden die werken met deze formules (wiskundigen of programmeurs) is deze formule via hun brailleleesregel uitstekend te begrijpen. 18 Zie 19 Zie bijvoorbeeld 20 Zie 21 Bron: Wikipedia 61

62 7.4.8 Gebruik cijfers bij getallen22 Een getal geschreven als cijfer leest makkelijker: 12 leest makkelijker dan twaalf. Jakob Nielsen beschrijft in het artikel "Show Numbers as Numerals When Writing for Online Readers" dat getallen in het algemeen beter met cijfers geschreven kunnen worden. Je hebt wellicht ook geleerd om getallen tot 20, tientallen tot 100 en honderdtallen tot 1000 in letters te schrijven. Nielsen toont in zijn onderzoek aan dat getallen geschreven met cijfers beter (en sneller) leesbaar zijn op het web. In plaats van "Na twee jaar..." is het beter om te schrijven "Na 2 jaar.. In het kort het advies van Nielsen: Schrijf getallen met cijfers: schrijf 8, niet acht. Gebruik ook getallen als ze aan het begin van een zin of opsomming staan, bijvoorbeeld "12 jaar later ging hij opnieuw op zoek naar de schat." Gebruik cijfers tot 1 miljoen, bijvoorbeeld Gebruik bij grote eenheden boven het miljoen het aantal in cijfers en de rest in tekst, dus: "De oorlog in Irak kostte de Amerikanen 1 biljoen dollar." Maar: Schrijf getallen als tekst (in letters) als ze geen specifieke feiten weergeven, dus: "Van deze zeldzame neushoorn leven nog maar enkele duizenden exemplaren." (En dus niet "enkele 1000-en...") Verder is het volgens Nielsen ook beter voor de geloofwaardigheid om cijfers te gebruiken voor exacte aantallen. Exacte getallen zijn specifieker en komen betrouwbaarder over. 22 Zie 62

63 Voor rangtelwoorden - zoals 2e en 3e - geldt hetzelfde als voor getallen: schrijf ze met cijfers. Het is dus niet "tweede", maar "2e" Gebruik afkortingen zo weinig mogelijk Veel afkortingen zijn een overblijfsel uit de papieren wereld, toen inkt en papier nog kostbaar waren. Dit zijn afkortingen als z.s.m., a.u.b., i.e. en n.v.t. Gebruik deze afkortingen niet op het web, maar schrijf deze gewoon uit. Wanneer een afkorting vaak in een tekst voorkomt en lang is dan kan deze wel afgekort worden. Schrijf deze bij het eerste gebruik volledig uit, gevolgd door de afkorting tussen haakjes. In de rest van de pagina kun je de afkorting gebruiken. Onderstaande tekst is een voorbeeld van hoe het goed is: De Wet maatschappelijke ondersteuning (Wmo) zorgt ervoor dat iedereen kan meedoen aan de maatschappij en zelfstandig kan blijven wonen. Gemeenten voeren de Wmo uit en iedere gemeente legt andere accenten. Wees voorzichtig met het te weinig herhalen van de volledige tekst. Content op het web is zelfstandige content, dus het kan zomaar zijn dat iemand alleen die ene paragraaf leest waar de afkorting in gebruikt wordt en niet de volledige versie die daarvoor is uitgeschreven. Herhaal de afkorting zeker op iedere pagina. Bij lange pagina's is het niet erg om de hele tekst nog een keer te gebruiken, zolang het niet storend is voor de lezer. Afkortingen van eigennamen die bekend zijn hoeven niet uitgeschreven te worden: De KLM heeft vanochtend haar vluchten weer hervat. Niet eerder heeft D66 zo'n grote sprong gemaakt. De maatregel zou vooral slecht zijn voor de BV Nederland. Ook afkortingen die de volledige versie verdrongen hebben in de Nederlandse taal, hoef je niet uit te schrijven: 63

64 Gemiddeld staan er in elk huis 2 PC's. De fax is in 10 jaar tijd vrijwel in onbruik geraakt. De A3 is onvindbaar op het wegennet Gebruik het blockquote-element voor zelfstandig geplaatste citaten Voor het opmaken van een lang citaat dat geplaatst is als een zelfstandige alinea gebruik je de blockquote. Als je ook aan wilt geven van wie het citaat is gebruik je het cite-attribuut. Bijvoorbeeld: Afbeelding 20: Voorbeeld van het gebruik van het blockquoteelement (Bron: In HTML code ziet dat er als volgt uit: <p>een Lightbox verbergt informatie van de pagina, informatie die de gebruiker mogelijk nodig heeft om de keuze te maken.</p> <blockquote> <p>users often have to refer to information on the background display to resolve the situation in the 64

65 foreground dialog box. If the background is dimmed too much, such information can be hard to read. </p><cite><a href=" Nielsen, 2008, 10 Best Application UIs</a></cite> </blockquote> Bij het citeren van iemand is vaak geen sprake van een citaat dat in een aparte alinea staat. In die gevallen hoeft er geen blockquote gebruikt te worden, zoals het voorbeeld hieronder. Rabaran staat midden in Kanaleneiland, de meest multiculturele buurt van Utrecht. De website van de instelling ademt niet direct een interculturele sfeer uit. Daar hebben we bewust voor gekozen, zegt Randaj. Rabaran is in hart en nieren een interculturele thuiszorg. Dat is zo gegroeid door de samenstelling van de wijk waarin we ons bevinden. Maar we brengen dit niet te prominent in beeld om te zorgen dat we niemand uitsluiten. In veel sites is de blockquote zelden nodig. Een citaat is namelijk vaak geplaatst in een lopende zin en in een alinea. 7.5 Afbeeldingen Iemand die blind is ziet geen afbeeldingen. Voor hen is het belangrijk dat er een alternatieve tekst is die de afbeelding beschrijft. Maar ook voor gebruikers van mobiele telefoons is het belangrijk dat er een alternatief is, bijvoorbeeld als het tonen van plaatjes is uitgezet Soorten afbeeldingen Als het gaat om toegankelijkheid zijn er 3 soorten afbeeldingen: Informatieve of betekenisvolle afbeelding: Deze krijgt een alternatieve tekst die beschrijft wat er op de afbeelding is te zien. Niet-informatieve of decoratieve afbeelding: Deze hoeft geen alternatieve tekst te hebben. Bij voorkeur staat de afbeelding in de CSS. 65

66 Aanklikbare afbeelding: Hier beschrijft de alternatieve tekst de bestemming van de link. Vaak staat er tekst in de afbeelding: kies dan als alternatieve tekste exact de tekst die te lezen is. Twijfel je of de afbeelding wel of niet informatief is, ga er dan vanuit deze informatief is. In bijlage 3 vind je een stroomschema dat je kan helpen welke alternatieve tekst nu nodig is Geef elke betekenisvolle afbeelding een kort tekstueel alternatief Als een plaatje niet waargenomen kan worden is het nodig dat er een stukje tekst is die beschrijft welke informatie de afbeelding overbrengt. Daarmee is de betekenis duidelijk voor mensen met spraak-/braille-uitvoer en ook voor zoekmachines. Gebruik voor de alternatieve tekst het alt-attribuut van de afbeelding. De alternatieve tekst beschrijft kort de inhoud en de functie die de afbeelding in de content heeft. Je kunt je dit beste voorstellen wanneer je een webpagina voor iemand opleest en daarbij het plaatje op de pagina beschrijft. Gebruik niet het title-attribuut voor de alternatieve tekst. Sommigen CMS-en plaatsen standaard de ingevoerde alternatieve tekst in het alt- én het titleattribuut. Dit is af te raden: de tekst wordt dan bij spraakuitvoer 2 keer opgelezen. Ook voor zoekmachines voegt dit niets toe. Het title-attribuut gebruiken browsers als mouse-over-tekst. Het altattribuut geeft geen mouse-over-tekst. Deze mouse-over-tekst voegt ons inziens weinig toe aan de functionaliteit van een link. Een alternatieve tekst is belangrijk om een aantal redenen [23]: Het wordt opgelezen door spraakuitvoerprogramma's en wordt uitgevoerd als braille op een brailleleesregel. Zo is de inhoud en de 23 Tekst ontleend aan 66

67 functie van de afbeelding ook bekend bij mensen die deze apparatuur gebruiken. Het komt in de plaats van het plaatje wanneer een browser het plaatje niet toont. Dit kan het geval zijn bij mensen die mobiel browsen en de afbeeldingen uitzetten. Het helpt zoekmachines om de inhoud van de afbeelding te kunnen bepalen. Belangrijk is de context waarin het plaatje staat. Deze context bepaalt mede de alternatieve tekst. Voorbeeld: Je hebt een tekst die gaat over blindengeleidehonden. Een plaatje van een liggende hond heeft dan als alternatieve tekst blindengeleidehond. Als de tekst over verschillende hondensoorten gaat is de tekst Labrador Retriever. Helaas maakt dit het wel moeilijk om afbeeldingen in mediabibliotheken in één keer te voorzien van goede alternatieve teksten. Elke keer bij het plaatsen van een afbeelding moet je kijken naar de context. Afbeelding 21: Context: tekst over blindengeleidehonden Alternatieve tekst: blindengeleidehond Afbeelding 22: Context: tekst over hondensoorten Alternatieve tekst: Labrador Retriever Gebruik geen alt-tekst bij niet-informatieve afbeeldingen Wanneer een afbeelding alleen is bedoeld om de pagina te verfraaien en geen informatie overbrengt dan is een alternatieve tekst niet nodig. Een 67

68 niet-informatieve afbeelding staat bij voorkeur niet in de HTML-code, maar in de style sheet (CSS). Dit sluit aan bij het principe dat inhoud (staat in de HTML-code) en vorm (CSS) gescheiden zijn. Als de niet-informatieve afbeelding toch in de HTML moet staan (bijvoorbeeld omdat het via het CMS wordt ingevoerd), laat dan het altattribuut leeg. In de code ziet dat er zo uit: <img src= "bg_balk.jpg" alt=""/> Plaats een langere beschrijving als dat nodig is Soms is de afbeelding zo complex dat een eenvoudige en korte alternatieve tekst niet volstaat en is een langere tekst nodig. Denk hierbij bijvoorbeeld aan grafieken of infographics. Een langere tekst plaatsen bij een afbeelding kan op 2 manieren [24]: 24 Bron: 68

69 Methode 1: in de context van de afbeelding Een langere beschrijving in de context van de afbeelding, bij voorkeur direct onder de afbeelding (zie het voorbeeld hiernaast [25]). Als alttekst kun je dan verwijzen naar de tekst eronder, of je kunt de alt-tekst leeg laten. In Nederland wonen zo'n 4 miljoen mensen met een beperking. Uitgedrukt in percentages is dat per beperking: Doof en slechthorend: 21 % Dyslectisch: 13 % Lichamelijke beperking: 24 % Laaggeletterd: 24 % Kleurenblind: 12 % Blind en slechtziend: 6 % 25 Bron afbeelding: 69

70 Methode 2: Tekstlink onder de afbeelding Een link direct onder de afbeelding waarmee je verwijst naar een pagina met uitleg (zie het voorbeeld hiernaast). Een 3e methode is het gebruik van het longdesc-attribuut. Omdat de ondersteuning hiervoor in browsers beperkt is en het attribuut geen deel uit maakt van HTML 5 raden wij deze niet aan. Beperkingen in Nederland, in % 7.6 Hyperlinks People scan pages for links like they scan motorways for signs. Gerry McGovern Gebruik relevante inhoudswoorden in de linktekst Zorg dat de linktekst los van de context begrijpelijk is. Door linkteksten self-explaining te maken begrijpen mensen ze direct, ook als ze hoppen door een tekst. Als er klik hier staat moet je eerst de omliggende tekst lezen om te begrijpen waar het over gaat. Het is ook overbodig om te zeggen dat er op geklikt moet worden. Vanuit toegankelijkheid is deze richtlijn ook bijzonder belangrijk. Mensen die spraak- en/of braille-uitvoer gebruiken maken vaak gebruik van de optie linklijst: alle links worden dan bij elkaar geplaatst. Als er dan 10 keer klik hier staat, dan zullen zij helaas alsnog de hele tekst moeten doorlopen om te bepalen waar de links over gaan. 70

71 Niet goed is: Meer over de geslaagde migratie naar LibreOffice bij de gemeente Lutjebroek kunt u hier lezen. Wel goed is: Bij de gemeente Lutjebroek is de migratie naar LibreOffice geslaagd. Ook goed is: Bij de gemeente Lutjebroek is de migratie naar LibreOffice geslaagd. Wellicht vraag je je af er dan niet beter 2 links kunnen staan, maar 2 links met dezelfde bestemming in 1 zin raden wij af. Een bijzondere link is de lees-verder -link, zoals deze gebruikt worden in microcontent (zie onderstaand voorbeeld). Afbeelding 23: Lees-verder-link in microcontent Het is duidelijk dat lees verder betekenisarm is. Eigenlijk zou in de linktekst ook de titel van het artikel moeten staan, maar dat leest zo vervelend. Er zijn verschillende manieren om dit op te lossen. De beste oplossing is ons inziens: Maak bij microcontent in ieder geval de titel aanklikbaar. Maak duidelijk zichtbaar dat het een link is, bijvoorbeeld door deze te onderstrepen. Eventueel kun je het hele blok microcontent via JavaScript aanklikbaar maken (zie Dan klikt men altijd raak. 71

72 In veel gevallen is de lees-verder dan niet meer nodig. Lukt het bovenstaande niet, plaats dan in het title-attribuut van de link de titel van het bericht. Zie het voorbeeld hieronder. Afbeelding 24: Tekst title-attribuut, zichtbaar bij mouse-over Houd de linktekst kort Zorg dat de linktekst scanbaar is: hij moet snel gelezen kunnen worden. Een korte linktekst is daarom beter. Ook bevat een lange linktekst vaak meer inhoudsarme woorden en daarmee wordt de informatiewaarde lager. Ook voor spraak-/braille-uitvoer is het beter als de linktekst kort is. Spraak-/braille-uitvoer kost nu eenmaal meer tijd dan lezen Open geen nieuwe vensters of tabs Laat links altijd openen in hetzelfde venster of tab. Als mensen ergens komen waar ze niet willen zijn, dan gebruiken ze de terugknop. Deze richtlijn ontvangt altijd veel discussie. Toch valt er weinig tegen in te brengen. Wellicht nog de belangrijkste reden is dat het internet bij uitstek het medium is waar de gebruiker bepaalt wat hij doet. Hij bepaalt of hij desgewenst een nieuw venster/tab wil openen. 72

73 Het argument voor het wel openen van een nieuw tab/venster is dat men niet wil dat mensen van hun website weg gaan. Er zijn namelijk mensen die een venster sluiten als ze weer terug willen. Uit onderzoek blijkt dat mensen vaker de terugknop gebruiken dan een venster sluiten. En dat is logisch: een venster sluiten is vrij ingrijpend, want in het slechtste geval was het het enige venster en wordt de browser gesloten. De terugknop van de browser is niet voor niets de belangrijkste knop (en in sommige browsers zoals Firefox ook de grootste). Mensen weten dus heel goed hoe ze terug moeten. Overigens is dit gedrag de laatste jaren ook veranderd. Zo'n 5 jaar geleden was het veel gebruikelijker om nieuwe vensters te openen. Intussen kun je wel stellen dat dat verouderd is. Een andere reden om geen nieuwe vensters/tabs te openen is dat een nieuw venster/tab de terugknop onbruikbaar maakt. Het onderbreken van deze terug -functie blijkt uit usability-onderzoek een van de grootste ergernissen van surfende mensen. Nog een argument is dat mensen vaak veel tabs open hebben staan. Wanneer er weer een nieuwe tab wordt geopend is het juist vaak moeilijk om de vorige pagina terug te vinden tussen alle tabs. Dat geldt ook zeker bij mobiel browsen. Tot slot verdwijnt deze functionaliteit in HTML 5. Blijkbaar heeft het openen in een nieuw venster/tab ook niet de toekomst Zorg dat hyperlinks duidelijk te herkennen zijn Een bezoeker moet een hyperlink kunnen herkennen. Het is geen plicht om de hyperlink te onderstrepen, maar in de meeste gevallen is dat wel de beste oplossing is. Enkel een onderstreping bij mouse-over is niet altijd voldoende duidelijk, vooral omdat de onderstreping pas zichtbaar is als je er met de muis overheen gaat. Ook is het onhandig voor mensen die zonder muis navigeren, zoals mensen met een motorische handicap. 73

74 Uitzondering hierop zijn menu-items en de links in microcontent. Menu-items zijn in de regel duidelijk herkenbaar als menu-items en mensen weten dat ze er op kunnen klikken. In microcontent hoort de titel aanklikbaar te zijn. Dit is zo ingeburgerd dat een onderstreping hier mag ontbreken. Uiteraard mag de link wel onderstreept zijn Maak duidelijk als het een externe link is Een externe link is een link naar een pagina op een andere website. Een andere website is een site die op een ander domein staat. Ook voor externe links geldt de richtlijn om deze niet in een nieuw tab of venster te openen. Het helpt de bezoeker wel als zichtbaar is dat het een externe link is. Een icoon die zichtbaar maakt dat het een externe link is helpt daarbij. De Stijlgids Overheid raadt het volgende aan: Gebruik een beschrijving (bijvoorbeeld: raadpleeg het dossier veteranenziekte bij VROM). Schrijf de link voluit (bijvoorbeeld: Bijkomend voordeel is dat de link ook zichtbaar is bij een geprinte versie van de pagina. Neem zeker geen externe link op in een menubutton op je site. Het menu is bedoeld voor het ontsluiten van je eigen site, niet van een andere site Beschrijf bij een aanklikbare afbeelding het doel in de alt-tekst Sommige afbeeldingen zijn aanklikbaar, zoals een banner. Als het doel van de afbeelding de link is zoals bij onderstaande afbeelding beschrijf dan in het alt-attribuut van de link de bestemming van de link. Aanklikbare afbeelding Alt-tekst website SNS-bank Een bijzondere aanklikbare afbeelding is het logo. De afbeelding is aanklikbaar, maar het primaire doel is niet de bestemming, maar het tonen van de afzender van de site. Daarnaast heeft het logo de functie van link naar de homepage. 74

75 In deze situatie kun je het beste de afbeelding beschrijven én de bestemming aangeven in het alt-attribuut. De alt-tekst wordt dan logo organisatie XYZ, naar home. De HTML-code is: <a href= index.html ><img src=../img/logo-xyz.gif alt= logo XYZ, naar home /></a> 7.7 Downloads en adressen Met downloads worden niet-html-bestanden bedoeld, zoals tekstbestanden, spreadsheets en presentaties. Vaak wordt gekozen om informatie in deze bestanden op het web te publiceren omdat het omzetten naar HTML te tijdrovend of te complex is. Webrichtlijnen 2 stelt dezelfde eisen aan documenten die op internet ter download aangeboden worden als aan HTML-pagina's. Ook deze moeten voldoen aan de toegankelijkheidsrichtlijnen of er moet een toegankelijk (HTML-)alternatief aangeboden worden. Downloads hebben verschillende nadelen, maar ook enkele voordelen. Het belangrijkste nadeel is dat informatie in een HTML-formaat bijna altijd beter toegankelijk is voor mensen met een beperking. De voordelen zijn dat de informatie in een goed printbaar formaat wordt aangeboden. Dat kan handig zijn als de lay-out belangrijk is. Ook voor hele lange teksten, zoals jaarverslagen, is het een praktische oplossing die weinig tijd kost Gebruik downloads voor print of archivering Tekst is nog altijd verreweg het beste toegankelijk in HTML-formaat. Kies daarom bij voorkeur voor HTML. Downloadbestanden, zoals Word- en PDFbestanden zijn vaak moeilijker toegankelijk te maken dan een gewone webpagina. Soms zijn teksten echter zo uitgebreid dat omzetten niet haalbaar is én zijn ze vaak bedoeld om uit te printen. In die situatie kan de informatie als 75

76 download worden aangeboden. Je zult ze echter alsnog toegankelijk moeten maken of een toegankelijk alternatief aan moeten bieden. Een voorbeeld is een jaarverslag van een organisatie. Laat de links naar downloads altijd voorafgaan door een samenvatting op de webpagina, zodat de bezoeker kan inschatten of downloaden zinvol is Zorg dat downloads toegankelijk zijn Als je bijvoorbeeld een PDF aanbiedt, dan is het belangrijk dat de inhoud in deze PDF ook toegankelijk is. Dat betekent dat de tekst en de structuur in de PDF behouden blijft. Het is het makkelijkst als de bron een tekstdocument is, want dan kun je het tekstdocument toegankelijk maken. De belangrijke aandachtspunten bij het opmaken van het tekstdocument zijn: Gebruik opmaakprofielen. Stel je hebt een agenda. Geef dan de titel het opmaakprofiel Titel en gebruik voor de koppen kopopmaakprofielen. Voorzie afbeeldingen van alternatieve teksten. Gebruik liever geen tabellen. Gebruik je toch tabellen, voorzie deze van een omschrijving en tabelkoppen. Zorg dat de leesvolgorde intact blijft. Plaats teksten bijvoorbeeld niet in 2 kolommen naast elkaar, maar gebruik 1 kolom. Zet ook geen teksten in frames, want deze komen ook op onverwachte plekken terug wanneer deze met spraak/braille worden uitgevoerd. Vanuit het tekstdocument kun je dan een toegankelijke PDF genereren. Dat is een PDF-A/1a of PDF 1.7. Waarschijnlijk komt eind 2012 ook PDF/UA beschikbaar als een open standaard. Dit is dan beste optie voor toegankelijk documenten Bied downloads ten minste ook in een open standaard aan Niet iedereen gebruikt dezelfde software. Om leveranciersafhankelijkheid tegen te gaan en vanwege duurzaamheid geven de Webrichtlijnen aan dat downloads minimaal in een open standaard aangeboden moeten worden. 76

77 Een open standaard is een standaard die van niemand eigendom is en door iedereen mag worden gebruikt. Niemand is eigenaar van bijvoorbeeld HTML of CSS. Dit in tegenstelling tot proprietary (gesloten) standaarden, zoals Microsoft s Word-formaat of het itunes-formaat van Apple [26]. Het is overigens wel toegestaan om een download in een gesloten formaat aan te bieden. Het gaat er om dat de download ook in een open formaat wordt aangeboden, bijvoorbeeld in de vorm van een (toegankelijke) HTMLpagina of in PDF-A/1a-formaat Open downloads in hetzelfde venster/tab In Webrichtlijnen 1 moeten downloads openen in hetzelfde venster/tab. In Webrichtlijnen 2 is deze verplichting echter komen te vervallen. De richtlijn heeft ook zijn voors en zijn tegens, Een download opent vaak in de browser en voegt aan de browser een extra knoppenbalk toe. Dat is bijvoorbeeld het geval bij een PDF, maar ook bij een Word-bestand. Deze layout is zo afwijkend van een browservenster dat sommige mensen dit waarnemen alsof ze in een andere applicatie dan een browser werken. Wanneer ze terug willen naar de site sluiten ze het venster, waarmee ze onbedoeld dus ook het venster sluiten waarin de website stond. Het is mogelijk om te forceren dat een PDF- of ander bestand niet opent in de browser. Dit kan door in de directory, waar de downloads staan, aan te geven dat het bestand gedownload moet worden. De gebruiker krijgt een melding met de vraag het bestand te openen of op te slaan. Het opent dan in een PDF-programma, niet in je browser. Voor sites die gehost worden op een Linux-server kan dat door een zogenaamd.htaccess-bestand te plaatsen in de map van de downloads en daarin de volgende code op te nemen: <FilesMatch "\.(?i:pdf)$"> 26 Zie 77

78 ForceType application/octet-stream Header set Content-Disposition attachment </FilesMatch> Meld bij downloads het type bestand en de grootte Als een link niet naar een andere webpagina leidt kan dat verrassend zijn voor de bezoeker. Dit kun je beter voorkomen. Meld daarom in de linktekst het type bestand (bijvoorbeeld PDF) en de grootte. Zeker met het toenemende gebruik van mobiel internetten (waarbij we ook weer per MB moeten afrekenen ) is het melden van de grootte van het bestand nodig. Hieronder een voorbeeld waarin het goed is gedaan: [27] Afbeelding 25: Schrijfwijze download Vermeld in links het volledige adres Schrijf het adres uit bij het linken naar een adres. Zo is zichtbaar dat mensen op een link klikken. Het adres is bij voorkeur aanklikbaar, maar dat hoeft niet. Voor Webrichtlijnen versie 1 geldt verder ook nog: neem in de link geen onderwerp of andere aanvullende parameters op, Afbeelding 26: Schrijfwijze link 27 Zie ook 78