Denne presentasjonen er fra Metronet sitt frokostsemeinar om universell utforming, som ble holdt 22. oktober 2014.
Universell utforming handler om god design og gode brukeropplevelser som alle har glede av. På dette seminaret fikk alle som jobber med web og digitale løsninger kunnskap om hvilken rolle universell utforming spiller for en bedre brukeropplevelse på nett.
Interessert i å lære mer? Kontakt oss på post@metronet.no.
2. Dagen i dag
08:30
Velkommen til alle
Anette Grande Urhamar, Metronet
08:45
Bruk av digitale løsninger for blinde og svaksynte
Stein Erik Skotkjerra og Kristoffer Lium,
Blindeforbundet
09:15
Verktøy og sjekkliste for webredaktører
Lasse Olsen, Metronet
09:45
Pause – kaffepåfyll
10:00
SEO i Google og universell utforming
Petter El Fakiri, Metronet
10:25
Universell utforming i en designers verden
Shay Ponsonby, Metronet
3. Digitalt byrå som jobber med strategisk rådgivning, design
og utvikling av digitale løsninger.
Digitale løsninger Søkemotoroptimalisering Digital annonsering Webanalyse
7. Kort om kravet om universell utforming (uu)
➔ Diskriminerings- og tilgjengelighetsloven stiller krav om at digitale
løsninger i Norge skal være universelt utformet slik at de kan brukes av
flest mulig. Dette gjelder nettsteder og automater.
➔ Både private og offentlige virksomheter, lag og organisasjoner må følge
regelverket.
➔ For nye digitale løsninger gjelder kravet fra 1. juli 2014. For eksisterende
løsninger gjelder kravet først fra 1. januar 2021.
9. Hva oppnår vi?
➔ Færre løsninger å utvikle og holde ved like.
➔ Få eller ingen spesialløsninger for “de funksjonshemmede”.
➔ Løsninger som er enklere og bedre for alle.
➔ Flere måter å bruke løsninger på.
➔ Muligheter for at flere kan bruke løsningen.
11. Ulike variasjoner i funksjonsevne kan gi samme begrensninger i løsningen din
Lese
Trøtthet
Forstå Konsentrasjon
Allergi
Se
Hukommelse
Snakke Motorikk
Skrive
Høre
12. Ulikt utgangspunkt – samme resultat
Aksjemeglere på jobb
= personer med
utviklingshemming
Dårlige lysforhold
= fargeblind eller
svaksynt
Mobilsurfing
= redusert motorisk
funksjon
Kilde: Torbjørn Helland Solhaug, Funka.
27. ➔ Gå gjennom noen av kravene i forskriften og forklare
hvordan de kan oppfylles.
➔ Få deg til å komme i gang så du kan jobbe videre
med universell utforming på din nettside.
Agenda
60. ➔ Last ned denne presentasjonen.
➔ Ta deg et glass vin, hør på noe musikk og gjør noe koselig ut
av det.
➔ Ta eierskap og kontroll over nettstedet.
➔ Ikke en quick fix, men bedre måte å tenke på.
➔ Lek med Inspect Element.
➔ Se på Difi sine uu-verktøy. Første verktøy: Color Contrast
Analyser.
81. Google Webmaster Guidelines: design og innhold
➔ Design nettsiden med et tydelig hierarki.
➔ Alle undersider må kunne besøkes fra
statiske tekstlenker,
men ha et fornuftig antall lenker på én side.
➔ Bruk sitemap.
➔ Lag nyttige, informasjonsrike nettsider og
skriv tekster som tydelig beskriver
det du ønsker å formidle.
➔ Bruk ord og uttrykk dine brukere ville ha
brukt - det sikrer relevans i søk
fra et brukerperspektiv.
➔ Unngå tekst som bilder.
➔ Bruk alt-attributter og andre meta-tagger
som <title> <h1> .
➔ Unngå døde lenker.
82. Google Webmaster Guidelines: teknisk løsning
➔ Besøk nettsiden gjennom en tekstbasert nettleser - virker innholdet fornuftig?
➔ La søkemotorene «crawle» nettstedet og sørg for at interne lenker kan brukes av
crawlere. Alt innhold må lenkes til.
➔ Sørg for at nettstedet virker i alle nettlesere.
➔ Overvåk og optimaliser nettstedet i henhold til lastetid.
➔ Google anbefaler sterkt å overvåke nettstedets «performance» gjennom verktøy som
Google Page Speed, YSlow, WebPagetest etc.
83. Google Webmaster Guidelines: kvalitet
Unngå
➔ Automatisert/duplisert innhold.
➔ Linkebygging for linkebyggingens
skyld.
➔ Cloaking (bl.a. skjult tekst eller skjulte
lenker).
➔ Misbruk av riktekst.
Lag sider for mennesker, ikke søkemotorer
➔ Ville du ha vært komfortabel med å
forklare en konkurrent eller Google hva
du har gjort?
➔ Hjelper det du nå gjør brukerne dine?
➔ Ville du gjort dette om søkemotorene
ikke fantes?
84. Design og innhold
➔ Snakk brukerens språk og ha godt innhold
tilgjengelig i tekstformat. La linkene være nyttige
og ikke døde.
Teknisk løsning
➔ Sørg for «crawlbarhet» og tenk at alt innhold bør
være tilgjengelig i en tekstbasert nettleser.
Kvalitet
➔ Lag unikt innhold for mennesker.
Innhold
➔ Brukeren skal kunne dra nytte av informasjon
og funksjonalitet uavhengig av funksjonsevne.
Teknisk uu
➔ Brukeren må kunne benytte nettstedet.
Pedagogisk uu
➔ Brukeren må kunne forstå hvordan nettstedet
og funksjonene benyttes.
99. If the user is having a problem,
it's our problem.
100. Topics
➔ Navigation
➔ Readability
➔ Colour and contrast
➔ Comprehension/Understanding
➔ Images and graphics
101. Navigation: Don't make me think
➔ Is it consistent throughout my site?
➔ Are there at least two ways to reach my content?
➔ Is the design set up for keyboard navigation?
110. Readability: serif and sans serif
➔ Sans serifs work better on screen
Arial, Helvetica, Lucida Grande, Humanist
➔ Sans serifs scales best, more distinguisable
➔ Serif most popular typeface for body text
Georgia, Times New Roman, Baskerville
med uten
111. Readability: size, characters and line-height
➔ Paragraph text should be at least 16pt
➔ No more than 60-70 characters per line
➔ Good line-height increase speead and comprehension (1.5em)
https://www.charactercountonline.com/
141. ➔ Consistent placement and behavior of navigation
➔ Several ways to reach content: menu + 1 more
(search/sitemap/lists)
➔ Always check you have good contrast
(Colour contrast analyser)
➔ Provide controls (stop/start) if using a slider
➔ Graphic elements serve a purpose
142. Shay Ponsonby
UX og web designer i Metronet
shay@metronet.no
/shayponsonby