Nettsider for alle - Malin Rygg
•Descargar como PPTX, PDF•
1 recomendación•218 vistas
Gjør som Google, Facebook og Microsoft – pass på at video, bilder og tekst på nettsiden din er tilgjengelig for alle. Hvordan lager du en nettside som følger alle kravene til universell utforming? Malin Rygg fra Difi gir deg tre gode råd og viser deg Difis nye e-læringskurs om universell utforming av nettsider. Malin Rygg, leder for tilsyn for universell utforming av IKT i Difi
Recomendados
Recomendados
Más contenido relacionado
Similar a Nettsider for alle - Malin Rygg
Similar a Nettsider for alle - Malin Rygg (20)
Más de Norsk kommunikasjonsforening
Más de Norsk kommunikasjonsforening (20)
Nettsider for alle - Malin Rygg
- 1. TRE RÅD OM UNIVERSELL UTFORMING Malin Rygg Tilsyn for universell utforming av IKT Høstseminaret 27. september 2017 - Trondheim
- 4. TRE GODE RÅD
- 5. God kode
- 7. God kode Bra design Tilgjengeleg innhald
- 8. God kode
- 11. … og sjekk!
- 14. Lenka skal vere tydeleg
- 15. Sjekk kontrasten
- 21. Tilgjengeleg innhald Bra design God kode
- 23. Les mer Les mer Les mer Les mer Les mer Les mer Les mer
- 24. Løsninger som møter kravene i forskriften Det er en rekke krav til tekststruktur for å tilfredsstille loven. Avhengig av hvilket publiseringssystem som benyttes, kan kravene løses ulikt teknisk, men grunnprinsippene vil være de samme. Innholdet må struktureres med korrekt kode, og må kunne forstørres uten tap av tekst eller lesbarhet.Overskrifter Overskrifter og rett bruk av overskriftsnivåer er kanskje det mest fremtredende virkemiddelet for å gi struktur og oversiktlighet til teksten. Mange brukere, både med og uten hjelpemiddel, benytter mellomtitler for å skumlese innholdet og finne det som virker mest interessant. Uten mellomtitler blir lange tekster tunge å lese. Overskrifter kodes ved hjelp av overskriftelementene <h1> til <h6>, og disse deler opp teksten tilsvarende i kapitler og delkapitler i ulike nivåer. Sidetittel skal være h1Hovedinnholdets tittel skal være den første overskriften i koden, og skal være på nivå 1 ved hjelp av elementet <h1>. Dette gjelder også startsiden, som bør ha en synlig overskrift som tydelig formidler hvilken virksomhet brukeren har kommet til. Dette er gunstig både for søkemotoroptimalisering og for brukere med hjelpemiddel.
- 25. Husk å markere overskrifter som en overskrift
- 26. Bruk listeverktøyet til å lage lister
- 27. Løsninger som møter kravene i forskriften Det er en rekke krav til tekststruktur for å tilfredsstille loven. Avhengig av hvilket publiseringssystem som benyttes, kan kravene løses ulikt teknisk, men grunnprinsippene vil være de samme. Innholdet må struktureres med korrekt kode, og må kunne forstørres uten tap av tekst eller lesbarhet. Overskrifter Overskrifter og rett bruk av overskriftsnivåer er kanskje det mest fremtredende virkemiddelet for å gi struktur og oversiktlighet til teksten. Mange brukere, både med og uten hjelpemiddel, benytter mellomtitler for å skumlese innholdet og finne det som virker mest interessant. Uten mellomtitler blir lange tekster tunge å lese. Overskrifter kodes ved hjelp av overskriftelementene <h1> til <h6>, og disse deler opp teksten tilsvarende i kapitler og delkapitler i ulike nivåer. Sidetittel skal være h1
- 29. Tilsyn for universell utforming av IKT KLART SPRÅK! klarspråk.no
- 30. TRE RÅD OM UNIVERSIELL UTFORMING
- 31. Hugs å tekste video
- 34. Tilsyn for universell utforming av IKT
- 35. TA KURSET PÅ NETT! uu.difi.no/elæring
Notas del editor
- Først vil eg seie tusen takk for at eg fekk komme. Utruleg kjekt å vere her. Når eg står her og skal snakke til dykk som har kommunikasjon som fag, så tenkte eg i går på veg opp på dette med kommunikasjon. I sin mest umiddelbare form, er kommunikasjon den utvekslinga av informasjon som skjer mellom meg og deg, når eg kan sjå deg inn i augene og umiddelbart få inntrykk av kva du tek til deg. Forstår du meg? Men når det er teknologi mellom oss – kva betyr det?
- Definisjonen på teknologi er ein metode eller verktøy for å løyse eit problem. I kommunikasjonssamanheng så blir det ein verktøy som set deg i stand til å treffe nokon som sit langt der ute frå deg som du aldri har sett eller snakka med. Kven er han eller ho? Det fine med teknologi er at vi kan kommunisere med 5000, 50 000, 5 millionar – samtidig. MEN det er fort å tenke at mine brukarar er bankar, andre kommunar, studentar … dei kan sånn og sånn, du tenker kanskje ikkje på at nokon av dei har lesevanskar, er blinde eller har kort konsentrasjonsspenn. Eller som ein nettredaktør sa til oss ein gang: «det er ingen blinde i min kommune».
- Men ta for eksempel Stephen Hawking, verdens mest intelligente mann, han treng at du har tenkt på dette. Til sjuande og sist, kva er det det eigentleg handlar om? Det handlar om at nokon skal ta i mot det du vil sei i andre enden. Men den personen erfarar ikkje nødvendigvis verda på same måte som deg. Då er det meiningslaust om du kommuniserar på ein slik måte at den personen ikkje klarar å ta i mot. Det er her universell utforming kjem inn. Og vi i Difi er her for å hjelpe deg.
- Eg tenkte at eg ville gi dykk 3 gode råd for kva de skal tenke på når de jobbar med universell utforming. Eg vil gå gjennom dei steg for steg kva veg, og gi deg nokon av dei viktigaste knaggane for kva du kan gjere for å komme i gang i dag. Ein analogi eg ofte brukar er å tenke på nettsida di som eit hus.
- Og då bør du ha ein solid grunnmur: Ha god kode. Bør ha ein bra design. Fyllt med tilgjengeleg innhald.
- Grunnmur: Ha god kode. Bør ha ein bra design – det skal både sjå bra ut, og ha ein design som fungerar Fyllt med tilgjengeleg innhald.
- Grunnmur: Ha god kode. Bør ha ein bra design. Fyllt med tilgjengeleg innhald. Like sjølvsagt som at du kan få tak i alle tinga i huset ditt, at brukarane skal få tak i innholdet på like vilkår. Men korleis får du det til? Eg veit at dei fleste av dykk er travle, du sit med tusen oppgåver kollegaene dine pøsar på med tekstar, grafar, bilder og Du skal sørge for at det ligg på nett litt kjapt og at det ser bra ut og at det følgjer lovkravet om uu. Eg er her i dag for å hjelpe deg på veg.
- La oss starte med grunnmuren: GOD KODE
- Kode gjeld vel ikkje deg, tenker du. Det er leverandøren din. Eller utviklaren din. Men du har med kode å gjere både når du kravspekkar og når du brukar publiseringsløysinga, utan at du alltid tenker over det. Når du kravspekkar: Bygg på WCAG 2.0 (sjølvsagt) – det er minstekravet etter loven. Unngå å vise generelt til forskriften – hugs at alle krava i WCAG ikkje nødvendigvis er relevante for ditt innhald Dette ser vi ofte eksempel på. Det fører til at den som bestiller ikkje veit kva han skal ha og den som leverer seier han har levert. Ver konkret – då er det lettare å vite om du får det du har bestilt.
- Basert på det vi ser i tilsyn og våre erfaringer, så vil eg trekke fram 4 viktige punkt som du må tenke på når du spekkar: Be om responsiv design – verkar kanskje sjølvsagt – husk at innhaldet skal visast på mange flater og at mange har behov for forstørring. Set krav til navigasjon med tastatur: Alt du kan nå med mus må du kunne nå med tastaturet du må kunne sjå kvar du er. (Vi ser særleg etter fokusmarkering – det er ofte ein indikasjon på at ein har jobba med tastaturnavigasjon) Set krav til skjema: Alle skjema skal vere rett koda – her ser me mange feil! Mange får det levert av 3.partar. Dette er brukaren sin måte å interagere med deg – så pass på at det er riktig. Set krav til kodinga av språk: koding av språk må vere riktig – elles ligg t.d. engelsk tale bak norske ord. Det fungerar verken for brukarar som får teksten lest opp eller for Google.
- …og sjekk – at du har fått det du har bedt om! Alt for mange viser til at dette er noko leverandøren skal fikse – utan at dei har sjekka om det er gjort. Det er kjapt å ta enkle testar sjølv: Prøv å forstørre innholdet ditt - å sjå kva som skjer naviger med tastaturet. Bruk tab-tasten, enter, mellomrom-tast og pil-tast. Dersom dette funkar så er det ein god indikator på at koden på sida er god. Test skjemafelt og språk på sida med telefonen din. Skjermlesar høyrest kanskje ut som noko du får på hjelpemiddelsentralen, men Iphone har VoiceOVer og Android har talkBack som leser opp innhold – ta ein kjapp test med dette.
- No har du fått ei publiseringsløysing og koden er (forhåpentlegvis) på plass. Men bra kode er ikkje nok, du må ha god design!
- Det er mykje ubevisst bruk av design – eg vil gjerne at du skal vite kva du vil med designet ditt. Vi ser at mange tek det som ser kult ut når det blir presentert. Men har du tenkt på om det fungerer for dei som skal bruke sida di. Eg tenker at det er 4 ting du skal passe på når vi snakkar om god design: Tydelege lenker Kontrast God fargebruk Du må brukarteste designen!
- Lenker skal vere tydeleg. Kva er grunnen til at vi syns at lenker er så viktig? Dette er ein av dei viktigaste måtane folk kjem seg rundt på nettstaden på. Derfor må lenkene skilje seg tydeleg frå teksten. Marker ei lenke med meir enn berre farge, ellers er det vanskeleg for fargeblinde å sjå det. Skriv ut sida di i svart/Kvitt og sjå om du finn lenkene.
- Sjekk kontrasten. Det er heilt utruleg kor mykje dårleg kontrast som er ute å går. Minn designaren på at det finst krav til kontrast mellom tekst og bakgrunn. Det ser kanskje fint på retinaskjermen din – men for svaksynte eller på mobilen ute i sola er det ein annan sak.
- Test kontrasten sjølv med eit gratisverktøy, som for eksempel Colour Contrast Analyser.
- Tenk på fargebruken – sjølv om kontrasten er bra så tenk på at same farge ikkje ser lik ut for alle. Det finns mange nettsider der du simulere ulike type fargeblindheit. Det anbefalar eg – du kan få deg ein aha-opplevelse. La meg vise deg eit eksempel. Dette var noko eg gjorde – det handlar om bevisstheit.
- Dette lysarket brukte eg på eit foredrag i 2014, for å vise kor mange prosent av befolkningen som hadde nedsatt funksjonsevne. Då eg skulle vise det til ein kollega lurte han på om alle hadde nedsatt funksjonsevne. Nei, det er berre dei rosa, sa eg… Han såg dette….
- Han er fargeblind. Dette viser - bruk meir enn berre farge! Her kunne det t.d. vore skravert.
- Test sida di med forskjellige brukarar – på alle stadier av utviklinga! Støttar designet funksjonar eller brukaroppgåver? Er designet konsistent? Er folk sjølvplagarar? Vi får fortvila epostar frå folk som har brukartesta sida veka før produksjonssetting? Brukartest med ulike brukarar allereie på designstadiet. Då sparar du pengar, tid og frustrasjon. Eit godt design sparar tid for alle – anten det er eldre, folk som brukar hjelpemiddel eller den som skal kjapt inn å løyse noko på nettsida i lunsjen.
- No skal du legge ut innhald, kva no? Rett før sommaren gjorde vi ein test av nettsidene til dei politiske partia på Stortinget. Eitt av partia gjekk ut i media og sa at dei skjønte ikkje kvifor dei scora dårleg, for dei hadde jo bestilt ei nettside som var universelt utforma for to år sidan. Vi skjønnar at det er fort å tenke slik, men det kan du ikkje. Du skal jo sjølv legge inn innhald – og det må vere tilgjengelig. Dette gjeld både tekst, video og bilder.
- Fem ting du bør passe på sjølv: Lenketekst Overskrift og liste Klart språk Video Bilde Vi skal gå inn i kvart av dei…
- Lenketekstar Lag forståelege lenketekstar. I følge kravet er det nok at lenkemålet går fram av konteksten, t.d. at «referata frå kommunestyret finn du HER», (så er «HER» lenketeksten). Så vil eg likevel be om at lenkemålet framgår av sjølve lenketeksten. Og her er grunnen: Då vi var her i Trondheim i 2014, hadde vi med oss Oddvar Øyan frå Statped. Han er blind og viste oss korleis han les nettsider. Han viste oss korleis hjelpemiddel skumleste sida ved å hente opp lenkene i ei liste. Då ser det slik ut…. Derfor er det mykje betre å skrive t.d. Her finn du «kommunestyrereferata» (og så er det «kommunestyrereferata» som er lenka)
- Når det gjeld overskrifter og lister, så er det noko vi ser mange gjer feil på. For den som får teksten opplest ser det utan riktig struktur, slik ut.
- Det er ein enkel ting, men du må bruke dei funksjonane som er i publiseringsløysinga di for å strukturere teksten. Feit font er ikkje overskrift. Organiserer teksten ved hjelp av overskrifter og avsnitt i editoren. Lag overskrifter og mellomtitlar med funksjonane, h1 og h2 osv.
- Dette gjeld også lister. Tankestrek er ikkje ei punktliste. Bruk listeverktøyet når du lagar lister.
- Då blir teksten sjåande slik ut både for den som ser, og for den som brukar hjelpemiddel.
- Vi seier at universell utforming gjer sida di optimalisert for søk. Fordi ein annan som også les denne strukturen er Google. Google kallar vi ofte verdens største blinde brukar – fordi dei brukar akkurat dei same verktøya som ein skjermlesar for å finne innhald. Gøymer du innhaldet ditt for blinde – gøymer du det også for Google. Var kanskje ikkje heilt det du hadde tenkt?
- Så er det eitt råd eg kan gi som gir STOR effekt for veldig mange: Skriv enkelt og forståeleg! Gud bedre meg kor mykje kronglete språk som finns der ute. Dysleksi Norge gir råd om at du bør ha max 7 ord per setning for dei som har lese- og skrivevanskar. Og der har du ein utfordring. Treng du tips om dette – gå på klarspråk.no.
- La oss sjå ein video.
- Syns du dette var irriterande? Slik kan det opplevast for dei over 700 000 nordmenn som har hørselsnedsetting. Dette er mange fleire enn dei fleste trur. Eg snakka med Hørselshemmedes landsforbund for ca 1 månad sidan, og dei påpeikar at det er eit stort demokratisk problem at alt frå Stortingsforhandlingar, kommunestyremøter til viktige infofilmar ikkje er teksta. Derfor: Tekst videoane du legg ut! Dette syns eg personleg er ein stor fordel når eg skummar gjennom FB, t.d. og slepp å sette på lyd.
- Det ligger mange bilder på nettsidene og ikkje alle kan sjå dei. For at bilder skal vere tilgjengleg må det vere eit tekstleg alternativ som beskriv informasjon i bildet. Eg tenkte vi skulle sjå ein liten video om dette.
- No har vi sett på dei viktigaste tinga du skal tenke på når du lagar innhold. Men eg vil nemne at me får mange spørsmål om er dokument (PDF, Word osv). Dokument som skal leggast på nettsida skal følge same krav. Tenk på same måte som når du legg ut innhald på nett. Strukturer teksten Lag tekstalternativ på bilder Tenk på fargebruk og kontrast Bruk gjerne vegleiinga vår på uu.difi.no. Vanlege tekstbehandlingsprogram som Word har enkle funksjonar for å sjekke om dokumentet er lesbart og tilgjengeleg. Bruk dei!
- Vi har høyrt mykje om Facebook i dag. Med sosiale media kommuniserer du til mange på ein kjapp og effektiv måte. Men det er noko å tenke på. Ikkje alle kan bruke sosiale media. Bruk fleire kanalar og ikkje legg innhald eksklusivt på Facebook. Pass på at innholdet er tilgjengeleg også her – uansett om det er tekst, bilde eller video.
- Treng du repetisjon? Eg viste ein video om bilder her i stad – denne er frå e-læringskurset vår. Kurset er lansert no i haust. Gratis og ope for alle. Få alle i verksemda di som jobbar med nett til å ta det. Kurset er delt inn i tema og ta heile eller deler av det, og bruk det som oppslagsverk .
- All veiledning ligg på våre nettsider uu.difi.no. Eller ta kontakt med tilsynet på uu@difi.no eller på telefon 02148. Eller følg oss og diskuter med oss på Twitter eller facebook på @uudifi. Takk for meg!