mer om tilgjengelighet

Kirsten Ribu Samfunnsinformatikk 2008

1

Mer om tilgjengelighet

Kirsten Ribu

HiO


2


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

http://chrispederick.com/work/webdeveloper/







4

Funksjonene

• 12 hovedknapper

• Dropdown-menyer

• Eller keyboard shortcuts


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!


6


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


8


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


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.


11

1. Fargepaletter

• Velg egnet farge

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


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


13

3. Plukk farge

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


14

http://juicystudio.com/index.php

http://juicystudio.com/


15

Synsforstyrrelser/ øysykdommer


16


17


18


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


20


21

Problemer

• Surfing uten mus – pass på antall klikk!

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


22


23


24


25


26


27

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

hatis.txl

http://www.usabilityfirst.com/accessibility/whatis.txl

http://www.usabilityfirst.com/accessibility/whatis.txl


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


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


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


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


32


33

Forbedre prototyper

• Bruk resultatene til å lage flere mockups/ forbedre prototyper

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


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


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/

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



36

JAWS – Screen reader

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




37

Rich Media Accessibility Website

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

• Rich media = rich web sites

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


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

mer om tilgjengelighet

Documents