Utformingsveileder

Kognitiv tilgjengelighet av nettsider og nettsteder

Januar 2010

Innhold

Innholdsoversikt ikke tilgjengelig.

Praktiske råd for utviklere

De følgende rådene retter seg spesifikt mot utvikling av nettsider for mennesker med kognitive vansker. Rådene vil også være relevante og nyttige for alle typer av brukere, som forklart i eget avsnitt. Et råd skal ses på som en anbefaling. Rådene er basert på ulike kilder. Noen råd er basert på erfaringer fra ulike tildligere forskningsprosjekter som forfatterne har deltatt i. Andre er basert på utprøvinger og tester som er foretatt i forbindelse med utarbeidelsen av denne veilederen. Enkelte råd er også basert på annen forskning og beste praksis-erfaringer.

Hvert råd består av områdestikkord/emne, problembeskrivelse, løsningsforslag og konkrete eksempler.

Konkrete eksempler er basert utelukkende på HTML siden arbeidet med XHTML er blitt stoppet. Ved alle eksempler har vi lagt vekt på tilgjengelighet, bruk av standarder og samspill mellom ulike typer nettlesere og operativsystem (interoperabilitet). Alle eksempler forutsetter grunnleggende kunnskap om nettstandardene HTML og CSS, samt noe DOM og JavaScript. For sistnevnte vil et enkelt nettsøk resultere i mye nyttig informasjon.

Dokumentstrukturer og logiske innholdsenheter

Det som gjør en side uoversiktlig, er ofte utydelige skillelinjer mellom sideelementer og innhold som er for spredt. Dette kan gjøre det vanskelig å orientere seg på siden. Dessuten hindrer ustrukturert tekst en kjapp og effektiv tekstforståelse.

Løsning

Tekstinnhold bør presenteres på en strukturert måte. Eksempler på dokumentstrukturer er avsnitt og lister som danner små, logiske og lett forståelige enheter. En overskrift bør oppsummere strukturens tema slik at brukeren lett kan skille relevant fra irrelevant innhold.

Lister kan være definisjonslister med et nøkkelord foran og forklaring bak, opptellinger, kulepunkter eller rett og slett en vannrett eller loddrett rekke av listepunkter i bokser med tydelige skillelinjer.

Tydelige marger og rom mellom elementene bør sørge for klare skillelinjer.

Slik gjør du

Bruk passende HTML-elementer tydelig for å markere dokumentstrukturen som vist i følgende eksempel. Overskrift bør stilles foran tekstavsnitt dersom det er hensiktsmessig.

Koding:

For innhold det ikke finnes passende HTML-elementer til, kan de generiske elementene div og span benyttes som vist i det følgende.

<div class="figure"> <span class="caption">

Marger kan effektivt lages ved hjelp av stilreglene margin, margin-top og så videre. og padding, padding-top og så videre:

div { margin: 0 0 1em 1em; padding: .5em; }

Korte tekstavsnitt

Lange avsnitt med mange setninger gjør det ofte vanskelig å forstå teksten. Mange brukere "hopper" over lengre avsnitt med tekst og tar seg ikke bryet med å lese gjennom.

Løsning

Unngå for mye sammenhengende tekst og hold avsnitt korte. Bruk kun få setninger per avsnitt. Det finnes ikke fasitsvar når det gjelder et maksimalt antall setninger per avsnitt, og det er derfor viktig å bruke skjønn.

Korte og lett forståelige setninger

Lange og uforståelige setninger, kompleks setningsstruktur og upresise formuleringer kan være vanskelig å forstå.

Løsning

Del opp lange og kompliserte setninger i flere kortere og enklere setninger. Bruk andre formuleringer hvis de er kortere og lettere å forstå. Husk at det er ingen skam å sette punktum.

Korte, ikke sammensatte ord

Norsk tillater vilkårlig sammensatte ord. Lange, sammensatte ord kan være vanskelig å forstå.

Løsning

Bruk korte og ikke sammensatte ord, der det er mulig. Noen betydninger kan gjøres lettere forståelig ved hjelp av bindestrek der grammatikken tillater det.

Slik gjør du

Unngå lange ord som i denne setningen:

Den informerer om hvor i nettstedshierarkiet man befinner seg.

Bruk heller denne formen:

Den informerer om hvor i hierarkiet i et nettsted man befinner seg.

