Web Content Accessibility Guidelines 2.0

1. Web Content Accessibility Guidelines 2.0 Maria Barrett Sensus ApS 09. februar 2011 l

2. Net-dokumenter • Web Content Accessibility Guidelines: http://www.w3.org/TR/WCAG20/ • Den danske oversættelse af retningslinjerne: http://www.wcag20.dk/wcag20-da/

3. Opbygning af WCAG 2.0 • Alle succeskriterier er mærket med • A - vigtigste • AA - vigtige • AAA – mindre vigtige • Retningslinjerne siger, at en overholdelse på WCAG AAA ikke altid er realistisk, men disse kan inddrages, hvis man har særlige målgrupper • I Danmark er niveau AA obligatorisk for offentlige myndigheders netsteder

4. 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 brugeragenter, herunder kompenserende teknologier

5. Succeskriterier der vedrører indholds opfattelighed

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

7. Billeder Alle billeder skal have et tekstligt alternativ, der svarer til billedets formål http://www.aarhus.dk/omkommunen/organisation/teknik-og-miljoe/Drift-i-dag-giv-os-et-praj.aspx http://www.foedevarestyrelsen.dk/forside.htm

8. Øvelse • Samme billede, men forskellige alt-tekster til forskellige situationer: • Billedet er et link til en artikel om ældre og IT • Billedet er en illustration til artiklen om ældre og IT • Billedet er en illustration på en side, der sælger mus • Billedet er en instruktion til ældre, IT-svage i at anvende en mus

9. Komplekse billeder • Eksempelvis diagrammer, instruktioner etc. • Flere løsningsmuligheder • Beskriv billedets formål i alt-teksten (ikke for langt) • Beskriv billedets formål i teksten og skriv i alt-teksten at dette er gjort • Link til en anden fremstillingsform og beskriv i alt-teksten at denne løsning er valgt http://www.kk.dk/Nyheder/2009/December/KSStatistikBefolkUdvikl3Kvt09.aspx http://www.sdu.dk/Om_SDU/Organisationen/Organisationsdiagram http://www.fredericiakommune.dk/72107000/menu/alarmering/

10. Captcha • Hvis der anvendes visuelle captcha så sørg for, at der er et alternativ https://www.google.com/accounts/NewAccount?service=mail&continue=http://mail.google.com/mail/e-11-112e83110142357df3025fc1214419-89d5b92a418cbd0394e09a2eb8da16e40320ee97&type=2 http://drk.dk/nyheder/temaer/byer+skaber+sundhedskatastrofe

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

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

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

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

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

16. 1.3.1 gælder eksempelvis: • Sammenknytning af etiketter til kontroller i formularelementer • Citater • Overskrifter • Tabelinformation • Listeelementer

17. WCAG 1.3.1 – A: Formularer 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> http://vtu.dk/nyheder/abonner

18. WCAG 1.3.1 A – Citater • Der er to typer citater: inline-citater og blok-citater. Begge dele bør opmærkes • Browseren renderer som udgangspunkt blokcitater med linjeskift og indrykning http://www.kk.dk/Borger/ByOgTrafik/CyklernesBy.aspx http://www.odense.dk/Topmenu/Kommunen/Job/Den%20attraktive%20arbejdsplads/Ledelsesgrundlag.aspx http://www.sensus.dk/Nyhedsbrev_maj_2010

19. WCAG 1.3.1 – A: Overskrifter H-elementer må ikke bruges til at opnå et bestemt visuelt udtryk men skal bruges til at markere forskellige niveauer af overskrifter. Niveauet skal svare til den funktion, indholdet har http://www.itst.dk/tele-og-internetregulering http://www.aarhuskommune.dk/borger/beskaeftigelse-og-uddannelse.aspxhttp://www.aarhuskommune.dk/borger/aeldre/Folkepension/Generelt-om-folkepension.aspx http://www.byenudafboksen.dk/#/341438/

20. Overskrifter • Skal nestes korrekt, således at der ikke springes niveauer over – på HELE siden • Overskrifterne skal inddele siden i logiske afsnit • Overskrifter må ikke bruges til styling af tekst – eks. manchettekster • Hvis noget tekst er visuelt fremhævet som en overskrift (med eksempelvis fed skrift), så overvej om det ikke bør have et overskriftniveau

21. Lister • Skal opmærkes med de dertil egnede funktioner • Brug ikke almindelige tegn til punkter - eks. - eller > • Skriv ikke numrene selv i en nummereret opstilling • Brug ikke punkter fra tidligere dokumenter • Anvend ikke billeder af punkter http://odense.dk/Topmenu/Erhverv/Raadgivning%20og%20erhvervsudvikling/Arbejdskraft%20og%20personale.aspx http://vtu.dk/nyheder/andet-nyt/2011/deltag-i-debatten-om-en-strategi-for-fremmedsprog

22. Datatabeller • Anvend kode til at skelne dataceller fra overskriftceller • TD til dataceller • TH til at identificere tabeloverskrifter • Anvend caption såfremt tabellen har en titel /overskrift • Anvend kun summary hvis det er nødvendigt http://www.ballerup.dk/get/45416.html#45417 http://www.aarhus.dk/borger/familie-boern-og-unge/Pasning/Takster-og-betaling/Takster-2010.aspx

23. Datatabeller – et eksempel Oversigt over…

24. Note vedr. layouttabeller • Layouttabeller er blot en visuel positionering af tekst, men udtrykker ikke et forhold imellem cellerne • Brug layouttabeller med forsigtighed – de skal give mening, når de lineariseres • Ved layouttabeller, skal der ikke anvendes tabeloverskrifter og caption http://kk.dk/Borger/Oekonomi.aspx

