Tips til universell utforming av webløsninger

Tips til universell utforming av webløsninger

Fra 1. juli 2014 må alle nye nettsider følge forskrift om universell utforming av IKT. Eksisterende løsninger skal følge kravene om universell utforming innen 1. januar 2021. Kravene gjelder både for private og offentlige virksomheter.

Her kommer det derfor noen tips som kan hjelpe på veien til en velfungerende og universell utformet webløsning. Bakgrunnen for denne artikkelen er blant annet min erfaring som webutvikler for MinJournal, et nettsted for sikker kommunikasjon mellom pasient og behandler.

Hvorfor universell utforming?

Målet med universelt utformede løsninger er at de er tilgjengelige for alle uavhengig av funksjonsevne. For webløsninger innebærer det at synshemmede kan bruke nettsidene, og videre skal webløsningen også kunne brukes med tastaturet for brukere med nedsatt motorikk eller senebetennelse.

Dette høres for så vidt greit ut å implementere i en webapplikasjon. Men virkeligheten tilsier noe annet. Selv om man som utvikler forholder seg til diverse standarder i HTML-markupen er det ingen garanti for at skjermlesere – som brukes av synshemmede brukere – og tastatur navigasjon fungerer som forventet i diverse nettlesere og operativsystemer.  Derfor må løsningen testes i et større antall systemer og som regel tilpasses til diverse plattformer.

En korrekt og velfungerende universell utformet løsning kommer ikke ut av boksen selv om utvikleren streber å følge alle mulig standarder. Det er en stor fordel at prosjektet har tilgang til en erfaren ekspert på universell utforming og en utvikler som har lignende prosjekter fra før eller er klar for å måtte lære mye nytt Smil

Velformet HTML er viktig

Websidene skal være lesbare av diverse skjermlesere som brukes av synshemmede brukere. For å få disse til å fungere kan det kreves noe ekstra HTML-markup med diverse individuelle tilpasninger til innholdet på websidene.

Den absolutte regelen er å prøve å bruke enklere HTML konstruksjoner i den grad det er mulig. Utvikleren bør også bruke HTML5 semantisk markup (header, section, article, aside osv) slik at skjermlesere skjønner innholdet på sidene.

Men i moderne webapplikasjoner brukes det ofte kompliserte elementer som ikke er en del av standard HTML. Jeg personlig strebet mye med å få på plass en komboboks widget som fungerte med skjermlesere. Komboboks er et "liksom" HTML-select element der man kan taste inn søkeord og få en liste av mulige valg i en dropdown boks. Den har ikke klassisk select-markup og skjermlesere går helt amok når disse finner en slik konstruksjon på siden. Utvikler er nødt til å bruke – og bruke forsiktig – et sett av role-attributter ARIA-attributt (Accessible Rich Internet Applications) for å løse dette. Det finnes diverse teknikker for dette og man kan lese mer om disse og andre måter om å bruke disse attributtene på her.

Responsive design er en gratis løsning for stor skrift

En bruker med svakt syn kan ha behov for å øke tekststørrelsen på siden – ved å bruke kombinasjon av CTRL+ – opp til 400 %.

Hvis man prøver å gjøre dette på en side som ikke er responsive – dvs innholdet på siden ikke tilpasser seg til skjermstørrelse eller skriftstørrelse – får man rett og slett en uleselig side. Innholdet strekker seg utenfor skjermens bredde og det er svært vanskelig å lese.

Ved bruk av responsive design – jeg har selv brukt Twitter Bootstrap rammeverk – løser man dette problemet ved at blokkene av innholdet tilpasser seg til skjermstørrelsen og havner under hverandre slik at det er enkelt å lese innholdet selv om skriftstørrelse er økt opp til 400 %. Denne løsningen kommer til og med gratis! Slik tilpasning er i responsive design sin natur.

sr-only klasse til stor hjelp

Twitter Bootstrap – responsive design rammeverk – har en veldig god løsning for elementer som kun skal være synlige for skjermlesere. Det finnes en CSS klasse som heter sr-only og denne fjerner da innholdet fra skjermen slik at det ikke er synlig men likevel lesbart av skjermlesere. Hvis man ikke bruker Twitter Bootstrap kan man enkelt implementere en slik klasse i sitt eget CSS-ark. Jeg har brukt denne klassen ofte til å legge inn tekst med ekstra forklaringer på hva man skal, for eksempel taste inn i et skjemafelt eller lignende. Denne teknikken er absolutt til stor hjelp i slike tilfeller.

Pass på farger

Bruk av farger i universelt utformete sider er ikke bare til pynt. Designeren skal sørge for at sidene har god kontrast. Derfor er det strengt forbudt å bruke hvit skrift på lysblå bakgrunn selv om det kan føles som et pent valg for noen. I noen tilfeller kan det være en løsning å lage en egen versjon av css-arket for siden med ekstra god kontrast som brukeren kan aktivere ved behov.  

Tastatur

Det er vanlig å legge inn to egne elementer på en universell utformet side for tastaturbruk. Den første er en skjult lenke til hovedinnholdet på siden som vanligvis aktiveres ved bruk av tab-tasten. Den andre er en pop-over med tekst som forklarer hvordan man kan forstørre tekst på siden. I de fleste nettlesere er det en kombinasjon av CTRL+/- (CMD+/- på Mac). Denne forklaringen skal gjerne vises i veldig stor skrift siden informasjonen skal brukes av synshemmede folk.

Man skal videre kunne navigere med tastatur på sidene. Hver nettleser kan ha sine egne regler for diverse tastekombinasjoner. Chrome og Safari, for eksempel, gjør det mulig å navigere med tab-tasten gjennom lenker og elementer som har attributt tabindex=0. Men i Firefox får man ikke navigere gjennom lenker på på denne måten. Det må da sørges for at tastatur navigasjon fungerer i alle nettlesere som det er tenkt støttet av webutvikler.

Det er vanlig at applikasjoner på websider også skal kunne nås med en snarvei. Vanligvis er det tastkombinasjon Alt-W, og dette må programmeres av utvikleren.

Hold deg unna eldre nettlesere

Når man skal implementere universell utforming på en webløsning bør man definere hvilke nettlesere løsningen IKKE kommer til å kunne støtte. Dette gjelder først og fremst eldre nettlesere fra Microsoft som man fortsatt finner i bruk hos noen statlige enheter og nettlesere jeg da tenker på er Internet Explorer 8 (IE8) og lavere.

Hvis man får et krav om at løsningen skal være universelt utformet og også skal støtte disse nettlesere kreves det MYE ekstra tid for å få til dette.

Da gjenstår det bare å si lykke til, og husk at universell utforming er helt nødvendig for noen, men nyttig for oss alle!

 

Om bloggeren:
Igor Koudrik har Master i Computer Science fra Universitetet i Oslo og laget sin første html-side i 1996. Han er en lidenskapelig front-end utvikler som alltid er oppdatert på ny teknologi og nye løsninger.

comments powered by Disqus