Page 1


Innholdsfortegnelse Hvordan denne e-boken ble til

Side 3

Hvordan skrive en god tekst, med universell utforming i tankene

Side 4 -8

Universell utforming er likestilt med design og kode

Side 9 - 11

En bestilling som tar universell utforming pĂĽ alvor

Side 12 - 14

Ressursliste

Side 15 - 16


Hvordan denne e-boken ble til ​ Du kan også høre og lese samtidig ved å klikke på denne lenken

Har du noen gang tenkt på universell utforming og tenkt: Hvor skal jeg begynne? Tenk så praktisk å ha hatt en liten guide i lomma på mobilen eller på oppslått på laptopen. Som fortalte det du behøver å vite, mens du jobber? Nå har du fått nettopp det! Vi har som mål å vise en praktisk tilnærming til universell utforming. I over et og et halvt år har jeg jobbet med denne miniguiden, der denne e-boken til slutt ble sluttproduktet. Vi har jobbet hardt for å få den konkret. Forhåpentligvis også så omfangsrik at de som kjenner godt til fagfeltet, kan bli inspirert til å gjøre et dypdykk. Kanskje til og med skape en spire til mer samarbeid på tvers av firmaer i bransjen om dette fagfeltet. Denne guiden er delt inn i tre hovedtekster, som hver har sin målgruppe: Tekst 1 er for innholdsskapere som vil friske opp eller lære hvordan man skriver en god tekst med universell utforming i tankene. Tekst 2 er for designere og utviklere som ønsker praktiske eksempler på hvordan universell utforming kan bli likestilt i prosessen med design og kode. Tekst 3 er for kunden som vil ta universell utforming på alvor. Her får du tre konkrete tips til hvordan dette kan vises både internt og eksternt i din organisasjon/firma. Når det er sagt, kan alle som er nysgjerrig lese denne guiden og få noe nyttig ut av den. Derav navnet EasyAll. Jeg ønsker deg god lesing. Håper denne guiden er en nyttig ressurs inn i ditt neste prosjekt! Husk: Universell utforming er bra for alle, ikke bare for oss som trenger det.


Hvordan skrive en god tekst, med universell utforming i tankene Du kan også høre og lese samtidig ved å klikke på denne lenken

Det finnes mange gode oppskrifter på hvordan man skal skrive godt for nett. Nå får du et kort overblikk av hvordan du kan skrive godt med universell utforming i tankene.


Bruk overskrifter riktig Det er viktig å huske rekkefølgen og bruke riktig hierarki på overskrifter. På nett definerer vi overskrifter i fra H1 til H6. H-en kommer fra det engelske ordet Heading (overskrift). De skal alltid brukes som overskrifter, også med tanke på innhold. Ikke bruk H2 for å gi tekst et spesifikt utseende, hvis det ikke er en overskrift. Her er noen eksempler, hvis du er i tvil på hvordan det skal gjøres:

H1 - Tittel på siden - 26 px H2 - Overskrift - 22 px Normal tekst - 12 - 16 i skriftstørrelse. 16 px er standard på nett

H3 - Underoverskrift til H2 - 20px Tekst - 12 - 16 i skriftstørrelse. 16 px er standard på nett

H2 - Neste overskrift - 22 px Footer og meta - 10 px Ikke bruk ​bold​-funksjonen i redigeringsmenyen for å lage overskrifter! Tenk på de som har behov for skjermleser, og bruk “Overskriftmenyen”. Gjør du det, kan alle få lest teksten din.


Overskriftsmenyen kan se slik ut (eksempel fra Google docs):

Bildetekst: Viser hvor overskiftsmeny befinner seg.

Når du lager Word-dokumenter, er det også viktig å huske på at mottakeren kanskje bruker verktøy for å få innholdet lest opp, så definer overskrifter på riktig måte der også. I Word kan du sjekke tilgjengeligheten på lik linje som Stavekontroll. ​Her får du oppskriften på hvordan du gjør dette​.


Forklarende bilder og illustrasjoner Hvis du bruker forklarende bilder eller illustrasjoner i teksten, må du huske alternativ tekst slik at de som ikke kan se bildet/illustrasjonen likevel får informasjon om hva bildet viser. Når det er sagt skal alternativ tekst-feltet stå tomt hvis det kun er dekor, fordi det skaper unødvendig støy. Denne delen er et unntak og skal brukes med omhu. Hvis du vil ha mer utfyllende om alt-tekst, se artikkelen: Universell utforming er likestilt med design og kode.

Uten en plan, kommer du ingen vei Lag en plan. Den trenger ikke være stor, men du må ha en. Da er det enklere å holde den berømte røde tråden. Se gjerne for deg de du skal skrive for. Det kan være lurt å se for seg en person fra målgruppen din. Her er det viktig å være konsekvent, og hvis du skal skrive om fire temaer, vil jeg anbefale å gjøre følgende: Lag en persona på bakgrunn av researchen du gjorde før du begynte å skrive.

