Tilgængelighedskursus for webdesignere DIS Maria Barrett Sensus ApS Maj 2010 l.

Præsentationer af emnet: "Tilgængelighedskursus for webdesignere DIS Maria Barrett Sensus ApS Maj 2010 l."— Præsentationens transcript:

1 Tilgængelighedskursus for webdesignere DIS 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/ 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)Åbne standarder incl. tilgængelighed obligatorisk FN FN’s handicapkonvention om handicappedes rettigheder (2009)FN’s handicapkonvention

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 1.Opfattelig (perceivable) – information og brugergrænseflader skal præsenteres for brugere på måder, som brugerne kan opfatte 2.Anvendelig (operable) – brugergrænsefladen og navigationen skal være anvendelig 3.Forståelig (understandable) – information og brugergrænsefladen skal være forståelig 4.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.1 - A Forudindspillet rent lydindhold: Der skal leveres et alternativ til tidsafhængige medier, som præsenterer information, der svarer til forudindspillet rent lydindhold.

24 WCAG 1.2.1 - A Forudindspillet rent videoindhold: Der skal leveres enten et alternativ til tidsafhængige medier eller et lydspor, som præsenterer information, der svarer til forudindspillet rent videoindhold.

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

26 WCAG 1.2.3 - A Synstolkning eller mediealternativ (forudindspillet): Der skal leveres et alternativ til tidsafhængige medier eller synstolkning af forudindspillet videoindhold i synkroniserede medier, undtagen når medierne er mediealternativ til tekst og er klart markeret som sådan.

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

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

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

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

31 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

32 WCAG 1.3.1 – A: Eksempler En etiket skal knyttes eksplicit til hver kontrol Det skal gøres sådan kodemæssigt: Fornavn: Vej/Husnr./Etage/Dør http://www3.kk.dk/Borger/KulturOgFritid/Kulturliv/Kulturkalender.aspx http://www.rejseplanen.dk/

33 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 –Men man kan også skjule labels vha. style http://www.nyborg.dk/

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

35 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

36 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&SplashIdhttp://www.oddernettet.dk/site.aspx?RoomId=&NewsId=8550&MenuId=&langref=1&SplashId= http://kk.dk/Borger/ByOgTrafik/VejePladser.aspx

37 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/

38 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 –Logoer https://addons.mozilla.org/enUS/firefox/addon/7391 https://addons.mozilla.org/da/firefox/addon/271 http://snook.ca/technical/colour_contrast/colour.html https://addons.mozilla.org/enUS/firefox/addon/7391https://addons.mozilla.org/da/firefox/addon/271http://snook.ca/technical/colour_contrast/colour.html

39 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

40 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

41

42 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 http://www.kk.dk/ http://www.forbrug.dk/Artikler/Dine- rettigheder/Forbrugerleksikon/rykkergebyr?tc=917B22B5764E4EA194B58F3E29F5A1AF

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

44 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

45 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 http://www.esbjergkommune.dk/http://www.aarhuskommune.dk/ http://news.tv2.dk/?channel

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

47 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

48 Linkliste i JAWS

49 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/

50 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

51 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

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

53 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

54 Spørgsmål, kommentarer ?!

55 Opgave Kig på designskitser og identificér –Tilgængelighedsproblematikker skabt af designet –Tilgængelighedsproblematikker, der kan opstå, når sideelementerne implementeres –Dokumenter findes på www.sensus.dk/kursus/DIS www.sensus.dk/kursus/DIS

56 Efter kurset Dokumenter findes på www.sensus.dk/kursus/DIS www.sensus.dk/kursus/DIS