Dit e-book wordt regelmatig bijgewerkt. De laatste versie vind je op

Transcriptie

1

2 Training volgen? Bekijk onze trainingen op Auteur: Jaap van de Putte Met bijdragen van: Ab Bertholet (Ab&Co), Tom Hessels (Bartimeus), Tim van Schie (Stichting Accessibility), Gerard Copinga (Stichting Accessibility), Sandra Uittenbogaart (Taal & Tekst) Versie: 6 juni 2014 Uitgever: The Internet Academy Dit e-book wordt regelmatig bijgewerkt. De laatste versie vind je op Copyright (C) 2015 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 Inhoudsopgave 1. Verantwoording Inleiding Hoe mensen lezen 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 Maak je teksten kort 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 Link naar andere content 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 Pagina 4

4 5.3 Browsen met een screenreader Je website aanpassen Zorg voor tekstalternatieven Maak alles bereikbaar met het toetsenbord Maak de vormgeving toegankelijk Gebruik eenvoudige taal Toegankelijkheid in perspectief Usability Findability En waar moeten we nu voor kiezen? Webtoegankelijkheid geborgd in richtlijnen Start van het internet Start van het W3C WCAG 1 en Webrichtlijnen WCAG Webrichtlijnen Content invoeren met een CMS 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 Afbeeldingen positioneren 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 Plaats onder de titel een lead (samenvatting)...46 Pagina 5

5 7.2.4 Kies één onderwerp per artikel Gebruik visuele ankerpunten Gebruik korte en informatieve tussenkopjes Gebruik opsommingen Gebruik een pagina-index bij lange webpagina's Zorg dat informatie lineair is Betekenisvol opmaken Gebruik kopopmaakprofielen voor koppen Sla bij de kopregels geen niveaus over Gebruik een apart opmaakprofiel voor de opmaak van de samenvatting Gebruik vet om nadruk te leggen op woorden of zinsdelen Gebruik een [Enter] om naar een nieuwe alinea te gaan Gebruik bij opsommingen de opsommingsopties van de teksteditor 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 MathML voor formules Gebruik cijfers bij getallen bij specifieke informatie Rangtelwoorden Gebruik afkortingen zo weinig mogelijk Gebruik het blockquote-element voor zelfstandig geplaatste citaten Afbeeldingen Soorten afbeeldingen Geef elke betekenisvolle afbeelding een kort tekstueel alternatief Gebruik geen alt-tekst bij niet-informatieve afbeeldingen Plaats een langere beschrijving als dat nodig is Gebruik liever geen afbeeldingen van tekst Hyperlinks Gebruik relevante inhoudswoorden in de linktekst...79 Pagina 6

6 7.6.2 Houd de linktekst kort Open geen nieuwe vensters of tabs Zorg dat hyperlinks duidelijk te herkennen zijn Maak duidelijk als het een externe link is 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 Bied downloads ten minste ook in een open standaard aan Open downloads in hetzelfde venster/tab Meld bij downloads het type bestand en de grootte Vermeld in links het volledige adres Tabellen Bij een 2-kolomstabel is extra opmaak niet nodig Gebruik het th-element en scope-element voor rij- en kolomkoppen Gebruik afkortingen bij lange rij- en kolomlabels Geef tabellen een titel Geef complexe tabellen een beschrijving in de vorm van een summary Vermijd het samenvoegen van rijen en kolommen Video Audio Bijlage 1: Belangrijke termen...92 Bijlage 2 Infographic alternatieve tekst afbeelding...95 Pagina 7

7 1. Verantwoording Centraal in dit e-book 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 e-book is afkomstig van een aantal bronnen: Webrichtlijnen, versie 2: WCAG 2.0: de website van de Nielsen Norman Group 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 dit e-book niet verder in. Dit e-book wordt regelmatig bijgewerkt. Heb je een feedback? Stuur deze naar Jouw reactie is welkom. Het e-book is verschenen onder de zogenaamde GNU Free Doc License. Dat houdt onder andere in dat je het recht hebt het e-book te kopiëren, uit te printen en te verspreiden zonder dat je licentiekosten verschuldigd bent, mits je de auteur(s) vermeldt. Dit e-book is gratis te downloaden. Je kunt bij ons ook een geprinte versie bestellen. Deze leveren wij tegen onkostenvergoeding. Wij verzorgen ook cursussen, workshops en lezingen. Je kunt ons bereiken: via de website: per mail: Wij hopen dat dit e-book bijdraagt aan de webtoegankelijkheid in het algemeen en aan jouw bedrijfsvoering in het bijzonder. Pagina 8

