Foredrag for Grensesnittet i Trondheim

1. Dette må du kunne,
og litt til
Aud Marie Hauge, ekspert brukervennlighet og
universell utforming
1

2. 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

3. Aud Marie
• Master i informatikk
• Praktisk pedagogisk utdanning
• HiSF, Gazette,
• Epinova
• HTML, CSS, uu, leiar for ux
3

4. 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

5. 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

6. Lage ei løysing som fungerer godt for alle
6

7. Kvar skal me starte?
7

8. Det viktigaste er ta innover seg at:
- universell utforming er VIKTIG;
- uu er det samme som kvalitet
8

9. 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

10. Kva vil du med din nettstad?
• At brukaren skal finne det han/ho leiter etter
• Minst mogeleg mas --> sjølvbetjening
10

11. 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

12. Samme tankegang, samme utfordring
• Uavhengig av funksjonsnedsetting
– Men for personer med nedsatt
funksjonsevne blir utfordringa med dårlege
nettsider endå større

13. Kven treng tilgjengelege nettsider?
• Eldre
• Personar med nedsatte funksjonsevner
• Kongnitive utfordringer, nedsatt syn, hørsel
• Framandspråklege
• Undervegs
• …..
• ALLE
Tid er knapp ressurs
13

14. 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

15. Korleis lage universelt utforma nettsider?
- Nye vs. eksisterande løysingar
- Tverrfagleg samarbeid
- Gode team, kjemi
- Kompetanse i alle disiplin
15

16. Diskriminerings og tilgjengelighetsloven,
DTL §11
- 1.juli 2013
- WCAG 2.0 Level A og Level AA
16

17. Input assistanse

18. Alle må med
- Alle i webprosjektet må kunne uu innan sitt fagfelt for
å lukkast
18

19. 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_Breakdow
19

20. Sal
- Tilrettelegge for kvalitet i prosjekt
- Ressurser, tid og timar
20

21. Prosjekteigar, leiinga
21

22. Prosjektleiar
- Tilrettelegge for kvalitet i prosjekt
- Ressurser, tid og timar
- Setja saman gode team
22

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. Innhaldsprodusent/webredaktør
- Korrekt merking av tabeller
- Korrekt merking av skjemafelt
- Retningslinje 3.3.2, Level A
30

31. Universell utforming vs. brukskvalitet vs.
innhald vs. SEO vs…..
KVALITET I ALLE LEDD
31

32. 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

33. SAS og skjema
33

34. 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. 35

36. 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

37. Designeren
- God kontrast
- Tydeleg merking av feilmeldingar
- Fokusstil
- Design som hjelp til med å gruppere innhald
37

38. 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

39. Utfordring med retningslinjer
- Vanskeleg å sjekke om ein faktisk har oppfylt ei
retningslinje
39

40. Lag dine eigne retningslinjer
- Lag dei slik at det er lett å forstå samt teste om ein
har oppfylt
40

41. Frontend i Epinova
• Samarbeid mellom frontend og backend
• Miljø og kode

42. 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

43. Sjekkliste for kvalitet i Epinova
- Bransjestandard og allerede kjente retningslinjer ,
ingen mystiske retningslinjer
43

44. 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

45. Kvalitet og frontend, sjekkliste
• Sjekkliste på 32 punkt
• Rett, feil eller ikkje aktuelt
– Prosjekt
– Kodekvalitet
– Universell utforming
– Semantikk
– Redaktørvennlighet
– Andre funn og sammendrag

46. Kvalitet og frontend, sjekkliste

47. Kvalitet og frontend, sjekkliste
• Ikkje alt kan lett påvirkes av frontender:

48. Kvalitet og frontend, sjekkliste

49. Samarbeid er suksessfaktoren
- Frontend og backend
- Designer, interaksjonsdesigner og frontend,backend

50. Konklusjon
• Dersom nettstaden din er universelt utforma er
den OGSÅ brukarvennleg, har godt innhald og
er søkemotoroptimalisert
• Målgruppe
• Brukertesting

51. Konklusjon
• Lovlige nettsider: WCAG 2.0 AA
• Bruk WCAG 2.0 som eit verktøy for
brukarvennlege nettsider for alle
• Lag eigne retningslinjer

52. Kontaktinfo
Aud Marie
amh@epinova.no
http://twitter.com/audmaha
www.epinova.no

53. 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/

54. Deltasenteret sine veiledere
• http://www.bufetat.no/bufdir/deltasenteret/publikasjoner/

55. Andre retningslinjer
•WAI-ARIA
•ATAG
•www.w3.org/tr/mobile-bp
•Funkas retningslinjer for universell utforming på mobil
55

56. Sjekklister
- Webaim
- W3C
- Epinova
56