Tilgængelighed Århus kommunes hjemmeside

1. Tilgængelighed Århus kommunes hjemmeside Helene Nørgaard Bech Sensus ApS April 2010 l

2. Program • En kort introduktion til webtilgængelighed • Hvordan anvendes jeres CMS til at skabe tilgængeligt indhold • Opgave • Diskussion i plenum

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

5. Brugere er forskellige • Hvis man er blind bruger man skærmlæser • http://www.sensus.dkhttp://www.aarhuskommune.dk/ • Hvis man ser dårligt bruger man forstørrelse http://www.aarhuskommune.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.aarhuskommune.dk/

6. Type af problemer (Web) • Nogle problemer skabes af systemerne og af udviklerne • Fx formlarer som ikke hænger sammen, HTML-fejl, linktekster/URL-genbrug, utilgængelige scripts, … • 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

7. Status • Op imod 25% af alle brugere oplever problemer med tilgængeligheden Danske beslutninger • Åbne standarder incl. tilgængelighed obligatorisk (2008) FN • FN’s handicapkonvention om handicappedes rettigheder (2009)

8. Obligatoriske standarder

9. Retningslinjer og prioriteter • Internationale retningslinjer fra World Wide Web Consortium (W3C) • Web Accessibility Initiative (WAI) • Web Content Accessibility Guidelines (WCAG) • Authoring Tools Accessibility Guidelines (ATAG) • User Agents Accessibility Guidelines (UAAG) Brugeren oplever tilgængelighed UAAG Browsere, Media players ATAG Redigerings-værktøjer, editors, CMS WCAG Indhold, struktur, layout, interaktion

