Resume: Tilgængelighed handler om at give alle mulighed for at deltage i samfundet på lige vilkår. WCAG 2.0 er en international standard til at øge tilgængeligheden på nettet. [Opdateret]
Introduktion: Tilgængelighed og WCAG 2.0
Begrebet “Tilgængelighed” handler om at gøre indhold findbart og anvendeligt for alle, men især for handicappede, altså personer med nedsatte fysiske, kognitive, sproglige eller motoriske evner.
Erfaringen viser, at øget tilgængelighed kommer alle til gode, uanset alder og evner. Det er altid en god investering at arbejde for at gøre sit indhold bedre og lettere at forbruge.
Web Content Accesibility Guide, WCAG 2.0, er den tilgængelighedsstandard som danske organisationer og virksomheder arbejder ud fra. Det er også den standard, som Digitaliseringsstyrelsen anbefaler for offentlige websteder.
3 niveauer med forskellig sværhedsgrad
Standarden er inddelt i 3 niveauer (A, AA og AAA), hvor niveau A er det niveau, der er lettest at opfylde, mens AAA typisk vil kræve en del flere ressourcer.
Offentlige websteder skal opfylde niveau AA eller bedre.
Reglerne for at opfylde et niveau er simple: For at opfylde niveau AA skal man både opfylde niveau A og AA. For at opfylde AAA skal man opfylde AA og A.
Niveau AAA er det højeste niveau, og er en smule udfordrende. Overholder man nogle retningslinjer øger man godt nok tilgængeligheden for visse personer, men nedsætter den måske for andre.
Kursus: Tilgængelighed på nettet – forstå WCAG 2.0 – Tilmeld dig nu!
Ikke en udtømmende guide til WCAG 2.0
WCAG består af 4 hovedprincipper og 27 retningslinjer for tilgængelighed på nettet.
Denne artikel er en kort introduktion til tilgængelighedsprincipperne, med fokus på udvalgte retningslinjer og succeskriterier.
Der er links i artiklen til de forskellige, relevante afsnit i WCAG 2.0, jeg omtaler. Det er desværre ikke altid muligt at linke direkte til afsnittet, så du må nogle gange lede lidt.
1. princip: Opfattelig (Perceiveable)
1.1: Ikke-tekstbaseret indhold skal kunne forstås af alle (1.1)
Begrebet “Ikke-tekstbaseret indhold” dækker først og fremmest over indhold med informationsværdi, som:
- Grafik, fotos og illustrationer,
- Inputfelter,
- Lyd,
- Video.
For at gøre den type indhold tilgængeligt for alle er vi nødt til at beskrive det for de brugere, som ikke kan se, høre eller fornemme indholdet.
Reglen er, at ikke-tekstbaseret indhold som udgangspunkt skal beskrives med tekst i en form, der kan tolkes af læseren, uanset hvordan hun modtager indholdet. (1.1.1)
Altså: Beskriv, hvad handler videoen om, hvem er med, hvem siger hvad, hvem gør hvad og så videre.
En simpel metode er som oftest almindelig tekst, der både kan læses i en skærmlæser eller zoomes ind og ud efter behov. I andre tilfælde, er det nødvendigt at ty til andre midler.
Tabellen nedenfor giver mulige løsninger på, hvordan de forskelige typer indhold kan håndteres.
| Indholdstype | Mulig løsning |
|---|---|
| Video | Transkription, synstolkning, tegnsprog |
| Infografik, kurver, grafer | Billedtekst, Uddybende beskrivelser |
| Illustrationer | Billedtekst, Alt-tekst, Title-tekst |
| Lyd | Resume, afskrift |
| Dekoration | Bør ikke beskrives, da det kan forvirre. Placer det som baggrundsbillede |
1.3: Bevar informationer og struktur selv om præsentationen ændres (1.3)
Der er vide rammer for, hvordan indholdet kan præsenteres, så længe at meningen bevares.
I HTML5, som er den seneste standard for html, er der kommet mange muligheder for at indikere, hvordan siden er struktureret i navigation, indhold og sektioner.
Selv om det visuelle layout er forskelligt fra den måde indholdet er struktureret i HTML-koden, skal skærmlæsere stadig kunne finde logikken på siden, ved at tolke kodernes semantiske betydning. (1.3.1)
1.4: Gør det let at se og høre indhold (1.4)
Hver 12. mand og hver 200. kvinde er ude af stand til at skelne visse farver fra hinanden. Det er ganske mange mennesker, og for mange til, at vi kan ignorere deres behov.
Undgå at bruge farve som det eneste middel til at signalere navigation eller vigtig information. Der vil være brugere, som ikke kan se det. (1.4.1)
Er I i tvivl, kan I prøve at lave Keith Instones Navigation Stress Test.
Lav kontrast mellem tekst og baggrund ser måske moderne ud, men det rammer endnu flere end blot farveblinde. Stort set alle over 40 vil finde det irriterende i større eller mindre grad at skulle sidde med sammenknebne øjne, for at læse en tekst. Don’t do it! (1.4.3 og 1.4.6)
Det anbefalede kontrastforhold er mindst 4,5:1 for almindelig brødtekst. Store typer over 24px (normal) kan nøjes med 3:1. Den letteste måde at konstatere om I er på den rigtige side, er at bruge Lea Verous Contrast Ratio-tjeneste. Er I hardcore, downloader I Colour Contrast Analyser fra Paricello Group.
Til sammenligning har sort tekst på hvid baggrund et kontrastforhold på 21:1
Hold unødvendig lyd til et minimum
Du kender det: Du sniger dig til at læse lidt nyheder i arbejdstiden. Pludselig overfaldes du af lyd fra en selvstartende reklame eller video, og alle i lokalet er klar over, at du ikke passer det, du får løn for. Ikke rart, vel?
Blinde navigerer nettet ved hjælp af lyd og kan man ikke høre sin skærmlæser, kan det blive svært at finde den knap på siden, som kan slukke for lyden.
Varer en lyd over 3 sekunder skal der altid skal være en mulighed for at slå lyden fra. (1.4.2)
Endnu bedre er det at lade være med at autostarte lyd og video i det hele taget. Det gør alle glade, også dine kolleger på kontoret.
2. princip: Anvendelig (Operable)
“Brugergrænsefladekomponenter og navigation skal kunne anvendes”
2.1: Websider bør kunne betjenes via et tastatur (2.1)
Denne retningslinje er et eksempel på, hvordan tilgængelighed kan gavne både handicappede og ikke-handicappede.
For mange bevægelseshæmmede er en mus udelukket til navigation. I stedet bruger nogle en simpel pind, de holder i munden, andre bruger kontakter, de kan aktivere med hovedet. I et system, der ofte kræver stor nøjagtighed at betjene, er ingen af delene særlig effektive.
Tabulator-tasten (den med de to pile og ordet: “TAB”) er ofte et alternativ til at bruge musen.
Tasten er især effektiv, når man skal arbejde sig gennem en længere formular. Når man trykker på den, bringer cursoren automatisk næste inputfelt i fokus.
For almindelige links vil du se en stiplet linje omkring elementet (2.4.7). Vælg det med mellemrumstasten.
Tabulator-navigation og genvejstaster gør det samtidig lynhurtigt for rutinerede, ikke-handicappede brugere at betjene en side. Her for alle noget for pengene!
2.2: Giv folk en chance for at følge med (2.2)
Mange bruger karruseller på forsiden til at vise forskelligt indhold fra websitet.
Desværre er karruseller ofte så dårligt udført og så fuld af tekstindhold, at det kræver særdeles gode læseevner at kunne følge med inden de skifter til næste billede.
For ordblinde og læsesvage er karruseller en ekstra pine, fordi de når at få læst endnu mindre end en normaltlæsende.
Anbefalingen er derfor at have en pauseknap, der kan standse rotationen i tide. (2.2.2)
2.3 Undgå at give folk epilepsianfald (2.3)
Blink, glimt og hurtige farveskift på mere end 3 gange i sekundet kan forårsage epileptiske anfald hos nogle. For andre vil det bare være ubehageligt at se på.
Så lad være. Det er egentlig en no-brainer.
2.4 Hjælp folk med at navigere rundt på sitet (2.4)
Skriv tydelige overskrifter, der forklarer indholdets emne eller formål (2.4.2). Det har alle glæde af, både normaltlæsende, svage læsere og søgemaskiner.
Mange skærmlæsere kan springe indhold over, hvis det er korrekt mærket op. Her på Netvenlig.dk vil det første tabulatortryk på siden afsløre en skjult knap i øverste venstre hjørne, der siger: “Skip to content”. På den måde behøver man ikke vade gennem navigation og højrespalter, for at finde indholdet på siden (2.4.1).
3. princip: Forståelig (Understandable)
“Information og betjening af brugergrænsefladen skal være forståelig”
Retningslinjerne i dette princip er grundlæggende gode, sunde usabilityregler. Kan I overholde dem, kan I snildt overholde princippet om forståelighed.
3.1 Gør tekstindhold læseligt og forståeligt (3.1)
På det laveste niveau A, kræver princippet, at websiderne identificerer hvilket sprog de er skrevet på. Er de på dansk, bør der i htmlkoden være tilføjet et <lang=”da”> i headeren.
Der er ingen retningslinjer på niveau AA, men vil I være gode ved jeres læsere, er det her, I har mulighed for at tilføje ordbøger og encyklopædier til jeres indhold. (3.1.3 og 3.1.4).
Er teksternes sværhedsgrad over ca. 8. klasses niveau kan I overveje, om der skal skrives flere versioner af det samme indhold. (3.1.5)
Mindst 700.000 danskere er enten ordblinde eller svage læsere. I mange tilfælde er det en god investering.
Kursus: Skriv til nettet og mobil. Afholdes flere steder i landet
3.2 Gør websitet forudsigeligt (3.2)
Det skaber tryghed og tillid at kunne forudsige, hvad der sker, hvis man foretager en bestemt handling:
- Links, der åbner på samme måde gennem hele webstedet
- Ikoner, der ligner og opfører sig på samme måde, som vi kender fra resten af nettet
- Overskrifter, der fortæller hvad vi kan forvente at finde, hvis vi klikker på dem
Al den viden vi har om nettet, har vi samlet op over tusindvis af besøg på andre websteder og tjenester. Når vi kan bruge den viden, kan vi løse vores opgaver og komme videre med livet.
Skal vi pludselig til at lære et websted at kende, så falder lysten til at bruge det tilsvarende med indlæringskurven.
3.3 Hjælp folk til at undgå at lave fejl (3.3)
Fejl sker, uanset hvor godt vi sikrer os mod det. Nogle gange er det brugeren, andre gange er det systemet, der fejler.
Begge dele er i vid udstrækning noget, vi kan forhindre.
Systemfejl kan forebygges ved hjælp af tests. Intet system bør slippes løs uden at være testet adskillige gange.
Brugerfejl kan undgås ved at reducere mængden af potentielle misforståelser og tvetydigheder i kommunikationen.
Hvis en dato i en webformular kun kan skrives ind på en bestemt måde, skal det være let at
- forstå, hvad det er vi forventer af brugeren,
- indtaste datoen efter de krav, vi har stillet,
- forstå, hvis vi alligevel har gjort det forkert (3.3.5)
- rette fejlen – uden at skulle begynde forfra på formularen.
(3.3.1 til 3.3.3)
Hvis de oplysninger vi afgiver kan have personlige konsekvenser, økonomisk eller juridisk, skal det for eksempel være muligt at
- fortryde eller rette sine indtastninger,
- få tjekket sine input, før de afsendes eller
- bekræfte sine oplysninger, inden de indsendes,
hvor det er relevant. (3.3.4)
4. princip: Robust (robust)
“Indholdet skal være robust nok til at kunne anvendes på stabil vis af en bred vifte af brugeragenter, herunder kompenserende teknologier.”
I gamle dage var det ikke ualmindeligt at blive bremset af en stor disclaimer, som advarede mod at bruge et websted med den forkerte browser. Typisk lød det: “Denne sider er optimeret til Internet Explorer 6.0 i skærmstørrelsen 1024×768 pixel med 120 farver og kan muligvis ikke vises korrekt i andre browsere”.
Nogle gange skulle det forstås helt bogstaveligt – siden nægtede at afsløre sit indhold, hvis man så den i Firefox eller Opera (hvis nogen husker den).
4.1: Kompatabilitet er fremtidssikring (4.1)
I dag er det helt uacceptabelt kun at optimere til en bestemt browser, og fænomenet ses ikke særlig ofte længere.
Og så alligevel: hvornår har I sidst tjekket jeres indhold i andet end almindelige, visuelle webbrowsere? Ved I, hvordan en skærmlæser behandler jeres indhold? Kan man stadig få overblik, selv om man zoomer 200 procent ind på siden uden at miste informationer? Har døve mulighed for at forstå jeres instruktionsvideoer? Kan man navigere kun med tastaturet?
4.1.1: God kode giver robust indhold
God tilgængelighed stikker dybt. Helt ned i programkoden.
Tidligere var der ret rigide krav til korrekt opmærkning af indhold. XHTML-standarden var for eksempel meget striks. Det var måske lidt bøvlet for programmørerne, til gengæld var koden robust, fordi der ikke var tvivl om, hvordan de forskellige elementer på siden skulle vises.
HTML5 er derimod mere fleksibel. Visse “containerkoder” behøver nu ikke længere at blive lukket med lukkekode eller ” />”, som tidligere versioner krævede.
Løsere krav til koden, stiller større krav til programmørens disciplin og viden. (4.1.2)
Hjælpeteknologier vil ofte forsøge at reparere dårlig kode, men det kan risikere at blive på bekostning af læsbarhed og forståelse.
Bundlinjen er, at ligesom vi tester indhold og funktionalitet for fejl, så tester vi også vores HTML for fejl. (4.1.1)
Den bedste måde at gøre det, ud over selv at blive ekspert i HTML, er at undersøge koden med en HTML-validator.
Lær tilgængelighed og giv alle lige adgang
Jeg holder kursus i tilgængelighed på Teknologisk Institut.
Kurset giver et dybere kendskab til WCAG 2.0, og hvordan principper og retningslinjer kan implementeres i praksis.
I får også lejlighed til at stifte bekendtskab med forskellige måder og metoder til at undersøge og teste sit indhold.
Tilgængelighed på nettet – forstå WCAG 2.0 Tilmeld jer i dag!