UNIVERSELL UTFORMING AV IKT

Presentasjon om: "UNIVERSELL UTFORMING AV IKT"— Utskrift av presentasjonen:

1 UNIVERSELL UTFORMING AV IKT
Først vil eg seie tusen takk for at eg fekk komme. Mitt namn er Geir Sindre Fossøy og jobbar i tilsyn for uu av ikt i difi. I dag skal vi sjå litt på nokre praktiske sider ved å jobbe med uu når ein produsere innhald på nett og i dokument. Geir Sindre Fossøy Tilsyn for universell utforming av IKT Nasjonal konferanse om inkluderande læringsmiljø 17. oktober Trondheim

2 Tilgjengeleg innhald Bra design God kode
Universell utforming er eit samspel av fleire element. For at ein nettstad skal være universelt utforma treng ein at cms eller sjølve nettstaden er godt godt koda (grunnmuren), at den har eit bra design, og at ein må gjere ein løpande innsats for å sørge for at nytt innhald som blir produsert er universelt utforma. I dag skal vi sjå mest på det siste, nemlig å lage tilgjenglig innhald. God kode

3 1 Teksting av video

4 Video Video: Tekst videoane du legg ut. Hugs det. Bra for både dei som er høyrselshemma eller viss du sit ein palss du ikkje vil forstyrre dei andre rundt deg, då kan du følgje med på videoen og sjå tekstinga og få med innhaldet. Eller om det er mykje støy rundt deg på bussen eller toget. Bruk ein videospelar som viser teksting av filmen din, og publiser utskrift av teksten under filmen.

5 La oss sjå på på alttekst på bilder.
Hugs å tekste video

6 Teksting Open teksting Brent inn i videoen. Let seg ikkje skjule.
Kan spelast av i alle videospelar. Passar best til PowerPoint Lukka teksting Koda inn som tekst. Krev at videoavspelaren kan spele den av. Mogeleg å endre utsjånad. Passar best til nettpublisering

7 Korleis tekste?

8 Så korleis tekste? Slik ser for eksempel verktøyet for å tekst i YouTube ut.

9 Video Video: Tekst videoane du legg ut. Hugs det. Bra for både dei som er høyrselshemma eller viss du sit ein palss du ikkje vil forstyrre dei andre rundt deg, då kan du følgje med på videoen og sjå tekstinga og få med innhaldet. Eller om det er mykje støy rundt deg på bussen eller toget. Bruk ein videospelar som viser teksting av filmen din, og publiser utskrift av teksten under filmen.

10 Tekstalternativ Tekstalternativ
Dersom du ikkje har mulighet kan du bruke manuset og lage eit tekstalternativ

11 2 Kontrast

12

13 Stor eller liten tekst? Minst 3,0:1 Er teksten minst Ja
19px feit eller 24px vanleg? Ja Nei Minst 4,5:1 Det er ulike krav for stor og liten tekst. Grensa for stor tekst er i WCAG 2.0 sett til 19px feit eller 24px vanleg og større. Då kan teksten ha kontrast heilt ned i 3,0:1. Er teksten mindre enn det må kontrasten minst være 4,5:1. Vi anbefaller Stor eller liten tekst?

14 Gratis verktøy

15 Video Video: Tekst videoane du legg ut. Hugs det. Bra for både dei som er høyrselshemma eller viss du sit ein palss du ikkje vil forstyrre dei andre rundt deg, då kan du følgje med på videoen og sjå tekstinga og få med innhaldet. Eller om det er mykje støy rundt deg på bussen eller toget. Bruk ein videospelar som viser teksting av filmen din, og publiser utskrift av teksten under filmen.

16 3 Bruk av fargar

17

18

19 Plassering av ledetekst

20 Bruk av ulike mønster

21 4 Alternativ tekst

22 Video Video: Tekst videoane du legg ut. Hugs det. Bra for både dei som er høyrselshemma eller viss du sit ein palss du ikkje vil forstyrre dei andre rundt deg, då kan du følgje med på videoen og sjå tekstinga og få med innhaldet. Eller om det er mykje støy rundt deg på bussen eller toget. Bruk ein videospelar som viser teksting av filmen din, og publiser utskrift av teksten under filmen.

23 Alt = “Kran med vann” Lenka bilde vert brukt til navigasjon og da er det ekstra viktig for brukaren å vite kor bildet lenker. Her har me ein fin alt-tekst – Kran med vann – . Dette er den informasjonen du vil få om du ikkje ser bildet, men får lest opp den alternative teksten med eit hjelpemiddel. Dersom ein brukar har slått av bildevisning eller ikkje kan sjå bildene, vil den alternative teksten gi den same informasjonen. Men bildet er lenka, men kvar trur de eg kjem viss eg følgjer lenkja?

