Redaktørkursus i tilgængelighed og tilgængelige dokumenter

1. Redaktørkursusi tilgængelighed og tilgængelige dokumenter Helene Nørgaard Bech Sensus ApS 24. februar 2011 l

2. Program • Introduktion til tilgængelighed • Tilgængelige sider fra jeres CMS • Opgave • Tilgængelige Word-filer • Opgave • Tilgængelige PDF-filer med Acrobat Pro • Opgave

3. Tilgængeligt Webdesign ”Web’ens styrke ligger i, at den er universel. Det er helt grundlæggende, at alle mennesker — uanset funktionsnedsættelser — har adgang” Tim Berners-Lee Opfinder af WWW, direktør for W3C Tilgængelighed er et spørgsmål om at give flest mulige mennesker i flest mulige situationer og fra flest mulige browser-teknologier adgang til web-baseret information

4. Hvem oplever tilgængelighedsproblemer? • Mennesker med funktionsnedsættelser • Tilgængelighedsproblemer, der skyldes teknologi • Tilgængelighedsproblemer, der skyldes situation

5. Mennesker med funktionsnedsættelser • Syn, hørelse, bevægelse, tale, kognition, sprog, læring, neurologiske • Kombinationer af disse • Kortvarige, længerevarende eller permanente • Op mod 25 % af befolkningen oplever tilgængelighedsproblemer

6. Funktionsnedsættelser og alder • Forekomsten af helbredsproblemer stiger med alderen • Og der bliver flere ældre The Convergence of the Aging Workforce and Accessible Technology, Microsoft Corporation 2003 Danmarks Statistiks befolkningsfremskrivning 2009 PROG7A09

7. Teknologi • Nogle brugere har brug for at forstørre hjemmesiden 10-12 gange for at kunne se indholdet • Nogle brugere har en 24”-skærm med en opløsning på 1920 x 1080 • Nogle brugere har en PDA med en opløsning på 480x430 • Nogle brugere anvender andre brugeragenter (browsere) eller styresystemer end de mest gængse • Tilgængelige løsninger er fleksible i forhold til forskellige brugeragenter

8. Situation • I nogle situationer kan brugere ikke bruge deres øjne, hænder, øre etc. til at opfatte webindhold. • Tilgængeligt indhold rummer en fleksibilitet i forhold til forskellige situationer.

9. Det officielle fokus • Tilgængelighed af hensyn til mennesker med en række handicaps: • Syn, hørelse, bevægelse, tale, kognition, sprog, læring, neurologiske • Kombinationer af disse • Tilgængelighed af hensyn til ældre mennesker med aldersbetingede behov • Tilgængelighed af hensyn til brugere i al almindelighed

10. Brugere er forskellige • Hvis man er blind bruger man skærmlæser http://www.iu.dk/ • Hvis man ser dårligt bruger man forstørrelse http://www.iu.dk/ • Hvis man har et motorisk handicap kan man måske ikke anvende mus eller tastatur • Nogle (ex. ordblinde) har svært ved at læse http://www.iu.dk/

11. Type af problemer (Web) • Nogle problemer skabes af systemerne og af udviklerne • Fx layouttabeller, HTML-fejl, genbrug af linktekster, utilgængelige scripts, faste dimensioner, valg af CMS … • Andre skabes af designerne • Fx ringe kontrast, små bogstaver, dårlig navigation, … • Atter andre problemer skabes af redaktørerne • Fx dokumentproduktion, billeder uden ALT, dårlige linktekster, manglende overskrifter

12. Tilgængelighed i Danmark Danske beslutninger • Åbne standarder incl. tilgængelighed obligatorisk (2008) FN • FN’s handicapkonvention om handicappedes rettigheder (2009)

13. Retningslinjer og prioriteter • W3C prioriteter og overholdelse • Prioritet 1 – Skal overholdes (A) • Prioritet 2– Bør overholdes (AA) • Prioritet 3 – Kan overholdes (AAA) • Niveau AA (prioritet 1 og 2) er minimum; niveau AAA er ikke altid realistisk • Danske retningslinjer fra IT- og Telestyrelsen • EU anvender ligeledes W3C/WCAG

14. Retningslinjer og prioriteter • Ikke-W3C retningslinjer • Ikke-W3C teknologier • Indhold fra eksempelvis Microsoft (Office), Adobe (PDF, Flash), Open Office, andre • Dokumenterne skal følge retningslinjerne for det pågældende format • Leverandører er på vej med WCAG 2 supplement til sikring af tilgængeligheden til fx Word og PDF

15. Udpluk af Web Content Accessibility Guidelines 2.0 – og hvordan disse anvendes i IU’s CMS Helene Nørgaard Bech Sensus ApS

16. Vil du vide mere? • Det følgende er arbejdsgange for det redaktionelle arbejde ud fra Web Content Accessibility Guidelines 2.0 • Alle retningslinjerne er at finde her: http://www.w3.org/TR/WCAG20/ • - Og i en dansk oversættelse her: http://www.w3.org/Translations/WCAG20-da/