10. Retningslinjer og prioriteter • W3C prioriteter og overholdelse • Prioritet 1 – Skal overholdes (niveau A) • Prioritet 2– Bør overholdes (niveau AA) • Prioritet 3 – Kan overholdes (niveau 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

11. Retningslinjer og prioriteter 2 • 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

12. Web Content Accessibility Guidelines 2.0 - udpluk Helene Nørgaard Bech Sensus ApS

13. WCAG 1.1.1 - A Ikke-tekstligt indhold: Alt ikke-tekstligt indhold, som præsenteres for brugeren, har et tekstligt alternativ, der har samme formål. FX: • Tidsafhængigt media • Grafik • Dynamisk Indhold • Rammer

14. Hyppige brud på retningslinierne Manglende alternativer til grafik (90%) Brugere af skærmlæsere får ikke information om hvad billedet indeholder. Det er et stort problem hvis billedet også er et link. Hvis grafik ikke bærer information så lav tom alternativ tekst. http://www.aarhuskommune.dk/ http://www.aarhuskommune.dk/borger/beskaeftigelse-og-uddannelse.aspx http://www.aarhuskommune.dk/borger/beskaeftigelse-og-uddannelse/Uddannelse-for-unge.aspx http://www.dsb.dk/

15. WCAG 1.3.1 - A Information og relationer: Information, struktur og relationer, som fremgår af den visuelle præsentation, kan også blive fastslået programmeringsmæssigt eller er tilgængelig som tekst. Fx. • tabelinformation • H-overskrifter • Citater • Listeelementer

16. Hyppige brud på retningslinierne Manglende/ukorrekt anvendelse af overskriftelementer (87%) H-elementer må ikke bruges til at opnå et bestemt visuelt udtryk men skal bruges til at markere forskellige niveauer af overskrifter og de skal samtidig nestes korrekt. http://vtu.dk/forskning/internationalt-samarbejde http://www.itst.dk/regeringens-it-og-telepolitik/it-og-telepolitiske-redegorelser http://www.aarhuskommune.dk/borger/familie-boern-og-unge/Sundhed/Sundhedsplejen/Tilbud.aspx http://www.aarhuskommune.dk/sitecore/content/Subsites/HelhedsplanGellerup/Home/Hoeringsfase/Aktiviteter-i-hoeringsfasen---en-oversigt.aspx

17. Hyppige brud på retningslinierne Manglende titler til rammer (57%) Titler kan hjælpe en bruger af eksempelvis skærmlæser til at finde ud af hvad de indeholder. http://www.dsb.dk/

18. Hyppige brud på retningslinierne Manglende overskrifter til datatabeller (59%) Anvend eksempelvis TD til at identificere data celler og TH til at identificere overskrifter i HTML. http://www.su.dk/SU/satserSU/videregaaende/Sider/default.aspx http://www.aarhuskommune.dk/aarhus/Aarhus-i-tal/Aktuelle-nyheder.aspx

19. WCAG 1.3.3 - A Sansemæssige egenskaber: Instruktioner, som er medtaget af hensyn at kunne forstå og anvende indholdet er ikke udelukkende afhængig af sansemæssige egenskaber såsom form, størrelse, visuel placering, orientering eller lyd. http://www.aarhuskommune.dk/borger/bolig-og-byggeri/Boligen/Ejendomsskat/Indefrysning/Vejledning-om-laan-til-betaling-af-ejendomsskatter.aspx

20. WCAG 1.4.1 - A Brug af farver: farver bliver ikke anvendt som den eneste visuelle metode til at videregive information, indikere en handling, anmode om et svar eller skelne et visuelt element. http://www.kk.dk/Borger/Borgerservice/Flytning.aspx

21. WCAG 1.4.5 - AA Billeder af tekst: Hvis det er muligt at opnå den ønskede visuelle præsentation ved hjælp af den anvendte teknologi så anvendes tekst snarere end billeder af tekst.

22. Hyppige brud på retningslinierne Brug af grafik som burde være mark up (51%) Fx. billeder som bliver anvendt som overskrifter. Kan ikke søges på, læses op eller forstørres som skrift. http://www.frederiksberg.dk/ http://www.aarhuskommune.dk/borger/sundhed-og-sygdom/Sundhedsfremme-og-forebyggelse/Rygning/Slip-fri.aspx http://www.su.dk/Sider/default.aspx

23. WCAG 2.4.4 - A Formål med link (i kontekst): Formålet med hvert link kan afgøres alene ud fra linkteksten eller fra linkteksten i kombination med dens programmeringsmæssigt bestemmelige linkkontekst, undtagen når formålet med linket ville være generelt tvetydigt for brugerne.

24. Hyppige brud på retningslinierne Mangel på klare definitioner af målet til et link (93%) Linkteksten skal give mening også når den læses ude af kontekst. Undgå links såsom ’Læs mere’ og ’Klik her’. http://www.frederiksberg.dk/ http://www.aarhuskommune.dk/borger/beskaeftigelse-og-uddannelse.aspx

25. WCAG 2.4.6 - AA Overskrifter og etiketter: Overskrifter og etiketter beskriver emne eller formål.

26. WCAG 3.1.2 - AA Sprog af dele: Det er muligt programmeringsmæssigt at bestemme det naturlige sprog af hver passage eller frase i indholdet med undtagelse af egenavne, tekniske termer, ord på ukendte sprog, og ord eller fraser som har vundet indpas i den umiddelbart omgivende tekst.

27. Hyppige brud på retningslinierne Manglende angivelse af sprogskift lokalt på en side (50%) Anvend eksempelvis "lang" attributten i HTML og "xml:lang" iXML. http://www.sensus.dk/vinder_eInclusion http://www.rm.dk/regional+udvikling/den+regionale+udviklingsplan/english+version/focus+for+action/nature+and+the+environment

28. WCAG 4.1.1- A Parsing: I indhold, som implementeres ved hjælp af mark-up sprog, har elementer fuldstændige start og slut tags, elementer er nestet i overensstemmelse med deres specifikationer, elementer indeholder ikke attribut-dubletter, og alle ID’er er unikke bortset fra i de situationer hvor specifikationer tillader denne praksis.

29. Indholdssider Alternativer til grafik - skriveregler

30. Indholdsside med iFrame

31. Editor - skriveregler • Instruktioner, som du medtaget af hensyn at kunne forstå og anvende indholdet må ikke udelukkende være afhængig af sansemæssige egenskaber såsom form, størrelse, visuel placering, orientering eller lyd • Overskrifter • Tabeller • Billeder • Links • Citater • Sprog

32. Overskrifter Overskrifter indsættes via rich text editoren. Når du har skrevet din overskrift vælger du hvilket niveau den skal være på.

33. Lister Når du skal indsætte en liste bruger du rich text editor og klikker på ikon for enten unummereret liste eller nummereret liste.

34. Citater Når du skriver et citat er det ikke nok at bruge ””. Du skal vælge fra menuen om det er et kort citat eller et langt blok citat:

35. Sprog Når du har tekst som er på et andet sprog end resten af sidens tekst, skal du markere teksten og vælge sprog fra menuen:

36. Tabeller Når du skal indsætte en tabel er det vigtigt at vælge tabelværktøjet:

37. Og herefter fanen ’Accessibility’: Her angives overskrifter (Heading rows og evt. heading colums) og beskrivelse (caption).

38. Billeder Når der indsættes billeder er det MEGET vigtigt at billedet bliver forsynet med en alternativ tekst, såfremt billedet har en funktion. Hvis billedet udelukkende er til pynt/ornamentering skal feltet ’Alt:’ være tomt. Hvis billedet har en betydning for konteksten skal betydningen skrives i feltet ’Alt:’ Indsætter man et link på billedet er det obligatorisk at have en alternativ tekst og den skal beskrive det sted brugeren kommer hen, ved klik på billedet.

39. På siden

40. Via egenskaber

41. Linktekster Når du indsætter interne links er det vigtigt at det stykke tekst som du gør til link, det også giver mening når det læses uden for kontekst. Eksempel: I teksten ’Du kan finde mere information om Århus Festuge’ vil du gerne lave et link til en side som handler om Århus festuge. En dårlig linktekst vil være ’mere information’: Hvis man læser linket ’mere information’ alene, så ved man ikke hvad man kommer til information om.

42. Validering Den lille firkant i højre hjørne må ikke være rød: Så er der fejl i koden.

43. Opgave • Gå ind på www.sensus.dk/kursus/Redaktoeropgaver • Manual • Opgave • Billeder – også uploaded til SiteCore Citrix: https://secure.aarhus.dk SiteCore: http://10.37.12.23/sitecore

44. Spørgsmål, kommentarer ?!