24 Husk å gi lenkede bilder en alt-tekst som sier noe om lenkemålet
I dette døme gjekk lenkja til ei side med oversikt over vannavstenging i kommunen. Som me ser er riktig alt-teksten heilt avgjerande for at brukarar som ikkje ser bilde også skal få med seg denne viktige informasjonen. Legge på igjen tekst på vannavstenging på bilde Vannavstenging

25 Alt-tekst kan bakast inn i teksten
Same informasjon Her ser vi et bilde ein chaptcha saman med ein tekst som seier kva captcha er. Fordi bilde berre viser den same informasjon som allereire går fram av teksten, kan alt teksten på bilde vere tom. Alt-tekst kan bakast inn i teksten

26 Kva bør alt-teksten vere her?

27 BILETE SOM ER DEKOR Er bildet pynt? Er bildet lenka? Nei Ja
(Prikk, skillelinje, punkt eller lignende) Er bildet lenka? Neste eksempel: Er bildet lenket? Nei Neste spørsmål: Er bilde pynt? Ja, det er bare en prikk til pynt i mitt eksempel her. Da skal du ha en tom alt-tekst. Ellers blir det støy. En tom alt-tekst betyr at alt attributtet skal være der, men uten innhold mellom hermetegnene. Bilder som er ren dekor bør aller helst legges inn i CSS. Ja Tom alt-tekst (“”) eller legg bildet I CSS

28 Kva bør alt-teksten vere her?

29 ANDRE BILETE Er bildet komplekst? Er bildet pynt? Er bildet lenka? Nei
(Prikk, skillelinje, punkt eller lignende) Er bildet komplekst? (Graf, diagram eller lignende) Er bildet lenka? Alt-tekst som beskriver motivet i bildet Siste eksempelbilde: Er bilde lenket? Jeg sier nei, for å få frem poenget Er bilde pynt? Nei – det inneholder informasjon. Er bilde komplekst? Som i en graf eller diagram? Nei – ikke komplekst, men det inneholder en logo og et telefonnummer til Norsk Luftambulanse Da skal alt-teksten inneholde nettopp denne informasjonen som ligger i bildet.

30 Kva bør alt-teksten vere her?

31 KOMPLEKSE BILETE Er bildet komplekst? Er bildet pynt? Er bildet lenka?
% % % % % % % % Nei Nei Er bildet pynt? (Prikk, skillelinje, punkt eller lignende) Er bildet komplekst? (Graf, diagram eller lignende) Er bildet lenka? Nytt eksempel: Er bildet lenket? NEI Er bildet pynt? (er det meningsbærende)? NEI Er bildet komplekst (f.eks. graf eller diagram)? JA det er det. Da må vi ha først ha en alt tekst som kort beskriver motviet - Markedsandelen til ulike nettlesere, Juli 2011 i dette tilfellet. Og så må vi ha et tekstalternativ som sier det samme som bilder viser, nemlig at markedsandelen for FIREFOX er 42 %, SAFARI 3,7 % osv. Ja Alt-tekst som beskriver motivet i bildet OG en tekst med detaljert informasjon om innholdet i motivet Nei Nei Nei Alt-tekst som beskriver motivet OG en tekst med detaljert informasjon om innholdet i motivet Er bildet pynt? (Prikk, skillelinje, punkt eller lignende) Er bildet komplekst? (Graf, diagram eller lignende) Er bildet lenka?

32 Tabell som alternativ tekst
% % % % % % % % Same informasjon Tabell som alternativ tekst

33

34

35 NOTE: Unless you have a complex chart or table, you will usually want to enter text in just the Description box. When you have complex content to describe, then filling in the Title field is useful so reading the full description is not necessary unless desired.

36 5 Verktøy

37

38

39 TA KURSET PÅ NETT! uu.difi.no/elæring
Treng du repetisjon? Ta e-læringskurset vår. Lansert no i haust. Gratis og ope for alle. Få alle i verksemda di til å ta det. Kurset er delt inn i tema og ta heile eller deler av det, og bruk det som oppslagsverk  . Merk: Sette inn bilder frå kurs når det er klart  Vise promofilmen til kurset, er 46 sek lang. Evt klippe den ned. TA KURSET PÅ NETT! uu.difi.no/elæring

40 KONTAKT Kontakt oss uu.difi.no 02148 @uudifi

41