1

Webredactie ende Webrichtlijnen

Ab Bertholet

ab&co, partners in communicatie

Jaap van de Putte

2 use it, Internet Research & Consultancy

2

Kennismaking

Naam

Functie

Organisatie

Wat wil je vandaag leren?

3

Inhoud van de dag

Kennismakingsrondje en vragen inventariseren

Alle Webrichtlijnen, relevant voor webredacties

Algemene richtlijnen voor goed schrijven

Aan de slag met een CMS

Plenair bespreken eigen vraagstukken

4

Wat doen we vandaag niet?

Webrichtlijnen die betrekking hebben op:

techniek

formulieren

tabellen

inrichting CMS

Geschikt maken van video en audio

5

Syllabus

Webredactierichtlijnen

Richtlijnen voor goed

schrijven

6

Ochtendprogramma

9:30 Korte kennismaking

9:40 Introductie in webtoegankelijkheid

9:50 Webredactierichtlijnen, deel 1

10:45 Zelf aan de slag: tekst beoordelen

11:10 Pauze

11:25 Webredactierichtlijnen, deel 2

12:30 Lunch

7

Middagprogramma

13:15 Goed schrijven

14:15 Teksten beoordelen (plenair)

14:55 Pauze

15:10 Ervaringen en leervragen uitwisselen

16:15 Samenvatting, evaluatie en ruimte voor vragen

16:30 Afsluiting

8

De Webrichtlijnen

“Kwaliteitsmodel” voor websites

125 richtlijnen

Staan voor: toegankelijkheid, duurzaamheid,

vindbaarheid, efficiency

9

Webrichtlijnen en gemeenten

December 2008: Nationaal

Uitvoeringsprogramma Betere

Dienstverlening en e-overheid (NUP)

Afspraak tussen rijk, provincies,

gemeenten en waterschappen

E-toegang:voldoen aan Webrichtlijnen

Deadline: 1 januari 2011

10

Toegankelijk voor wie?

blinden en slechtzienden

doven en slechthorenden

laaggeletterden

ouderen

motorisch beperkten

instrumenteel beperkten

11

Toegankelijkheid

En voor wie nog meer?

buurman, collega,

familielid, jijzelf?

Oftewel: voor iedereen:

e-inclusion

12

A brief history of Accessibility

1989Tim Berners Lee “ontdekt” het internet:

“The power of the Web is in its universality.

Access by everyone regardless of disability

is an essential aspect.”

1994Start W3C

Internatonaal consortium voor webstandaarden

1999W3C Web Accessibility Initiative (WAI)

Web Content Accessibility Guidelines (WCAG) 1.0

13

A brief history of Accessibility

2001Start Stichting DrempelsWeg (--> DrempelVrij)

vertaling en bewerking van WCAG 1.0, prioriteit 1

2001Advies Europese Commissie

WCAG 1.0, prioriteit 1

2006Webrichtlijnen

Verplicht voor rijksoverheden

Eigen route Nederland

14

A brief historydec 2008 Nationaal Uitvoeringsprogramma Betere

Dienstverlening en e-overheid (NUP)

Provincies, gemeenten, waterschappen

Einddatum: 1 januari 2011

dec 2008 W3C publiceert WCAG 2.0

18 juni 2009 Waar doen we het allemaal voor?

Toegang voor iedereen

“The power of the Web is in its universality.

Access by everyone regardless of disability

is an essential aspect.”

15

Wat zijn de Webrichtlijnen niet?(Maar wat ze wel zeggen te zijn ...)

Panacee voor alle webkwalen

Waarborg voor toegankelijkheid

Waarborg voor kwaliteit

Instrument voor kostenbesparing

16

Wat zijn de Webrichtlijnen wel?

Betere toegankelijkheid

Meer kans op een betere usability

Meer kans op een betere vindbaarheid

Helder bouwkader naar webbouwers

17

95 Webrichtlijnen (effectief)

35 % gaat over webredactie

18

Vertaalslag:

36 Webrichtlijnen over webredactie

26 Webredactierichtlijnen

19

UitgangspuntenWebredactierichtlijnen

Goed CMS

