Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

Case Study: Skandiabanken Snorre Kim Skandiabanken 03. Mars, 2015.

Liknende presentasjoner


Presentasjon om: "Case Study: Skandiabanken Snorre Kim Skandiabanken 03. Mars, 2015."— Utskrift av presentasjonen:

1 Case Study: Skandiabanken Snorre Kim Skandiabanken 03. Mars, 2015

2

3 (placeholder: bilde av gammel bank)

4 Skandiabanken Begynte senere Ny lov Potensielt konkurransefortrinn UU-arbeid

5 Skandiabanken Ledende hverdagsbank Ledende på kundeopplevelse Ledende på selvbetjente løsninger og effektive prosesser Beste digitale brukeropplevelse og tilgjengelighet

6 Skandiabanken Web Content Accessibility Guidelines Nivå A og AA Mye å lære Ikke alle kan bli eksperter WCAG 2.0

7 Skandiabanken Hevet kvaliteten på nettsiden Korrekt problematisering og finne korrekte løsninger for moderne, og tilgjengelige nettsider. Funka

8 Bedre for alle UU hjelper alle Konsekvent bruk av ikonografi Bedre fargekontraster Mer forståelig kommunikasjon Mer oversiktelig design

9 Javascript Farger Testbar HTML Skjermleser tekst Best practices Komponenter

10 Best practices HTML5

11 Best practices En liste er en liste

12 Best practices Semantisk korrekt web er det beste grunnlaget for UU-arbeid Et godt grunnlag

13 Testbar html Mer formalisert kode

14 «Korrekt» html Skal ikke ha duplikat ID har alt-attributt har href-attributt skal ha tekst Side skal ha tittel Formalisert kode

15 «Korrekt» html Javascript i Utvikling og Test Ved sidelasting og etter 5 sekunder Melding i console Runtime test Javscript

16 «Korrekt» html alt-attributt? href-attributt Teste hvert oftere? Ajax kall til feillogg? Runtime test Javscript

17 «Korrekt» html Flere ting som kan testes enn du kanskje er vant med Programatiske sjekker

18 Farger Kontraster

19 Farger Fargehjelpere

20 Stilguide

21

22 Farger Fargehjelpere

23 Farger Fargehjelpere

24 Farger Fargehjelpere

25 Farger SASS $red-on-white: #DC3741; $red-on-background: #db183d; $blue-on-background: #0077ae; $grey-on-brown: #5A5A5A; $grey-on-grey: #6a6a6a; $grey-on-white: #767676; $red-on-white: #DC3741; $red-on-background: #db183d; $blue-on-background: #0077ae; $grey-on-brown: #5A5A5A; $grey-on-grey: #6a6a6a; $grey-on-white: #767676;

26 Farger SASS.button--warning { background: $red-on-white; color: #fff; }.button--warning { background: $red-on-white; color: #fff; }

27 Farger SASS.button--warning { background: $red-on-white; color: #fff; }.button--warning { background: $red-on-white; color: #fff; }

28 Farger Ikke mye som skal til Utvikler kan selv finne ny farge Farger

29 Skjermleser tekst

30 «Usynlig» tekst Opplesing av tekst

31 «Usynlig» tekst Opplesing av tekst « Fra Plasseringskonto ,00» «Lønn og Stipend ,05»

32 «Usynlig» tekst Opplesing av tekst « Fra Plasseringskonto ,00» Fra Plasseringskonto , Fra Plasseringskonto ,00

33 «Usynlig» tekst Opplesing av tekst « Fra Plasseringskonto ,00» Fra Plasseringskonto , Fra Plasseringskonto ,00

34 «Usynlig» tekst Opplesing av tekst « Fra Plasseringskonto ,00» Fra Plasseringskonto , Fra Plasseringskonto ,00

35 «Usynlig» tekst Opplesing av tekst.accessibility { border: 0 !important; clip: rect( ) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; }.accessibility { border: 0 !important; clip: rect( ) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; }

36 «Usynlig» tekst Opplesing av tekst « Overføring Fra Plasseringskonto ,00» Overføring Fra Plasseringskonto , Overføring Fra Plasseringskonto ,00

37 «Usynlig» tekst Opplesing av tekst Dato: Type: Overføring Beskrivelse: Fra Plasseringskonto Beløp: ,00 Dato: Type: Overføring Beskrivelse: Fra Plasseringskonto Beløp: ,00 «Dato: Type: Overføring Beskrivelse: Fra Plasseringskonto Beløp: ,00»

38 Å legge til tekst bare for skjermlesere kan være til enorm hjelp. Test med skjermleser. Bruk skjermleser

39 Javascript Forandrer på siden

40 Javascript Venteikoner

41 Javascript Venteikoner Henter innstillinger Henter innstillinger

42 Javascript Ekspandering

43 Javascript Ekspandering Click me!... Click me!...

44 Javascript Global aria-live screenreader(“Søk er gjennomført");

45 Javascript Global aria-live

46 Javascript Global aria-live screenreader(“Søk er gjennomført");

47 Javascript Global aria-live $("#live-polite").text(“Søk er gjennomført");

48 Javascript Hvordan får skjermleser beskjed? Javascript og skjermleser

49 Komponenter

50 Venteikoner

51 Komponenter Venteikoner Henter innstillinger... Henter innstillinger...

52 Komponenter Venteikon // Vente-animasjon med usynlig tekst "Vennligst // Vente-animasjon med synlig tekst "Henter "Henter innstillinger...") // Vente-animasjon med usynlig tekst "Vennligst // Vente-animasjon med synlig tekst "Henter "Henter innstillinger...")

53 Komponenter Ekspandering Kontonavn Kontoinformasjon Kontonavn Kontoinformasjon

54 Komponenter Vedlikehold og oppgradering Komponenter sørger for at vi opprettholder UU i koden, og at vi enkelt kan oppgradere kode der UU mangler.

55

56 En bedre bank Universell utforming som et vikemiddel for en enestående brukeropplevelse

57


Laste ned ppt "Case Study: Skandiabanken Snorre Kim Skandiabanken 03. Mars, 2015."

Liknende presentasjoner


Annonser fra Google