Universell utforming: 8 tips til utviklere

Sigrid Steinholt Bygdås

Universell utforming: 8 tips til utviklere

Digitale tjenester 3 kommentarer

Visste du at alle nye nettsteder lansert etter 1. Juli 2014 er påkrevd ved lov å være universelt utformet? Eller at alle eksisterende nettsider skal være universelt utformet innen 1. Januar 2021?  Hvis du ikke har gjort en bevisst innsats, er sannsynligheten faktisk stor for at nettsiden din ikke er tilpasset brukere med nedsatt funksjonsevne, som for eksempel blinde eller synshemmede. Det viser i alle fall Difis undersøkelse.  Her er mine tips til hvordan utviklere kan holde deg innenfor loven.

Rikets tilstand

I sommer publiserte Difi (Direktoratet for forvaltning og IKT) rapporten ”Digitale barrierar på norske nettstader” basert på en evaluering av nettsidene til 304 offentlige og private norske virksomheter høsten 2014. Konklusjonen er kort fortalt at det ikke står så bra til med universell utforming av norske nettsider. Offentlig sektor er flinkest. Private aktører som mediehus, bank/finans og transport/reiseselskaper henger etter. Banktjenester er faktisk minst tilgjengelige av alle, selv om dette er tjenester vi forventer at alle i større og større grad skal kunne utføre på nett.

Dette er hvordan Difi forklarer viktigheten av universell utforming:


Hvilket ansvar?

Universell utforming gir bedre brukeropplevelser for alle. Og det starter med designet. Her må flere ta ansvar. Designere må blant annet tenke på tekststørrelse, linjelengde og farger, og hvordan lenker og knapper står ut på siden. Når nettstedet lanseres, må redaktører kontinuerlig sørge for god kvalitet på innholdet, legge til alternative bildetekster, tekste videoer osv. Dårlige kontraster og manglende alternative tekster til tross, det mest omfattende risikoområdet undersøkelsen avdekker er relatert til koding. Her må altså utviklerne skjerpe seg.

8 tips til universell utforming for front-end-utviklere

  1. Skriv HTML som er semantisk korrekt
    Støtteverktøy, som skjermlesere, er avhengig av korrekt semantikk for å fungere optimalt. Semantisk korrekt kode er derfor et godt grunnlag for tilgjengelige nettsider. Etter min mening bør vi alltid bestrebe oss på å kode slik.
  2. Ivareta hierarkier
    Hierarki i overskrifter er bare ett eksempel – et annet er hovedmenyen. En god test er å navigere i menyen med TAB-tasten. Når du åpner et undernivå i menyen, skal TAB-tasten ta deg gjennom disse valgene før den går videre til neste valg på øverste nivå. Hvis ikke vil brukere av støtteverktøy miste sammenhengen mellom menypunkt og undermenypunkter.
  3. Husk å bruke focus
    De som navigerer ved hjelp av tastaturet, vil ofte ikke se de kule hover-effektene dine i det hele tatt. Jeg ser ofte at utviklere glemmer å legge inn samme CSS-regler for ”focus” som for ”hover”. Det er også vanlig å slå av ”outline”. Kombinasjonen av dette er at en som navigerer med tastatur ikke ser hvor på siden hun er. I tillegg må utviklere bli bevisst på at det ikke er alle elementer som kan få fokus. Det er lett å stile en <span>-tag slik at den ser ut som en knapp, men span-tager kan ikke få fokus. En som navigerer ved hjelp av tastaturet vil derfor aldri komme seg til denne ”knappen”.
  4. Legge inn tekst i alle lenker
    Dersom man kun har Facebook-, Twitter- og Instagram-ikoner under tittelen ”følg oss på”, vil skjermleseren diktere: ”følg oss på link, link, link”. Dette er ikke spesielt informativt. Ettersom ikke alle skjermlesere leser opp ”title”-attributtet, er det bedre å bruke alternativ tekst når ikonet legges inn som et bilde, eller legge teksten i en span med en CSS-klasse som skjuler teksten for alle andre enn skjermlesere.
  5. Knytte sammen label og inputfelt i skjemaer
    Da kan brukere av skjermleser hoppe fra inputfelt til inputfelt i et skjema og få lest opp hva som skal skrives inn i hvert felt.
  6. Bruke header-tags og scope i tabeller
    På den måten får du knyttet sammen innholdet i ei celle med tilhørende header(e) slik at skjermlesere kan sette det i kontekst. Se eksempel hos WebAIM.
  7. Legge til ”Hopp-til-innhold”-lenke øverst på sida
    Denne er nyttig både for brukere av skjermleser og de som navigerer vha tastaturet. Da slipper de å navigere seg gjennom de samme faste elementene på toppen av sida (inkludert hovedmeny) for hver side de går inn på.
  8. Håndtere dynamiske oppdateringer i sida
    Dagens nettsider nærmer seg applikasjoner i funksjonalitet. Ved hjelp av JavaScript oppdaterer vi nå gjerne innhold på siden basert på brukerens valg i stedet for å laste inn ei ny side. En skjermleser kan ikke oppdage slike endringer i innhold av seg selv. Utvikler må legge inn informasjon i koden som forteller skjermleser om hvor oppdateringer kan skje og si fra når de skjer. For å få til dette kan vi bruke teknikker fra ”Accessible Rich Internet Applications” (ARIA).

Det som koster ekstra er i hovedsak håndtering av dynamiske oppdateringer (se punkt 8) og testing.

Når er jobben gjort?

Når HTML-koden validerer og du kan navigere sidene ved bruk av tabulator, har du kommet et godt stykke på vei. Som Difi påpeker er det aller beste å få faktiske brukere til å teste at sidene fungerer.

For mange utviklere er det naturlig å tenke på universell utforming, men dessverre ikke for alle. Det er alltid noe vi kan forbedre og derfor er det bra at Difi evaluerer og følger opp denne loven. De har også et eget nettsted der du finner forklaringer til kravene, eksempler og lenker til nyttige ressurser.

God koding!