dette må du kunne om universell utforming

Dette må du kunne, og litt til

Aud Marie Hauge, ekspert brukervennlighet og universell utforming

1

Dagens tekst

• Kva er uu?

• Kven treng uu?

• Korleis uu?

• Lovverket

• Kvalitet i alle ledd i webprosjektet

• Skjema med utgangspunkt i lovverket

• Sjekklister

• Kode brukarvenlege og universelt utforma skjema

2

Aud Marie

• Master i informatikk

• Praktisk pedagogisk utdanning

• HiSF, Gazette,

• Epinova

• HTML, CSS, uu, leiar for ux

3

Kvifor interesse for universell utforming?

• Mastergrad om universell utforming

• Erfaringer frå brukertester

• Vanskeleg å få tak i personer med nedsatte

funksjonsevner

• 6 blinde informanter

• Ofte samme utfordring

• … men treng meir tid

4

Kva er universell utforming?

Deltasenteret (2005):

”Begrepet universell utforming blir ofte brukt synonymt

med tilgjengelighet for alle, planlegging for alle og

design for alle. Universell utforming vil si å utforme

produkter og omgivelser på en slik måte at de kan

benyttes av alle mennesker, i så stor utstrekning som

mulig, uten behov for tilpassing eller spesiell

utforming”

5

Lage ei løysing som fungerer godt for alle

6

Kvar skal me starte?

7

Det viktigaste er ta innover seg at:

- universell utforming er VIKTIG;

- uu er det samme som kvalitet

8

Misforståelser

- «Me har ingen blinde brukere»

- «Skal nettstaden vera universelt utforma????»

- «universell utforming kan me fikse på slutten»

- «Nettstaden treng ikkje vera universelt utforma»

9

Kva vil du med din nettstad?

• At brukaren skal finne det han/ho leiter etter

• Minst mogeleg mas --> sjølvbetjening

10

Bli kjent med dine brukere

… også dei med nedsatte funksjonsevner

•Kven skal finne informasjon på din

nettstad?

•Personas kan vera eit nyttig verkemiddel for

alle å bli kjent med brukarane for involverte

i eit webprosjekt

Samme tankegang, samme utfordring

• Uavhengig av funksjonsnedsetting

– Men for personer med nedsatt

funksjonsevne blir utfordringa med dårlege

nettsider endå større

Kven treng tilgjengelege nettsider?

• Eldre

• Personar med nedsatte funksjonsevner

• Kongnitive utfordringer, nedsatt syn, hørsel

• Framandspråklege

• Undervegs

• …..

• ALLE

Tid er knapp ressurs

13

Korleis lage universelt utforma nettsider?

- Bli kjent med dine brukere/målgruppe

- Føl standarder (HTML og CSS)

- WCAG, Kvalitet på nett (Difi), WAI-ARIA

- Validering og manuell testing

- Brukertesting

14

Korleis lage universelt utforma nettsider?

- Nye vs. eksisterande løysingar

- Tverrfagleg samarbeid

- Gode team, kjemi

- Kompetanse i alle disiplin

15

Diskriminerings og tilgjengelighetsloven,

DTL §11

- 1.juli 2013

- WCAG 2.0 Level A og Level AA

16

Input assistanse

Alle må med

- Alle i webprosjektet må kunne uu innan sitt fagfelt for

å lukkast

18

Eit typisk web-prosjekt består av

- Sal

- Prosjekteigar

- Prosjektleiar

- Interaksjonsdesigner

- Designer

- Frontend og backend -utvikler

- Innhaldsprodusent/webredaktør

- Ansvarsområder: http://

www.w3.org/community/wai-engage/wiki/Accessibility_Responsibility_Breakd

own#fed

19

Sal

- Tilrettelegge for kvalitet i prosjekt

- Ressurser, tid og timar

20

Prosjekteigar, leiinga

21

Prosjektleiar

- Tilrettelegge for kvalitet i prosjekt

- Ressurser, tid og timar

- Setja saman gode team

22

Interaksjonsdesigner- Joker’n som kan snu alt

- Gjenkjennbar navigasjon

- Retningslinje 3.2.3, AA

- Global meny

- Logisk tabulatorrekkefølgje

- Retningslinje 2.4.3, A

- Audio

- Retningslinje 1.4.2, A

- må kunne skrus av

- Tastatur

- Retningslinje 2.1.1, A

23

Interaksjonsdesigner

- Ikkje endre innhald på focus

- Retningslinje 3.2.1,3.3.3, A

- vente til brukaren gjer eit val

- Feilmelding

- Retningslinje 3.3.1, A

- presenter feilen i tekstleg form i rett kontekst

- Bevegelse

- Retningslinje 2.2.2, A

- Mogeleg å stoppe bevegelse, kan forstyrre hjelpemiddel

- Unngå tidsbegrensing

- Retningslinje 2.2.1, A

24

Designer

- Farge

- Retningslinje 1.4.1, A

- lenke

- Fargekontrast

- Retningslinje 1.4.3, AA

- 4,5:1

- Fokusstil

- Retningslinje 2.4.7, AA

- Input

25

Designer

- Tekststorleik

- Retningslinje 1.4.4, AA

- Skal kunne zoome teksten 200%

- Konsistent

- Retningslinje 3.2.4, AA

- Ikon

- Anfall

- Retningslinje 2.3.1, A

26

Designer

- Skjema

- Retningslinje 3.3.2, A

- Henvisning

- Retningslinje 3.3.2, A

