Tilgængeligt webdesign

1. Tilgængeligt webdesign Helene Nørgaard Bech Sensus ApS

2. Hvem er vi?

3. Program • Introduktion til webtilgængelighed og kompenserende teknologier • De officielle retningslinjer for tilgængelighed • Køb og drift af tilgængelige netsteder • Tilgængelighed og CMS

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

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

6. Status • Op imod 25% af alle brugere oplever problemer med tilgængeligheden • MeAC 2007 • 5,3% af offentlige netsteder • 0% af private netsteder • Danmark ligger ikke øverst • Lovkrav giver generelt lidt mere fokus og lidt bedre resultater

7. Status – Seneste undersøgelser • Kortlægning 2008 • Fejl på alle ca 250 netsteder • Perfekt: 0% • Godt tilgængeligt: 6% • Jævnt tilgængeligt: 70% • Dårligt tilgængeligt: 24%

8. Kortlægning 2010 • God tilgængelighed - netstedet har ingen eller få formelle tilgængelighedsfejl og har ingen alvorlige tilgængelighedsproblemer • Jævn tilgængelighed - netstedet har nogle formelle tilgængelighedsfejl, men få eller ingen alvorlige tilgængelighedsproblemer med væsentlige funktioner og/eller væsentligt indhold • Mangelfuld tilgængelighed - netstedet har mange formelle tilgængelighedsfejl og flere væsentlige funktioner og/eller væsentligt indhold, som ikke kan bruges af en eller flere brugergrupper • Dårlig tilgængelighed - netstedet har mange formelle tilgængelighedsfejl og mange alvorlige tilgængelighedsproblemer med væsentligt indhold, som udelukker en eller flere brugergrupper

9. FN FN’s handicapkonvention om handicappedes rettigheder (2006, 2009) FN’s Standardregler om lige muligheder for handicappede(1993) EU Jun ’06: I 2010 skal det være Sep ’05: Resultater, tak! e-Inclusion (2003) e-Government, Europæisk handicapår (2003) e-Accessibility (2001, 2002) Målsætning for eEurope (2000) W3C retningslinjer USA Præsidentdekret (2000) Access Board retningslinjer Section 508, 504, ADA Danske beslutninger Åbne standarder incl. tilgængelighed obligatorisk (2008) IT og Telestyrelsens kortlægning af problems omfang (2006) Regeringens handlingsplan for handicappedes it- og telebrug (2002) Krav til alle statslige netsteder (2000) Netpublikationer v2 (1999)? Det digitale Danmark (1999) Regeringens IT-politiske handlingsplan på handicapområdet (1996) Regeringsbeslutning om ligestilling og ligebehandling af handicappede (1993) Tilgængelighed er et krav

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

11. 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 • Nye og gamle W3C retningslinjer?

12. Obligatoriske standarder

13. Retningslinjer og prioriteter 2 • Ikke-W3C retningslinjer • Ikke-W3C teknologier • Indhold fra eksempelvis Microsoft (Office), Adobe (PDF, Flash), Open Office, andre • Hvis utilgængelige, så skal findes tilgængelige alternativer i W3C format • 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

14. Hvorfor utilgængelighed? • Uvidenhed • Forudsætter, at alle er som os selv • Anvender en top-1/top-2 browser • Har den samme opfattelse af ”intuitivt” • Anvender en almindelig PC med mus og skærm • Arrogante designere • Vi prioriterer ”lækkert” design og teknologi over tilgængelighed og brugervenlighed • Kan læse 7½pt grå på lys grå baggrund • Misforståelser • Vi tror, at tilgængelighed og design udelukker hinanden

15. Problemets omfang • Mennesker er meget forskellige, og de anvender web’en forskelligt • Mangler sanser eller motorik • Mange (ca 15%) er læsesvage, ordblinde, blinde, svagsynede, hjerneskadede, ... • Mange (ca 10%) Anvender en anden platform (kompenserende hjælpemidler, Macintosh, ingen mus, PDA, SmartPhone, mobiltelefon, ...) • Befinder sig i situationer, som gør dem ”handicappede” • Mere end 1.500 browsere og browser-versioner i omløb • I Danmark har op mod 1 mio mennesker problemer med utilgængelighed • Problemet bliver større når web’en skal være sikkerhedsnet

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

