Mer om tilgjengelighet

Kirsten Ribu Samfunnsinformatikk 2008

1

Mer om tilgjengelighet

Kirsten Ribu

HiO

Kirsten Ribu Samfunnsinformatikk 2008

2

Kirsten Ribu Samfunnsinformatikk 2008

3

Web Accessibility Toolbar

• Virker bare i Internet Explorer for Windows

• Alternativ: Web Developer Toolbar for Firefox – har lignende funksjonalitet

• Det jobbes med en toolbar for firefox og Opera

Kirsten Ribu Samfunnsinformatikk 2008

4

Funksjonene

• 12 hovedknapper

• Dropdown-menyer

• Eller keyboard shortcuts

Kirsten Ribu Samfunnsinformatikk 2008

5

Struktur

• Det er viktig at strukturen i HTML-koden reflekterer strukturen på websiden

• Dette er hovedsaklig med tanke på brukere med leselist (blinde brukere) slik at de kan forstå sidestrukturen

• Dette er også viktig for søkemotorene!

Kirsten Ribu Samfunnsinformatikk 2008

6

Kirsten Ribu Samfunnsinformatikk 2008

7

Headinger

• Viser hvilke elementer som er headinger på siden.

• Disse må være strukturert:

• <h1> (heading nivå 1) – <h2>s (heading nivå 2).

• <h3> (heading nivå 3). – <h4> (heading nivå 4).

» ETC

Kirsten Ribu Samfunnsinformatikk 2008

8

Kirsten Ribu Samfunnsinformatikk 2008

9

Andre elementer

• Lister: <li> ved siden av lister – Leselisten sier hvor mange elementer det er i

listen før den leser opp innholdet

• Fieldset / Label – Viser hvilke elementer som har en ’label’ i

HTML koden

• Table border

• Table cell order

Kirsten Ribu Samfunnsinformatikk 2008

10

CCA – Color Contrast Analyzer

• Colour Choice controls er delt i forgrunn og bakgrunn

• Det er 3 måter å velge ut en farge for testing.

Kirsten Ribu Samfunnsinformatikk 2008

11

1. Fargepaletter

• Velg egnet farge

• Test mørkere eller lysere verdier av fargen du velger – det kan forbedre fargekombinasjonene som er valgt.

Kirsten Ribu Samfunnsinformatikk 2008

12

2. Legg in fargeverdi

• Skriv inn hex-verdien i en tekstboks

• Nyttig hvis du har tilgang til hex-verdiene for farger du vil teste

Kirsten Ribu Samfunnsinformatikk 2008

13

3. Plukk farge

• Hent farge fra en webside – eller på skjermen med verktøyet:

Kirsten Ribu Samfunnsinformatikk 2008

14

Kirsten Ribu Samfunnsinformatikk 2008

15

Synsforstyrrelser/ øysykdommer

Kirsten Ribu Samfunnsinformatikk 2008

16

Kirsten Ribu Samfunnsinformatikk 2008

17

Kirsten Ribu Samfunnsinformatikk 2008

18

Kirsten Ribu Samfunnsinformatikk 2008

19

Men –Viktig!

• Blinde er en veldig liten gruppe

• De største gruppene er mennesker med motoriske problemer

• NB! Alt for mye fokus på blinde kan føre til utestenging av andre grupper

Kirsten Ribu Samfunnsinformatikk 2008

20

Kirsten Ribu Samfunnsinformatikk 2008

21

Problemer

• Surfing uten mus – pass på antall klikk!

• Dyslektikere, innvandrere – hold språket enkelt!– Ikke kursiv– Venstreorientert tekst– Ikke store bokstaver

Kirsten Ribu Samfunnsinformatikk 2008

22

Kirsten Ribu Samfunnsinformatikk 2008

23

Kirsten Ribu Samfunnsinformatikk 2008

24

Kirsten Ribu Samfunnsinformatikk 2008

25

Kirsten Ribu Samfunnsinformatikk 2008

26

Kirsten Ribu Samfunnsinformatikk 2008

27

Usability First• http://www.usabilityfirst.com/accessibility/w

hatis.txl

Kirsten Ribu Samfunnsinformatikk 2008

28

Design av nettsted

• Bruker-sentrert – dvs med gjennomgående brukermedvirkning

• Å teste og fikse et nettsted etter at det er laget er lite effektivt

• En modell ->

Kirsten Ribu Samfunnsinformatikk 2008

29

Kravanalyse

• Bestem målene for nettstedet sett fra kundens perspektiv

• Beskriv brukerens behov

• Evaluer allerede eksisterende utgaver av nettstedet

• Gjennomfør intervjuer og undersøkelser

Kirsten Ribu Samfunnsinformatikk 2008

30

2. Conceptual Design

• Lag en skisse av designet og navigasjonen på et overordnet nivå. – (Bruk use case modellering)

• Gjør en analyse av oppgavene som skal utføres på siden

• Finn viktige funksjoner og beskriv dem

Kirsten Ribu Samfunnsinformatikk 2008

31

3. Mockups / Prototyper

• Lag visuelle modeller/ tegninger (mockups) eller interaktive representasjoner på nett (prototyper)

• Evaluer brukervennlighet med testing i fokusgrupper (dvs. aktuelle brukere, målgruppen), brukertester og walkthroughs med kunden

Kirsten Ribu Samfunnsinformatikk 2008

32

Kirsten Ribu Samfunnsinformatikk 2008

33

Forbedre prototyper

• Bruk resultatene til å lage flere mockups/ forbedre prototyper

• Gjenta denne prosessen (design-iterasjon) til designet møter usability målene

Kirsten Ribu Samfunnsinformatikk 2008

34

4. Produksjon

• Lag det endelige produktet

• Evaluer produktet - funksjonalitet, design og brukervennlighet - gjennom testing, kvalitetssikring, usability testing og kunde-testing

• Bruk resultatene til å forbedre produktet

Kirsten Ribu Samfunnsinformatikk 2008

35

Flash

• Siste versjon av Flash kan brukes!

• Men det diskuteres hvor bra det er ? Bruker du Flash må du lage alternativ tekst.

• Macromedia Flash 8 and Macromedia Flash Player 8.

• https://admin.adobe.acrobat.com/_a295153/p70389301/

Kirsten Ribu Samfunnsinformatikk 2008

36

JAWS – Screen reader

• https://admin.adobe.acrobat.com/_a295153/p85096505/

Kirsten Ribu Samfunnsinformatikk 2008

37

Rich Media Accessibility Website

• http://ncam.wgbh.org/richmedia/

• Rich media = rich web sites

Kirsten Ribu Samfunnsinformatikk 2008

38

God påske!

• Ingen undervisning i morgen onsdag

• Tirsdag 25. mars. – Studentpresentasjoner– Studasser kommer, skal gi veiledning i

prosjektoppgaven

• 26. mars: Gjesteforelesning fra RL! Sverre Hjelm, tidligere IU-student kommer