- Klikk nedanfor, klikk i kolonna til høgre

- http://uleselig.no

27

Frontendutvikler

- Språk

- Retningslinje 3.1.1, Level A

- <html lang="en">

- Title

- Retningslinje 2.4.2, Level A

- <title>

- SEMANTIKK

- Bruk mest mogeleg HTML (HTML5)

- WAI-ARIA

28

Innhaldsprodusent/webredaktør

- Skriv for brukaren

- Alternativ tekst

- Retningslinje 1.1.1, Level A

- Overskrifter med meiningsbærande innhald

- Retningslinje 2.4.6, Level AA

- Skildrande tekst på lenkjer (unngå «Les meir», «Klikk

her», «meir»

- Retningslinje 2.4.4, Level A

29

Innhaldsprodusent/webredaktør

- Korrekt merking av tabeller

- Korrekt merking av skjemafelt

- Retningslinje 3.3.2, Level A

30

Universell utforming vs. brukskvalitet vs. innhald vs. SEO

vs…..

KVALITET I ALLE LEDD

31

Skjema

- Her syndes det mykje

- Ein god kjerne i botn

- Progressive enhancement

- Utvid med funksjonalitet som til dømes autocomplete,

og bruk gjerne WAI-ARIA

- Ikkje lag mindre funksjonalitet fordi det skal vera uu

32

SAS og skjema

33

Case: Skjema og SAS

- 14,6 mill innlandsreiser i året

- 5 mill innbyggere i Noreg

- 3 reiser per person

- 1 reise kostar i snitt 1 000

- 1 000 blinde personer i Noreg

- Potensielt minimums-tap: 3 000 000 NOK

34

35

Interaksjonsdesigneren

- Set opp skjema på ein logisk og intuitiv måte

- Forklarande tekst framfor input

- Grupperer element som naturleg høyrer saman

- Feilmeldingar i rett kontekst i tekstleg form

- Alle felt må fylles ut?

- Send inn skjema- knapp

36

Designeren

- God kontrast

- Tydeleg merking av feilmeldingar

- Fokusstil

- Design som hjelp til med å gruppere innhald

37

Frontender

- <label> framfor input-felt, der «for» matcher «id» til

<input />

- <fieldset> og <legend>

- Submit-knapp som sender inn skjema

- Mest mogeleg HTML

- WAI-ARIA på interaktive element

38

Utfordring med retningslinjer

- Vanskeleg å sjekke om ein faktisk har oppfylt ei

retningslinje

39

Lag dine eigne retningslinjer

- Lag dei slik at det er lett å forstå samt teste om ein

har oppfylt

40

Frontend i Epinova

• Samarbeid mellom frontend og backend

• Miljø og kode

Kvalitet og frontend

• Hvorfor?

– Levere kode som lett kan videreutvikles

– Finne felles måter å lage kode på slik at et prosjekt lett kan tas

over av andre kodere internt og eksternt

– Lettere for nye ansatte å sette seg inn i hvordan vi ønsker det

gjort

– Unngå offentleg lynsjing

– Ikke mål å finne vinnere og tapere, men motivere til kvalitet

– Brukes også på kode levert av eksterne frontendere for å

oppdage evt mangler før implementering i EPiServer

Sjekkliste for kvalitet i Epinova

- Bransjestandard og allerede kjente retningslinjer ,

ingen mystiske retningslinjer

43

Kvalitet og frontend

• Hvordan?

– Verktøy underveis, ikke noe som skal bli introdusert til slutt i et

prosjekt

– Alltid under oppdatering

– Laga saman

– Alle kan utføre QA på et prosjekt, men ingen utfører QA på sitt

eget arbeid

• Læring

Kvalitet og frontend, sjekkliste

• Sjekkliste på 32 punkt

• Rett, feil eller ikkje aktuelt

– Prosjekt

– Kodekvalitet

– Universell utforming

– Semantikk

– Redaktørvennlighet

– Andre funn og sammendrag

Kvalitet og frontend, sjekkliste

Kvalitet og frontend, sjekkliste

• Ikkje alt kan lett påvirkes av frontender:

Kvalitet og frontend, sjekkliste

Samarbeid er suksessfaktoren

- Frontend og backend

- Designer, interaksjonsdesigner og frontend,backend

Konklusjon

• Dersom nettstaden din er universelt utforma er

den OGSÅ brukarvennleg, har godt innhald og

er søkemotoroptimalisert

• Målgruppe

• Brukertesting

Konklusjon

• Lovlige nettsider: WCAG 2.0 AA

• Bruk WCAG 2.0 som eit verktøy for

brukarvennlege nettsider for alle

• Lag eigne retningslinjer

Kontaktinfo

Aud Marie

amh@epinova.no

http://twitter.com/audmaha

www.epinova.no

Testing med toolbar

• http://www.visionaustralia.org.au/ais/toolbar/ (IE)

• http://chrispederick.com/work/webdeveloper (Firefox)

• Firebug(Firefox)

• http://browsershots.org (Nettlesertesting)

• http://accessibility.egovmon.no/en/pagecheck/ (Teste

tilgjengelighet)

• http://wave.webaim.org/

Deltasenteret sine veiledere

• http://www.bufetat.no/bufdir/deltasenteret/publikasjoner/

Andre retningslinjer

•WAI-ARIA

•ATAG

•www.w3.org/tr/mobile-bp

•Funkas retningslinjer for universell utforming på mobil

55

Sjekklister

- Webaim

- W3C

- Epinova

56