Webredactie Webrichtlijnen Deel1
-
Upload
jaapvandeputte -
Category
Business
-
view
1.331 -
download
0
Transcript of Webredactie Webrichtlijnen Deel1
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