Redactie hoeft geen HTML in te voeren.

Elke webredactie moet het kunnen.

20

Richtlijnen voor websites

21

Voordelen toepassenWebredactierichtlijnen

goed voor de usability

(gebruiksvriendelijkheid en bruikbaarheid)

goed voor de accessibility

(toegankelijkheid voor mensen met een

beperking)

goed voor de findability

(vindbaarheid in zoekmachines)

22

De Webredactierichtlijnen

23

Headings

Webredactierichtlijn 1:

De paginatitel heeft een h1-stijl. Per pagina is er

één h1.

Webredactierichtlijn 2:

Gebruik kopopmaakprofielen voor de koppen.

Webredactierichtlijn 3:

Sla geen niveaus in de kopstijlen over.

24

Voordelengebruik headings

beter voor accessibility:

direct naar de koppen

betere voor findability:

tekst met heading krijgt zwaarder gewicht

beter voor usability:

uniforme uitstraling website

25

Opbouw met koppen

26

Opbouw met kopopmaakprofielen

27

Opmaakprofielen in het CMS

28

Opmaakprofielen in het CMS

29

En gaat het goed bij de gemeente Utrecht?

Nee, helaas

30

Alinea's

Webredactierichtlijn 4:

Gebruik [Enter] voor een nieuwe alinea.

31

Voordeel gebruik van Enter of Return

Usability:

Alinea is zelfstandige informatie-eenheid

Maakt scannen van alinea's mogelijk

Accessibility:

Maakt springen naar alinea's mogelijk

Findability:

??

32

Lettergrootte

Webredactierichtlijn 5:

Gebruik geen superscript of subscript.

33

Nadeel super/subscript

Moeilijk leesbaar:

70 – 80 % van de originele grootte

Lijkt ook uit de Nederlandse taal te verdwijnen

34

Lijsten

Webredactierichtlijn 6:

Gebruik bij opsommingen de opsommingsopties

van de CMS-editor.

35

Voordelen gebruikcorrecte opsommingen

Usability:

opsommingen zijn ankerpunten bij het lezen

Accessibility:

scannen met spraakuitvoer of braille-uitvoer

Findability:

krijgen meer gewicht in zoekmachines

36

Opsommingen via het CMS

37

Zo niet ...

38

Zo niet ...

39

Zo wel ...

40

Bestanden

Webredactierichtlijn 7:

Stel downloads in een open formaat beschikbaar,

bijvoorbeeld PDF.

41

Toelichting bestandsformaat

Veel discussie over:

Wat is de toegevoegde waarde?

Open format ≠ toegankelijkheid

Ergo:

Kies bij tekstdocumenten voor PDF

Indien mogelijk voor PDF/A-1a

42

Links naar HTML-pagina's

Webredactierichtlijn 8:

Gebruik relevante inhoudswoorden in de

linktekst.

43

Relevante woorden in link

Usability:

herkenning bij scannen

Accessibility:

ankerpunten bij spraak-/brailleuitvoer

Findability:

linkteksten krijgen zwaarder gewicht

44

45

Relevante woorden in link

46

Uitzondering relevante woorden in link

“lees-verder”-links bij aankeilers

Oplossing:

titel is altijd aanklikbaar

title-tag bij “lees-verder”-link

47

Aankeilers

48

49

Links naar HTML-pagina's

Webredactierichtlijn 9:

Maak de linktekst zo kort mogelijk.

50

Linktekst kort

Usability:

sneller herkenning bij het scannen (minder ruis)

Accessibility:

sneller bij spraak-/brailleuitvoer

Findability:

keyword density (minder ruis)

51

Linktekst kort

Protestantse Theologische Universiteit:

52

Links naar HTML-pagina's

Webredactierichtlijn 10:

Onderstreep geen teksten die geen hyperlink zijn.

53

Links naar HTML-pagina's

Webredactierichtlijn 11:

Open niet automatisch een nieuwe tab of nieuw

venster, behalve als de informatie nodig is in

een proces dat niet onderbroken mag worden

(zoals een bestelproces).

54

Waarom geen nieuwe vensters/tabs openen?

