Tilgængelighedskursus for webdesignere DIS Maria Barrett Sensus 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 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 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

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

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 UAAG Browsere, Media players ATAG Redigerings- værktøjer, editors, CMS WCAG 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 Barrett Sensus ApS

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

WCAG A 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

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

WCAG A Forudindspillet rent lydindhold: Der skal leveres et alternativ til tidsafhængige medier, som præsenterer information, der svarer til forudindspillet rent lydindhold.

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

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

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

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

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

WCAG A Information 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 – 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.

WCAG – A: Eksempler En etiket skal knyttes eksplicit til hver kontrol Det skal gøres sådan kodemæssigt: Fornavn: Vej/Husnr./Etage/Dør

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

WCAG – A: Eksempler Anvend fieldset og legend til at gruppere sammenhørende radioknapper og checkbokse

1.3.1 – A: Eksempler Anvend eksempelvis TD til at identificere dataceller og TH til at identificere tabeloverskrifter. Brug caption betaling/Takster.aspx

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

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

WCAG 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

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

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

WCAG 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. rettigheder/Forbrugerleksikon/rykkergebyr?tc=917B22B5764E4EA194B58F3E29F5A1AF rettigheder/Forbrugerleksikon/rykkergebyr?tc=917B22B5764E4EA194B58F3E29F5A1AF

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

WCAG – 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 – 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

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

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

Linkliste i JAWS

WCAG AA Synligt fokus: Enhver tastaturbetjent brugergrænseflade har en betjeningstilstand, hvor tastaturfokusindikatoren er synlig

WCAG A I fokus: Når en komponent kommer i fokus, medfører dette ikke en ændring af kontekst.

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

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

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

Efter kurset Dokumenter findes på