Universell utforming

Våre løsninger skal være tilgjengelige for alle.

Generelt

Løsningene vi lager skal være tilgjengelige for alle, uavhengig av funksjonsevne. De blir brukt på mange forskjellige måter og med mange forskjellige hjelpemidler. Dette må vi ta høyde for når vi designer og utvikler tjenester og produkter.

Nedsatt funksjonsevne kan bestå av bl.a. synshemminger, bevegelseshemminger, hørselshemminger eller kognitive funksjonsnedsettelser. Bufdir anslår at mellom 15% og 18% av befolkningen har nedsatt funksjonsevne, og Norges Blindeforbund anslår at mer enn 320 000 personer lever med synshemminger i Norge. De fleste av oss vil i løpet av livet oppleve en midlertidig funksjonsnedsettelse, for eksempel et brukket ben eller en annen skade som setter oss ut av spill for en periode.

Mange bruker hjelpemidler eller tilrettelagt programvare, mens andre har preferanser som har betydning for deres bruksmønstre. Løsningene våre vil brukes med for eksempel skjermlesere, tastaturnavigasjon, talegjenkjenning, skjermforstørring og forskjellige input-enheter.

Universell utforming handler om å legge til rette for uhindret bruk, og gir til syvende og sist en bedre brukeropplevelse for alle.

Bruk tydelig språk

Tydelig og forståelig språk understøtter intuitive bruksmønstre, og hjelper de med lave leseferdigheter å forstå innhold.

Bruk informativ og beskrivende tekst i knapper og lenker

Knapper og lenker bør ha tekst som gjør det enkelt å oppfatte hvilken handling man utfører, eller hvor lenken peker.

Gjør

Informativ og beskrivende tekst i knapper

Unngå

Generisk, ukonkret tekst

Gjør

Informativ og beskrivende tekst i lenker

Unngå

Generisk, ukonkret tekst

Bruk informative og beskrivende overskrifter

Mange brukere navigerer fra overskrift til overskrift med skjermlesere og tastaturnavigering.

  • Overskrifter bør beskrive innholdet de representerer
  • Vær obs på overskriftsnivå - <h1> er sidetittel

Ta semantisk HTML til hjelp

Semantisk HTML tilbyr ekstra informasjon som kan bidra til å gjøre innhold lettere å forstå.

Eksempel

<abbr> brukes for å beskrive forkortelser.

<abbr title="November">Nov</abbr>

Tilby alternativer for ikke-tekstlig innhold

Noen brukere kan ikke se bilder eller høre lyd. Derfor er det viktig å tilby alternativer til innhold som ikke er ren tekst.

  • Videoer bør ha undertekst
  • Bilder bør ha en beskrivende og informativ alt-tekst
  • Unngå tekst i bilder - Dette vil ikke leses ikke opp av skjermlesere

Vær visuelt tydelig

Løsninger bør være lette å forstå, uten behov for forkunnskaper eller forklaring.

Intuitive brukergrensesnitt

Fokus på brukeropplevelse går hånd i hånd med universell utforming, og løsninger bør i størst mulig grad være enkle å forstå. Løsninger som er utformet ved hjelp av etablerte mønstre og konvensjoner kan være intuitive selv om de er komplekse.

Kontrast

Tekst må ha tilstrekkelig kontrast mot bakgrunn for å gi god nok lesbarhet. WCAG 2.0, nivå AA krever kontrastforhold på 4.5:1 for stor tekst og 3.0:1 for liten tekst. Kontrast kan sjekkes med en rekke verktøy, for eksempel WebAIM Contrast Checker.

Vær også bevisst på kontrastforholdene i løsninger designet for dark mode.

Klikkflate

Klikkbare elementer bør være lette å treffe, blant annet for brukere med motoriske utfordringer og brukere som benytter seg av musemulering eller andre input-hjelpemidler.

  • Klikkbare elementer bør ha tilstrekkelig størrelse, ikke minst på mobilskjermer
  • Avstanden mellom klikkbare elementer bør være stor nok til at faren for å klikke feil reduseres
  • Radioknapper og sjekkbokser bør være tilknyttet et klikkbart <label>