25. WCAG 1.3.2 - A Meningsfuld rækkefølge: Når den rækkefølge, som indhold præsenteres i, påvirker indholdets mening, kan en korrekt læserækkefølge bestemmes programmeringsmæssigt. http://www.digitalsignatur.dk/visArtikel.asp?artikelID=698 http://www.regionmidtjylland.dk/

26. WCAG 1.3.3 - A Sensoriske egenskaber: Instruktioner, der vedrører forståelse og betjening af indhold, er ikke udelukkende afhængige af komponenternes sensoriske egenskaber såsom form, størrelse, visuel placering, orientering eller lyd.

27. Sensoriske egenskaber i instruktioner Hvad er den tilgængelighedsmæssige forskel mellem disse to formuleringer? • Læs mere om organisationen via navigationen i den blå boks til venstre. • Læs mere om organisationen via linket ”Organisationsdiagram” i navigationen i den blå boks til venstre

28. 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://kk.dk/Borger/Miljoe/LuftOgStoej/Luftudsigt.aspx http://www.iu.dk/politiske-rammer/bologna-processen http://www.kk.dk/Nyheder/2010/December/SjaellandsgadeBad.aspx

29. 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.odense.dk/Topmenu/Kommunen/Job/Den%20attraktive%20arbejdsplads/Moed%20en%20medarbejder.aspx http://www.ivanahelsinki.com/

30. 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 http://www.vejenkom.dk/

31. 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/

32. 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.biblioteksvagten.dk/index.asp http://www.aarhus.dk/default.aspx

33. Succeskriterier der vedrører indholds anvendelighed

34. 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://kk.dk/ http://www.kk.dk/Borger/JobOgUddannelse/Ungejobpakke/Praktikpladser.aspx

35. WCAG 2.1.2 - A Ingen tastaturfælde: Hvis tastaturfokus kan flyttes til en af sidens komponenter ved hjælp af en tastaturgrænseflade, kan fokus fjernes fra denne komponent udelukkende ved hjælp af en tastaturgrænseflade. Hvis det kræver mere end utilpassede pile- eller tab-taster eller andre standard lukkemetoder, skal brugeren rådgives om metoden til at fjerne fokus.

36. WCAG 2.2.1 - A • Man skal skulle ændre tidsindstillinger: For hver tidsbegrænsning, der er givet i indholdet, gælder mindst et af følgende punkter:

37. WCAG 2.2.1 – A: fortsat • Slå fra: Brugeren kan slukke for tidsbegrænsningen, før den udløber; eller • Tilpasse: Brugeren kan tilpasse tidsbegrænsningen, før den udløber, over en bred skala, der er mindst ti gange varigheden af standardindstillingen; eller • Udvide: Brugeren advares, før tiden udløber, og får mindst 20 sekunder til at forlænge tidsbegrænsningen ved hjælp af en simpel handling (for eksempel ”tryk på mellemrumstasten”), og brugeren har mulighed for at forlænge tiden mindst ti gange; eller

38. WCAG 2.2.1 – A: fortsat • Undtagelse ved real-time: Tidsbegrænsningen er en nødvendig del af en begivenhed i real-time (for eksempel en auktion), og der findes ikke noget muligt alternativ til tidsbegrænsningen; eller • Nødvendig undtagelse: Tidsbegrænsningen er nødvendig, og en forlængelse vil gøre handlingen ugyldig; eller • 20 timers undtagelse: Tidsbegrænsningen varer længere end 20 timer.

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

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

41. 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.odense.dk/Topmenu/Kommunen/Job/Den%20attraktive%20arbejdsplads/Ledelsesgrundlag.aspx http://www.aarhuskommune.dk/

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

43. WCAG 2.4.1 - A Spring over blokke: Der findes en mekanisme til at springe over blokke af indhold, der gentages på flere websider. http://www.aarhus.dk/default.aspx http://www.cancer.dk/

44. WCAG 2.4.2 - A Sider har titler: Websider har titler, der beskriver emne eller formål http://www.dmi.dk/dmi/index/danmark/graenselandsvejr.htm

45. WCAG 2.4.3 - A Fokusrækkefølge: Hvis der kan navigeres sekventielt på en webside, og hvis navigationssekvenserne påvirker mening eller betjening, skal fokuserbare komponenter opnå fokus i en rækkefølge, der bevarer meningen eller betjeningsmulighederne. http://bibzoom.shop2download.com/

46. 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://bibzoom.shop2download.com/ http://www.aarhuskommune.dk/borger/kultur-idraet-og-fritid.aspx http://www.google.dk/search?hl=da&source=hp&biw=1280&bih=540&q=hiller%C3%B8d&aq=f&aqi=g10&aql=&oq= http://www.aarhus.dk/Servicesider/Soegeresultatside.aspx?q=skole

47. Tekst - Linktekster • Den tekst, der er klikbar skal beskrive formålet for linket, når den læses for sig selv

48. Tekst - Linktekster

49. Linktekster • Hvis muligt: Sørg for at hver enkelt linktekst beskriver formålet for linket uden den kontekst, linket står i • Alt-tekster er linktekst for billeder, der linker • Hvis det ikke er muligt: Sørg for at linket er knyttet programmerings-mæssigt sammen med sin kontekst vha. overskrifter, listeelementer, datatabel mv.

50. Øvelse – acceptable linktekster Skolens værdigrundlag Skolens værdigrundlag Billigst mulig – info Læs mere på http://kulturkanon.dk/ Læs mere på http://oddernettet.dk/site.aspx?MenuID=&Langref=1&Area=&topID=&ArticleID=&expandID=2&splashID=&newsID=