UUKontroll
Kunnskapsbase
Alt du trenger å vite om universell utforming og WCAG. Praktiske guider, krav og tips for utviklere, designere og innholdsprodusenter.
Artikler merket med «wcag»
Vis alleTrenger videoen din synstolking? (WCAG 1.2.5)
Forhåndsinnspilte videoer bør ha synstolking for å beskrive viktig visuell informasjon via lyd. Gjelder offentlige virksomheter.
Ikke stol kun på form, farge eller plassering (WCAG 1.3.3)
Instruksjoner på nettsiden må ikke kun basere seg på form, farge, størrelse eller plassering for å bli forstått.
Kontrast på ikoner, knapper og grafikk (WCAG 1.4.11)
Grafiske elementer og brukergrensesnittkomponenter må ha et kontrastforhold på minst 3:1 mot omkringliggende farger.
Gjør tastaturfokus synlig (WCAG 2.4.7)
Alle interaktive elementer må ha en tydelig, synlig fokusindikator når de navigeres med tastatur.
Merk fremmedspråk i koden (WCAG 3.1.2)
Innhold på et annet språk enn resten av siden må markeres med riktig lang-attributt i koden.
Bilder mangler alternativ tekst
Alle meningsfulle bilder må ha alt-tekst som beskriver innholdet. Lær hvordan du skriver god alt-tekst for ulike bildetyper etter WCAG 1.1.1.
For lav fargekontrast
Tekst må ha nok kontrast mot bakgrunnen for å være lesbar. Lær WCAG 1.4.3, hvordan du måler kontrast og hvilke CSS-endringer som fungerer.
Interaktive elementer
Slik sikrer du at alle interaktive elementer fungerer med tastatur – forstå WCAG 2.1.1, tabindex og tilgjengelige klikkhandlere.
Kontroll over innhold
Lær hvorfor autoavspilling, karuseller og animasjoner må kunne pauses eller stoppes, og hvordan du oppfyller WCAG 2.2.2 Pause, stopp, skjul.
Samsvarsnivåer (A, AA, AAA)
Forstå WCAG sine tre samsvarsnivåer A, AA og AAA – hva de betyr, hva norsk lov krever, og hva UU-Kontroll sjekker for deg.
Autofullfør i skjema
Lær hvordan autocomplete-attributtet i HTML hjelper brukerne å fylle ut skjemaer raskere og med færre feil, og hvordan du bruker det riktig i WCAG-arbeidet.
Snarveier til innhold
En «hopp til innhold»-lenke lar tastaturbrukere slippe å tabbe gjennom menyen på hver side. Lær hvordan du implementerer skip links riktig.
Språk er ikke angitt i koden
Nettsiden må angi språk med lang-attributtet. Lær om WCAG 3.1.1 og hvorfor feil språkkode gjør innhold vanskelig å forstå for skjermlesere.
WCAG 2.2 AA sjekkliste for nettsider
En praktisk sjekkliste over WCAG 2.2 nivå A og AA, organisert etter tema og koblet til guider i kunnskapsbasen.
Zoom og responsivitet
Slik oppfyller du WCAG 1.4.4 og 1.4.10 – krav om 200 % tekstforstørring og 400 % reflow uten horisontal scroll.
Formidle endringer uten å flytte fokus (WCAG 4.1.3)
Viktige statusmeldinger må formidles til hjelpemidler uten å flytte fokus, ved hjelp av ARIA live regions.
Vis tydelig hvor og hva feilen er (WCAG 3.3.1)
Når en feil oppdages automatisk i et skjema, skal feilen identifiseres og beskrives tydelig i tekst.
Hjelp brukeren å rette skjemafeil (WCAG 3.3.3)
Når en feil oppdages automatisk, gi brukeren et konkret forslag til hvordan feilen kan rettes.
La brukeren kontrollere viktige innsendinger (WCAG 3.3.4)
For handlinger med juridiske eller økonomiske konsekvenser må brukeren kunne angre, kontrollere eller bekrefte.
Ingen overraskelser ved endring i skjemafelt (WCAG 3.2.2)
Endring av verdien i et skjemafelt skal ikke automatisk utløse store endringer på siden.
Hold navigasjonen lik på tvers av sider (WCAG 3.2.3)
Navigasjonsmenyer som finnes på flere sider skal ha samme rekkefølge og plassering overalt.
Bruk like navn for like funksjoner (WCAG 3.2.4)
Elementer med samme funksjon skal se like ut og ha samme navn på tvers av alle sider.
Tilby alternativer til bevegelsesstyring (WCAG 2.5.4)
Funksjonalitet styrt av enhetsbevegelse eller brukerbevegelse må også kunne brukes via vanlige kontroller.
Ingen overraskelser når noe får fokus (WCAG 3.2.1)
Når et element får fokus via tastatur skal det ikke utløse uventede endringer på siden.
Tilby alternativer til komplekse bevegelser (WCAG 2.5.1)
Funksjonalitet som krever komplekse bevegelser som sveip eller flerfinger-gester må ha et enklere alternativ.
La brukeren angre trykk og klikk (WCAG 2.5.2)
Handlinger skal ikke utføres ved bare å trykke ned museknappen, slik at brukeren kan avbryte ved å flytte pekeren bort.
Synlig tekst må matche det tilgjengelige navnet (WCAG 2.5.3)
Den synlige teksten i et interaktivt element må finnes igjen i elementets tilgjengelige navn for stemmestyring.
Unngå blinkende og flimrende innhold (WCAG 2.3.1)
Innhold skal ikke blinke eller flashe mer enn tre ganger per sekund for å unngå anfall hos brukere.
Tilby flere veier til innholdet (WCAG 2.4.5)
Brukere skal ha mer enn én måte å finne frem til innhold på nettstedet, som søk, nettstedskart eller meny.
Unngå tastaturfeller (WCAG 2.1.2)
Brukere som navigerer med tastatur skal aldri bli fanget i et element uten mulighet til å komme seg ut.
Enkle hurtigtaster må kunne slås av (WCAG 2.1.4)
Hurtigtaster som aktiveres med et enkelt tegn må kunne slås av, endres eller bare virke ved fokus.
Gi brukeren nok tid (WCAG 2.2.1)
Tidsbegrensninger på nettsiden må kunne justeres, forlenges eller slås av av brukeren.
Sørg for at tekstavstand kan justeres (WCAG 1.4.12)
Brukere må kunne overstyre tekstavstand uten at innhold eller funksjonalitet går tapt.
Kontroller innhold som dukker opp ved hover og fokus (WCAG 1.4.13)
Innhold som dukker opp ved hover eller fokus må kunne lukkes, holdes synlig og ikke forsvinne uventet.
Bruk ekte tekst, ikke bilder av tekst (WCAG 1.4.5)
Bruk ekte tekst i stedet for bilder av tekst, slik at innholdet kan tilpasses og leses av hjelpemidler.
Formidle informasjon med mer enn bare farge (WCAG 1.4.1)
Farge alene skal ikke være den eneste måten å formidle informasjon, indikere en handling eller skille elementer.
Gi brukeren kontroll over automatisk lyd (WCAG 1.4.2)
Lyd som starter automatisk må kunne stoppes, pauses eller dempes av brukeren innen tre sekunder.
La brukeren velge skjermretning (WCAG 1.3.4)
Brukere må kunne velge om innholdet vises i stående eller liggende retning, uten tap av funksjonalitet.
Riktig leserekkefølge i koden (WCAG 1.3.2)
Innholdet på nettsiden må presenteres i en logisk og meningsfull rekkefølge, også for hjelpemidler.
Tabeller
Lær hvordan du lager tilgjengelige HTML-tabeller med riktige overskrifter, caption og scope, og når du bør bruke CSS grid i stedet.
Lister
Lær hvorfor semantiske lister med ul, ol og dl er avgjørende for tilgjengelighet, og hvordan du bruker dem riktig i HTML.
Mangler hovedinnhold (main)
Uten et tydelig hovedinnholdsområde må skjermleserbrukere lete seg gjennom hele siden. Lær hvordan HTML-landemerker gjør navigasjon raskere og enklere.
Skjult innhold og fokus
Når innhold er skjult for skjermlesere men fortsatt kan få tastaturfokus, oppstår en forvirrende og frustrerende opplevelse. Lær hvordan du unngår denne vanlige feilen.
ARIA-feil
Feil bruk av ARIA-attributter er en av de vanligste tilgjengelighetsfeilene på norske nettsider. Lær den første regelen for ARIA og hvordan du unngår fallgruvene.
Unike ID-attributter
Dupliserte ID-er i HTML kan ødelegge skjema, ARIA-koblinger og navigasjon. Lær hvorfor unike ID-er er et krav i WCAG og hvordan du finner og fikser problemet.
Rammer og iframes
Lær hvorfor iframes trenger beskrivende titler for å være tilgjengelige, og hvordan du unngår vanlige feil med innebygde rammer.
Multimedia og alternativer
Forstå kravene til teksting av video og tekstalternativer for lyd – og hvorfor det er avgjørende for tilgjengelighet og god brukeropplevelse.
Skjemaelementer mangler merkelapp (label)
Alle skjemafelt må ha en tilknyttet ledetekst (label) slik at skjermlesere kan fortelle brukeren hva feltet er til for. Lær om WCAG 3.3.2 og hvordan du kobler labels riktig med for/id.
Overskrifter og struktur
Overskrifter må følge et logisk hierarki uten å hoppe over nivåer. Lær om WCAG 1.3.1 Informasjon og relasjoner, semantisk HTML, og hvordan riktig overskriftsstruktur hjelper alle brukere.
Lenker må ha forståelig tekst
Lenketekster som «klikk her» eller «les mer» gir ingen mening for skjermleserbrukere. Lær om WCAG 2.4.4 og hvordan du skriver gode, selvforklarende lenker som fungerer for alle.
Knapper mangler navn
Knapper som kun viser et ikon må ha et tilgjengelig navn slik at skjermlesere kan forklare funksjonen. Lær om WCAG 4.1.2 Navn, rolle, verdi og hvordan du fikser ikonknapper med aria-label.
Siden mangler tittel
Alle nettsider må ha en unik og beskrivende tittel i title-elementet. Lær om WCAG 2.4.2, hvorfor sidetitler er avgjørende for skjermlesere og navigasjon, og hvordan du skriver gode titler.
De 10 vanligste UU-feilene på norske nettsider
Her er de ti feilene vi ser oftest når vi skanner norske nettsider – og enkle tips for å fikse dem.