tilgængelighedskursus for webdesignere dis

SensusSpecialister i tilgængelighedSensus

Specialister i tilgængelighed

Tilgængelighedskursus for webdesignere

DIS

Maria BarrettSensus ApS

Maj 2010

l



Program• En kort introduktion til webtilgængelighed• Gennemgang af retningslinjer for

tilgængelighed, der vedrører webdesign• Praktisk øvelse i tilgængeligt webdesign



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



Hvem oplever tilgængelighedsproblemer?• Mennesker med

funktionsnedsættelser• Tilgængelighedsproblemer, der

skyldes teknologi• Tilgængelighedsproblemer, der

skyldes situation



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



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



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



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.



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

http://www.dsb.dk/



Tilgængelighed i Danmark

Danske beslutninger• Åbne standarder incl. tilgængelighed o

bligatorisk (2008)

FN• FN’s handicapkonvention om

handicappedes rettigheder (2009)

http://www.itst.dk/it-arkitektur-og-standarder/standardisering/abne-standarder

http://www.itst.dk/it-arkitektur-og-standarder/standardisering/abne-standarder

http://www.ism.dk/Temaer/sociale-omraader/Handicap/handicappolitik/FNs-handicapkonvention/Sider/Start.aspx



Obligatoriske standarder



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

UAAGBrowsere,

Media players

ATAGRedigerings-værktøjer,

editors, CMSWCAG

Indhold, struktur, layout,

interaktion



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



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



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…



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



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



Spørgsmål, kommentarer

?!



Web Content Accessibility Guidelines 2.0

Maria BarrettSensus ApS



4 principper for tilgængelighed1. 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



WCAG 1.1.1 - A1.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– Rammerhttp://kk.dk/

http://kk.dk/



WCAG 1.2.1 - ARent 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.



WCAG 1.2.2 - AUndertekster (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.



WCAG 1.2.4 - AAUndertekster (live): Der skal leveres

undertekster til alt lydbaseret live-indhold i synkroniserede medier.



WCAG 1.2.5 - AASynstolkning (forudindspillet): Der

skal leveres synstolkning til alt forudindspillet videoindhold i synkroniserede medier.



WCAG 1.3.1 - AInformation og relationer:

Information, struktur, og relationer der formidles via præsentationen, kan bestemmes programmeringsmæssigt eller er tilgængelige som tekst.



1.3.1 gælder eksempelvis:• Tabelinformation• Overskrifter • Sammenknytning af etiketter til

kontroller i formularer • Listeelementer



WCAG 1.3.1 – A: EksemplerH-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

http://kk.dk/Erhverv.aspx

https://www.borger.dk/Sider/default.aspx



WCAG 1.3.1 – A: EksemplerEn etiket skal knyttes eksplicit til

hver kontrolDet 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/

http://www.rejseplanen.dk/



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. stylehttp://www.nyborg.dk/

http://www.nyborg.dk/



WCAG 1.3.1 – A: Eksempler• Anvend fieldset og legend til at

gruppere sammenhørende radioknapper og checkbokse

http://vtu.dk/nyheder/abonner

http://vtu.dk/nyheder/abonner



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

http://www.aarhuskommune.dk/borger/familie-boern-og-unge/Pasning/Takster-og-betaling/Takster.aspx





WCAG 1.4.1 - AAnvendelse 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

http://www.oddernettet.dk/site.aspx?RoomId=&NewsId=8550&MenuId=&langref=1&SplashId

http://kk.dk/Borger/ByOgTrafik/VejePladser.aspx



WCAG 1.4.2 - AKontrol 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/

http://www.ivanahelsinki.com/



WCAG 1.4.3 - AAKontrast (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/7391

https://addons.mozilla.org/da/firefox/addon/271 http://snook.ca/technical/colour_contrast/colour.html

https://addons.mozilla.org/enUS/firefox/addon/7391

https://addons.mozilla.org/da/firefox/addon/271

http://snook.ca/technical/colour_contrast/colour.html



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

http://www.boernogkultur.dk/

http://www.kulturkanon.kum.dk/no_js.html



WCAG 1.4.5 - AABilleder 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

http://www.kk.dk/FaktaOmKommunen.aspx

http://su.dk/Sider/default.aspx



WCAG 2.1.1 - ATastatur: 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



WCAG 2.2.2 - APause, stop, skjul: Ved bevægelse,

blinken, rulning eller automatisk opdatering af information gælder samtlige følgende punkter:



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



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



WCAG 2.3.1 - AGræ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.



WCAG 2.4.4 - AFormå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



Linkliste i JAWS



WCAG 2.4.7 - AASynligt fokus: Enhver tastaturbetjent

brugergrænseflade har en betjeningstilstand, hvor tastaturfokusindikatoren er synlig

http://odsherredhavne.dk/page4467.aspx http://www.dr.dk/



WCAG 3.2.1 - AI fokus: Når en komponent kommer i

fokus, medfører dette ikke en ændring af kontekst.

http://www.startvaekst.dk/forside/0/2



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



WCAG 3.3.2 - ALedetekster eller instruktioner:

Der findes ledetekster eller instruktioner, når indhold kræver brugerinput



WCAG 4.1.2 - ANavn, 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



Spørgsmål, kommentarer

?!



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



Efter kurset• Dokumenter findes på

www.sensus.dk/kursus/DIS

tilgængelighedskursus for webdesignere dis

Documents