8 2. Inleiding Dit e-book 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 e-book 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 e-book staan de richtlijnen die wij ontwikkeld hebben en die we de Webredactierichtlijnen noemen. Als je deze webredactierichtlijnen toepast voldoe je redactioneel volledig aan de nieuwe Webrichtlijnen, versie 2. Pagina 9

9 Het e-book 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 e-book, de webredactierichtlijnen. Als je dit e-book 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. Er zijn veel handige tools om zelf je content te testen. Dit was opgenomen in dit ebook, maar we hebben ze verplaatst naar een eigen e-book: het e-book Webtechniek. Pagina 10

10 3. Hoe mensen lezen 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 - 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. Meer hierover kun je vinden in het artikel "Reading Online or on Paper: Which is Faster?" van Sri H. Kurniawan and Panayiotis Zaphiris. 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 Fvormig patroon ( Pagina 11

11 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. En, mensen bekijken websites bijvoorbeeld op ipad's en mobiele telefoons, dus is er weinig te zeggen over wanneer mensen moeten scrollen. Zorg dat het belangrijkste bovenaan staat. Als ze het interessant vinden lezen ze echt wel verder. Plaats dus bij voorkeur alle informatie over 1 onderwerp ook op 1 pagina. Dat heeft de volgende 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. Pagina 12

12 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 (zie 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 jip-en-janneketaal, die alleen maar leidt tot irritatie. De resultaten van het onderzoek van Nielsen staan in onderstaande tabel. Succesvolle afronding taak ('Succes Rate') Originele webpagina Herschreven webpagina Laaggeletterden 46 % 82 % Hooggeletterden 68 % 93 % Originele webpagina Herschreven webpagina Tijdsbesteding taak ('Total Task Time') 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. Pagina 13

13 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 is het echter om te denken dat teksten voor mensen en zoekmachines verschillen (zie Zie het 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 (zie hl=nl&topic=15260&answer=35769#1). 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. Pagina 14

14 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 Maak je teksten kort Zet de belangrijkste informatie bovenaan Gebruik verzorgde spreektaal Kies de woorden van de bezoekers Maak teksten scanbaar Zorg voor zelfstandige webcontent Link naar andere content 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. (Meer weten over taakgericht schrijven? Zie The Stranger's Long Neck van Gerry McGovern.) 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. Pagina 15

15 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 Maak je teksten kort Als je schrijft voor de taak van de bezoeker, geef je alleen die informatie die echt nodig is voor de taak. In feite doet alle extra tekst afbreuk aan de taakgerichtheid van je tekst. Een site die dit heel goed heeft opgepakt is alle teksten zijn gericht op de toptaken, andere teksten zijn verwijderd. Ook zie je op de site dat ze alle concurrende informatie op een webpagina hebben weggehaald. Dus alleen in de rechterkolom informatie die echt gerelateerd is aan de taak. Verder hebben ze meestal geen menu. En vooral gewoon weinig tekst. Zie als voorbeeld het screenshot hieronder. Pagina 16

16 Afbeelding 2: (jan 2014) Kort betekent: korte artikelen korte zinnen Pagina 17

17 Een pagina hoeft niet per se kort te zijn. Als de informatie nodig is, plaats het liever wel op 1 pagina. Scrollen is niet erg, maar het moet voor de bezoeker wel zinvol zijn. 4.3 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. 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. Pagina 18

18 Afbeelding 3: Schrijven volgens de omgekeerde piramide 4.4 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 Europees Referentiekader kent 6 niveaus van taalgebruik. Voor het lezen zijn dat deze niveaus: Pagina 19

19 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 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 "eye-opener" bij het bespreken van een tekst. Pagina 20

20 4.5 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. Pagina 21

21 Afbeelding 4: Iemand zoekt naar twitter... Afbeelding 5:... 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.6 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 lay-out 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: titel eerste alinea bovenste alinea('s) subkopjes opsommingen Pagina 22

22 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.7 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 layout 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 Pagina 23

23 Afbeelding 6: 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 ( 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 de website en eventueel in andere websites bruikbaar zijn (bijvoorbeeld als RSS). 4.8 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 Pagina 24

24 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.9 Link naar andere content Het web is ooit gemaakt door Tim Berners-Lee door 2 systemen aan elkaar te knopen: het internet systeem van hyperlinking Sommige websites vergeten deze 2e component van online, namelijk het via links verbinden van je content aan andere of je eigen content. Vooral bij grote sites van gemeenten of van uitgevers (de ouderwetse e-book die online gegaan zijn) zie je dat hyperlinks in de tekst vaak ontbreken. Het wel gebruiken van links naar andere content heeft veel voordelen: De gebruiker help je zo om verder te komen bij de content die hij zoekt. Je hoeft informatie niet dubbel op te nemen, je linkt gewoon naar de pagina waar het staat. Zoekmachines waarderen het als je linkt naar andere sites. Je laat immers daarmee zien dat je midden in de wereld van het web staat! Verderop in dit e-book leggen we nog uit je goede links schrijft, maar in het kort al even het belangrijkste: Plaats de link op betekenisvolle woorden. Hou de link kort 4.10 In 10 stappen naar een goede structuur van je webtekst Hieronder hebben wij in 10 punten opgesomd hoe je komt tot een goede structuur van je webtekst. De punten zijn ook handig als checklist. Pagina 25

25 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. 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 ). En misschien nog een 11e stap: hou het kort. Schrap woorden en zinnen die niet nodig zijn. Wij zien regelmatig teksten die tot een kwart gereduceerd kunnen worden. Pagina 26

26 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 [1]. 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 mensen met hippopotomonstrosesquippedaliofobie (angst voor lange woorden) 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. Voor deze mensen is het belangrijk dat websites voldoen aan enkele eisen, zodat zij die websites ook kunnen gebruiken. 1 Pagina 27

27 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 krijgen. Zij gebruiken Afbeelding 7: Blinde man met brailleleesregel 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 (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. Pagina 28

28 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-/braille-uitvoer 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". Pagina 29

29 Afbeelding 8: Voorbeeld koppenlijst (headings list) (software JAWS) Pagina 30

30 Afbeelding 9: Voorbeeld linklijst (link list) (software JAWS) 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). Pagina 31

31 5.4.2 Maak alles bereikbaar met het toetsenbord Probeer eens je website te gebruiken zonder muis: kun je overal bij? Kun je bijvoorbeeld het menu openklappen? En kun je een video starten, stoppen en ook daarna weer verder browsen in je website? Het toegankelijk zijn van je website met een toetsenbord is een van de belangrijkste eisen voor een toegankelijke website. En dus makkelijk zelf te testen! 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 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. 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 Nederlanders die laaggeletterd zijn. Verder zijn er nog meer taalbeperkingen, zoals dyslexie en afasie, een taalstoornis na hersenletsel. Pagina 32

32 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: usability: ofwel de gebruiksvriendelijk en bruikbaarheid van een site findability: de vindbaarheid van de site in zoekmachines Afbeelding 10: 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 [2]: 2 ISO DIS , Guidance on usability Pagina 33

33 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 Findability Waar het bij usability om mensen gaat, gaat het bij findability om de niet-menselijke 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. Pagina 34

34 Bijdrage aan findability? De alternatieve tekst voegt relevante informatie toe aan de tekst. Dit draagt bij aan een betere vindbaarheid van de pagina. Pagina 35

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. (Wil je hier meer over lezen, lees dan Weaving the Web van BernersLee.) 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 Afbeelding 11: dit als volgt: Tim Berners-Lee The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect 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 Berners-Lee. Het W3C is een samenwerkingsverband van verschillende organisaties en individuen WCAG 1 en Webrichtlijnen 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. Nederland voegt enkele aanvullende kwaliteitscriteria toe aan WCAG en komt zo tot de Webrichtlijnen WCAG 2.0 Het W3C publiceert in december 2008 WCAG 2.0. WCAG 2.0 volgt na 9 jaar WCAG 1.0 op. 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. Pagina 36

36 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. Voor overheden geldt de verplichting voor niveau AA. Pagina 37

37 6. Content invoeren met een CMS Het invoeren van webcontent gaat in vrijwel alle gevallen met een Content Management Systeem (CMS). Bij het verkeerd invoeren ontstaan vaak toegankelijkheidsproblemen. Het is daarom belangrijk dat dit goed gebeurt. Hiervoor heb je een professionele webredactie nodig die ook kennis heeft van HTML. Het is ook 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. Pagina 38

38 Afbeelding 12: 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 WYSIWYG-principe: 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. Onderstaand een voorbeeld van zo'n WYSIWYG-editor. Pagina 39

39 Afbeelding 13: 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 HTMLmodus wordt de WYSIWYG-editor vervangen door een venster waarin je de HTMLcode 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. 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 Pagina 40

40 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 editor het icoontje, en in onderstaande 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 Afbeeldingen positioneren De editor van je CMS geeft je verschillende mogelijkheden om afbeeldingen links, midden en rechts te positioneren, maar er is maar 1 goede manier. ## nog uitwerken alt-tekst geen titel FCK editor en TinyMCE 6.7 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. Pagina 41

41 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 e-book, 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 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 Pagina 42

42 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. Opmerking: 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. Kenmerken van een goede titel zijn: 1. De titel is betekenisvol 2. De titel is begrijpelijk zonder context 3. De titel is kort, maximaal 55 tekens 4. De titel is 'front-loaded' 5. De titel bevat geen beeldspraak Betekenisvolle titel Een goede titel is een mini-samenvatting van het artikel. Als je de titel leest, moet je al de conclusie of kernboodschap van het artikel begrijpen. Een goede titel is bijvoorbeeld: Voorbeelden van goede titels vind je vaak op nieuwssites. Hieronder een voorbeeld van nu.nl. Als je de titels leest weet je al welke informatie er globaal te vinden is in de artikelen. Pagina 43

43 Afbeelding 14: Voorbeelden van goede titels op nu.nl (3 september 2013) Begrijpelijk zonder context 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. Ook hier kun je in grote lijnen van titels op nieuwssites. Dit lijkt op krantentitels, maar er is een klein verschil: bij een krant heb je altijd een vaste context, bij een titel op het web niet. 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. Op het web kan een artikel op allerlei manieren gepubliceerd zijn: 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. Een titel van een webpagina moet in elke context begrijpelijk zijn. Dit is het principe van zelfstandige content. Korte titel 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. Pagina 44

44 Een extra reden om de tekst kort te houden is dat titels ook vaak aanklikbaar zijn in microcontent. En voor een link geldt ook de regel dat deze kort moet zijn. Belangrijkste woorden vooraan 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 titel hieronder is wel front-loaded. Watersnood Brazilië komt door regenval en illegaal bouwen Vermijd beeldspraak Beeldspraak (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 Plaats onder de titel een lead (samenvatting) Direct onder de titel komt een lead (samenvatting. Deze lead is een samenvatting van het artikel en beschrijft in een notendop de inhoud van het volledige artikel. De lead is geen inleiding of een lekkermakertje, die de inhoud van het artikel nog verbergt ( Voor print kan dit werken, voor het web werkt dit niet. Vermijd ook hier symbolische taal. Voor de lead gelden dezelfde principes als bij de titel, zoals het principe van zelfstandige content. Zorg dat de lead begrijpelijk is, ook zonder context. De lead bevat de relevante trefwoorden die de bezoeker gebruikt voor het onderwerp. Pagina 45

45 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. Een lead kan ook bestaan uit losse woorden. Hieronder zie je een voorbeeld van microcontent op de website van de gemeente Best: Afbeelding 15: Lead in de vorm van losse woorden Hieronder nog een voorbeeld van een lead in de vorm van losse woorden (mockup van vacaturesite). Afbeelding 16: Lead in de vorm van losse woorden (vacature) 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 Pagina 46

46 met scannen en start met lezen noemen wij de visuele ankerpunten. De lezer hopt van ankerpunt naar ankerpunt. Opmerking: met ankerpunten bedoelen we hier niet de technische ankers (anchors) die horen bij een interne link. 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. 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 korte en informatieve tussenkopjes Tussenkoppen zijn de koppen die je op een pagina tussen de paragrafen plaatst. Ze zijn enorm belangrijk en dhelpen de lezer op 2 manieren: Snel scannen van de pagina Begrijpen van de inhoud van de pagina Het belang van kopjes wordt onder andere ondersteund door uitgebreid eyescanonderzoek van Jakob Nielsen. In de publicatie How people read on the web, the eyetraking evidence van zijn onderzoeksbureau Norman-Nielsen schrijft hij: Pagina 47

47 One of the most critical findings that emerged from this analysis of reading behavior is that web content authors must create effective headings. No matter how the page is organized mostly text or chunked sections headings help people to scan the content efficiently. People often look first at headings (at least those headings that actually look visually stronger than normal text), and well-phrased headings can dramatically affect how well people work with a particular web page. Bij het gebruik van tussenkoppen zie je in eyetrack-onderzoek niet het bekende Fpatroon, maar wat Nielsen noemt een layered-cake -patroon. Zie de afbeelding hieronder. Pagina 48

48 Afbeelding 17: Layered-cake-patroon bij gebruik van headings (Bron: Nielsen, 2013) Tussenkoppen zijn kort en geven een samenvatting van de paragraaf eronder. Het geeft de lezer extra houvast bij het lezen van de tekst. Pagina 49

49 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. Tussenkopjes zijn ook een extraatje: zonder kopjes moet de tekst ook leesbaar zijn. Je kunt er niet van uitgaan dat iemand het kopje heeft gelezen. De tussenkoppen mogen dus geen nieuwe informatie toevoegen: het zijn immers samenvattingen van de paragrafen eronder. Heb je een bestaande tekst waar geen tussenkoppen in staan, dan lukt het meestal niet om daar gewoon tussenkoppen tussen te zetten. Bijna altijd is het beter om de tekst te herschrijven. 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 geen vraagstelling in een tussenkop. Enkele tips voor het gebruik van goede tussenkoppen: Gebruik tussenkoppen. Ze maken jouw tekst enorm veel beter leesbaar. Tussenkoppen zijn ultrakorte samenvattingen van de tekst eronder. Maak ze kort en informatief Plaats de belangrijkste woorden vooraan (nano-content) De tussenkoppen vormen samen een samenvatting van het artikel. Schrijf je teksten zo dat de tussenkoppen ook overgeslagen kunnen worden Gebruik opsommingen Heb je informatie die in een opsomming kan staan, gebruik dan ook een opsomming. Opsommingen, genummerd of ongenummerd, maken je pagina veel prettiger leesbaar. En maakt informatie beter begrijpelijk en beter te onthouden. Tja, alleen maar voordelen dus. Nielsen schrijft hierover: Pagina 50

50 Bulleted lists, when done well, are extremely attractive elements. The eye goes to them frequently. In fact, people looked at 70% of the bulleted lists they encountered. Bron: Nielsen: How people read on the web, the eyetracking evidence Let bij het gebruik van opsommingen op het volgende: Gebruik nummering bij vaste volgorde Hou de opsomming kort, maximaal 8 items Gebruik korte en bondige tekst Zorg dat de items leesbaar zijn zonder de inleidende zin. Gebruik de opsommingsopties van je CMS om de opsommingen te maken. Voorbeeld herschrijven opsomming De originele opsomming is: U heeft recht op een uitkering als u: geen of te weinig geld verdient (inkomsten) om van rond te komen; geen of te weinig geld heeft (vermogen) om van te leven; geen gebruik kunt maken van een andere regeling. Deze opsomming leest complex. Je moet de inleidende zin in je hoofd steeds herhalen om de items goed te kunnen lezen. Item 1 en 2 zijn eenvoudig samen te vatten in: je hebt te weinig geld. Onduidelijk blijft wat nu een regeling is. Het zou goed zijn om dit begrip uit te leggen op een andere pagina. Hier kan dan een link geplaatst worden op regeling. De herschreven versie is: Voorwaarden om een uitkering te krijgen: U heeft te weinig geld. U gebruikt geen andere regeling van de gemeente. Nummering bij vaste volgorde, anders ongenummerd (bullets) Het is belangrijk om goed te kijken of jouw informatie past bij een genummerde of een ongenummerde opsomming. Als je bijvoorbeeld enkele stappen uitlegt die mensen achterelkaar moeten uitvoeren, is een genummerde lijst nodig. Pagina 51

51 Bijvoorbeeld Het aanvragen van deze vergunning gaat als volgt: 1. Maak een account aan op onze website. 2. U krijgt dan een van ons met het wachtwoord. 3. Log in met uw account. 4. Vul het aanvraagformulier in. In veel gevallen heeft een opsomming geen specifieke vaste volgorde. Dan kun je gewoon een ongenummerde lijst (bullets) gebruiken. Bijvoorbeeld Aan de raadsvergadering namen deel (op alfabetische volgorde): De heer Jansen Mevrouw Mahmout De heer Pietersen Hou de opsomming kort Een opsomming bestaat uit 3 tot 8 tekens. Langere lijsten zijn moeilijker te scannen. Gebruik korte en bondige tekst Houd de tekst van de items kort en bondig, maak geen volzinnen of uitgebreide teksten. Zoals Nielsen schrijft, het zijn bulleted lists, geen bulleted parapraphes. Wil je toch meer informatie kwijt in een bullet, dan kun je het item beginnen met een of enkele korte steekwoorden en daaronder de rest van de tekst plaatsen. Dan kun je doen door na deze steekwoorden een zogenaamde zachte return te plaatsen: technisch gezien blijf je dan in dezelfde alinea. In de meeste programma's plaats je een zachte return met Shift Return. Pagina 52

52 Bijvoorbeeld Onze activiteiten zijn: Beachvolleyball Elke dinsdag en donderdag kunt u naast het zwembad beachvolleyballen. Pilatus Elke maandag en woensdag is er in het zwembad Pilatus-les. Maak de items zelfstandig leesbaar Opsommingen kunnen ingewikkeld worden als ze een onderdeel worden van de inleidende zin die er boven staat. Ook loop je het risico dat je bij het maken van de opsomming hier grammaticale fouten in maakt. Zorg daarom dat de items zelfstandig leesbaar zijn. In het onderstaande voorbeeld is dat niet het geval: U kunt een paspoort aanvragen als: u de Nederlandse nationaliteit heeft en u achttien jaar of ouder bent. Kinderen onder de achttien jaar hebben bij de aanvraag schriftelijke toestemming nodig van de gezaghouder(s). Zo'n opsomming leest moeilijk en in dit geval is de tekst ook complexer dan nodig. Als we de items schrijven als zelfstandige items krijg je de volgende tekst: Een paspoort kunt u aanvragen als u voldoet aan de volgende eisen: U bent Nederlander U bent minimaal 18 jaar. Kinderen onder de 18 jaar hebben schriftelijke toestemming nodig van de ouders of degenen die het ouderlijke gezag hebben. Gebruik de opsommingsopties van je CMS om de opsommingen te maken Met een typemachine maakte je een opsomming met streepje-spatie. Sommige mensen leven nog in het typemachine-tijdperk en doen dat nog steeds op die manier. Maar dat is niet goed. In het CMS (of in je tekstverwerkingsprogramma) heb je een knop om opsommingen te maken: gebruik deze, want het heeft veel voordelen. Pagina 53

53 De voordelen van het op deze manier opmaken van opsommingen zijn: Huistijl: De opsommingen zijn in stijl met de huisstijl. Dat is prettig voor de bezoeker van de site én voor de uniforme uitstraling van de site. Deze is namelijk vastgelegd in deze standaard-opsommingen. Of je het nu mooi vind of niet. Zoekmachines: Zoekmachines geven extra waarde aan opsommingen. Door de opsommingsoptie te gebruiken wordt ook in de HTML-code aangegeven dat het een opsomming is en dan weet de zoekmachine dit ook. Toegankelijkheid: Mensen die screenreaders gebruiken, zoals blinden, kunnen met hun software ook deze opsommingen herkennen 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 zijn (zie ook 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). Pagina 54

54 Afbeelding 18: Pagina-index op Wikipedia. Volgorde is titel, samenvatting, index en body Zorg dat informatie lineair is ## nog verder invullen over het gebruik van sterretjes bijvoorbeeld. Of de positie van betekenisvolle afbeeldingen in een tekst. links die verwijzen naar links of rechts op pagina (WCAG-richtlijn) 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 spraak- en 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. Pagina 55

55 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. Hieronder een voorbeeld van een goede headingsstructuur. <h1>belastingvoordeel voor alleenstaande moeders</h1> <h2>de voordelen op een rij</h2> [stukje tekst] Pagina 56

56 <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: Let op: Op Goede Vrijdag sluit de bibliotheek 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-/brailleuitvoer 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 (zie Prioritizing Web Usability van Jakob Pagina 57

57 Nielsen). 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 maak je hiermee een zogenaamde break <br /> en 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. 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. Er zijn situaties waarin je wel een break (Shift-Enter) kunt gebruiken, bijvoorbeeld bij het weergeven van adresgegevens, zoals hieronder. Pagina 58

58 Burgemeester de Withstraat EK De Bilt Bij spraakuitvoer worden de regels achter elkaar opgelezen. In bovenstaande situatie wordt er dan opgelezen "123732". Om dat te voorkomen, plaats aan het eind van elke regel een extra spatie. In bovenstaande situatie,een extra spatie na 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 19: 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> <li>wandelen</li> </ul> En op de site ziet dat er als volgt uit: Pagina 59

59 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 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. Pagina 60

60 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 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, Pagina 61

61 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 nietingewijde 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 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. Pagina 62

62 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. 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 Tekstfragmenten in een andere taal Content in een andere taal, maar het menu en andere teksten niet 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: Pagina 63

63 <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 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 20: 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> Pagina 64

64 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. Afbeelding 21: 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 HTMLcode toe: <span lang= en >The municipality of Winterswijk</span> Pagina 65

65 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> 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 voor de leesbaarheid van je teksten om geen super- en subscript te gebruiken op webpagina's. Overigens lijkt het superscript ook te verdwijnen uit de gewone taal (zie bijvoorbeeld Gebruik MathML voor formules De beste manier om formules te schrijven is met MathML (zie nl.wikipedia.org/wiki/mathematical_markup_language. Dit kan met speciale formule-editors, zoals OpenOffice Math of MathType (voor Word-gebruikers). Kun je MathML niet gebruiken, plaats dan een afbeelding van de formule (zie afbeelding hieronder). 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} {(1+i)^{t}} (Bron: Wikipedia). Afbeelding 22: Voorbeeld van een formule (formule voor koopkracht), alternatieve tekst bij de afbeelding is PV=\frac {FV} {(1+i)^{t}}1 Het verbaast je wellicht, maar voor blinden die werken met deze formules (wiskundigen of programmeurs) is deze formule via hun brailleleesregel uitstekend te begrijpen. Pagina 66

66 7.4.9 Gebruik cijfers bij getallen bij specifieke informatie Bij het gebruik van exacte getallen is het beter dan het getal als cijfer te schrijven dan als woord: 12 is dus beter dan twaalf. Bijvoorbeeld: Er zijn 8 waterschappen die de regeling toepassen. Bij het ongeluk vielen 12 gewonden en 3 doden. Schrijf getallen als tekst (in letters) als ze geen specifieke feiten weergeven, dus: Van deze zeldzame neushoorn leven nog maar enkele duizenden exemplaren. 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. Jakob Nielsen heeft onderzoek gedaan naar het gebruik van cijfers bij getallen. In zijn artikel "Show Numbers as Numerals When Writing for Online Readers" concludeert hij dat cijfers de volgende voordelen hebben: Cijfers worden beter gelezen (denk aan scannend lezen) en begrepen (denk bijvoorbeeld aan laaggeletterdheid) Cijfers worden beter onthouden. Cijfers maken je tekst geloofwaardiger. Omdat ze specifieker lijken komen ze betrouwbaarder over. Je hebt wellicht ook geleerd om getallen tot 20, tientallen tot 100 en honderdtallen tot 1000 in letters te schrijven. Als het gaat om exacte, specifieke informatie is dat dus achterhaald: cijfers zijn beter. Jan Renkema schrijft iets vergelijkbaars in de Schrijfwijzer (5e editie, 2012, 10.2): In zakelijke en exacte mededelingen worden getallen in cijfers weergegeven. Het is dus 30 C en rond de dertig graden Rangtelwoorden Voor rangtelwoorden - zoals 2e en 3e - geldt hetzelfde als voor getallen: schrijf ze met cijfers. Het is dus niet "tweede", maar "2e". Gebruik ook hier geen superscript, want dat verslechtert de leesbaarheid. Pagina 67

67 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: 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. Voor het web is er een specifieke opmaakmogelijkheid om afkortingen weer te geven, namelijk het abbreviation-element. Ons inziens zijn er veel nadelen: De standaardweergave van dit element is een stippellijn onder de tekst. Veel mensen verwarren die met een gewone hyperlink en denken dat ze erop kunnen klikken. Voor hen is het dus een verwarrend element. De uitgeschreven vorm van de afkorting verschijnt bij mouse-over van de afkorting. Veel mensen weten dit niet en zien dus niet de volledige vorm. Pagina 68

68 Verder zijn er mensen die om wat voor reden de muis niet kunnen gebruiken, ook zij krijgen de mouse-over-tekst niet te zien. Doordat er een mouse-over-tekst beschikbaar is, denken sommige redacteuren dat je de afkorting niet meer uit hoeft te leggen. Daarmee werkt het dus juist averechts. Het voorzien van elke afkorting van een abbreviation betekent veel extra werk voor de webredacteur. In de nieuwe richtlijnen WCAG 2.0 / Webrichtlijnen 2 is het abbreviation-element niet meer verplicht op Level A en AA. Er is ons inziens weinig reden om het abbreviation-element te gebruiken 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 23: Voorbeeld van het gebruik van het blockquoteelement (Bron: In HTML code ziet dat er als volgt uit: Pagina 69

69 <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 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 (en kan) 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. De HTML-code is als volgt: <p>(...) 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.'</p> In veel sites is de blockquote niet nodig. Een citaat is namelijk vaak geplaatst in een lopende zin en in een alinea. Voor het plaatsen van een citaat in een lopende zin is eigenlijk het q-element bedoeld. Het q-element wordt echter weinig ondersteund door screenreaders (zie Pagina 70

70 Je hoeft het dus niet te gebruiken. Nog even samengevat: Staat het citaat apart als alinea: gebruik dan de het blockquote-element. Staat het citaat in een lopende zin, dan hoef je niets extra's te doen. 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. Aanklikbare afbeelding: Hier beschrijft de alternatieve tekst de bestemming van de link. Vaak staat er tekst in de afbeelding: kies dan als alternatieve tekst 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 2 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 Pagina 71

71 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 alt-attribuut 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 (bron: webaim.org/techniques/alttext/): Het wordt opgelezen door spraakuitvoerprogramma's en wordt uitgevoerd als braille op een brailleleesregel. Zo is de inhoud en de 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 hond heeft dan als alternatieve tekst blindengeleidehond. Gaat de tekst over verschillende hondensoorten, dan 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. Pagina 72

72 Afbeelding 24: Context: tekst over blindengeleidehonden Alternatieve tekst: blindengeleidehond Afbeelding 25: 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 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 alt-attribuut 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 (bron: webaim.org/techniques/images/longdesc): 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 hieronder). Als alt-tekst kun je dan Pagina 73

73 verwijzen naar de tekst eronder, bijvoorbeeld alt= percentages functiebeperkingen, uitleg staat hierna, 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 % Pagina 74

74 Methode 2: Tekstlink onder de afbeelding Een link direct onder de afbeelding waarmee je verwijst naar een pagina met uitleg (zie het voorbeeld hieronder). Beperkingen in Nederland, in % 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 Gebruik liever geen afbeeldingen van tekst De nieuwe richtlijnen voor toegankelijkheid, WCAG 2.0, raadt het gebruik van afbeeldingen van tekst af. Een afbeelding van tekst zie je vaak in de vorm van banners, zoals in het voorbeeld hieronder. Wellicht zie je geen verschil, maar in de onderliggende code is dat zeker wel. De standaardcode waarin webpagina's zijn geschreven is HTML. Tekst in een webpagina is in de HTML-code ook als tekst aanwezig. Daardoor kan deze tekst ook makkelijk vergroot worden en gelezen worden door spraakuitvoerprogramma's. En natuurlijk door de grootste blinde bezoeker van het web, zoekmachines, zoals Google. Pagina 75

75 Afbeelding 26: Voorbeeld van een afbeelding van tekst Door tekst niet als echte te tekst te plaatsen, maar deze op te nemen in een afbeelding is de tekst niet meer direct beschikbaar. Het gebruik van afbeeldingen van tekst heeft de volgende nadelen: Bij het vergroten van de afbeelding wordt de tekst minder scherp, want de tekst is een plaatje. Spraaksoftware, brailleleesregels en zoekmachines zoals Google kunnen minder makkelijk bij de tekst komen. Het is mogelijk om een alt-tekst te plaatsen, maar dit is minder handig. In veel gevallen wordt er niets eens een goede alt-tekst geplaatst, omdat de kennis hierover bij de webredacteur niet voldoende is. Een slechte alt-tekst wordt ook niet snel ontdekt, omdat deze voor de meeste mensen verborgen blijft. Het wijzigen van een tekst is omslachtiger, omdat altijd iemand de afbeelding moet aanpassen. In veel gevallen moet je dan terug naar de vormgever. Wellicht de belangrijkste reden om geen gebruik te maken van afbeeldingen van tekst is dat er een uitstekend alternatief is: HTML en CSS. Met de opmaak taal CSS kun je uitstekend zorgen dat je een plaatje combineert met tekst. Dat werkt zo: Via de CSS (stylesheet) plaats je de achtergrondafbeelding van een banner. In de HTML plaats je de tekst die op de banner komt Visueel is er geen verschil, behalve als de afbeelding vergroot wordt, want dan blijkt dat de tekst gewoon scherp blijft. Pagina 76

76 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 selfexplaining 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 spraaken/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. 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). 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: Pagina 77

77 Afbeelding 27: Lees-verder-link in microcontent 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. 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 28: Tekst title-attribuut, zichtbaar bij mouse-over Pagina 78

78 7.6.2 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-/brailleuitvoer 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. 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. Pagina 79

79 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. 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 altattribuut van de link de bestemming van de link. Aanklikbare afbeelding Alt-tekst Pagina 80

80 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. 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 PDF-bestanden zijn vaak moeilijker toegankelijk te maken dan een gewone webpagina. Pagina 81

81 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 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. Over dit onderwerp hebben wij een apart e-book Toegankelijke Documenten gemaakt 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. Pagina 82

82 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 Wordformaat of het itunes-formaat van Apple (Zie 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) HTML-pagina 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 lay-out 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)$"> ForceType application/octet-stream Header set Content-Disposition attachment </FilesMatch> Pagina 83

83 7.7.5 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 (zie ook Afbeelding 29: 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 30: Schrijfwijze link 7.8 Tabellen Tabellen zijn voor gebruikers van spraak- en braille-uitvoer vaak moeilijk om te gebruiken. Het navigeren in een tabel is onhandig en bij datatabellen die niet goed zijn opgemaakt is het voor hen onduidelijk bij welke kolom en rij een cel hoort. Een 2-kolomstabel mag echter wel. Pagina 84