Skip to content

Accessibility test guidelines

Jump to bottom
Lasse Febakke Straum edited this page Dec 23, 2024 · 10 revisions

This is a page dedicated to test we do to ensure that our components follow the WCAG guidelines

Gjentagende tester

Disse testene vil gjenta seg i mange av komponentene våre. Jeg ønsker at vi tar en review av disse før de kopieres inn der de skal i rutinene.

Zoom (gjentagende)

Når jeg forstørrer grensesnittet til 400%

  • er det ikke noe innhold som forsvinner, overlapper eller på andre måter blir vanskelig å forstå`
  • må jeg ikke scrolle i to retninger for å se alt innholdet`

1.4.10 Dynamisk tilpasning (AA)

Når jeg forstørrer tekst til 200%

  • er det ikke noe innhold som forsvinner, overlapper eller på andre måter blir vanskelig å forstå

1.4.4 Endring av tekststørrelse (AA)

NB: Her må vi bestemme om vi skal si at man ikke bare skal teste med browser zoom, men også kun tekstforstørring

Når jeg endrer tekstverdier

  • er det ikke noe innhold som forsvinner, overlapper eller på andre måter blir vanskelig å forstå

Tips: Bookmarklets er den enkleste måten å teste dette kravet på. Disse endrer typografiverdiene til terskelverdiene for deg. Et eksempel her: Bookmarklet for text spacing

NB: Er det greit å tipse om slike verktøy?

1.4.12 Tekstavstand (AA)

Keyboard (gjentagende)

Når jeg bruker tastatur

  • får komponenten en synlig fokusindikator
  • fokusindikator har 3:1 kontrast
  • og komponenten har flere interaktive elementer, når jeg alle med tastatur
  • blir jeg ikke sittende fast

NB: Komponenter med spesielle mønster for tastatur navigasjon må ha disse definert i sine tester

1.4.11 kontrast for ikke tekstlig innhold (AA)

2.4.7 Synlig fokus (AA)

2.1.1 Tastatur (A)

2.1.2 Ingen tastaturfelle (A)

Skjermleser (gjentagende)

Disse testene finner ikke ut av om komponent har en god brukeropplevelse. Kun at komponenten oppfører seg som forventet ut i fra hvilken type element og hvilke aria elementer vi bruker.

  • Er komponenten basert på et native HTML element. Test at den oppfører seg som forventet.
  • Bruker vi aria-roller? Test at de fungerer som forventet
  • Bruker vi andre aria elementer? Test at disse fungerer som forventet

Kontrast (gjentagende)

Komponenten inneholder tekst

  • Tekst har minst 4.5:1 kontrast til bakgrunnsfargen
    • Stor tekst har minst 3:1 kontrast til bakgrunnsfargen (tekst satt i en størrelse på 18 punkter eller 14 punkter (fet skrift))

Komponenten har visuelle elementer som må sees for å forstå hva den er og hvilken tilstand den er i

  • De visuelle elementene har 3:1 kontrast til bakgrunnsfargen

Disse testene kan skrives mer konkrete til hver komponent

1.4.3 Kontrast (minimum) (AA)

1.4.11 Kontrast for ikke-tekstling innhold

Alert

Description

Details

Description

Zoom Sett inn zoom regler når ferdig

Keyboard og navigasjon Sett inn keyboardregler

Details åpnes når jeg trykker

  • enter
  • space
  • med musepeker

Skjermleser

  • Forteller om komponenten er utvidet eller minimert. (Ord brukt av Voice Over)
  • Innhold blir lest opp i en logisk rekkefølge

NB: Skal vi ha noe om state blir lest på toggling? I VoiceOver skjer ikke det i dag. (Testet på native details også og får samme opplevelse)

Kontrast

  • All tekst har 4.5:1 kontrast til bakgrunnsfarge
  • Chevron ikon har 3:1 kontrast til bakgrunnsfarge

Implementasjonstester

  • Details får riktige overskriftsnivå i forhold til resten av siden

Potensielt ofte stilte spørsmål 😅

Her legger vi ting som må forklares bedre eller omformuleres

Implemenstasjonstester Tester som burde gjøres når komponenten er i bruk i en tjeneste. Kan ikke gjøres av designsystemet

VO-click Definer det her

Clone this wiki locally