Bruk av lange ord er også problematisk når det gjelder orddeling. Mange nettlesere foretar ikke orddeling med bindestrek. Det kan føre til at ordet stikker ut over sin tilmålte plass (her illustrert ved et rektangel):

Dette eksemplet skyldes følgende koding:

Det kan altså bli overlapp med annet innhold.

Det er også mulig at ordet blir flyttet på slik at en setning mister sin sammenheng:

Dette eksemplet skyldes denne kodingen:

For å unngå slikt må delingspunkter markeres i lange eller sammensatte ord. Resultat blir da:

Koding:

Alternativt for &shy; kan &#173; brukes.

Tekst i kolonner

Svært lange linjer med tekst, det vil si tekst i svært brede kolonner er vanskelige å lese.

Løsning

Lag korte linjer eller smale kolonner med tekst. Det finnes ikke fasitsvar når det gjelder et optimalt gjennomsnittlig antall bokstaver per linje. Vi mener 60-100 tegn (inkludert mellomrom) er fornuftig ved lettlest innhold.

Slik gjør du

Gi avsnitt eller sideelementer som inneholder avsnitt en maksimal bredde. Dette gjøres i stilarket. Først tar vi for oss selve avsnittet:

Resultat:

Koding:

Stilark:

For et div som inneholder en eller flere p blir stilarket:

div{max-width:42em}

For et helt dokument, hvilket garanterer at ingen linjer blir bredere enn spesifisert (med mindre det skjer at et ord ikke kan brekkes over flere linjer), ser stilarket slik ut:

body{max-width:42em}

Eksperimenter med verdien (her: 42) og tell antall bokstaver på noen få linjer for å oppnå ønsket resultat. I motsetning til width tillater bruk av max-width mindre vindusbredder uten at den horisontale scrollbaren vises.

Muntlig språk, metaforer og slang

Muntlig språk, metaforer og slanguttrykk kan være vanskelig å forstå. Et eksempel er bruk av ordet vannspeil i stedet for stille vannoverflate.

Løsning

Unngå bruk av all form for tekst med overført betydning. Unngå bruk av muntlig språk, så vel som ord og uttrykk som ikke er vanlige. Må/vil du absolutt bruke dette, må alt som eventuelt kan føre til uklarheter, kommuniseres på alternativt vis.

Slik gjør du

I steden for å skrive

Dette var en kapital skuffelse!

kan du formulere

Dette var en meget stor skuffelse!

Er det ikke mulig å unnlate å bruke vanskelige begreper og vendinger, bør det legges til en forklaring. Denne kan stå enten i parentes eller skytes inn etter det vanskelige ordet/den vanskelige vendingen.

Dette var en kapital (meget stor) skuffelse! Dette var en kapital ― altså meget stor ― skuffelse! Dette var en kapital, det vil si meget stor, skuffelse!

Tekniske faguttrykk og andre språk

For noen brukere er fagterminologi og ekspertuttrykk ikke lett å forstå. Det samme gjelder uttrykk som utelukkende brukes på et annet språk. Mange brukere er dessuten ikke språkmektige og har vanskelig for å forstå låneord.

Løsning

Unngå faguttrykk og kompliserende fremmedspråk. Dersom man ikke kommer utenom, bør alltid forklaring skrives.

Slik gjør du

Forklaring kan skrives som foreslått i eget emnepunkt. Alternativt kan problement løses slik:

Bruk en kombinasjon av dfn og a-elementet, og sett title-attributen på a-elementet. Slik blir en kort forklaring vist i grafiske nettlesere (som såkalt tooltip), og uttrykket blir til en lenke som fører til en definisjon.

Resultat:

Koding:

Stilark:

Forkortelser

Forkortelser (som f.eks.) og akronymer (forkortelse med kun første bokstav per ord, som NRK) kan gjøre teksten vanskelig å forstå.

Løsning

Bruk så få forkortelser og akronymer som mulig. Dersom disse ikke kan unngås, bør det alltid skrives en forklaring.

Slik gjør du

Unngå bruk av acronym ettersom den ikke er støttet i XHTML 2 eller HTML 5. Bruk kun abbr.

Bruk en kombinasjon av abbr og a-elementet, og sett title-attributen til begge. Slik blir forkortelsen lest opp rett i en skjermleser, og den blir vist korrekt som tooltip i en grafisk nettleser. Videre blir uttrykket en lenke som fører til et avsnitt der forkortelsen blir skrevet ut i sin helhelt og eventuelt forklart.

