Best mulig for flest mulig på nett

Presentasjon om: "Best mulig for flest mulig på nett"— Utskrift av presentasjonen:

1 Best mulig for flest mulig på nett
THIS IS KNOWIT

2 CV Om foredragsholder Halvblind Multihandicappet Middelaldrende dame
Var god på IT utvikling en gang Ufrivillig plutselig midt i målgruppen for universell utforming Siv Tunold Kvalitetsentusiast, , Knowit Quality Management Oslo AS Mitt navn er Kjetil Gjelsten og jeg kommer fra Knowit. Min kollega Fredrick Makosir og jeg vil med vårt foredrag fortelle dere om våre erfaringer fra en POC (proof of concept) om bruk av HP Mobile Center som vi har gjennomført hos NetCom. Fredrick og jeg er begge innleide testledere hos NetCom og denne POC-en er gjennomført samtidig med andre pågående oppdrag.

3 Hvem er i målgruppen? Mange flere enn du tror!!
10% av befolkningen har en funksjonshemning. (1/3-del…) 8,5% har en funksjonshemming som påvirker deres pc-bruk Syn Aldersredusert syn Bruker du briller? Behov for hjelpemidler Konjunktive svekkelser Fremmedspråklige…

4 Universelt utformet på WEB
WCAG Web Content Accessibility Guidelines DIFI I tiden: Uendelig mye å finne på Internett Selvbetjente løsninger

5 Tilgjengelighet… Oppmuntrer til godt design og god utviklingspraksis
Støtter SEO - Søkemotoroptimalisering (Google er blind og døv!) Internasjonalisering støtter mobil-vennelig innhold, responsiv design teknisk tilgjengelig, men funksjonsmessig utilgjengelig God web kommunikasjon Klart språk

6 Selvbetjente løsninger
Gi godfølelsen Greie seg sjæl!

7 uu definert som POUR (Perceivable, Operable, Understandable, Robust))
mulig å oppfatte mulig å betjene forståelig robust UU = utarma uran

8 Rydd i egen bakgård Vær bevisst. Alt du leverer fra deg bør være i god uu Web-(IKT-)løsninger du er involvert i Hjemmesider Intranett Presentasjoner Dokumenter vi leverer fra oss Ryddige kontoer og korridorer Tydelig merking

9 Office produkter I Word - menyvalg Informasjon Undersøk dokumentet
Kontroller tilgjengelighet Typiske funn Bilder URL’er Skrivefeil THIS IS KNOWIT

10 Utviklingsprosessen Utvikler og tester – uu er en del av arbeidsdagen din! Statisk test ved bygg Ved promotering av kode, som regresjonstest Oppbygging av test – akseptansetestcase Målbare krav, statistikk Eksempeldatabase: Hva er god uu? Alt kan ikke sjekkes ved hjelp av verktøy

11 Klart språk ? Dokument/nettsiden er skrevet i klarspråk dersom mottakerne: Finner det de trenger Forstår det de finner Kan bruke det til det de skal gjøre. POUR!

12 Klart språk. Tips: Språkprofil er nødvendig i alle kanaler Brev Nettsider Telefon Alle må bidra. Se på andres arbeid. Ord som er vanskelig å erstatte må forklares Vær så folkelig som mulig, med gyldige lovhenvisninger i vedlegg Utfør brukertesting før du starter språkarbeidet

13 Forstørrelse - 200% THIS IS KNOWIT

14 forstørrelse av siden Responsiv design.
Sidensutseende tilpasser seg enhetens skjermstørrelse. WCAG 2 sier 200% Tekst og bilder skal flyte nedover og ikke sideveis Feil OK

15 Leselist - punktskrift
Fire problemer som må løses for å digitalisere EU og Norge

16 Som tale Fire

17 Spesifikt Målbart Attraktivt Realistisk Tidssatt
Et mål skal være SMART! Spesifikt Målbart Attraktivt Realistisk Tidssatt Målbare krav: på hvilket nivå? For hvem? Kontinuerlig prosess THIS IS KNOWIT

