Gå til innhold

Tilgjengelighetstesting

Gjør disse grunnleggende testene for tilgjengelighet på nettsidene dere lager! Automatiske testverktøy finner ca 30% av tilgjengelighetsproblemene. Metodene nedenfor er nyttige for å bedre tilgjengeligheten ytterligere.

Hva ligger til grunn for testingen?

  • norsk lov (WCAG versjon 2.1, nivå AA).
  • WCAG versjon 2.2
  • Enkelte AAA-krav
  • god praksis for tilgjengelighet

Lett å bruke

  • Er siden enkel å bruke for alle?
  • Er det forutsigart hva som skjer når man aktiverer menyvalg, knapper og lenker?
  • Er det lett å holde oversikt?
  • Gis det gode bekreftelser og feilmeldinger når man har gjort noe?

Tastaturnavigering

Bruk tab, piltaster, enter, escape og space. Legg vekk musa.

Tastatur

  • Kommer man til alle funksjoner med tastatur? WCAG 2.1.1
  • Fungerer det? WCAG 2.1.1
  • Kan det avbrytes? WCAG 2.1.2

Fokusmarkering

  • Er fokus alltid synlig når man tabber igjennom siden? WCAG 2.4.7
  • Har fokusmarkeringen god kontrast mot bakgrunnen? WCAG 1.4.11
  • Kommer elementene i en logisk rekkefølge? WCAG 2.4.3
  • Er et element tildekket idet det får fokus? WCAG 2.4.11
  • Er fokusmarkeringen stor nok? WCAG 2.4.13 (AAA)

Modalvinduer

  • Kan modalvinduer lukkes med escape? WCAG 2.1.2
  • Kan modalvinduer lukkes med en knapp? WCAG 2.1.2
  • Settes fokus tilake til knappen som åpnet modalvinduet når modalvinduet lukkes? WCAG 2.4.3

Overskrifter

Testverktøy: HeadingsMap

HeadingsMap er et nettlesertillegg som viser overskrift-struktur og landemerker. Sammenlign overskriftene på siden med det HeadingsMap viser.

Tester for overskrifter

  • Er alle synlige overskrifter på siden også vist i HeadingsMap-oversikten? WCAG 1.3.1
  • Har siden én h1 som beskriver sidens innhold?
  • Følger overskriftene et hierarki uten hopp?
  • Er overskrift-strukturen logisk bygget opp? WCAG 1.3.1
  • Gir overskriftene en god beskrivende av innholdet? WCAG 2.4.6

Forstørring

200% tekst-zoom

  • Firefox: Meny -> Vis -> Skalering -> Forstørr bare tekst
  • Chrome: Innstillinger -> Utseende -> Skriftstørrelse: “Veldig stor”

Sjekk at all tekst forstørres WCAG 1.4.4
Sjekk at ikke noe overlapper / forsvinner. WCAG 1.4.4

400% vanlig zoom

  • Sett skjermstørrelsen til 1280px bredde og 1024px høyde med 400% zoom.
    Nettleser-tillegget Web Developer har en funksjon Resize som kan hjelpe deg med å sette vindu-størrelsen.
    Denne bookmarkleten viser vindustørrlsen.
  • eller sett 320px bredde og 256px høyde.
    Bruk for eksempel Utviklerverktøy (F12) - Device Toolbar.

Sjekk at ikke noe overlapper / forsvinner. WCAG 1.4.10
Sjekk at det ikke blir både vertikal og horisontal scrolling. WCAG 1.4.10

Navn

Kobling mellom feltnavn og felt

Trykk på synlig feltnavn. Sjekk at feltet får fokusmarkering. WCAG 1.3.1

Synlig navn

  • Finnes det et synlig navn? WCAG 3.3.2
  • Gir navnet god beskrivelse av feltet, knappe-funksjonen eller siden det lenkes til? WCAG 2.4.6

Tilgjengelig navn

Tilgjengelig navn brukes i hjelpemiddelteknnologi som stemmestyring og skjermlesere.

God praksis er at synlig navn og tilgjengelig navn er like.WCAG 2.5.3 Tekst-innholdet i knapper og lenker blir automatisk både synlig og tilgjengelig navn. Unngå å overstyre det med f.eks. aria-label.

Bruk utviklerverktøy for å finne tilgjengelig navn

  • Høyreklikk på et element
  • Inspect (accessibility)
  • Sjekk at riktig element er markert i kodevisningen
  • Velg visningen “Accessibility”.
  • Har elementet tilgjengelig navn? WCAG 4.1.2
  • Er tilgjengelig navn likt synlig navn? WCAG 2.5.3

Utviklerverktøy viser tilgjengelig navn og hvilken kilde det kommer fra.

Bilder

Test-verktøy

alt-attributtet er oligatorisk i HTML, og er ofte det beste metoden for å angi alternativtekst. Automatiske testverktøy som Axe DevTools og ARC Toolkit kan fortelle om alt-attributt mangler helt. Nettleser-tillegget Web Developer —> Images —> “Display alt attributes” viser teksten i alt-attriuttet sammen med bildet, slik at man selv kan vurdere om teksten gir god informasjon.

Dekorative bilder

Sjekk at dekorative bilder har tom alternativtekst: alt="".
Et bilde er dekorativt når det ikke tilfører noe ekstra meningsinnhold til siden.

Funksjonelle bilder

Sjekk at alt-teksten bør beskriver funksjonen, ikke bildet. WCAG 1.1.1
Bilder i lenker bør ha alt-tekst som beskriver siden det lenkes til.
Bilder i knapper bør ha alt-tekst som beskriver knappefunksjonen.

Informative bilder

Sjekk at informative bilder har alt-tekst som gir informasjonen, i stedet for å beskrive bildet. WCAG 1.1.1

SVG-ikoner

SVG fungerer bra som ikon-format siden det skalerer ved zoom, og dermed beholder nøyaktigheten.
title-taggen gir alternativ-tekst til meningsbærende SVG. Et alternativ er å skjule ikonet med aria-hidden, og legge til et navn direkte på en knappen som inneholder ikonet.

Kontrast

Test-verktøy

Kontrast mellom tekst og ensfarget bakgrunn testes bra av automatiske verktøy som Axe DevTools, ARC Toolkit og Wave.

Kontrast i lenker, fokusmarkering, hover, grafer og ikoner gjøres best manuelt.
Når kontrasten ser svak ut, kan man undersøk om de overholder kravene med verktøyene nedenfor.

Automatiske test-verktøy

Det finnes mange verktøy som kan scanne igjennom en side. De er fine for en rask gjennomgang av noen problemer. Tilgjengelighetseksperter vurderer at de finner 20-40 % av prolemene, så man må sjekke manuelt også.

Skjermlesere

Skjermlesere leser opp nettsider så man kan høre innholdet i stedet for å se det.
Skjermlesere er spesielt nyttige for blinde, svaksynte og dyslektikere.

Ekstra viktig å teste med skjermleser

  • Statusmeldinger
    • “436 søkeresultater funnet.”
    • “Skjemaet ble lagret vellykket.”
    • “venter - 2 av 5 dokumenter er lastet opp.”
  • chatbot
  • ikon-knapper
  • Ekspandering av innhold. Sjekk bl.a. at ekspanderingsknappen sier om innholdet er ekspandert eller sammentrukket.
  • Dialogbokser som legger seg over annet innhold.
  • Alt annet som ikke har vanlig tekst som innhold

Noen skjermlesere du kan teste med