Resultat:

Koding:

Stilark:

Flere innholdsformer/multimodalitet

Ofte finnes innhold kun i én eneste form eller såkalt modalitet, for eksempel tekst. Dette er en ulempe for brukere som sliter med akkurat den aktuelle formen.

Løsning

Presenter så mye av informasjonen som mulig på flere former/modaliteter. I tillegg er det viktig at alle modaliteter har høy kvalitet, og at bruken er gjennomtenkt. For eksempel må betydningen av et lite symbolbilde i tillegg til tekst være intuitivt forståelig. Bildet må være stort nok, det må være rett plassert og så videre. Andre eksempler på flere innholdsformer:

Det kan også være en fordel for noen brukere å ha tigjengelig flere varianter av samme modalitet. Et eksempel er avspilling av innholdsekvenser med forskjellige hastigheter. Varianter kan være

eller

En kombinasjon av to eller flere modaliteter fører til sterkere sanseinntrykk og at innholdet dermed oppfattes raskere. Dette gjelder spesielt for kombinasjonen bilde og tale.

Slik gjør du

Inkluder én (ofte brukt) modalitet på siden og i nærheten noen lenker til sider med samme innhold i andre former. Det skal være én form per side, og en lenke per side/modalitet. Det er en fordel med hjelp til navigering som Tilbake-knapper på disse sidene. Da kan man raskt finne tilbake til den opprinnelige siden. Se også eget emnepunkt.

Varighet av visning av innhold

Tiden innhold vises på kan være for kort til å oppfatte alt av relevans.

Løsning

Hvis tekst blir vist i et avgrenset tidsrom, som for eksempel undertekst til film, bør varigheten av visningen være tilstrekkelig lang til at personer som leser sakte kan lese og forstå alt. Brukeren bør ha muligheten til å repetere innholdet, ta en pause under avspillingen, og kunne endre innstillinger som for eksempel avspillingshastiget.

Antall alternativer

I noen tilfeller er det nyttig å tilby flere valgmuligheter. Samtidig er det problematisk å presentere for mange alternativer om gangen og slikt bidra til at brukeren blir forvirret.

Løsning

I situasjoner der brukeren må velge mellom flere alternativer, bør det vises så få alternativer om gangen som mulig. Dette gjelder nedrullister/rullgardin (drop-down lists), avkrysningsbokser (checkboxes) og enten-eller-knapper (radio buttons). Vi anbefaler å forsøke å redusere antall alternativer ved å strukturere informasjonen for eksempel i kategorier.

Konvensjoner for utforming

Sider som bryter med utforming som folk er vant til fra andre steder, er vanskelige å bruke.

Løsning

En side bør være forutsigbar både når det gjelder utseende og oppførsel. Eksempler på dette er å vise innhold i rekkefølgen ovenfra-ned og venstre til høyre. Eksempelet gjelder dog kun når målgruppen har en vestlig kulturbakgrunn. Andre eksempler er søkefunksjon, datofelt, kontaktinformasjon med flere.

Internasjonale og nasjonale konvensjoner og regler bør følges. De nasjonale reglene bør vektes sterkere enn de internasjonale der de kommer i konflikt. Et eksempel er å følge retningslinjen ELMER for utforming av elektroniske skjemaer i Norge.

Slik gjør du

Bruk kjente testverktøy, følg standarder og andre beste praksis-regler (et nettsøk på best practices vil gi mye nyttig informasjon). Følg også med på diskusjonsfora på nettet og fagtidsskrifter som A List Apart.

Konsistens

Et nettsted hvor sidene har forskjellig utforming og oppførsel for identiske sideelementer, er vanskelig å lære og bruke.

Løsning

Alle sider på et nettsted bør ha konsistent utforming og funksjonalitet, altså samme sideoppbygging, utseende, og virkemåte. Det brukeren har lært om hvordan nettstedet fungerer, skal hun/han kunne bruke overalt på samme nettsted.

Slik gjør du

Skill mellom innholdsstruktur (selve kodingen) og utforming (stilark). Legg opp til et system der ett stilark skal gjelde for alle sider på et nettsted, og et tilleggsstilark skal brukes for kun én spesifikk side.

Eksempel på et slikt hierarki:

<link rel="stylesheet" type="text/css" href="generisk.css"> <link rel="stylesheet" type="text/css" href="innlogging.css">

Hjelp

Når problemer oppstår, er ofte brukeren overlatt til seg selv, uten mulighet for tilstrekkelig hjelp eller informasjon.

Løsning

Det er viktig at brukeren får informasjon om en oppgave hele veien, som forklart i eget emnepunkt. I tilfellet problemer bør det finnes hjelp tilgjengelig med så relevant og spesifikk informasjon som mulig. Hjelpen bør inneholde mulige årsaker til problemet og mulige løsninger, og bør by på tiltak som hjelper til å løse problemet.

Hjelpen brukeren kan få, bør være løsninger med enveis informasjonsflyt og løsninger som gjerne er interaktive. Eksempler på det første er enkle hjelpesider som legger opp til at brukeren hjelper seg selv, og demonstrasjoner i form av instruksjonsfilmer (screencasts). Eksempel på det siste er ekspertsystemer som tillater at brukeren spør for eksempel ved å taste inn et spørsmål i tekstform.

Hjelpen brukeren får bør tilpasses brukerens behov. Det kan være alt fra tilbud om enkle hjelpesider til mer spesifikke demonstrasjoner, og hvis nødvendig også å tilby kontakt med brukerstøtte, det vil si mennesker. Terskelen for å kunne møte et menneske bør ikke være høy.

Slik gjør du

Eksempel på hjelpesystem med flere hierarkier:

Interaktive sideelementer

Noen brukere får ofte for lite tilbakemelding/støtte fra en nettside, for eksempel i form av visuell hjelp, indikasjon av innhold og funksjonalitet som ligger bak et sideelement, og annen hjelp.

Løsning

Et responsivt brukergrensesnitt støtter bruk av siden med visuelle tilbakemeldinger og annen form for help. Dette er ikke begrenset til de følgende eksemplene.

Erfaringer med brukertester viser at det er viktig at interaktiviteten ikke forvirrer brukeren. Dette gjelder spesielt når deler av siden eller hele siden blir påvirket av endringene utløst av brukerens handlinger.

Slik gjør du

En typisk fokuseffekt er skifte av bakgrunnsfarge:

Koding:

Stilark:

Det er viktig at fokuseffekten ikke fører til større sideforandringer som kan forvirre brukeren.

En implementasjon av verktøyhjelp kan se slik ut:

Koding:

For JavaScript-genererte faner vil et nettsøk resultere i mye nyttig informasjon.

Når det gjelder dynamisk forandring av formen på musepekeren, se knappeksempelet i et annet emnepunkt.

Nedenfor vises hvordan et felt brukeren skal taste inn data på, kan vise et eksempel som forsvinner når feltet får fokus.

Koding:

Dataforståelse

Store mengder med data kan være vanskelig å håndtere.

Løsning

Store mengder med data bør kunne sorteres/kategoriseres etter valgte kriterier, og med pekere fra hvert kriterium inn i databasen. Slik vil en del brukere kunne velge den foretrukne måten å nærme seg dataene på. Vi ønsker å også å nevne at andre brukere med betydelige kognitive utfordringer vil oppleve slike valg som forvirrende og frustrerende fordi det blir for mye å forholde seg til. Det gjelder altså å bruke skjønn.

Data kan sorteres etter:

Også et fritekstsøk bør være mulig. For de som måtte fortrekke dette, bør hele databasen være tilgjengelig i liste- eller tabellform.

Det er samtidig viktig å begrense antall klassifiseringsmåter som beskrevet i eget emnepunkt.

I situasjoner der for eksempel kun ett utsnitt av en større datamengde blir vist, kan det også være en fordel å antyde størrelsen med fortsettelsestegn (...).

Slik gjør du

Det er egentlig kun fantasien som setter begrensinger her. Et implementasjonsforslag er gjengitt i det følgende:

Koding:

Stilark:

Lenken bak fortsettelsetegnene bør føre til en opplisting av hele den alfabetiske kategoriseringen, mens de andre lenkene bør peke mot selve tjenestene.

Brukerprofiler

Av ulike grunner tar svært mange nettsider ikke hensyn til brukerens generelle behov (for eksempel svaksynthet), eller konkrete behov (for eksempel søk etter bestemt informasjon).

Løsning

