Download - Universell utforming av digitale løsninger
Dagen i dag08:30 Velkommen til alleAnette Grande Urhamar, Metronet
08:45 Bruk av digitale løsninger for blinde og svaksynteStein Erik Skotkjerra og Kristoffer Lium, Blindeforbundet
09:15 Verktøy og sjekkliste for webredaktører Lasse Olsen, Metronet
10:00 SEO i Google og universell utforming Petter El Fakiri, Metronet
10:25 Universell utforming i en designers verden Shay Ponsonby, Metronet
09:45 Pause – kaffepåfyll
Digitalt byrå som jobber med strategisk rådgivning, design og utvikling av digitale løsninger.
Digital annonsering WebanalyseSøkemotoroptimaliseringDigitale løsninger
35 digitale hoder (+ 2 hunder)@metronetlife
Design for alle
➔ 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.
Kort om kravet om universell utforming (uu)
Enklere og bedre for alle
➔ 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.
Hva oppnår vi?
Alle sliter av og til
Ulike variasjoner i funksjonsevne kan gi samme begrensninger i løsningen din
Lese
Trøtthet
Forstå Konsentrasjon
Allergi
Hukommelse
Se
MotorikkSnakke
Skrive
Høre
Aksjemeglere på jobb = personer med utviklingshemming
Ulikt utgangspunkt – samme resultat
Dårlige lysforhold = fargeblind eller svaksynt
Mobilsurfing = redusert motorisk funksjon
Kilde: Torbjørn Helland Solhaug, Funka.
“Nye” og kjøpesterke brukere
Hvorfor jobbe meduniversell utforming?
Større potensiell kundemasse
Større grad av selvbetjening
Reduserer kostnader til manuell kundehåndtering
Reduserer kostnader til brukerstøtte
Økt kvalitet på nettstedet
Godmerkevarebygging
Anette Grande Urhamar
Leder for Brukeropplevelser i Metronet
@anetteurhamar /anetteurhamar
For webredaktører
➔ 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
Hvordan bruke uu.difi.no
Hvordan bruke uu.difi.no
Ulike nivåer
A AA AAAOmfattet av forskriften Omfattet av forskriften Ikke omfattet av forskriften
Innhold er en stor del av universell utforming
=Jobben med uu stopper aldri for webredaktøren
Sjekkliste for universell utforming
Utvikling
Kategorier per punkt
Du klarer detKrav
Husk «alt-tekst» på bilder.
1.1.1 Ikke-tekstlig innhold
uu-krav
1.1.1 Ikke-tekstlig innhold
uu-krav
1.1.1 Ikke-tekstlig innhold
uu-krav
1.1.1 Ikke-tekstlig innhold
uu-krav
Man skal kunne bruke nettsiden selv om den er forstørret.
1.4.4 Endring av tekststørrelse
uu-krav
1.4.4 Endring av tekststørrelse
uu-krav
1.4.4 Endring av tekststørrelse
uu-krav
1.4.4 Endring av tekststørrelse
uu-krav
1.4.4 Endring av tekststørrelse
uu-krav
Det du vil brukeren skal se må være markert med mer enn en farge.
1.4.1 Bruk av farge
uu-krav
1.4.1 Bruk av farge
1.4.1 Bruk av farge
uu-krav
1.4.1 Bruk av farge
1.4.1 Bruk av farge
uu-krav
1.4.1 Bruk av farge
Oversikt over programmet
Oversikt over programmet
Oversikt over programmet >
1.4.1 Bruk av farge
Slutt med “Les mer”og "Klikk her".
2.4.4 Formål med lenke (i kontekst)
uu-skolen
2.4.4 Formål med lenke (i kontekst)
2.4.4 Formål med lenke (i kontekst)
2.4.4 Formål med lenke (i kontekst)
2.4.4 Formål med lenke (i kontekst)
Tittel skal beskrive hva som kommer under/til.
2.4.2 Sidetitler – 2.4.6 Overskrifter og ledetekster
A
uu-skolen
Bruk h1, h2, h3, h4 og eventuelt h5 på titler.
2.4.10 Deloverskrifter
A
uu-skolen
2.4.10 Deloverskrifter
Overskrift 1Overskift 2
Overskift 3Overskift 4
Overskift 5
Oppsummering
Gjør punktene som er nevnt nå og du er på god vei
➔ 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.
SEO og UU
av trafikken din kommer fra søkemotorer
Minst 50 %
av trafikken din kommer fra søkemotorer
Minst 50 %Og denne trafikken konverterer 30 % bedre en annen trafikk
➔ Hvordan virker Google?
➔ Søkemotoroptimalisering - heistesten
➔ Google + universell utforming = sant?
➔ Google Webmaster Guidelines
➔ Casestudie
Agenda
Hvordan virker Google?
Googles tre faser
1. Crawling
Googles tre faser
1. Crawling
2. Indeksering
Googles tre faser
1. Crawling
2. Indeksering
3. Rangering
Googles tre faser
SEO på 1-2
Google og universell utforming
Utvalgte kilder til informasjon
Difi Google
uu.difi.no/veiledning support.google.com/webmasters
uu.difi.no/veiledning/nettsider/uu-skolen support.google.com/webmasters/answer/35769
uu.difi.no/veiledning/nettsider/krav-til-nettlosninger support.google.com/webmasters/answer/70897
uu.difi.no/veiledning/nettsider/test-og-testverktoy support.google.com/webmasters/answer/35291?hl=en
uu.difi.no/veiledning/nettsider/kvalitet-pa-nett-og-wcag-20 static.googleusercontent.com/media/www.google.com/no//webmasters/docs/search-engine-optimization-starter-guide.pdf
Google Webmaster Guidelines
➔ 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.
Google Webmaster Guidelines: design og innhold
➔ 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.
Google Webmaster Guidelines: teknisk løsning
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?
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.
Boliglån
Bank Rangering i Google URL
DNB 3 www.dnb.no/privat/laan/boliglaan.html
Skandiabanken 5 www.skandiabanken.no/Lan/Boliglan/
Nordea 8 www.nordea.no/privat/l%C3%A5n/boligl%C3%A5n/400914.html
Sparebank 1 13 www.sparebank1.no/sr-bank/lan/boliglan/boliglan-for-unge/
Handelsbanken 31www.handelsbanken.no/shb/inet/icentno.
nsf/Default/q4f1b0ae9379fe7dfc1256cd900338cf2
<h1> </h1>
<h3> </h3>
<h3> </h3>
<h3> </h3>
<img src="/portalfront/bilder-dnb/bygg-lokaler-hus/680x150-boliglan-par.jpg" alt="illustrasjon boligln">
Bank Rangering i Google URL
DNB 3 www.dnb.no/privat/laan/boliglaan.html
Skandiabanken 5 www.skandiabanken.no/Lan/Boliglan/
Nordea 8 www.nordea.no/privat/l%C3%A5n/boligl%C3%A5n/400914.html
Sparebank 1 13 www.sparebank1.no/sr-bank/lan/boliglan/boliglan-for-unge/
Handelsbanken 31www.handelsbanken.no/shb/inet/icentno.
nsf/Default/q4f1b0ae9379fe7dfc1256cd900338cf2
<img src="/shb/inet/icentno.nsf/vlookuppics/0_central_images-leisure_0048_5895_380x131/$file/0048_5895_ph_s_pl_380x131.jpg">
av trafikken din kommer fra søkemotorer
Minst 50 %Og denne trafikken konverterer 30 % bedre en annen trafikk
“Konklusjon”
Design for alle
If the user is having a problem, it's our problem.
➔ Navigation
➔ Readability
➔ Colour and contrast
➔ Comprehension/Understanding
➔ Images and graphics
Topics
➔ Is it consistent throughout my site?
➔ Are there at least two ways to reach my content?
➔ Is the design set up for keyboard navigation?
Navigation: Don't make me think
Navigation: consistent
Navigation: 2 ways to acces content
Navigation: using the ‘tab’ key
Navigation: skipping over content
Navigation: focus states
http://www.eplehuset.no
Navigation: keyboard tabbing
http://www.regjeringen.no
➔ Hirearchy (<H tags>)
➔ Typography
➔ Size, characters per line and line height
➔ Colour and contrast
Readability
<H1>
<H2>
Readability: font hierarchy
<H3>
Readability: serif and sans serif
➔ Sans serifs work better on screenArial, Helvetica, Lucida Grande, Humanist
➔ Sans serifs scales best, more distinguisable
➔ Serif most popular typeface for body textGeorgia, Times New Roman, Baskerville
med uten
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/
Readability: read the small print
Colour and contrast: grey on grey
Colour and contrast: testing contrast
http://www.paciellogroup.com/resources/contrastanalyser/
Colour and contrast: make it stand out
Colour and contrast: Colour Contrast Analyser
http://www.paciellogroup.com/resources/contrastanalyser/
Colour and contrast: colourblindness
Source: uu.difi.no
Colour and contrast: colourblindness
Source: uu.difi.no
Comprehension:
➔ Forms(skjema) and errors
➔ Using sliders/carousel
➔ Confusing search behaviours
Comprehension: identify errors
Comprehension: stop/start control
Comprehension: stop/start control
Comprehension: searching for search
Comprehension: search?
➔ Avoid using text on images
➔ Graphical elements
➔ Illustrations and visual aids
Images and graphics
Images and graphics: text on images
Images and graphics: text on images
Images and graphics: graphic elements
Images and graphics: graphic elements
Images and graphics: visual aids
http://www.knyteslips.no/dobbel-windsor-slipsknute/
Things to remember
➔ 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