18 Hva gjør jeg når jeg kommer til et nettsted?
Starter i øvre venstre hjørne Siden presenteres kronologisk i koderekkefølge Kan leses fra topp til bunn, men… ”Page has thirteen frames, one hundred sixty-three headings and five hundred eighteen links” Tabber meg igjennom felt for felt opper i sidens predefinerte regioner Enklere å bruke lister i skjermleserverktøyet Headinger Linker Edit-felt (har siden et søkefelt?) Hoppe mellom elementer av en type (buttons, heck boxes, combo boxes, divisions, edit fields, grafics ) THIS IS KNOWIT

19 Som Tale - tips Korrekt html
Bruk meningsfulle linker. Unngå «Klikk her», «Les mer» Alternativ tekst på ikke-tekstlige elementer?? Har de informasjonsverdi? Label på input-felter (krav til format før og ikke etter input-feltet!!) Tabeller og grafer er vanskelig å høre Tekst med bilde som bakgrunn Defacto standarder, bruk de! Ikke tabell for formatering av bildet Struktur (bruk H-taggene i html) Oppdeling av siden i regioner Ikke «gjem» bort det som er viktig THIS IS KNOWIT

20 Som tale – vær bevisst, unngå «støy»
tom liste liste innholdende kun et item tom region Alt-tekst gjentar tekst som allerede er der unødvendige gjentagelser Grafikk som bare er pynt, alt-tekst? Pustepauser , komma og punktum i teksten Blanding av språk, faguttrykk THIS IS KNOWIT

21 Forsiden på Aftenposten som lyd
Skjermleser Forsiden på Aftenposten som lyd THIS IS KNOWIT

22 THIS IS KNOWIT

23

24

25 Struktur i siden Tittel (ta det viktigste først)
Brødsmuler for navigering Regioner Heading, bruk html-tagger <h1> logisk oppbygning av siden ikke bare formatering av tekst THIS IS KNOWIT

26 Fargeblindhet Sunn fornuft er viktig ved vurdering av Og bruk av
Kontraster Ikke bruk farger som eneste virkemiddel! Funker: Svart på hvitt Gult på svart Sunn fornuft er viktig ved vurdering av Og bruk av farge- kontraster

27

28 Vær bevist på valg av kontrastkrav

29 Operativt – motoriske utfordringer
Tilgjengelig med kun tastatur Ikke fjern fokus indikatoren Sørg for at interaktive elementer skiller seg ut Logisk rekkefølge på siden/navigering

30 Hvor i helvete er cursoren?

31 bruken av responsiv webdesign øker på de norske nettsteder = god uu
Digi-artikkel: «En viktig årsak til at mange nettsteder har blitt bedre mobiltilpasset i det siste, er at Google i april i fjor kunngjorde at mobilvennlige sider ville rangeres høyere enn sider som ikke er mobilvennlige, i selskapets søkeresultater på mobiler. et av de største norske nettstedene feiler i testen fordi de blokkerer mobilbotens tilgang til CSS- og JavaScript-filene som alle vanlige mobilnettlesere vil benytte når de skal vise websidene.»

32 Moralen er: UU-sjekk bør utføres allerede når skjermbildene er klare
Involver utvikler og innlegg-forfattere i uu-arbeid Så tidlig i prosjektet som mulig – feilretting er billigere da Statiske tester som regresjonstesting ifb promotering Bygg opp et eksempelarkiv – Hva er erfart god kode? Manuell vurdering er nødvendig Lydtolkning av multimedia Verktøy for å konvertere dokumenter (som pdf) til uu-vennlige dokumenter (fatax) Bruk av sosiale medier og offentlige institusjoner

33 Statiske sjekker WAVE http://wave.webaim.org/ Cynthai Says
W3C

34 I browseren: WAT i IE WAVE i Firefox Skjermleser
Fang i Firefox (Tale som tekst) NVDA – lyd

35 Andre har tenkt WCAG 2.0 Checklist
Kriteriesettet retter seg mot både offentlige nettsteder og tjenester Easy Checks - A First Review of Web Accessibility

36