Skip to content

Accessibility test guidelines

Jump to bottom
Lasse Febakke Straum edited this page Jan 2, 2025 · 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

Misc

  • Target size. Det er ingen lovpålagte krav som går på hvor stor klikkflate komponenter skal ha. Men det kan komme med WCAG 2.2. Der er det lagt til et AA krav som sier at klikkbare komponenter skal ha 24x24 klikkflate. Skal vi legge dette til som en testrutine?

Alert

Description

Zoom Sett inn zoom regler når ferdig

Keyboard og navigasjon Ingen interaktive elementer, utgår...

Skjermleser

Kontrast

  • Tekst har 4.5:1 kontrast mot bakgrunnsfargen
  • Ikon har 3:1 kontrast mot bakgrunnsfargen

Implementasjonstester

  • Om du har en overskrift i alert må du passe på at det legges fornuftig i overskriftsrekkefølgen

Badge

Zoom Sett inn zoom regler når ferdig

Keyboard og navigasjon Ingen interaktive elementer, utgår...

Skjermleser

  • Badge har en aria-label som beskriver hva den kommuniserer (Implementasjonstest?)

Kontrast

  • Tekst har 4.5:1 kontrast til bakgrunnen

Breadcrumbs

Zoom

  • Test mobilvisning av breadcrumbs
  • Legg inn resten av zoom regler

Keyboard og navigasjon Legg inn testrutiner her

Skjermleser

  • Breadcrumbs har rollen nav
    • Når breadcrumbs blir en tilbakelink i mobilversjonen, skal den ikke ha rollen nav. Linken må annonsere at du går tilbake et steg.
  • Hvilken side som er aktiv blir annonsert av skjermleser

Kontrast Blir håndtert av link komponenten?

Button

Zoom

  • Legg inn resten av zoom regler

Keyboard og navigasjon Legg inn testrutiner her

Skjermleser

  • Det blir presentert som en knapp
  • Knappeteksten blir lest opp

Kontrast

  • Tekst i knappen har 4.5:1 kontrast til bakgrunnen
  • Noe om kontrast for selve gui elementet?

Implementasjonstester

  • Du har tatt stilling til om det skal være en knapp eller link. (Kanskje lenke til noe relevant her)
  • Teksten gir mening. Pek til dokumentasjon

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