Tilgængelighedskursus for webdesignere DIS

1. Tilgængelighedskursus for webdesignereDIS Maria Barrett Sensus ApS Maj 2010 l

2. Program • En kort introduktion til webtilgængelighed • Gennemgang af retningslinjer for tilgængelighed, der vedrører webdesign • Praktisk øvelse i tilgængeligt webdesign

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 bruger en 24”-skærm med en opløsning på 1920 x 1080 • Nogle bruger en smartphone 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. Kompenserende teknologier • Hvis man er blind, bruger man skærmlæser http://www.dsb.dk/ • Hvis man ser dårligt, kan man bruge forstørrelse • 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

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

11. Obligatoriske standarder

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

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

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

15. 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 CSS, … • Andre skabes af designerne • Fx ringe kontrast, små bogstaver, dårlig navigation, billeder af tekst … • Atter andre problemer skabes af redaktørerne • Fx dokumentproduktion, billeder uden ALT, dårlige linktekster, opmærkning af overskrifter…

16. 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 • Design-proces uden hensyn til tilgængelighed • Prioriterer ”lækkert” design og teknologi over tilgængelighed og brugervenlighed • Det kan være svært – selv for mennesker med normalt syn – at læse 8pt lysegrå font på lys baggrund • Misforståelser • En forestilling om at tilgængelighed og design udelukker hinanden

17. Automatisk validering? • Kan anvendes til at finde fejl • Kan ikke anvendes til at godtgøre tilgængelighed • Ved en automatisk validering finder man: • Indiskutable brud • Mulige brud, som forudsætter manual validering • Mulige brud, som kræver fortolkning

18. Spørgsmål, kommentarer ?!

19. Web Content Accessibility Guidelines 2.0 Maria Barrett Sensus ApS

20. 4 principper for tilgængelighed • Opfattelig (perceivable) – information og brugergrænseflader skal præsenteres for brugere på måder, som brugerne 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 brugeragenter, herunder kompenserende teknologier

21. WCAG 1.1.1 - A 1.1.1 Ikke-tekstbaseret indhold: Alt ikke-tekstbaseret indhold, der præsenteres for brugeren, har tilknyttet et tekstbaseret alternativ som har samme formål. Fx: • Tidsafhængigt media • Grafik • Dynamisk indhold • Rammer http://kk.dk/

22. WCAG 1.2.1 - A Rent lydindhold (audio only) og rent videoindhold (video only) (forudindspillet): For forudindspillet rent lydindhold og forudindspillet rent videoindhold gælder følgende, undtagen når video eller lyd udgør et mediealternativ til tekst og klart er markeret som sådan.

23. WCAG 1.2.2 - A Undertekster (forudindspillet): Der skal leveres undertekster til alt forudindspillet lydindhold i synkroniserede medier, undtaget når medier fungerer som medie-alternativ til tekst og er klart markeret som sådan.

24. WCAG 1.2.4 - AA Undertekster (live): Der skal leveres undertekster til alt lydbaseret live-indhold i synkroniserede medier.

25. WCAG 1.2.5 - AA Synstolkning (forudindspillet): Der skal leveres synstolkning til alt forudindspillet videoindhold i synkroniserede medier.

26. WCAG 1.3.1 - A Information og relationer: Information, struktur, og relationer der formidles via præsentationen, kan bestemmes programmeringsmæssigt eller er tilgængelige som tekst.

27. 1.3.1 gælder eksempelvis: • Tabelinformation • Overskrifter • Sammenknytning af etiketter til kontroller i formularer • Listeelementer

28. WCAG 1.3.1 – A: Eksempler 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 for hele siden. http://kk.dk/Erhverv.aspx https://www.borger.dk/Sider/default.aspx

29. WCAG 1.3.1 – A: Eksempler En etiket skal knyttes eksplicit til hver kontrol Det skal gøres sådan kodemæssigt: <LABEL for=”fornavn">Fornavn: <INPUT type="text" id=”fornavn"> </LABEL> Vej/Husnr./Etage/Dør http://www3.kk.dk/Borger/KulturOgFritid/Kulturliv/Kulturkalender.aspx http://www.rejseplanen.dk/

30. 1.3.1 – A: Eksempler • Etiket for søgefelter • Hvis det ikke kan lade sig gøre at have en etiket for hver kontrol, skal der være en titel i stedet <input type="text" title="Type search term here" value="Type search term here"/> <input type="submit" value="Search"/> • Men man kan også skjule labels vha. style http://www.nyborg.dk/

31. WCAG 1.3.1 – A: Eksempler • Anvend fieldset og legend til at gruppere sammenhørende radioknapper og checkbokse http://vtu.dk/nyheder/abonner

32. 1.3.1 – A: Eksempler Anvend eksempelvis TD til at identificere dataceller og TH til at identificere tabeloverskrifter. Brug caption http://www.ballerup.dk/get/45416.html#45417 http://www.aarhuskommune.dk/borger/familie-boern-og-unge/Pasning/Takster-og-betaling/Takster.aspx

33. WCAG 1.4.1 - A Anvendelse af farve: Farve er ikke det eneste visuelle middel, der anvendes til at formidle information, gøre opmærksom på en handling, anmode om respons eller udskille et visuelt element. http://www.oddernettet.dk/site.aspx?RoomId=&NewsId=8550&MenuId=&langref=1&SplashId= http://kk.dk/Borger/ByOgTrafik/VejePladser.aspx

34. WCAG 1.4.2 - A Kontrol af lyd: Hvis eventuel lyd på en webside spiller automatisk i mere end tre sekunder, skal der enten være en mekanisme, som kan anvendes til at afbryde lyden helt eller midlertidigt, eller der skal findes en mekanisme, som kan regulere lydstyrken uafhængigt af systemets generelle lydniveau. http://www.ivanahelsinki.com/