“Anders zijn we onze bezoekers kwijt.”

Nieuwe vensters / tabs worden niet opgemerkt

(zeker met de nieuwe browsers)

Back button gaat kapot

Keuze bij de bezoeker laten

55

Links naar HTML-pagina's

Webredactierichtlijn 12:

Gebruik bij lange pagina's interne links. Neem

deze links op in een pagina-index.

56

Pagina-index: zo niet ...

57

Pagina-index: zo wel ...

58

Zelf aan de slag:teksten beoordelen

Voorbeeld 1 hele pagina begin pagina

Voorbeeld 2

Voorbeeld 3

Voorbeeld 4

Voorbeeld 5

Voorbeeld 6

Voorbeeld 7

Voorbeeld 8

Voorbeeld – extra

68

Links naar niet-HTML-pagina's

Webredactierichtlijn 13:

Open downloadbare bestanden in hetzelfde

venster of tab.

69

Links naar niet-HTML-pagina's

Webredactierichtlijn 14:

Meld bij downloadbare bestanden de naam van

het bestand en het bestandsformaat. Geef het

bestand een duidelijke naam.

Verwijst de link naar een e-mailadres, schrijf het

e-mailadres uit in de linktekst.

70

Zo niet ...

71

Zo wel ...

72

Afbeeldingen

Webredactierichtlijn 15:

Geef elke afbeelding die betekenis overbrengt een

overeenkomstige alternatieve beschrijving van

maximaal 70 tekens.

73

Voordelengebruik alt-tekst

Beter voor accessibility:

ook informatie bij spraak- en brailleuitvoer

Beter voor usability:

alternatief als plaatje niet getoond kan worden

Beter voor findability?

74

Alternatieve teksten

Is afbeelding wel of niet informatief?

Tekst die in de plaats komt van de afbeelding

Stel je voor dat je de website opleest. Wat zou je

over de afbeelding zeggen?

Alt-teksten controleren:

Firefox: Pagina » Pagina-info

76

77

Voorbeelden alternatieve teksten

Vrouw met dochter op fietsbij Lelystadse kust

Vrouw in rolstoel doet boodschappen in supermarkt

78

Voorbeelden alternatieve teksten

Werk aan de weg

Ontwikkeling Lelystad Airport

79

Voorbeelden alternatieve teksten

jongen kijkt met vergrootglas

80

Afbeeldingen

Webredactierichtlijn 16:

In uitzonderlijke situaties is er een langere tekst

nodig dan 70 tekens. Gebruik dan het longdesc-

attribuut.

81

Aanklikbare afbeeldingen

Webredactierichtlijn 17:

Gebruik de title-tag bij een link op een afbeelding

(dus zonder linktekst). Geef in deze titel zinvolle

informatie over de bestemming van de link.

82

Link en titel

83

Goed schrijven

Webredactierichtlijn 18 t/m 21:

doen we vanmiddag

84

Tabellen

Webredactierichtlijn 22:

Gebruik bij voorkeur geen tabellen.

85

Tabel nodig?

86

Tabel nodig?

87

Tabellen

Webredactierichtlijn 23:

Is het gebruik van een tabel noodzakelijk, gebruik

dan de opmaakregels die de Webrichtlijnen

voorschrijven.

88

Lange citaten

Webredactierichtlijn 24:

Gebruik het element blockquote voor het

aangeven van (lange) citaten.

89

Blockquote in CMS

90

Taalwisselingen

Webredactierichtlijn 25:

Geef aan als de tekst wijzigt naar een andere taal

dan de basistaal.

91

Belang van taalwisselingen

Usability:

geen belang

Findability:

geen belang

Accessibility:

belangrijk voor spraakuitvoer

92

Taalwisselingen in CMS

93

Taalwisselingen in CMS

94

Video en audio

Webredactierichtlijn 26:

Zorg bij multimedia – video en audio – dat er een

tekstueel alternatief is voor beeld en geluid.

95

Nog vragen?

96

Na de cursus

Op de ELO:

syllabus

sheets

Verder praten? In het forum

Terugkomdag:

najaar

thema's

97

Afsluiting ochtend