17. Type af problemer (Web) • Nogle problemer skabes af systemerne og af udviklerne • Fx tabel-layout, HTML-fejl, linktekster/URL-genbrug, AJAX-lag, faste dimensioner, … • Andre skabes af designerne • Fx ringe kontrast, små bogstaver, dårlig navigation, … • Atter andre problemer skabes af redaktørerne • Fx dokumentproduktion, copy/paste fra Word, billeder uden ALT, uforståeligt sprog

18. Automatisk validering? • Kan anvendes til at finde fejl • Kan ikke anvendes til at godtgøre tilgængelighed • WCAG2: Tjekker 20-25% af koden • Indiskutable brud • Mulige brud, som forudsætter manual validering • Mulige brud, som kræver fortolkning

19. Spørgsmål, kommentarer ?!

20. Web Content Accessibility Guidelines 2.0 Helene Nørgaard Bech Sensus ApS

21. 4 principper for tilgængelighed • Opfattelig (perceivable) – information og brugergrænseflader skal præsenteres for brugere på måder, som de kan opfatte • Anvendelig (operable) – brugergrænsefladen og navigationen skal være anvendelig • Forståelig (understandable) – information og brugergrænsefladen skal være forståelig • Robust (robust) – indholdet skal være tilstrækkelig robust til at det kan præsenteres pålideligt på en bred vifte af bruger agenter, herunder kompenserende teknologier

22. Tilgængeligheden til offentlige danske netsteder I efteråret 2008 blev en større undersøgelse foretaget af tilgængeligheden til offentlige danske netsteder. Undersøgelsen viste at ingen kommunale, regionale eller ministerielle netsteder i Danmark er fuldt tilgængelige. En nylig undersøgelse viser at 97% af alle offentlige netsteder på Europæisk plan er utilgængelige.

23. WCAG - Web Content Accessibility Guidelines Undersøgelsen af tilgængeligheden til offentlige danske netsteder blev foretaget med baggrund i WCAG - Web Content Accessibility Guidelines prioritet 1 og 2 (A & AA). Nye krav om anvendelse af åbne standarder i det offentlige fra januar 2008 – overholdelse af WCAG i nye løsninger.

24. Krav i de nye åbne standarder – hvem gælder det for? (kilde: ITST) • Aftalen omfatter generelt de samme forvaltningsmyndigheder som f.eks. eDagene • Den kommunale forvaltning –rådhuset men ikke skolen • Den regionale forvaltning –regionen men ikke sygehuset • Den statslige forvaltning –ministeriets koncern med departement, styrelser og direktorater, men ikke universitetet • Selvejende institutioner er ikke omfattet

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

26. 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://crs.regionsyddanmark.dk/wm167029 http://crs.regionsyddanmark.dk/wm230751

27. Hyppige brud på retningslinierne Manglende alternativ til utilgængeligt indhold (95%) Hvis indholdet ikke er tilgængeligt, skal der som minimum være en alternativ side, som har det samme indhold som den oprindelige og bliver opdateret lige så ofte. Ex.: Objekter såsom Flash-filer, appletter etc. Docs.: http://viewer.zmags.com/showmag.php?linksid=1266&a=1

28. WCAG 1.2.1 - A Indhold, som udelukkende består af lyd (audio only) og indhold, som udelukkende består af video (video only) (forudindspillet): For forudindspillet indhold, som udelukkende består af lyd (audio only) og indhold, som udelukkende består af video (video only) media skal forsynes med alterntiv.

29. WCAG 1.2.2 - A Captions (forudindspillet): Der findes captions (synkroniserede visuelle og/eller tekstlige alternative til talt og ikke-talt indhold) til alt forudindspillet lydindhold.