Et nettsted bør helst tilby sine tjenester i personalisert form, det vil si skreddersydd for enhver bruker. Innhold og funksjonalitet bør presenteres avhengig av data som er lagret om brukeren i såkalte brukerprofiler. Et besøk av brukeren bør lagres, slik at funksjonalitet som ... brukt sist og ... sett på forrige gang, samt forhåndsutfylling av data (som brukernavn) og annen funksjonalitet (som tidspunkt for forrige besøk og så videre) blir mulig. De tekniske og funksjonelle mulighetene som brukerprofiler åpner må dog alltid avveies med hensyn til personvern.

Slik gjør du

Implementasjonen av profiler er teknologiavhengig. Såkalte informasjonskapsler (cookies) brukes svært ofte til å skape brukerprofiler. Til alternativene hører:

Søk eller navigering

Mens noen brukere fortrekker navigering for å finne fram til den ønskete informasjonen, bruker andre heller søk for rask å innhente informasjon.

Løsning

Et nettsted bør ha minst én søkefunksjon som tillater raske oppslag av søkebegrep. Brukeren bør kunne velge om søket skal foregå kun innefor visse kategorier, som for eksempel Hjelp, Produkter, Dokumentasjon og så videre.

Slik gjør du

Det som kan hjelpe brukeren med å navigere er menyer, nettstedkart og navigasjonsknapper og andre tiltak som nevnt i eget emnepunkt.

Det viktigste med søk er at den bør føre til relevante og nyttige resultater.

Enkelt eller avansert

I mange situasjoner må en person som er ute etter spesielt innhold eller en viss tjeneste, sile bort mye irrelevant informasjon. Dette koster mye krefter og tid, og betyr ofte også betydelige kostnader.

Løsning

Det bør foreligge lettleste versjoner av kompliserte tekster, som lovtekster og fagartikler. Den lettleste varianten bør være førstevalg. Pekere bør så lede brukeren videre til informasjonen i sin helhet.

Store dokumenter eller innholdselementer

Store sider eller sideelementer med mye innhold betyr ofte at den ønskete informasjonen ikke er synlig i sin helhet. Følgelig er brukeren nødt til å rulle siden fram til den ønskete informasjonen. Dette gjelder spesielt vannrett rulling, men også loddrett rulling.

Løsning

Unngå at man må rulle altfor mye ved å lage flere mindre sider og overskuelige sideelementer. Bruk så lenker som tillater lett navigering mellom delene med informasjon.

Relevant innhold

Overflødig informasjon og innhold som ikke er relevant i en gitt sammenheng virker forvirrende på mange brukere. Dette gjelder for eksempel innhold som er halvt gjennomsiktig eller vises med svakere farger fordi det ikke er relevant.

Løsning

Vis kun innhold som er relevant i en gitt kontekst. Ikke vis irrelevant informasjon selv om den kan skilles fra relevant innhold. Ikke vis funksjonalitet (for eksempel knapper eller felter til utfylling) som ikke kan brukes på et gitt tidspunkt.

Slik gjør du

Når det gjelder skjemafunksjonalitet, unngå bruk av attributene disabled og readonly i kodingen som i

<input disabled name="navn" value="Ola">

eller

<input readonly name="navn" value="Ola">

Dynamiske sideelementer

Mange brukere blir forstyrret av at mye på en side er i kontinuerlig forandring. Dynamiske sideelementer kan være animert grafikk, rullende eller blinkende elementer (flashing). Dette gjelder altså elementer som ikke nødvendigvis må være i fokus.

Løsning

Unngå forandring av sideelementer som ikke må være i fokus, det vil si gjør disse statiske.

Bruk animasjoner i aGIF- eller Flash-format med omtanke.

Bruk dynamiske sideendringer implementert ved hjelp av JavaScript med måte.

Unngå bruk av blinkende sideelementer som tekst.

Slik gjør du

Når det gjelder sistnevnte, unngå bruk av stilregelen text-decoration: blink.

Komplekse prosesser

Noen ganger er det lett å miste oversikt i kompliserte eller omfangsrike prosesser.

Løsning

Lange eller komplekse oppgaver som brukeren må løse, bør deles opp i flere mindre og enklere deloppgaver etter prinsippet del og hersk. Hver av disse skal kunne løses med kun liten tidsbruk.

Slik gjør du