17. Billeder • Alle billeder skal have et tekstligt alternativ, der svarer til billedets formål

18. Billeder (fortsat) • Typer af formål • Dekoration • Instruktion • Link • Visuel genkendelse / dokumentation • ... http://www.iu.dk/markedsfoering/national-strategi http://www.iu.dk/markedsfoering http://www.iu.dk/dokumentation/europass http://www.iu.dk/dokumentation/kvalifikationsrammer/om-kvalifikationsrammen

19. Samme billede, men forskellige alt-tekster til forskellige situationer: • Billedet er et link til en artikel om erhvervsuddannelse • Billedet er en illustration til en artikel om erhvervsuddannelse • Billedet er en illustration til en caseartikel, der portrætterer den fotograferede • Billedet er en instruktion til en artikel om kropssprog

20. Billeder - sådan gør du • Når du uploader et billede bliver titlen foreslået som alt-tekst, når du skal sætte det ind • Det vigtigste er, at du forholder dig til billedets alt-tekst HVER gang du indsætter billedet

21. Billeder – sådan gør du

22. Billeder - sådan gør du

23. Billeder – sådan gør du • Skriv en alt-tekst, der passer til billedets formål her

24. Billeder – sådan gør du • Tom alt-tekst for billeder hvis formål kun er dekoration

25. Billeder – sådan gør du • Check evt. af at du gerne vil have billedtekst igen

26. Komplekse billeder • Eksempelvis diagrammer, instruktioner etc. • Flere løsningsmuligheder • Beskriv billedets formål i alt-teksten (ikke for langt) • Beskriv billedets formål i teksten og skriv i alt-teksten at dette er gjort • Link til en anden fremstillingsform og beskriv i alt-teksten at denne løsning er valgt http://www.iu.dk/politiske-rammer/bologna-processen

27. Billeder – Billeder af tekst • Brug ikke billeder af tekst, hvis det kan undgås • Ordblinde kan ikke markere og få læst teksten højt • Svagsynede, der forstørrer siden meget, får pixeleret skrift • Logoer er accepterede http://www.iu.dk/dokumentation/kvalifikationsrammer

28. Farve • Brug ikke farve som eneste måde at fortælle brugeren noget på. http://www.iu.dk/politiske-rammer/bologna-processen

29. Tekst - Overskrifter Overskrifter er struktur, der hjælper brugeren med at navigere http://www.iu.dk/dokumentation/uddannelser-i-udlandet http://www.iu.dk/politiske-rammer/europa-2020

30. Når du laver overskrifter: • Titlen for siden bliver automatisk en H1-overskrift • Brug overskriftniveauer 1-3 uden at springe niveauer over – første overskrift i brødteksten skal altid være 1 • Overskrifterne skal inddele siden i logiske afsnit

31. Overskrifter - sådan gør du

32. Overskrifter – sådan gør du

33. Overskrifter – sådan gør du

34. Overskrifter – sådan gør du

35. Overskrifter – sådan gør du

36. Overskrifter i faktaboks og portlet • Husk overskriftniveauet i faktabokse skal passe med resten af siden • Portlet-titler vises ikke som programmerings-mæssige overskrifter

37. Overskrifter i faktaboks

38. Tekst - lister • Brug de funktioner, der er i Plone • Skriv ikke tallene selv • Brug ikke tegn såsom * eller – som punkter (bullets) • Brug ikke billeder af punkter (bullets) • Brug ikke punkter fra tidligere dokumenter http://www.iu.dk/anerkendelse/kvalifikationsnaevnet

39. Lister – sådan gør du

40. Tekst - formuleringer • Brug ikke kun instruktioner, der er afhængig af brugerens sanser. Eksempelvis farve, størrelse, placering etc.

41. Tekst - formuleringer • To næsten ens instruktioner: • Læs mere om uddannelser i den blå boks til højre • Læs mere om uddannelser under teksten ”Uddannelser i Danmark” i den blå boks til højre

42. Tekst - linktekster • Den tekst, der er klikbar skal beskrive formålet for linket, når den læses for sig selv • Dette gælder både for links til et andet sted på samme side, interne og eksterne links http://www.iu.dk/markedsfoering/national-strategi/baggrundsmateriale-for-strategi

43. Linktekster http://www.iu.dk/programmer-og-tilskud/norden/nordplus/nordplus-videregaaende

44. Datatabeller • Anvend tabeloverskrifter til at identificere, hvad der er overskrifter i din tabel http://www.iu.dk/dokumentation/karakterskalaer http://www.iu.dk/maalgruppeindgange/grundskole/ansoegningsskemaer-og-frister

45. Eksempler på datatabeller

46. Datatabeller – sådan gør du

47. Datatabeller – sådan gør du

48. Datatabeller – sådan gør du

49. Datatabeller – sådan gør du • Fortsæt til alle celler med overskrifterer opmærkede

50. Layouttabeller • Layouttabeller er blot en visuel positionering af tekst, men udtrykker ikke et forhold imellem cellerne • Hvis du anvender en layouttabel, må du ikke give den tabeloverskrifter • Sørg for, at din tabel kan forstås, når den læses række for række