35. WCAG 1.4.3 - AA Kontrast (minimum): Den visuelle præsentation af tekst og billeder af tekst skal have et kontrastforhold på mindst 4,5:1, undtagen i følgende situationer: • Stor tekst: Forstørret tekst og billeder af forstørret tekst har et kontrastforhold på minimum 3:1. • Ikke betydningsbærende • Logoerhttps://addons.mozilla.org/enUS/firefox/addon/7391https://addons.mozilla.org/da/firefox/addon/271http://snook.ca/technical/colour_contrast/colour.html

36. WCAG 1.4.4 - AA Ændring af tekststørrelse: Tekst kan, med undtagelse af undertekster og billeder af tekst, forstørres op til 200 % uden brug af kompenserende teknologi uden tab af indhold eller funktion. http://www.boernogkultur.dk/ http://www.kulturkanon.kum.dk/no_js.html

37. WCAG 1.4.5 - AA Billeder af tekst: Hvis de anvendte teknologier kan håndtere den visuelle præsentation, anvendes tekst frem for billeder af tekst til formidling af information, undtagen i følgende tilfælde: • Kan tilpasses: Billedet af tekst kan tilpasses visuelt til at imødekomme brugerens krav; • Nødvendig: En særlig præsentation af tekst er nødvendig for den information, der formidles. http://www.kk.dk/FaktaOmKommunen.aspx http://su.dk/Sider/default.aspx

39. WCAG 2.1.1 - A Tastatur: Alle indholdets funktioner kan betjenes via en tastaturgrænseflade uden at der er behov for specifik tidsindstilling af individuelle tastetryk, undtaget tilfælde, hvor den underliggende funktion kræver input, der er afhængige af at kunne følge hele rækken af brugerens bevægelser og ikke blot slutpunkterne. http://www.kk.dk/http://www.forbrug.dk/Artikler/Dine-rettigheder/Forbrugerleksikon/rykkergebyr?tc=917B22B5764E4EA194B58F3E29F5A1AF

40. WCAG 2.2.2 - A Pause, stop, skjul: Ved bevægelse, blinken, rulning eller automatisk opdatering af information gælder samtlige følgende punkter:

41. WCAG 2.2.2 – A: fortsat • Bevægelse, blinken, rulning (scrolling): Ved enhver form for bevægelse, blinken eller rulning (scrolling) af information, der (1) starter automatisk, (2) varer mere end 5 sekunder og (3) præsenteres samtidigt med andet indhold, findes der en mekanisme, så brugeren kan stoppe skjule eller sætte informationen på pause, medmindre bevægelsen, blinket eller rulningen (scrolling) er en del af en handling, hvor dette er nødvendigt; og

42. WCAG 2.2.2 – A: fortsat • Automatisk opdatering: Ved enhver form for automatisk opdatering af information, der (1) starter automatisk og (2) præsenteres samtidigt med andet indhold, findes der en mekanisme, som gør det muligt for brugeren kan stoppe skjule eller sætte opdateringen på pause, eller at kontrollere opdateringsfrekvensen, medmindre den automatiske opdatering er en del af en aktivitet, hvor dette er nødvendigt. http://www.esbjergkommune.dk/http://www.aarhuskommune.dk/http://news.tv2.dk/?channel

43. WCAG 2.3.1 - A Grænseværdi på tre glimt eller derunder: Intet indhold på en webside glimter mere end tre gange på et sekund, eller glimtet ligger under grænseværdien for generelt glimt og rødt glimt.

44. WCAG 2.4.4 - A Formål med links (i kontekst): Formålet med ethvert link kan bestemmes ud fra link-teksten alene eller ud fra link-teksten sammen med den link-kontekst, der er programmeringsmæssigt bestemt; undtaget herfra er tilfælde, hvor linkets formål vil forekomme flertydigt for alle brugere. http://www.startvaekst.dk/bogfoering-opstart

45. Linkliste i JAWS

46. WCAG 2.4.7 - AA Synligt fokus: Enhver tastaturbetjent brugergrænseflade har en betjeningstilstand, hvor tastaturfokusindikatoren er synlig http://odsherredhavne.dk/page4467.aspx http://www.dr.dk/

47. WCAG 3.2.1 - A I fokus: Når en komponent kommer i fokus, medfører dette ikke en ændring af kontekst. http://www.startvaekst.dk/forside/0/2

48. WCAG 3.2.2 - A Ved input: Ændring af indstillingerne i en hvilken som helst brugergrænsefladekomponent medfører ikke automatisk ændring af kontekst, medmindre brugeren er blevet advaret herom, inden komponenten anvendes. http://www.horsenskom.dk/ http://kk.dk/Erhverv.aspx

49. WCAG 3.3.2 - A Ledetekster eller instruktioner: Der findes ledetekster eller instruktioner, når indhold kræver brugerinput

50. WCAG 4.1.2 - A Navn, rolle, værdi: For alle brugergrænsefladekomponenter gælder det, at navn og rolle kan bestemmes programmeringsmæssigt. Tilstande, egenskaber og værdier, der kan indstilles af brugeren, kan indstilles programmeringsmæssigt, og besked om ændringer i disse elementer kan tilgås af brugeragenter, herunder kompenserende teknologier. http://www.forbrug.dk/Artikler/Dine-rettigheder/Forbrugerguides/Gebyrer/Kender-du-kiloprisen-paa-laan?tc=917B22B5764E4EA194B58F3E29F5A1AF