Tungt å produsere tekst? Syns du i likhet med meg at det er tungt å produsere tekst? Det finns hjelp uten å måtte søke på hjelpemidler. Når jeg har skrevet denne teksten, har jeg kladdet i​ ​Google Docs​. Jeg har brukt en applikasjon som heter​ ​Author​ for å renskrive. I Google Docs kan du avlaste med stemmestyrt løsning. Det er litt prematurt, men skal du bare skrive et par avsnitt, fungerer det helt fint. Author er en moderne publiserings applikasjon som gir deg ordforslag mens du skriver. Den gir deg også oversikt over antall ord, og ikke minst hvor lang tid det tar å lese den.


Du kan sjekke kodestruktur live. Alt dette gjør at du sparer tid, og gjør færre feil. Hvis du skal gjøre dette, bør du få hjelp til å gå gjennom teksten din i flere omganger. Tekstene i denne guiden er blitt jobbet med kontinuerlig i seks måneder før de ble ført inn i appen. Denne appen gjør det enklere å lage en ordentlig publisering selv. Det tar tid, og stilsettingen må gjøres rett, men dersom du tar deg tid til det, blir det et veldig bra resultat.

Skriv så folk forstår og tenk på lengden Bruk ord og uttrykk som folk forstår. Må du bruke sjargong, så ta deg tid til å omformulere disse til dagligtale, eller så nær du kommer. Tenk også på lengden, slik at det ikke blir for mye innhold på en gang. Derfor setter jeg punktum nå. Lykke til med teksten din!


Universell utforming er likestilt med design og kode Du kan også høre og lese samtidig ved å klikke på denne lenken

Universell utforming har kommet til etter hvert som internett har blitt tilgjengelig for alle. Likevel henger den etter, vi trenger å se på universell utforming som en likeverdig del i den kreative prosessen. ​Det er ikke alltid like lett å vite hvilke krav og hensyn som er viktige for universell utforming, men denne guiden vil gi deg informasjonen du trenger.


Design og universell utforming Ikke lag løsningen mer komplekst enn du må. Tenk less is more, og test ofte. Finn fem elementer du ønsker å teste, og gjør dette gjentatte ganger - også med folk som har spesielle behov.

Kontrast Det første mange tenker på når det kommer til design og universell utforming, er kontrast. Kontrast er viktig for at det skal være mulig å se tekst eller et element mot bakgrunnen. Skalaen for ​kontrast​ går fra 1:1 (hvit på hvit) til 21:1 (svart på hvit). Minstekravet for kontrast er AA (4.5), men prøv så godt du kan å ha den på AAA. (starter på 7.0). Da blir det også bedre for de som er veldig svaksynt. Du kan fremdeles bruke både primær og sekundærfarger, selv om du bruker 7.5. Bruk verktøyet ​Contrast​ for å sjekke.

Skjema Når det gjelder skjema, så ikke spør om mer enn det du må. Ingen liker å skrive mer enn de må. Trenger du tips, kan du kikke her: ​https://vimeo.com/259372940​. Det viktigste er å få de svarene du trenger gjennom designet.

Kode og universell utforming Struktur Når det kommer til kode, er det viktigste å huske på strukturen på HTML-dokumentet. Da tenker jeg spesielt på H1 - H6. Dette er overskrifter, og de fleste bruker fra H1 - H4. Dette


er også viktig for de som bruker skjermleser. Hvis en side ikke er kodet riktig, vil ikke de få med seg innholdet. De vil som regel hoppe over en seksjon.

Meta Description og fokusmarkør La oss snakke litt om meta description-tag og fokusmarkør. Vi tar meta description-tag først. Det er en tag som beskriver nettsiden din, og som hjelper brukeren å holde oversikt. Dette er spesielt viktig når det kommer til store komplekse nettsider. Her gjelder det samme som med alt-tekst. Skriv det siden handler om, ikke nødvendigvis det du ser. Prøv heller ikke å tenke for mye på Google, Google ser siden uansett. Tenk på nettsiden din som hjemmet ditt på nett. Hvordan ville du beskrevet hjemmet ditt med én setning? Hva er viktig for brukeren å vite om denne siden? Et eksempel kan være: “Om oss - her får du vite litt mer om våre ansatte og kontaktinformasjon du trenger for å få tak i den du ønsker”. I stedet for: “Page 3 for index html Om oss”. I min versjon får du vite hvor du er, og hva som er hensikten med nettsiden. Den andre setningen sier bare noe om hvor du er i informasjonsarkitekturen og har ingen praktisk betydning for brukeren. Fokusmarkør er til for å hjelpe folk som ikke kan bruke mus, og må benytte tastaturet for å navigere. Dette kalles også TAB-tasten. Trykk på TAB-tasten, og det dukker opp en lyseblå firkant. Denne skal ikke fjernes! Du kan godt endre fargen, men da bør den være på AAA (minimum 7.0) slik at alle kan se den. Når denne firkanten har dukket opp, skal du kunne navigere deg rundt, uten store hindringer. Her er det en stor fordel hvis du klarer å holde siden så oversiktlig som mulig. Det er én ting du skal huske etter å ha lest denne teksten: Kod det du ser i designet! Et skjema skal kodes som et skjema, og en tabell som en tabell. Det samme gjelder også alle inputfelt som skal ha en tilhørende label.