Antatt at det finnes en mekanisme for innlogging bestående av valg av innloggingsmåte og selve innloggingen, som inntasting av brukernavn og passord. Da er det naturlig å dele innlogging opp i to deloppgaver.

  1. Valg av innloggingsmøte.
  2. Inntasting av brukernavn og passord.

Med andre ord skal ikke alt skje på én og samme side.

Sideforandringer

Det kan være en utfordring å få med seg viktige endringer på siden dersom disse skjer langt unna brukerens fokus eller til og med er usynlige. Dette er et problem særlig når mye på siden er i forandring samtidig.

Løsning

Forandringer av deler av siden som vises bør skje gradvis og i nærheten av brukerens antatte fokus. Det er videre en fordel om endringer signaliseres ved å rette brukerens oppmerksomhet mot dette, som nevnt i eget emnepunkt.

Vises for eksempel en video med undertitler og tekstbokser med hjelpetekster sentrert i nettleservinduet, så skal undertitlene og tekstboksene ikke plasseres altfor langt unna midtpunket.

Hukommelsesstøtte og forklaringer

En bruker som skal loses gjennom komplekse prosesser, er ofte avhengig av hukommelsen for å finne seg til rette og orientere seg, og for å løse en gitt oppgave. Dette gjelder spesielt for oppgaver som er fordelt over flere trinn som beskrevet i eget emnepunkt.

Løsning

Hukommelsesstøtte vil være til hjelp når brukeren skal forstå komplekse prosesser. Hukommelsesstøtten bør si noe om den generelle sammenhengen og forklare den konkrete deloppgaven brukeren holder på med. Samtidig bør den forklare hvorfor brukeren må gå gjennom oppgavedeler som brukeren ikke har valgt selv.

Gi også informasjon om gangen i hele prosessen, muligens også et beskrivende navn for deloppgaven. Brukeren må også få vite kravene til deloppgaven som skal løses, inkludert nøyaktige instruksjoner.

Slik gjør du

Generell sammenheng / overordnende prosess:

Du er i gang med å levere selvangivelsen.

Konkret deloppgave:

I denne sammenheng må du logge deg på.

Gangen i hele prosessen, sammen med et beskrivende navn på deloppgaven:

Steg 2 av 4: Valg av innloggingsmåte

Krav:

Du trenger fødsels- og personnummer, ditt personlige passord og engangskode fra melding på telefon.

Konkrete instruksjoner:

Velg et av alternativene for hvordan du vil logge inn.

Navigering

Skal brukeren loses gjennom flere oppgaver som henger sammen som beskrevet i eget emnepunkt, er det ofte vanskelig å huske hva de andre deloppgavene besto av. Mange brukere mister oversikten og navigeringsevnen ikke bare på store nettsteder, men også allerede på steder som omfatter kun noen få sider.

Løsning

Navigeringen mellom de enkelte prosessene tillater brukeren å finne informasjon raskt ved å kunne gå fram og tilbake. De bør være mulig å gå til vilkårlige deloppgaver i en større prosess. Dette kan implementeres som knapper, og i noen tilfeller er det hensiktsmessig å vise deloppgavene under separate såkalte faner.

En annen mulighet er hierarkistien. Den inneholder informasjon om hvor i hierarkiet i et nettsted en bruker befinner seg.

Slik gjør du

Knapper til navigering:

Koding:

Stilark:

En enkel implementasjon av faner, som krever JavaScript for å fungere, er vist i det følgende. Det er også fullt mulig å lage en versjon uten JavaScript. Implementasjonen viser hvordan en fane kan se ut i steg 2 av 3 mulige steg. Hvis lenken til en annen fane blir aktivert, bør et skript flytte active-klassen til det tilsvarende steget.

Koding:

Stilark:

Hierarkisti til navigering:

Koding:

Stilark:

Hierarkisti kalles også breadcrumb trail på engelsk.

Visuell støtte til navigering

For noen brukere kan det være vanskelig å forstå hva som er neste steg for å bli ferdig med en gitt oppgave.

Løsning

Skal brukeren gjøre et eller annet konkret, er det nyttig å dra oppmerksomheten dit. Dette kan gjøres ved hjelp av dynamiske sideelementer (animerte grafikker/bilder og så videre) eller ved å presentere et sideelement i en stil som skiller det fra andre elementer.

Et eksempel på det siste er å utheve feltet som venter på input fra brukeren.