Visuell feedback

Visuell feedback hjelper brukere å forstå hvordan brukergrensesnittet reagerer på deres handlinger.

  • :hover
  • :active
  • :focus

Skjermforstørring

Skjermforstørrere er hjelpemidler for svaksynte, som forstørrer skjermbildet i forskjellig grad. Løsningene våre bør kunne forstørres uten at det hindrer bruk.

  • Vær bevisst på hvordan whitespace påvirker opplevelsen i forstørret tilstand
  • Vær obs på avstanden mellom elementer som henger sammen, for eksempel <dt> og <dd> i description list

Tekstforstørring

Brukere skal kunne forstørre tekst inntil 200%, uten at det endrer grensesnittet på en slik måte at det hindrer bruk.

  • Vær obs på overflow
  • Unngå hardkodet høyde på elementer der forstørret innhold tar opp mer plass enn containeren

Eksempel

Hardkodet høyde kan by på problemer ved tekstforstørring, spesielt i kombinasjon med overflow: hidden.

Kortnavn

Tittel

Subtext er grå

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Skriv semantisk HTML

Semantisk HTML hjelper både mennesker og maskiner med å forstå strukturen i websider.

Bruk tagger som beskriver innhold

De aller fleste HTML-tagger har en semantisk betydning som beskriver dataene de inneholder. Dette gjør det lettere å tolke både struktur og innhold for skjermlesere og andre hjelpemidler.

Eksempler

  • <nav> - Navigasjon
  • <address> - Kontaktinformasjon
  • <main> - Hovedinnhold på en side

MDN har en fullstendig liste over HTML-elementer og hvordan de brukes.

Bruk ikke-semantiske elementer kun til layout, eller beskriv de med ARIA-attributter

<div> og <span> er HTML-elementer som ikke har noen semantisk betydning. Derfor egner de seg til bruk som containere for andre HTML-elementer, men de kan også brukes som innholdscontainere i kombinasjon med ARIA-attributter som beskriver innholdet.

Bruk ARIA-attributter

WAI-ARIA tilbyr en rekke attributter som kan brukes for å gjøre innhold mer tilgjengelig. For eksempel:

  • Widgeter som ikke har tilsvarende HTML-elementer
    • <div role=”tablist”>
  • Tilstand/state
    • aria-checked
    • aria-disabled
    • aria-expanded
  • Skjema
    • aria-required
    • aria-errormessage

Bruk semantiske HTML-tagger i stedet, om mulig

En del ARIA-attributter har samme betydning som semantiske HTML-elementer. I slike tilfeller bør man velge HTML-elementene. For eksempel:

  • <main> fremfor <div role="main">
  • <button> fremfor <input role="button">

ARIA er grundig dokumentert hos MDN.

Vær obs på rekkefølgen på overskrifter

  • <h1> er sidetittel - bruk kun én <h1> på hver side
  • <h2> - <h6> er de resterende nivåene
  • Unngå å hoppe over nivåer

Gjør

Ranger overskrifter i riktig rekkefølge

<h1>Sidetittel</h1>
                          <h2>Nivå 2</h2>
                            <h3>Nivå 3</h3>
                          <h2>Nivå 2</h2>
                            <h3>Nivå 3</h3>
                            <h3>Nivå 3</h3>
                              <h4>Nivå 4</h4>

Unngå

Unngå å hoppe over overskriftsnivåer

<h1>Sidetittel</h1>
                          <h3>Nivå 3</h3>
                          <h3>Nivå 3</h3>
                            <h5>Nivå 5</h5>
                            <h5>Nivå 5</h5>
                          <h3>Nivå 3</h3>
                            <h6>Nivå 6</h6>

Lenker eller knapper?

  • Knapper utfører en funksjon
  • Lenker tar deg videre til en annen side

Bilder

  • Bruk en beskrivende og informativ alt-tekst
  • Bilder som brukes ren dekorasjon kan ha tomt alt-attributtt
  • Unngå tekst i bilder

Nyttige verktøy

Browser-plugins, validering og andre automatiske verktøy kan gi verdifull informasjon underveis i utviklingen.