En bestilling som tar universell utforming på alvor Du kan også høre og lese samtidig ved å klikke på denne lenken

Kjære kunde - du trenger en digital løsning, eller en kartlegging av tjenesten din fra tjenestedesign. Har du tenkt på universell utforming? Min erfaring er at det ofte kan gå litt i glemmeboka. Det er forståelig, fordi det er mye du skal tenke på. Her skal du få tre tips til hva du bør sjekke:


1. Hva er det du egentlig trenger? Har du egentlig tenkt på hva du ønsker å løse? Vet du hvor skoen trykker? Ha to tanker i hodet samtidig, og ha hovedvekt på brukeren av tjenesten/løsningen - ikke nødvendigvis det du helst vil fortelle. Husk på uttrykket: “Less is more”. “Less is more” i denne sammenhengen er å ikke gape over alt på en gang. Dette gjelder både antall funksjoner og i konseptet, eller kartleggingen av tjenesten. Del det gjerne opp i delmål for å få kontroll over hver funksjon eller kontaktpunkt når vi snakker om tjenestedesign. Fem og fem er en fin tommelfingerregel.

​ ​2​.

​Design for ytterpunktene

Hvem skal du så designe for? Mitt råd er å designe for ytterpunktene. Da får du automatisk med de i midten. Ta for eksempel en billettautomat både i fysisk og digitalt format. Der må tastaturet være utformet for alle. Hvis du designer for sterkt svaksynte, får også de som ser godt,​ ​til å bruke tastaturet. De fleste får til å bruke et tastatur, men syns ofte det er irriterende å bruke. Noen får faktisk ikke til å bruke det, selv om de vil. Så hvis du designer for dem, får du brukervennlighet på kjøpet. Et eksempel der det er tilfellet, er store knapper for de som blant annet sliter med motoriske vansker. Store knapper er også greit hvis du må bruke votter på en kald dag. Sørg derfor for at du har ​minimum AA (4.5) på kontrast. Et annet eksempel er å få tekster på nettsider innlest. Det er et stort steg for brukervennligheten for de som er avhengig av ​VoiceOver​. Det er dessuten hyggelig for alle å bli lest for. Det tar litt tid, men det behøver ikke være dyrt hvis du gjør det selv. Se nettressurser for hvordan du kan gjøre dette. Da får alle en god brukeropplevelse.


3. Bruk ressurser på testing Sett av tid til å teste og teste igjen, med alle grupper som er aktuelle for ditt prosjekt. Sett av ressurser i budsjettet. Det er en god investering som vil gi verdi tilbake til alle som skal bruke løsningen. Trenger du hjelp? Da er jeg her for å hjelpe deg. Jeg ønsker deg lykke til!


Ressursliste Bøker: Skriv sü det selger! 3.utgave av Christine Calvert Web og universell utforming av Morten Tollefsen Gode dokumenter av Morten Tollefsen Universell utforming av IKT systemer av Frode Eika Sandnes Universell utforming - Verdigrunnlag, kunnskap og praksis av Inger Marie Lid

Nett: Bokressurser: Universell utforming av IKT systemer av Frode Eika Sandnes https://nettressurser.no/universell_utforming/Lenker/Kap.-1-Brukergrensesnitt-og-unive rsell-utforming https://nettressurser.no/universell_utforming/Lenker/Kap.-3-Visuell-kommunikasjon https://nettressurser.no/universell_utforming/Lenker/Kap.-4-Lyd https://nettressurser.no/universell_utforming/Lenker/Kap.-11-Brukertesting Web og universell utforming av Morten Tollefsen https://eksempelsamling.medialt.no/klart-sprak/ https://eksempelsamling.medialt.no/hvilken-skrifttype-fungerer-best/ https://eksempelsamling.medialt.no/kognisjon-pa-web/


Å spille inn med egen stemme: http://blogg.ingeborgtandejohnsen.no/a-spille-inn-med-egen-stemme/

Verktøy: Kontrast: https://usecontrast.com​/ https://contrast-ratio.com​/ Test: https://wave.webaim.org​/ http://www.chromevox.com​/ https://help.apple.com/voiceover/mac/10.14/ Andre ressurser: https://www.apple.com/no/accessibility/ https://www.smartja.no/ios/syn/


Profile for Ingeborg Tande Johnsen

EasyAll  

En praktisk miniguide i universell utforming med fokus på din kreative hverdag. Skrevet av Ingeborg Tande Johnsen. Nøkkelord: Universell utf...

EasyAll  

En praktisk miniguide i universell utforming med fokus på din kreative hverdag. Skrevet av Ingeborg Tande Johnsen. Nøkkelord: Universell utf...