Et annet eksempel er et farget areal rundt musepekeren som beveger seg i en instruksjonsvideo som viser et opptak av skjermen.

Slik gjør du

Et forslag til hvordan framheve brukerfokus på felt for brukerdata er vist i det følgende. Merk at onfocus- og onblur-attributene er lagt til av et skript slik at de kun ligger i dokumenttreet om JavaScript fungerer.

Koding:

Stilark:

Hastighet på avspilling

Ved avspilling av multimediainnhold kan det gå altfor fort slik at brukeren ikke kan følge eller oppfatte innholdet.

Løsning

Video, tale og andre innholdssekvenser bør presenteres med en hastighet som tillater brukeren å oppfatte og forstå informasjonen som skal formidles. Eventuelt bør innholdet kunne avspilles med flere hastigheter.

Varighet på avspilling

Avspilling av multimediainnhold, som animert grafikk, video- eller lydopptak, kan sette brukerens hukommelse på prøve.

Løsning

Det er avgjørende at avspilling ikke varer lenger enn strengt tatt nødvendig. Hva som er nødvendig avhenger selvsagt av sammenhengen. En illustrasjon på dette er en instruksjonsvideo som viser hvordan man bruker interaktive skjemaer. Et opptak som viser den overordnete framgangsmåten kan ha en varighet på flere minutter uten at avspillingen vil oppleves som for lang å huske. En filmsnutt som viser informasjon om en spesifikk funksjonalitet bør derimot være kort.

Avspillingslengde av multimediainnhold bør tilpasses innholdets omfang og sammenheng. Det bør være lett for brukeren å stoppe og starte avspillingen og/eller spille av på nytt. Når det gjelder for eksempel screencasts og andre former for instruksjon i multimediaform, så bør videosnuttens lengde i hovedsak være noen få titalls sekunder, og ikke overstige et par minutter. Uansett: Her gjelder det å bruke skjønn.

Fokusareal

Ved bruk av visuelle modaliteter, altså bilder/grafikk eller video, blir ofte unødvendig mye informasjon vist. Bilder og video kan bli for store, og de viser kanskje mye mer enn kun det arealet som bør være i brukerens fokus. Dette er spesielt problematisk når man viser bilder/video av nettsider (screendump/screencast). Da forvirrer man lett brukeren som ikke klarer å skille mellom bilde/video og resten av nettsiden. En annen feil er å lage video/bildefeltene for små slik at de ikke kommer til sin rett.

Løsning

Bilder og video skal være passelig store, og de skal kun vise innhold av interesse for formålet. For en lysbildesekvens eller en video kan det være aktuelt å bruke zoom for å illustrere at kun et utsnitt vises.

Når likevel et større areal i et bilde skal vises, bør man markere de områdene der brukerens fokus skal være, for eksempel med rød farge. Se også eget emnepunkt.

Skille ut innhold og hjelp

Undertitler og tekstbokser i en video kan noen ganger være vanskelig å skille fra selve innholdet.

Løsning

Undertitler og tekstbokser bør ha en lett identifiserbar grense og en bakgrunn som ikke er helt gjennomsiktig.

Slik gjør du

I det følgende eksemplet blir det vist et bilde som er innrammet av en streklinje. Slik kan et bilde lett skilles fra omgivelsen, selv om bakgrunnsfargene i bilde og omgivelsene eventuelt er like.

Opp på bildet er det lagt verktøyhjelp som en liten fane med forklaring. Også den framheves tydelig over selve bildet gjennom farge- og skriftbruk, samt kantlinjen, som denne gangen er gjennomgående.

Koding:

Stilark:

Det å åpne en lenke i en ny fane eller et nytt vindu forvirrer mange brukere, også de med gode IT-kunnskaper. Dette gjelder spesielt for lenker på samme nettsted som fører til sider med hjelp og assistanse.

Løsning

Sider på samme nettsted bør åpnes i samme fane/nettleservindu. Nettsider bak lenker som peker mot andre nettsteder, kan åpnes i egne vinduer, men brukeren må varsles om dette på egnet vis.

Sider med veiledende innhold om andre sider bør ha lenker som guider brukeren tilbake dit de kom fra.

Slik gjør du

Vi viser tre muligheter for å varsle om at en side bak lenken åpner i et nytt vindu:

Koding:

Stilark:

