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

anette.urhamar@metronet.no

@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

Webredaktøren

Innholdspusher

gjorhvaduvil@firma.no

@alterokformeg /alterokformeg

Websjefen

Vokteren

ikkeforstyrr@firma.no

@termitøren /termitø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.

Lasse Olsen

Prosjektkoordinator i Metronet

lasseolsen@metronet.no

@hanlasse /hanlasse

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”

Petter El Fakiri

Leder for Digitale løsninger i Metronet

petter@metronet.no

/petterelfakiri

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

Shay Ponsonby

UX og web designer i Metronet

shay@metronet.no

/shayponsonby