Sjekklister for UU: Rett fokus til rett tid

Punkt og universell utforming

Universell utforming (UU) er et grunnkrav i Punkt, og vi jobber for digitale løsninger som inkluderer alle. Samtidig vet vi at det kan være utfordrende å få UU til i praksis, både fordi det er et komplekst fagfelt og fordi det handler om detaljer som ikke alltid er synlige.

Sjekklistene våre tydeliggjør krav, forenkler testingen og sikrer felles praksis i PR-er. For å dekke de ulike behovene i utviklingsløpet har vi laget tre ulike sjekklister som kan brukes til forskjellige formål.

Hvorfor tre sjekklister?

Som utviklere møter vi ulike utfordringer med universell utforming i ulike deler av utviklingsløpet.

Noen problemer oppstår tidlig når vi planlegger og bygger nye komponenter, andre utfordringer blir først tydelige når komponenten brukes i en større kontekst, mens atter andre utfordringer kan dukke opp som regresjoner etter endringer i eksisterende komponenter.

Vi har derfor laget tre sjekklister som er tilpasset tre ulike steg i utviklingsløpet - alt etter om vi skal bygge noe fra start, kvalitetssikre ved leveranse eller gjøre mindre endringer.

Tidlig sjekk er en omfattende liste med detaljer og mønstre som støtter deg i planlegging og bygging av nye komponenter. Den er ment som et støtteverktøy allerede før start og underveis i utviklingen.
Siste sjekk er en kortere liste som brukes for kvalitetssikring når en ny komponent skal gjennom PR.
Sjekk igjen er en kort liste som brukes for å unngå UU-regresjoner ved bugfikser eller små oppdateringer.

Listene gir oss en felles standard og forutsigbarhet rundt forventninger til UU, og hjelper oss å ha med fokuset på universell utforming gjennom hele utviklingsflyten.

Tidlig sjekk

Støtteverktøy for universell utforming ved utvikling av nye komponenter

Siste sjekk

Avsjekk for universell utforming ved PR for nye komponenter


        - [ ] **Semantikk:** Riktig HTML-element (knapp = `<button>`, lenke = `<a>`, osv.). Overskrifter og struktur gir mening i kode.
- [ ] **Tastatur:** All funksjonalitet kan brukes med tastatur, ingen tastaturfeller, synlig fokus.
- [ ] **Skjermleser:** Komponent har korrekt name / role / value (inkludert tilstander som `expanded`, `pressed`, `selected` og lignende der det er relevant).
- [ ] **Bilder/ikoner:** Dekorative er skjult (`alt=''` / `aria-hidden='true'`), meningsbærende har alt-tekst / tilgjengelig navn.
- [ ] **Skjema:** Felter har labels, riktig `type`og`autocomplete`. Feil meldes med tekst og knyttes til feltet.
- [ ] **Kontrast og størrelse:** Tekst og interaktive elementer oppfyller WCAG AA, trykkflater ≥ 44–48 px, tekst fungerer ved 200% zoom.
- [ ] **Modal/overlay:** Fokus fanges i modal, bakgrunnen er ikke fokuserbar, kan lukkes med tastatur.
- [ ] **Responsiv:** Komponenten fungerer på ulike skjermstørrelser/enheter uten at innhold eller funksjon forsvinner.
- [ ] **Rask test:** Kjør axe/Lighthouse/Wave og test komponenten med skjermleser (f.eks. VoiceOver på Mac).

Semantikk: Riktig HTML-element (knapp = <button>, lenke = <a>, osv.). Overskrifter og struktur gir mening i kode.
Tastatur: All funksjonalitet kan brukes med tastatur, ingen tastaturfeller, synlig fokus.
Skjermleser: Komponent har korrekt name / role / value (inkludert tilstander som expanded, pressed, selected og lignende der det er relevant).
Bilder/ikoner: Dekorative er skjult (alt='' / aria-hidden='true'), meningsbærende har alt-tekst / tilgjengelig navn.
Skjema: Felter har labels, riktig typeogautocomplete. Feil meldes med tekst og knyttes til feltet.
Kontrast og størrelse: Tekst og interaktive elementer oppfyller WCAG AA, trykkflater ≥ 44–48 px, tekst fungerer ved 200% zoom.
Modal/overlay: Fokus fanges i modal, bakgrunnen er ikke fokuserbar, kan lukkes med tastatur.
Responsiv: Komponenten fungerer på ulike skjermstørrelser/enheter uten at innhold eller funksjon forsvinner.
Rask test: Kjør axe/Lighthouse/Wave og test komponenten med skjermleser (f.eks. VoiceOver på Mac).

Sjekk igjen

Kort sjekk ved fiks og oppdateringer for å unngå regresjoner


        - [ ] **Tastatur og fokus:** Fungerer fortsatt med tastatur (Tab/Shift+Tab/Enter/Space), og fokus havner der det gir mening før, under og etter handlingen.
- [ ] **Skjermleser:** Navn, rolle og state på berørte elementer er fortsatt riktig (les over med skjermleser der du fikset).
- [ ] **Visuelt:** Ingen nye problemer med kontrast, lesbarhet eller responsivitet på små skjermer.

Tastatur og fokus: Fungerer fortsatt med tastatur (Tab/Shift+Tab/Enter/Space), og fokus havner der det gir mening før, under og etter handlingen.
Skjermleser: Navn, rolle og state på berørte elementer er fortsatt riktig (les over med skjermleser der du fikset).
Visuelt: Ingen nye problemer med kontrast, lesbarhet eller responsivitet på små skjermer.