Merk at bruk av target-attributen krever en såkalt Transitional Doctype.

For å gi mulighet til å navigere tilbake fra hjelpesiden, kan følgende løsning lages (følg lenken). Dette krever at begge sider åpnes i samme vindu.

Koding:

Knappens funksjonalitet baserer seg på JavaScript og blir derfor laget av et skript slik at den kun er tilgjengelig dersom JavaScript fungerer.

Talldata

Tallmateriale kan være utilgjengelig for mennesker med dyskalkuli. Spesielt i forbindelse med interaktive skjematjenester på web må brukere ofte gi tallbasert input (taste inn tall), slik som datoer, PIN-koder og så videre. Nettbank kan være umulig å bruke for personer med dyskalkuli.

Løsning

Når tall presenteres til bruker, vil syntetisk tale kunne hjelpe. Oppleste tall kan være adskillig lettere å oppfatte enn skriftlige tall. Når brukeren skal skrive inn tall, for eksempel dato, vil visuelle hjelpemidler slik som pek og klikk-kalender med automatisk datoformattering kunne hjelpe. Også når brukeren skal gi fra seg talldata vil syntetisk tale kunne øke tilgjengeligheten. Det er imidlertid viktig å sørge for sikkerhet og personvern når personlig informasjon (for eksempel PIN-koder) leses opp. Brukeren bør bli gjort oppmerksom på dette i forveien, og han/hun må kunne velge bort talefunksjonen.

Slik gjør du

Et eksempel på opplesning av tallmateriale er illustrert i det følgende. Funksjonaliteten for selve avspilleren bør også ligge bak knappen som vist, men er ikke tatt med her.

Koding:

Eksempel for inntasting av data med kalender-funksjonalitet:

Koding:

Eksempelet er basert på datepick, et programtillegg (plugin) i JavaScript-biblioteket JQuery. Se dokumentasjonen der. Selvsagt kan også andre JavaScript-bibliotek brukes, eller man kan skrive JavaScript-koden selv.

Løsninger som følger standarder og fungerer

Noen personer med funksjonsnedsettelser har tendens til å tro at det de ikke forstår, skyldes deres egne begrensninger. Det kan gjelde vanskelige eller rare ord og uttrykk eller problemer med å bruke funksjonaliteter på en nettside. Andre reagerer med utålmodighet og frustrasjon når ting ikke fungerer som de skal.

Løsning

Teknologien en nettside og dens funksjonalitet bygger på, bør være basert på standarder. Nettsidene bør testes i en rekke ulike, moderne nettlesere i forskjellige versjoner, og i forskjellig versjoner av ulike operativsystemer.

Det må presiseres at det er det underliggende utseende og den generelle oppførselen som skal være den samme i alle nettlesere. Det skal derimot ikke forventes at sidene vises og oppfører seg likt til punkt og prikke overalt.

Følger man standarder som WCAG, vil man øke tilgjengeligheten for personer med funsjonsnedsettelser, også når det gjelder kognitive utfordringer.

Kvalitetssikring av innhold og funksjonalitet er viktig så ikke brukerne skal tro de selv er skyld i eventuelle vansker og problemer. Før publisering eller oppdatering av en nettside bør minst én annen person enn den som har skrevet siden/oppdateringen ha sett kritisk gjennom det hele.

Slik gjør du

Test løsningen med flere testverktøy, som HTML validator, CSS validator, Achecker, Wave og andre.

Test løsningen i flere av de mest populære nettlesere.

Test løsningen om mulig med scenarioer og fiktive brukere som beskrevet i eget avsnitt eller reele brukere.

En kvalitetssikrer bør kontrollere at alt fungerer som det skal før publisering. Han/hun bør også sikre seg at retningslinjer i denne veilederen er fulgt for å gjøre det lettest mulig for den som ser på siden, å forholde seg til innholdet.

En liten oppsummering til slutt. Den røde tråden som går gjennom alle anbefalinger, er at en nettside bør bli så oversiktlig og enkel som mulig. Løsningen bør bli sett fra brukerens perspektiv og ikke med teknologien som utgangspunkt. Når denne tenkningen legges til grunn for utviklings- og utformingsprosessen, vil også den endelige løsningen blir mye mer tilgjengelig. Slikt vil man også unngå store ekstra kostnader og bruk av ekstra tid for å gjøre løsningene universelt utformet.