30. WCAG 1.2.4 - AA Captions(direkte): Der findes captions (synkroniserede visuelle og/eller tekstlige alternativer til talt og ikke-talt indhold) for alt direkte (live) lydindhold.

31. WCAG 1.2.5 - AA Auditive beskrivelser (forudindspillet): Der findes auditive beskrivelser af alt forudindspillet video indhold i form af synkroniseret media.

32. 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 • Sammenknytning af etiketter til kontroller i formularer • Listeelementer

33. 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/uddannelse/internationalt-samarbejde http://www.ckhm.dk/default.htm http://crs.regionsyddanmark.dk/wm280117 http://crs.regionsyddanmark.dk/wm209822 http://crs.regionsyddanmark.dk/wm149312

34. Hyppige brud på retningslinierne Formularelementer som ikke er knyttet explicit sammen med deres labels (81%) http://vtu.dk/nyheder/abonner http://crs.regionsyddanmark.dk/wm280117 I eksempelvis html: <LABEL for="firstname">First name: <INPUT type="text" id="firstname" tabindex="1"> </LABEL>

35. Vej/Husnr./Etage/Dør

36. 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.ckhm.dk/

37. 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.aspxhttp://www.aarhuskommune.dk/portal/borger/miljoe_energi/groenne_regnskaber/aarhus_kommune/groent_regnskab_2004?_page=bysamfund.emne/oversigt_over_miljoebelastning.htm

38. WCAG 1.3.2 - A Meningsfuld rækkefølge: Når den rækkefølge, som indhold præsenteres i, har indflydelse på indholdets betydning, kan den korrekte læserækkefølge fastslås programmeringsmæssigt. http://www.regionmidtjylland.dk/

39. 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://crs.regionsyddanmark.dk/wm209991&searchWord=publikation

40. 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 http://crs.regionsyddanmark.dk/wm167195

41. WCAG 1.4.2 - A Lydkontrol: Såfremt der findes lydindhold på en side, som afspilles automatisk i mere end tre sekunder, findes der enten mulighed for at stoppe eller pause lyden, eller der er mulighed for at justere volumen uafhængig af den overordnede volumenkontrol på system.

42. WCAG 1.4.3 - AA Kontrast (minimum): den visuelle præsentation af tekst og billeder af tekst har et kontrastforhold på minimum 4,5:1. Stortekst: Forstørret tekst og billeder af forstørret tekst har et kontrastforhold på minimum 3:1. (ikke logoer) http://www.snook.ca/technical/colour_contrast/colour.html

43. WCAG 1.4.4 - AA Skalerbar tekst: Med undtagelse af undertekster og billeder af tekst er det muligt at skalere tekst op til 200% uden brug af kompenserende teknologi og uden at indhold eller funktionalitet går tabt.

44. Hyppige brud på retningslinierne Indhold som ikke forstørres hensigtsmæssigt (88%) Fx. ved at undgå at angive størrelser i pixels, men i stedet angive størrelser i procent, så fx. kolonner og tekst skalerer ordentligt (ombrydes på skærmen) og så teksteskalering virker. http://www.frederiksberg.dk/

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

46. 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.su.dk/Sider/default.aspx

47. WCAG 2.1.1 - A Tastatur: Al funktionalitet i indholdet kan anvendes ved hjælp af en tastaturgrænseflade idet der ikke stilles særlige krav til tastehastigheden.

48. WCAG 2.1.2 - A Ingen tastaturfælde: Hvis tastatur fokus kan flyttes til en komponent på siden ved hjælp af tastaturgrænsefladen, så kan fokus flyttes væk fra komponenten alene ved hjælp af tastaturgrænsefladen.

49. WCAG 2.2.1 - A Tidsindstillinger er justerbare: For hver tidsbegrænsning, som defineres af indholdet, er mindst et af følgende udsagt sande: • Slå fra: Brugeren har mulighed for at slå tidsbegrænsninger fra før disse optræder; eller…

50. WCAG 2.2.2 - A Pause, Stop, Skjul: Følgende udsagn er alle sande i forbindelse med bevægelse, blink, bladrende (scroll) eller auto-opdaterende information: