SlideShare a Scribd company logo
1 of 100
Lead Interaction designer 
Senior Frontendutvikler
Delta i konkurransen om en 
WCAG 2.0 gjennomgang av 
ditt nettsted!
barnevogn 
På krykker 
punktert sykkel 
Rullestol
Du løser ikke 
problemet ved kun å 
følge loven.
Universell utforming er 
ikke en digital 
rullestolrampe på 
baksiden av Nettstedet ditt!
5 millioner
• 
• 
• 
•
vs
• 
•
• 
•
• 
• 
• 
•
• 
• 
•
• 
• 
• 
• 
•
• 
• 
• 
•
Takk for oss
Husk! 
Delta i konkurransen om en 
WCAG 2.0 gjennomgang av 
ditt nettsted!

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Frokostseminar: Universell utforming - fra tvangstrøye til mulighet

Editor's Notes

  1. Velkommen til vårt frokostseminar om Universell utforming med undertittel: Fra tvangstrøye til mulighet. Veldig hyggelig at så mange kunne komme til dette som i hvert vi synes er veldig viktig. Men hvem er så vi?
  2. Mitt navn er Per August Krämer og jeg er Lead Interaksjonsdesigner og fagansvarlig for interaksjonsdesignerne her på huset. Jeg har jobbet i Creuna i snart 5 års. Jeg er så heldig at jeg får jobbe med kunder som Stortinget, utdanningsdirektoratet, Skatteetaten, Altinn, Norges Bank og Storebrand – Offentlige nettsteder som lenge har fokuserer på universell utforming. Med meg så har jeg vår flinkeste front-ender: Mitt navn er Jesper Allermand og jeg er senior frontend-utvikler her i butikken. Ansvarlig for frontend-utvikling for de fleste av våre kunder innen offentlig sektor de seneste 5 år – mange av de samme som Per, bl.a. Skatteetaten, Stortinget, Utdanningsdirektoratet. Det der bilde med den blå hatten er tatt på Blue Beanie Day – enn dag i året feires eksisterende nettstandarder, som f.eks. WCAG ... med en blå hatt på hodet.
  3. Før vi begynner så vil jeg si at alle dere som har møtt opp i dag vil få muligheten til å vinne en WCAG 2.0 gjennomgang av nettstedet ditt. Så før dere drar fra oss og forhåpentligvis da med et ønske om faktisk å gjøre noe med dette så legg igjen kortet ditt eller skriv navn og kontaktinformasjon på en lapp så vil vi trekke en heldig vinner.
  4. I dette frokostseminaret om Universell utforming så kommer vi til å snakke om jeg opplever som den store misforståelsen rundt universell utforming. Fordi ja – det er en stor misforståelse som dominerer debatten og fokuset som gjør det utfordrende å lage gode tjenester. Vi kommer ikke unna å se på hvilke krav som gjelder og ikke minst hvorfor du skal følge de. Og så har vi noen gode råd til hvordan du skal komme i gang – fordi det er faktisk ikke så vanskelig. Still gjerne spørsmål underveis hvis noe er uklart– men det er fint hvis vi kan ta de store spørsmålene til slutt. Ellers er det dessverre lett at Jesper og jeg kommer helt ut av det. Nødutganger er til høyre og venstre - mens toaletter er inn til venstre for meg (høyre for dere). Da håper jeg alle har fått seg noe å drikke og noe å spise fordi nå setter vi i gang!
  5. Universell utforming. Når jeg sier Universell utforming begynner som oftest designerne å rive seg i håret fordi de tror man nå må lage understreking på alt som er klikkbart og at hele fargepaletten snevres inn til et fåtall av luminanskontrastvennlige farger, frontenderne gruer seg fordi de må tastaturnavigere seg gjennom uhorvelige mengder med menylenker samt legge inn «hopp til» lenker og kunden grøsser fordi timene løper uten at man får igjen noe som helst bortsett fra masse skjult funksjonalitet og ekstra html & css kode!
  6. Media har også plukket opp dette og før sommeren raste en debatt i bl.a Aftenposten. Det var snakk om offentlig tvang, om små uskyldige idrettsklubbers som med sine uskyldige wordpress nettsider nå måtte ut med uhorvelige summer for at en blind person skal se når neste trening er, offentlig sløsing av skattepenger, streng straff mot de som ikke følger opp og at så å si alle nettsider blir 30-50% dyrere – uten å nevne så mye som en eneste fordel. Uff og huff.
  7. I følge Difi er målet med Universell utformede løsninger at de skal være tilgjengelige for alle brukere uavhengig av funksjonsevne.
  8. Jesper og jeg har jobbet med universell utforming i snart 5 år. Og i starten så var Universell utforming noen Difi forvaltet gjennom Kvalitetsvurderingen - hvor resultatene ble presentert på den årlige kvalitetskonferansen. Kvaliteten på et nettsted ble og for så vidt blir vurder i forhold til en rekke med for meg tilsynelatende tilfeldig utvalgte kriterier og man får da poeng i forhold til hvor flinke man har vært på å innfri Difi sine krav. (klikk) Vi satt oss ned med Excel-ark og sjekklister for å oppnå best mulig score. Og på toppen av kransekaka stod de 6 stjernene! Vi gikk slavisk gjennom listene – la inn korrekte hopp-til lenker, sørget for at alle bilder hadde meta-tags, vi la inn tekst-til-tale funksjonalitet og brukte javscript for å forstørre tekstene for brukeren. Vel og bra. De offentlige og kommunale nettstedene som ble vurdert var fornøyde – mens resten av Norge skjønte overhode ikke hva dette var for noe og ingen forstod hvorfor de skulle tenke på noe tilsvarende.
  9. Men Universell utforming handler ikke om fancy rullestoler.
  10. Det handler om å lage noe som gir økt verdi for alle. Det handler om denne fysiske trappen som lar en rullestolbruker komme seg opp og ned på samme måte som oss som går. Men det handler også om det å lage en trapp hvor: Et Budfirma En syklist En barnevogn gamle med rullatorer Paradis for skatere/bmx’ere Eller små barn kan bruk trappen på akkurat samme måte som oss vanlig gående. .
  11. Det handler om at Ruter sine gamle trikker mot bl.a Kjellsås er nesten utilgjengelige for rullestolbrukere. Men det handler minst like mye om at min venn som akkurat har fått tvillinger med sin tvillingvogn ikke kommer seg inn på trikken hverken med eller uten hjelp. Det samme gjelder for: en som har brukket beinet og må gå på krykker. en student som har handlet inn masse på IKEA og ikke har råd til drosje. Eller meg som liker å sykle i marka men må etter en punktering ta sykkelen med meg hjem, Ruter sine gamle trikker har ikke plass. Hverken til rullestolbrukeren, til meg, min venn med tvillingvong og ganske mange andre. Innen vår fysiske verden har vi lenge vært vant til rullestolramper, forskrifter om å kunne snu seg med rullestol ditt nye bad, leiligheter uten dørkarmer og så videre. Det er alle behov som vi til en viss grad kan sette oss inn i, aksepterer og forstår.
  12. I den digitale sfære opplever i hvert fall jeg det som om man lever på 60-tallet – Dagens IKT løsninger har akkurat de samme utfordringene som Ruter sine gamle trikker. Senest i forrige uke kom jeg over denne høyrekolonnen på et nettsted: Dette vil jeg anta er kjerneinformasjon for denne organisasjonen. Det er den eneste lenken jeg fant til nettbutikken deres, informasjon om årsmøte, medlemskontigent og en kampanje. Alt dette er bilder. Bilder uten forklarende tekst. Til og med lenketitlene var uforståelige. så er det komplett umulig for meg å google eller søke intern på nettsiden etter nettbutikken dere. Jeg kan ikke dele dette i på en fornuftig måte i sosiale medier – eller kopiere / lime inn dette forståelig i en epostklient.
  13. Heldigvis har vi nå fått en lov som skal hjelpe oss mot dette. Den heter diskriminerings og tilgjengelighetsloven og trådde i kraft 1.juli 2014 – jeg skulle ønske den het: «Lag ting som funker for alle – Loven»
  14. Men loven handler fortsatt ikke om HTML/CSS. Den handler ikke om kode. Den går ikke ut på at det er utvikleren din gjennom sine «hopp-til» lenkene eller designeren med sin understreking av lenker i løpende tekst som gjør nettsidene dine bedre. Loven er kun hygienefaktorer / minimumskriterier – som jeg mener alle nettsteder skal og bør følge.
  15. Fordi – Du løser ikke problemene kun ved å følge loven. På sammen måte som Claire ikke fikk løst sin problem da hun ba kommunen om en rulletolrampe til datteren sin og endte opp med dette monsteret på utsiden av huset – en rullestolrampe som følger alle krav og retningslinjer – men som ikke akkurat hjelper Clare eller datteren Katie.
  16. Arngrens er et nettsted som per i dag på ingen måte følger de lovpålagte kraven – men det er for så vidt fullt mulig å få dette til. Hovedproblemet ligger i at løsningen som en helhet ikke er god nok utformet.
  17. Man må slutt med å se på UU som en digital rullestolrampe som leder brukerne inn på baksiden av nettsiden din.
  18. Universell utforming handler om å La alle gå inn via hovedinngangen som f.eks Store Norske leksikon gjorde på sitt nettsted. Dette er en gode, enkle og forståelige siden Som mange flere av oss kan nå, forstå og bruk. Store Norske leksikon vant også Merket for god design og Design for alle-prisen – så det er fult mulig å lage pene ting som faktisk fungerer.
  19. Vi mener man må slutte å tenke på universell utforming som noe sært, fordyrende, kjedelig og for de få. (klikk) – (klikk)
  20. Fordi Målet med løsninger er at de skal være for alle.
  21. Universell utforming gir merverdi – fordi det i et overveldende flertall av tilfeller er selvfølgelige brukerbehov som blir dekket. Og dette vil høyne kvaliteten på tjenesten din – Gjennom at du får flere og mer fornøyde brukere - fordi de endelig kan nå den, forstå den og bruke den.
  22. Og hvorfor det? Det bor ca 5 millioner personer i Norge som potensielt sett kan komme til å besøke tjenesten din.
  23. 1.5 millioner som har en eller annen form for lese og skrivevansker.
  24. Vi har kategorisert disse innen følgende 6 grupper som vi nå skal gå gjennom.
  25. Hamburgermenyen vs den tradisjonelle meny
  26. Hvor ofte har vi ikke sett slike illustrasjonsbilder som viser hvordan du enkelt bare trykker med din finger på den korrekte lenken på et nettsted og alt blir bare fryd.
  27. Jeg har arvet mine store fingre fra min far som gjør det vanskelig å bruke mobiltelefoner. Min var er professor i literatur og etter innkjøp av iPhone får jeg nå tekstmelldinger som man skulle tro var sent av en 7-åring. Han gir opp på å bestille billetter via apper – rett og slett fordi fingrene hans er for store i forhold til størrelsen på knappene. Jeg har faktisk vurdert å kjøpe en slik
  28. Bortsett fra at man da har utfordringer med å ikke oppleve lyd som tiltenkt
  29. Men også for oss vanlige som ble vi nesten døve da vi så NRK sin store satsning Mammon i høst. Lyden var så dårlig at det var helt umulig å følge med i handlingen uten å lese teksten.
  30. Det er også andre situasjoner hvor jeg ikke kan bruke ørene mine: Når jeg sitter på bussen på vei hjem eller på åpent landskap på kontoret og ikke vil bruke eller har med hodetelefoner.
  31. Dette opplever jeg gang på gang på nettsider. Altså at man står og peker mot noe som ingen kan se.
  32. Fordi dette er for meg som å peke. Og det er også som å stå og peke for den absolutt viktigste nettbrukeren din
  33. Brukeren din som ikke ser hva du har tatt bilde såfremt du ikke har beskrevet det med tekst brukeren som ikke hører hva voice overen i videoen sier brukeren din som ikke finner frem til innhold du ikke har markert korrekt. Nemlig google. Finner ikke google innholdet ditt så finner ingen det. I sosiale medier som Facebook, Twitter, osv gjelder det samme.
  34. Fargeblindhet er en funksjonshemming som rammer mange. Ca 8% av den mannlige befolkningen i Norge er fargeblinde (1% blant kvinner). Det vil altså si at mange ikke ser hva dette er. Som en test som er det ikke spesielt annet man går glipp av enn (klikk) En fugl – juletre og en bil. Men på et nettsted
  35. Så blir det mer viktig.
  36. En hvilken som helst skoleelev vil ikke kunne si hva disse ikonene er.
  37. Diskriminerings og tilgjengelighetsloven gjorde seg gjeldende fra 1. juli 2014.
  38. Kort fortalt så sier den at IKT-løsninger skal være universelt utformet.
  39. For Nye løsninger så gjelder fristen fra 1. juli i år Mens det for ALLE løsninger også dine aller gamleste gjelder fra 1. januar 2021.
  40. Den gjelder for Private OG offentlig Virksomheter og organisasjoner som bruke IKT-løsninger som hovedløsning mot publikum. Og alle disse må følge krav til universell utforming. Det vil i realiteten si alle.
  41. Vi skal nå se på hva WCAG egentlig er for noe.
  42. W3C er den organisasjon som setter retningslinjer for internettet. W3C består av mange grupper som hver jobber med forskjellige områder.. WAI gruppen arbeider med at gjøre nettet tilgjengeligt for alle, og det er WAI som definerer WCAG – et sett retningslinjer som beskriver hvordan vi oppnår best mulig tilgjengelighet på nettet.
  43. Gjeldende versjon er WCAG 2.0 .. første versjon kom i 1997, nåværende i 2008 – norsk oversettelse av WCAG 2.0 ble først ferdigstilt i 2011. Difi har længe anvendt den engelske versjon av WCAG til sine kriteriesett for vurdering av offentlige nettsteder “Kvalitet på nett” Med DTL gjøres nå retningslinjene i WCAG til lovverk
  44. WCAG består av 4 hovedprinsipper og 12 underliggende retningslinjer ... Retningslinjene er støttet av testbare suksesskriterier, som kan ha et eller flere nivåer – A, AA eller AAA – der AAA er høyeste eller strengeste nivå ... Tilsammen består WCAG 2.0 av 61 suksesskriterier, men bare 35 av disse er omfattet av forskriften til DTL-loven og de er alle på nivå A og AA. De strengeste krav er altså ikke med i forskriften. Vi vil nå ta dere gjennom de 4 hovedprinsipper. Det blir ikke en lineær gjennomgang av alle retningslinjer og suksesskriterier, men forklaring med eksempler på god og dårlig praksis innen hver av prinsipperne.
  45. Vi vil nå ta dere gjennom de 4 hovedprinsipper. Det blir ikke en lineær gjennomgang av alle retningslinjer og suksesskriterier, men forklaring med eksempler på god og dårlig praksis innen hver av prinsipperne ... I følgende kommer det noen begreper, som noen av dere kanskje ikke er kjent med – så her kommer lidt avklaring på forhånd ...
  46. En leselist er en enhet man kopler til pc’en som oversetter tekst til blindeskrift. Leselist brukes ofte sammen med en skjermleser ... En skjermleser er programvare som kan lese opp det som skjer på skjermen. De vanligste skjermlesere i Norge er JAWS og Window Eyes. Om noen har lyst å prøve en skjermleser, så se om din PC kanskje har enn sån. OSX som brukes på Mac og iOS på iPhone har begge programmet VoiceOver innbygd ... Talesyntese er teknologi til å lese opp tekst med menneskelig tale.
  47. Første hovedprinsipp hetter Mulig å oppfatte Vi brukere har vidt forskjellige behov, fordi våre sanser – syn, hørelse, motorikk og oppfattelsesevne – fungerer mer eller mindre bra. Det er viktig at informasjon presenteres på måter som kan oppfattes med flere sanser og dermed av flere brukere.
  48. For bilder og annet ikke-tekstlig innhold må det gis tekstalternativer, slik at disse kan konverteres til formater som brukerne har behov for – f.eks blindeskrift eller tale ... Alternativ tekst er viktig, ikke minst fordi de absolutt mest aktive brukere på nettet trenger den – det er Google og andre søkemaskiner ... Både Google og skjermlesere vil lese bildet slik – og Google vil i tillegg indeksere bildet ... så man finner frem til det når man søker på Barn leker på stranden.
  49. Og det samme gjeller for video – det må være et alternativ. Dette kan være teksting i videoen, transkripsjon av videoen ... F.eks. i form av en lenke til en side som formidler informasjon fra videoen ...
  50. Nettsteder med mye informasjon og bred struktur kan ofte virke lidt rotete – i sær når man skal lese en lang komplisert tekst. Navigasjon og andre globale elementer kan ta opp mye plass og oppmerksomhet ... På Utdanningsdirektoratet lagde vi derfor en alternativ presentasjonsform, en “lesevennlig visning” ... I denne visning er alt irrelevant på siden kuttet bort, slik at man får full fokus på det vesentlige, egentlige innhold ... I tillegg la vi til funksjonalitet til at justere bl.a. tekst og farger slik at det blir enklere at tygge seg gjennom i de lange tekster.
  51. Det er viktig at innhold presenteres klart og tydelig, og brukere må kunne bevege seg rundt – helst uten å tenke over det. Som Per sa tidligere er farger noe man ofte bommer på. Eksemplet her er fra Wikipedia – de fleste har nok ikke problemer med at se lenkene, men ... for enn med dårlig fargesyn er lenker så godt som usynlige ... I løpende tekst må man ha understrek på lenker.. eller en bakgrunnsfarge, eller piler, eller noe annet – det væsentlige er at ALLE kan oppfatte intuitivt at her kommer en lenke.
  52. Forskriften sier at “Det må være mulig at stoppe lyd som starter automatisk og varer mer end 3 sekunder”. Dette gjelder selvfølgelig alle tidsbaserte medier der det kan være lyd, altså både lyd og video. Men som Per også sa tidligere kan det være veldig uhensiktsmessig om man f.eks. sitter på bussen med bare 3 sekunder lyd. Vi anbefaler derfor ikke at lyd begynner før brukeren har valgt å starte den.
  53. Personlig synes jeg ofte at tekst er for småt på nettet og DET har WCAG heldigvis full forståelse for .. Forskriften sier nemlig at: Det må være mulig at forstørre tekst opp til minst 200% uten bruk av kompenserende teknologi og uten at innhold eller funksjonalitet går tapt ... Alle moderne nettlesere har innbygd zoom-funksjon, men mange vet ikke om det. Vi viser gjerne hvordan man kan bruke denne funksjon – på alle nettsteder vel å merke..
  54. Men, om man zoom’er inn til 200 eller 300% – da mister man innhold og det er ikke lov ifølge WCAG og forskriften – Det legger seg utenfor skjermen til høyre ...
  55. Her er samme danske nettavis lagd med responsive prinsipper – og det er en STOR fordel hva angår tekststørrelse, fordi det legges til rette for at innhold skal kunne vises på alle skjermstørrelser – og det er presiss hva som skjer når man forstørrer innhold i en nettleser – innholdet blir større, svarende til at skjermen blir mindre..
  56. På mobil enheter er det lidt andre utfordringer for da har vi ikke zoom som i desktop nettleserne. Pinch eksisterer riktignok ... men det svarer til zoom uten responsivt layout i en desktop nettleser – innholdet forsvinner igjen og da blir det vanskelig å lese ...
  57. På politiken.dk (som er en annen dansk nettavis liksom den forrige) har de skjønt dette med tekstforstørring – snur jeg mobilen ... Tada.. Nå kan jeg lese avisen min! Dette er en enkel måte å oppnå tekstforstørring på mobiler og det kan lages enkelt med CSS..
  58. Note om pinch: På mange nettsteder har man tatt bort muligheten for å pinche (eller zoome inn). Det er veldig dumt, for det kan være til stor hjelp for voksne menn med store fingre, såvel som for alle andre om lenker eller knapper ligger for tett.
  59. Mulig å betjene hetter neste hovedprinsipp Det handler om at informasjon og brukergrensesnitt må presenteres på måter som alle har mulighet for å bruke. Navigasjon, søkefunksjon, skjemaer, osv osv – vanlige ting man gjør på et nettsted. Ellers får du ikke solgt varen på din nettbutikk – eller du for en frustrert bruker i telefonen, fordi informasjon var u-tilgjengelig for denne person.
  60. En ganske stor gruppe brukere har ikke mulighet for at navigere med en mus. Det gjelder f.eks blinde og svaktsynte, og folk med motoriske utfordringer.. For disse brukere er det helt væsentlig at de kan komme seg rundt på ditt nettsted ved hjelp av tastatur alene ...
  61. Flyselskapet Four Seasons lanserte i 2012 et nytt nettsted, som utmerket seg ved at være komplett umulig at bruke med tastatur alene ... Både navigasjon ... og reservasjon kommer man seg ikke til uten bruk av en mus. Det nye nettsted kostet Four Seasons ... 18 millioner $ – Men tilgjengelighet med tastatur var åpenbart ikke på budsjettet..
  62. For tastatur-navigasjon er følgende viktig å tenke på; Hopp-til lenker (nevnt noen ganger) – de skal bare være tilgjengelig med tastatur-navigering. Redskap for at skippe over globale elementer og komme rett til saken. Dernæst er Synlig fokus på det aktive element og en naturlig fokusrekkefølge veldig viktig. Ellers vet tastatur-brukeren ikke hvor han er på siden. Megamenyer har jo blitt ganske alminnelige og veldig ofte er det problemer med tastatur-navigering på disse.. Typiske problemer er at man 1 ikke får åpnet undermenyer, men går rett til neste punkt 2 eller at en undermeny åpnes ved fokus på et punkt i menyen og at det blir en masse unødig tastatur-klikking for at komme seg videre. Vår erfaring er at det beste resultat oppnås ved å gjøre navigasjon med mus og tastatur så lik som mulig. Dvs. at en undermeny ikke bør åpnes på mouseover, men på klikk, svarende til et klikk på tastaturet.
  63. Du må gi brukerne dine nok tid til å lese og bruke innhold. Det vanligste eksempel på at man ikke har nok tid er karuseller. Spesielt karuseller som har både bilder og tekst. Her er et eksempel på dette fra NRK sine sider for nett-TV ... Jeg mener jo at dette går for fort – jeg har ikke tid til både at se bildet OG lese teksten – og det er ikke mulig å stoppe eller pause karusellen. I tillegg, om jeg vil tilbake til et bilde har jeg bare de små sirkler å forholde seg til ... Jeg ville ønsket at de –som på denne karusell– hadde lagt til et par piler i hver side.. Her er det god tid til å se på illustrasjoner og lese lenketekster – og viktigst – Ingen auto-start .. JEG har full kontroll over når karusellen skal starte og når jeg vil bla frem og tilbake..
  64. Det 3. prinsippet hetter Forståelig og det handler om forutsigbarhet, språk og god hjelpefunksjonalitet. Om brukerne ikke skjønner hvordan ditt nettsted skal brukes eller ikke skjønner informasjonen de finner – da er det uten verdi. Dette prinsippet handler en del om riktig koding, men i dag fokuserer vi på prinsippene ...
  65. Dette skjermbilde opplevde jeg forleden, da jeg ønsket å justere innstillinger mine til en tjeneste. Jeg satt og stirret på de ON-OFF knappene i laaang tid ... Rekk opp hånden de som mener den er "on" Rekk opp hånden de som mener den er "off” Jeg kom frem til at nok den mørke (altså OFF) som var aktiv.. Uansett, det spiller ikke noen rolle hvilen som er aktiv – mitt poeng er at – Man må sørge for at websider og komponenter fungerer på forutsigbare måter .. Ikke gjør noe som brukere dine ikke forventer. Dette kunne ha vært gjort så enkelt ... Vi vil jo gjerne finne opp noe nytt, kult og lekkert, selvfølgelig, det må vi – men vi skal gjøre det innen for logiske rammer for brukervennlighet og alldri gamble med det forutsigbare..
  66. Det er din skyld hvis brukeren gjør feil.. Du skal hjelpe dine brukere så mye du kan, slik at de unngår å lage feil og kan rette opp feil de eventuelt gjør.. Utfyllingsskjema er det mest sensitive i brukergrensesnitt på nett: For det første er brukere forsiktige med å oppgi personlig data, så ikke krev mer and nødvendig For det andre – det er utrolig lett at gjøre noe feil i et skjema .. så hjelp brukeren igjennom det UTEN å feile Og for det tredje – når de gjør noe feil – og det gjør de – vis dem at det er ok – fortel hva de gjør feil og la dem rette opp feilen ...
  67. Den absolutt beste brukeropplevelse jeg har hatt med skjemautfylling har vært på Mailchimp.com – en tjeneste for nyhetsbrev. De har mye go hjelpe-funksjonalitet, som her – klikk for at se passordet ... Dette burde egentlig ha vært standard funksjonalitet – spesielt på mobil hvor det er ganske enkelt å skjule skjermen når man skriver ... Og gjør du noe feil på Mailchimp, så tar de gjerne skylden på seg – unnskylder nesten at de krever lidt mer av enn og viser taknemlighet på en morsom måte når man har kommet godt gjennom. Og da får man jo bare lyst til å skrive enda et nyhetsbrev.
  68. Det siste av de 4 prinsipper hetter Robust og minner oss i al enkelhett om at vi skal bruke gjeldende webstandarder ...
  69. Koden vi skriver må validere slik at nettlesere og kompenserende teknologi kan tolke den og presentere informasjonen vår på nye måter.
  70. Nå har vi vært gjennom de 4 hovedprinsipper og jeg håper at dere har fått lidt mer innblikk i hva WCAG er og hvilke prinsipper det bygger på ... Alle retningslinjer og suksesskriterier er beskrevet i detaljer på uu.difi.no
  71. Alle retningslinjer og suksesskriterier er beskrevet i detaljer på uu.difi.no
  72. Vi vil nå
  73. Skift holdning – Det er det viktigste. Slutt å se på det som fysiske eller digitale rullestolramper. Universell utforming er ikke noe man gjør for de få og sære – det er generelle brukerbehov. Du får høyere kvalitet på tjenesten din og mer fornøyde brukere.
  74. Når du har laget noe still deg noen enkle spørsmål:
  75. Jeg kan ikke understreke dette mange nok ganger. Lag enkle løsninger. Det er innlysende at det er færre ting som kan gå galt med enkle løsninger kontra kompliserte. Så sørg for å gjøre det du lager så enkelt som overhode mulig.
  76. Fjern musen – naviger med tastatur Søk etter informasjon du vet du har på siden din – via google og via søkemotoren din. Post innhold fra sidene dine i sosiale medier og se hvordan det fungerer. Sjekk overskrifter og lenker. Gå gjennom WCAG listen. Det er ikke så mange punkter.
  77. La alle nå – forstå og bruke løsningen din! lag gode løsninger – punktum!
  78. Før vi begynner så vil jeg si at alle dere som har møtt opp i dag vil få muligheten til å vinne en gjennomgang WCAg 2.0 gjennomgang av nettstedet ditt. Så før dere drar fra oss og forhåpentligvis da med et ønske om faktisk å gjøre noe med dette så legg igjen kortet ditt eller skriv navn og kontaktinformasjon på en lapp så vil vi trekke en heldig vinner.