Guide til tilgjengelighet på nett: grunnleggende WCAG
Vi forklarer WCAG-grunnlaget med eksempelkode, fra kontrast og tastaturnavigasjon til alternativ tekst og skjemaetiketter, og viser hvordan du kan teste nettstedet selv.
Aurora YazılımRedaksjonen
6 min lesetid
Universell utforming av nettsteder betyr at alle, også personer med nedsatt syn, hørsel, bevegelighet eller kognitiv funksjon, kan oppfatte, navigere i og bruke et nettsted. Det internasjonale målestokken er W3Cs WCAG-retningslinjer; tilstrekkelig fargekontrast, full bruk med tastatur, alternativ tekst for bilder og skjemaer med etiketter er grunnkravene. Disse prinsippene styrker både brukeropplevelsen og synligheten i søk.
Hvem er universell utforming for?
Universell utforming knyttes ofte bare til blinde og svaksynte brukere. Omfanget er imidlertid mye bredere: personer med fargeblindhet, de som ikke kan bruke mus fordi de har en brukket hånd, eldre brukere, de som ser video uten lyd i støyende omgivelser, og alle som ser på telefonskjermen i sollys.
Derfor er universelt utformet webdesign ikke ekstraarbeid for en liten gruppe, men en bedre opplevelse for alle. Tydelige overskrifter, lesbar tekst og forutsigbar navigasjon gjør det også enklere for brukere uten funksjonsnedsettelser.
Universell utforming støtter også synligheten i søkemotorer. Riktig overskriftshierarki, beskrivende lenketekster og bildebeskrivelser overlapper i stor grad med det som hjelper søkemotorene å forstå siden.
Hva er WCAG?
WCAG (Web Content Accessibility Guidelines) er retningslinjer for universell utforming av nettinnhold utarbeidet av W3C. Retningslinjene består av testbare suksesskriterier og er delt inn i tre samsvarsnivåer: A, AA og AAA. For de fleste organisasjoner og reguleringer er målet nivå AA.
WCAG bygger på fire grunnprinsipper. Hvert kriterium hører til ett av disse prinsippene; å forstå prinsippene er mer nyttig enn å pugge enkeltkriteriene. Den offisielle teksten finner du på siden til W3C WAI.
| Prinsipp | Betydning | Eksempel |
|---|---|---|
| Mulig å oppfatte | Informasjonen må kunne tas imot med minst ett sans | Alternativ tekst på bilder, teksting av video |
| Mulig å betjene | Grensesnittet må kunne brukes på ulike måter | Full navigasjon med tastatur, tilstrekkelig tid |
| Forståelig | Innhold og oppførsel må være forutsigbart | Tydelige feilmeldinger, konsekvent meny |
| Robust | Må fungere med hjelpeteknologi | Riktig HTML, gyldig markering |
Fargekontrast og lesbarhet
På nivå AA kreves en kontrast på minst 4,5:1 mellom vanlig tekst og bakgrunn. For stor tekst, det vil si omtrent 24 piksler og over, eller fet tekst på 18,5 piksler og over, synker forholdet til 3:1. For grensesnittkomponenter som skjemakanter og ikoner forventes også et forhold på 3:1.
I tillegg til kontrast finnes det en regel til: Ikke gi informasjon bare med farge. Å skille obligatoriske felt bare med en rød stjerne, eller lenker bare med farge, utelukker brukere med fargeblindhet. Bruk understreking på lenker og forklarende tekst ved feil.
Tekststørrelse er også en del av lesbarheten. Når brukeren forstørrer teksten i nettleseren opptil 200 prosent, skal ikke innhold forsvinne og siden skal ikke gå i stykker.
Tastaturnavigasjon
Brukere som ikke kan bruke mus, eller som navigerer med skjermleser, beveger seg på nettstedet med Tab, Shift+Tab, Enter og piltastene. Derfor må menyer, knapper, skjemaer og dialogvinduer kunne brukes fullt ut bare med tastatur.
- Synlig fokus: Elementet som har fokus, skal vises med en tydelig ramme; fjern ikke fokuslinjen helt med CSS.
- Logisk rekkefølge: Tab-rekkefølgen skal følge den visuelle rekkefølgen.
- Hopp til innhold-lenke: En skjult lenke øverst på siden som hopper over menyen og går til hovedinnholdet.
- Ingen feller: Man skal kunne komme ut av et vindu som åpnes med Esc eller tastaturet.
- Ekte knapper: button- og a-elementer for klikkbare elementer, ikke div.
<a class="atla" href="#icerik">Hopp til innholdet</a>
<header>...</header>
<main id="icerik">...</main>Alternativ tekst og bilder
Skjermlesere kan ikke se bilder; i stedet leser de teksten i alt-attributtet. Alternativ tekst bør kort beskrive bildets funksjon på siden. For et produktbilde holder det med produktnavnet og det som skiller det ut; hvis det er tekst i bildet, bør den teksten også stå i den alternative teksten.
For bilder som bare er dekorative, brukes en tom alt-verdi, slik at skjermleseren hopper over dem. Hvis en lenke eller knapp bare består av et ikon, må det oppgis med tekst hva ikonet gjør.
<img src="zeytinyagi.webp" alt="Kaldpresset olivenolje på 500 ml glassflaske">
<img src="dalga-deseni.svg" alt="">
<button aria-label="Åpne menyen">
<svg aria-hidden="true">...</svg>
</button>Skjemaer og skjermleserstøtte
Skjemaer er stedet der problemer med universell utforming oftest oppstår. Hvert felt må ha en synlig og kodekoblet skjemaetikett. Plassholdertekst som bare står inne i boksen, erstatter ikke en etikett, fordi den forsvinner når man begynner å skrive. Hvis tilbudsskjemaet på en bedriftsnettside eller betalingssteget i en butikk ikke kan fullføres med tastatur og skjermleser, kan ikke den brukeren bli kunde.
For skjermleserstøtte må feilmeldinger knyttes til det aktuelle feltet og tydelig si hva som må gjøres: for eksempel «Telefonnummeret må ha 10 sifre» i stedet for «Ugyldig inndata». Sidens språk skal angis med lang-attributtet i html-taggen (for eksempel nb for norsk bokmål); ellers leser skjermleseren teksten med reglene for feil språk.
<html lang="tr">
...
<label for="tel">Telefon</label>
<input id="tel" type="tel" autocomplete="tel"
aria-describedby="tel-hata" aria-invalid="true">
<p id="tel-hata">Telefonnummeret må ha 10 siffer.</p>Når bør du bruke ARIA?
ARIA-attributter er for situasjoner HTML ikke dekker. Den første regelen er: Hvis et innebygd HTML-element gjør jobben, bruk det. Feilbrukt ARIA kan skape flere problemer enn ingen ARIA i det hele tatt.
Mobil og berøringsvennlighet
Universell utforming på telefon bringer med seg ekstra temaer. WCAG 2.2 krever på nivå AA minst 24×24 CSS-piksler for berøringsmål; større mål foretrekkes for komfortabel bruk. Små lenker som står tett inntil hverandre, fører til feiltrykk.
Skjermretningen skal ikke låses, og innholdet skal fungere i både stående og liggende visning. Innstillinger som hindrer zooming skal ikke brukes. Andre punkter å tenke på på mobil finner du i artikkelen vår om mobilvennlig nettsted og på siden vår om mobiltilpasset design.
De vanligste feilene
På nettstedene vi har gått gjennom i praksis, samler problemene med universell utforming seg som regel rundt de samme få punktene. Den gode nyheten er at det meste kan rettes med små kodeendringer og gir en forbedring brukerne merker med en gang.
- Lysegrå tekst på lysegrå bakgrunn, altså for lav kontrast.
- Produktbilder med tom alternativ tekst eller tekst fylt med filnavnet.
- Lenketekster som ikke forteller noe om sammenhengen, som «Klikk her» eller «Les mer».
- Overskriftsnivåer som velges etter utseende; å hoppe rett fra H1 til H4.
- Rullegardinmenyer som ikke kan åpnes med tastatur, og dialogvinduer som ikke kan lukkes.
- Lysbildeserier som starter av seg selv og ikke kan stoppes, og videoer med lyd.
- Fokuslinjen skjules helt av designhensyn.
Hvordan tester du nettstedet ditt?
Automatiske verktøy fanger opp en del av problemene, men ikke alle. Det beste resultatet får du ved å kombinere verktøyene med korte manuelle tester. Denne kontrollen er en naturlig del av en god UI/UX-design-prosess; forskjellen mellom de to begrepene har vi forklart i artikkelen om forskjellen på UI og UX.
- Slipp musen og bruk siden bare med Tab og Enter.
- Lag en rapport om universell utforming med Lighthouse i Chrome DevTools.
- Hør på noen sider med gratisverktøyet NVDA (Windows) eller den innebygde VoiceOver (macOS, iOS).
- Forstørr teksten i nettleseren til 200 prosent og se om siden går i stykker.
- Slå av bildene og kontroller om siden fortsatt er forståelig.
Vanlige spørsmål
01Bidrar universell utforming til SEO?
Selv om det ikke regnes som et direkte rangeringssignal, hjelper riktig overskriftsstruktur, alternativ tekst og meningsfulle lenketekster søkemotorene å forstå siden. Derfor bygger universell utforming og SEO-vennlig webdesign i stor grad på det samme grunnlaget.
02Er et tillegg eller en verktøylinje for universell utforming nok?
Verktøylinjer som legges oppå siden, løser ikke de grunnleggende problemene i koden. Et skjema uten etiketter eller en meny som ikke kan åpnes med tastatur, må rettes ved kilden.
03Er det mulig å gjøre et eksisterende nettsted universelt utformet?
Ja. Rettinger som kontrast, alternativ tekst og skjemaetiketter kan som regel gjøres på den eksisterende strukturen. Grunnleggende problemer som tastaturnavigasjon og menystruktur krever noen ganger at designet tas opp på nytt.
04Finnes det et juridisk krav?
I noen land og bestemte sektorer er universell utforming et juridisk krav; temaet blir stadig viktigere, særlig for virksomheter som betjener det europeiske markedet. Sjekk gjeldende regelverk og få råd fra juridisk rådgiver for din egen situasjon.
Universell utforming er ikke noe man gjør én gang og glemmer, men et kvalitetskriterium som følges i hvert trinn av design og innhold. For å vurdere nettstedet ditt etter WCAG-grunnlaget kan du se tjenesten vår innen UI/UX-design; for de andre delene av et bedriftsnettsted kan du lese artikkelen hva er en bedriftsnettside. Aurora Yazılım, som holder til i Edremit i Türkiye, har siden 2006 utviklet webdesign-prosjekter som alle kan bruke.
