Introduksjon til universell utformning. Andreas Cederbom andreas.cederbom@funkanu.se

Introduksjon til universell utformning Andreas Cederbom andreas.cederbom@funkanu.se

Bakgrunn

Universell utformning på nettet Universell utforming / Tilgjengelighet Internasjonal standard Teknikk & menneskelig faktor Kvalitet

Tilgjengelighet eller Universell Utformning

Hvem berøres? Tilfeldige problemer Arbeidsskader/slitasjeskader Norsk som andre språk Teknikkuvante Eldre Personer med funksjonsnedsetting

IT har skapt økte muligheter Kompenserer for manglende evner Hjelper personer med funksjonsnedsetting til å: Rasjonalisere hverdagen Arbeide & studere Være mer delaktige

Hva kan man ha problemer med? Lese forstå Se Skrive Høre Snakke Styre datamaskinen Elektromagnetiske felter Huske Funksjonsnedsetting, arbeidsskade, eldre, uvante, Norsk som andre språk, stressede, trøtte

Hvor mange? Synshemmede: ca 130 000 Fargeblinde: ca 5% av befolkningen Hørselshemmede: ca 600 000 Muskel- og skjelettsykdom: ca 24% Dyslektikere: ca 500 000 Ca 30 prosent har lese- og/eller skrivevansker Disse tallene innkluderer ikke alle: personer med lærevansker personer med påførte hjerneskader neuropsykiatriske / neuropsykologiske problemer Kilde: IKT for alle hvordan er situasjonen i dag? Norsk Regnesentral

Tre tilgjengelighetsområder Språk Teknikk Padagogikk

Hva er teknisk tilgjengelighet? Følg tekniske standarder Bygg layout uten tabeller Benytt riktig kode for overskrifter Gjør det mulig å navigere uavhengig av om du benytter mus eller tastatur Bruk nok kontraster Eksempler: Eksempler: dårlig grunnkonstruksjon Eksempler: Går ikke an å navigere med tastatur Eksempler: Flash Alt-texter

Hva er pedagogisk tilgjengelighet? Menykonsept Logiske løsninger Konsekvens i gjennomføringen Tydlighet Mulig å få overblikk Igjenkjenning Eksempler: Eksempler: Lenker Eksempler: Inkonsekvent navigering Eksempler: Ajax, søkehjelp Eksempler: Navigasjon

Hva er språklig tilgjengelighet? Skriv så enkelt som mulig Forklar vanskelige ord Bruk bilder, filmer, eksempler Strukturere teksten Bruk ingresser Unngå forkortninger Bruk du-tiltale

Hvorfor?

Internasjonalt FN: Konvensjonen om rettigheter for mennesker med funksjonsnedsetting Artikkel 9: tilgjengelighet Artikkel 21: Tilgang til informasjon

Hva sier loven i Norge Offentlig og privat sektor System for allmennheten og interne system Nye systemer etter 1. juli 2011 (2013) Eksisterende systemer 1. januar 2021 Den Norske loven

Kostnad for å formidle informasjon 1 500 kr 1 kr 50 kr 250 kr 350 kr

Hvordan?

De internasjonale retningslinjene WCAG Html Xml Css ATAG W3C (World Wide Web Consortium) www.w3.org WAI (Web Accessibility Initiative) www.w3.org/wai WCAG (Web Content Accessibility Guidelines) www.w3.org/wai/intro/wcag.php

Eksempler, teknikkuavhengig 1.1.1 Tekstalternativ Ha alternativer i form av tekst til all ikke-tekstbasert informasjon slik at det kan konverteres til de formatene som brukeren trenger, eksempelvis stor stil, punktskrift, tale, symboler eller enklere språk. Lenke til How to meet

I html <img src= logo.jpg alt= Google />

I Flash

Tilgjengelighet krever et større grep Kommer inn på mange ulike nivåer i organisasjonen Viktig med samordning Viktig med tydlige interne retningslinjer

Tilgjengelig innehold - slik gjør du

Menyer Menyens bredde og dybde Ikke åpne dokumenter, andre nettsteder eller nye vinduer fra menyen Følg de eksisterende retningslinjene: Hva skal menyen inneholde? Hvor skal det være i menyen? Hvordan skal menyen sorteres? Eksempler: Lenk bare til egne sider i menyen Meny?

Tekst Overskrift, nivå 1 Tekst som utgjør ingress Vanlig brødtekst Overskrift, nivå 2 Mer brødtekst Overskrift, nivå 3 Mer brødtekst Eksempler: Feillagde overskrifter Eksempler

Lenker Formuler lenkene tydelig Utfyllende lenkebeskrivelser (tittel) Lenker som leder til alternative formater E-postlenker Lenker som åpner interne sider i nytt vindu Lenker som åpner eksterne nettsteder i nytt vindu Eksempler: Lenketekster

Bilder og grafiske elementer Bruk bilder Legg til Alt- tekster hvor bilder gir mening Alt-tekstens innehold Innholdsrike bilder Lenkede bilder Ikoner Tekstbilder Eksempler: Bilde av tekst

Tabeller Bruk ikke layout tabeller Tydelige tabeller Tekniske retningslinjer Merk kolonne og rad overskrifter Kopl datacellene til overskriftene Bruk ferdige designer

Farger Farger kan forsterke budskapet Farger kan forvirre Bruk ikke kun farger Kontraster er viktig

Andre formater (PDF, flash ) Bruk for å øke brukernytten Beskriv lenken som leder til andre formater Teknikkene skal brukes på tilgjengelig måte

Tilgjengelighet i PDF-filer, hva kreves? Tekst skal være tekst Overskrifter skal være riktig merket Bilder skal beskrives Lenker skal fungere Eksempler: Eksempel PDF-fil

Film og lyd Alle kan ikke se, alle kan ikke høre Komplettere det visuelle og lyden Komplettering: Tekst transkripsjon Caption / undertekst Lyd beskrivelse Eksempler: Eksempel: Lyd og tekst Eksempel: Video med lyd beskrivelser Eksempel: Teksting og oversetting

Skriv enkelt Skriv det viktigste først Skriv for en tenkt mottaker Skriv kort og enkelt Egne regler for organisasjonen

Skriv tydelig Skriv inn ordforklaringer i teksten Ikke bruk forkortelser Intern sjargong Faguttrykk

Samarbeide Organisasjonens ansikt utad Konsekvenser Besøkernes tillit Tydelige avsendere Varemerke Kvalitet

Tilgjengelighetsfunksjoner Opplesning Tegnspråk Lättläst (lettlest) Tilpasse-funksjon Eksempler: Alternative formater Tilpasse Tilpasse 2

3 avsluttende spørsmål 1. Eksiterer det et behov for å publisere denne informasjonen? 2. Hvem har nytte av teksten din? 3. Hvordan informerer vi best?

Det finnes ingen gjennomsnittsbrukere

Her slutter presentasjonen. Påfølgende bilder nås via lenker fra tidligere bilder.

Eksempel på tekst

Eksempel på lenker

Eksempel på lenker som åpner nytt nettsted uten forvarsel

Eksempel på bilder Grafiske elementer uten mening og uten alt-tekst

Eksempel på bilder

Eksempel på ikoner

Eksempel på tekstbilder

Eksempel på tabeller Layouttabeller

Eksempel på tabeller Oppmerking av tabell

Eksempel på menyer

Eksempel på farger Rød farge indikerer at noe gikk galt.

Eksempel på farger

Eksempel på alt-texter

Eksempel på farger

Tegnoversettelse Därför ska du engagera dig. Unga har stort förtroende för politiker. Men intresset för politik och viljan att engagera sig politiskt har minskat. Det visar attitydoch värderingsstudien De kallar oss unga som statliga Ungdomsstyrelsen gjort. Dessutom tyckte en majoritet av de unga att varken de själva eller andra har chans att göra sig hörda i samhället. Undersökningen bekräftade också tidigare forskning, som visar att de politiska partierna i Sverige har svårt att rekrytera nya medlemmar. Och då framför allt ungdomar. De traditionella partiernas medlemmar blir alltså både äldre och färre.

Tegnoversettelse Därför du ska engagera (aktiv). Unga grupp stort förtroende grupp politiker, Men den statlig dess Ungdomsstyrelsen grupp happ aktiv undersöka samband attityd- py värdering, broschyr heta De kallar oss unga, den visa intresset vill aktiv samband politik happ minskat, py flesta unga tyckte i samhället de själva eller andra harinte chans talaom vad tycker. Py happ förut forska visasig, här sverige dede politiska partierna svårt rekrytera nya medlemmar är först grupp ungdomar.de vanlig partier dess medlemmar nu både äldre py antal mindre. Tillbaka

Problemer med å lese Heller pc enn papir Tekster må kompletteres Hjelpemidler: Endre i operativsystemet Program som formaterer Program som leser opp Lyd Eksempler: Bilder i stedet for tekst Eksempler: ulike informasjonskanaler Eksempler: Bilder av tekst og alternativ Diagram Tekst Bilder Film

Leseevne Sverige, leseevne: Høy/svært høy leseevne: 35% Middels evne: 40% Svært lav/lav leseevne: 25% Kilde: OECD Tillbake

Problemer med å forstå Ofte også lesevansker Komuniserer med bilder Enkle og rene grensesnitt Hjelpemidler forenklede styresystemer Opplesing Kommuniserer med symboler Eksempler Bilder Tekst Film Lettlest Tillbake Eksempler: Sende e-post med symboler Eksempler: Enkel navigering med tastaturet

Problemer med å skrive Stavehjelp i funksjoner Eksempler: Skrivehjelp Skjemaer med bra innmatingskontroll Hjelpemidler Stavehjelp Eksempler Synonymer Bilder Tekst Film Ordlister Tillbake

Problemer med å se Tydelig visuell utforming Beskrivelse av grafiske objekter Konsekvente grensesnitt Hjelpemidler Tillbake forstørrelse i operativsystemet forstørrelsesprogram Skjermlesere Eksempler: Ungweb Eksempler: Dårlig teknikk Eksempler: Lenker som er vanskelig å se Eksempler: Video med audio description

Problemer med å styre PC Heller pc enn papir Store klikkeflater Tydelig tastaturnavigasjon Hjelpemidler Mus (Stabilisering, øye/hode) Tastatur (Programmerbart, OnScreen, stemmestyring) Eksempler: Liten klikkeflate Eksempler: Tydlig tabulatorfokus Eksempler: Går ikke med tastatur

Problemer med å styre PC Tillbaka

Problemer med å høre Hjelpemidler Film og lyd kompletterende materiale Eksempler: Teksting av film Eksempler: Tegnspråksfilm

Tegn oversettelse Därför ska du engagera dig. Unga har stort förtroende för politiker. Men intresset för politik och viljan att engagera sig politiskt har minskat. Det visar attitydoch värderingsstudien De kallar oss unga som statliga Ungdomsstyrelsen gjort. Dessutom tyckte en majoritet av de unga att varken de själva eller andra har chans att göra sig hörda i samhället. Undersökningen bekräftade också tidigare forskning, som visar att de politiska partierna i Sverige har svårt att rekrytera nya medlemmar. Och då framför allt ungdomar. De traditionella partiernas medlemmar blir alltså både äldre och färre.

Tegn oversettelse Därför du ska engagera (aktiv). Unga grupp stort förtroende grupp politiker, Men den statlig dess Ungdomsstyrelsen grupp happ aktiv undersöka samband attityd- py värdering, broschyr heta De kallar oss unga, den visa intresset vill aktiv samband politik happ minskat, py flesta unga tyckte i samhället de själva eller andra har inte chans tala om vad tycker. Py happ förut forska visa sig, här sverige dede politiska partierna svårt rekrytera nya medlemmar är först grupp ungdomar. De vanlig partier dess medlemmar nu både äldre py antal mindre. Tillbaka

Tale problemer Ofte multifunksjonshinder Vanskelig med alternativer Vanskelig med talesvar Elektronisk kommunikasjon en revolusjon Jag forstår ikke Hva du sier, ring igjen når du blir edru! Tillbake

Hva er pedagogisk tilgjengelighet? Tillbake