Usability & accessibility. Användbarhet & tillgänglighet

Storlek: px

Starta visningen från sidan:

Download "Usability & accessibility. Användbarhet & tillgänglighet"

Oskar Viklund
för 8 år sedan
Visningar:

1 Usability & accessibility Användbarhet & tillgänglighet

2 Varför? Det som är bra för funktionshindrade är ofta bra för alla Good will, PR, corporate responsibility Google är blind Lagar och regler

3 Tillgänglighet Första hindret, utan tillgång ingen användning

4 Lagar FN, mänskliga rättigheter 21 Everyone has the right of equal access to public service in his country Sverige, liknande lagar men uppdelade på flera ställen

5 Everyone Man menar verkligen alla Man radar inte upp några undantag

6 Equal Jämlik är inte detsamma som lika Alla får samma broschyr, lika Alla får samma information men i olika former, jämlik Till var och en efter var och ens behov

7 Public service Kommun, stat, landsting, självklart Men även bank, post, försäkring, matbutiker, tåg, buss...

8 Sverige deadline 2010 Patient till medborgare (PDF på webbplatsen) FN, tog en ny resolution 30/3 Convention on the Right of Persons with Disabilities (PDF på webbplatsen)

9 Funktionshinder Fysiska (nedsatt syn, hörsel, nervskador...) Kognitiva (dyslexi, dyskalkyli...) 1.3 miljoner i Sverige 650 miljoner i världen

10 Funktionshinder Varierar med miljö Åk till Ryssland eller Japan och försök klara er utan hjälp

11 Klara sig själv Grunden i Sverige Inte enbart gott Självförtroende (saker man gör) Självkänsla (jag som individ) Självtillit självförtroende + självkänsla

12 Webbutveckling Måste utveckla tillsammans med användarna WAI 2, kommer kanske att bli helt automatiserat Men man kommer aldrig att kunna kontrollera allt automatiskt, tex språk, logisk struktur...

13 WAI Web Accessibility Initiative Statskontorets, Vervas 24-timmars myndigheten USA section 508

14 WCAG Web Content Accessibility Guidelines A, de viktigaste/största hindren undanröjda AA, alla hinder undanröjda AAA, alla hinder borta, plus extra funktioner som underlättar Section 508, A

hinder undanröjda AAA, alla hinder borta, plus extra

15 Webbdesign Struktur och navigering Gäller alla, med eller utan funktionshinder Kan man mäta detta automatiskt?

16 Struktur - navigering Följa standarder Kundvagn - tomtesläde Framåt - bakåt Länkfärger Namn, skärm, bildskärm, monitor, singularis eller pluralis

17 Struktur? Aftonbladet - DN Apple Namn, jfr olika kommuner

18 Tre frågor Var är jag? Vart kan jag gå? Var har jag varit? Och inte ta alltför mycket skärmyta Litteraturtips: vad som helst med Jakob Nielsen

19 Struktur Oftast trädstruktur Praktiskt, använda Word och Whiteboard Testa, testa och testa Vanligaste felet, organisationsstruktur, inte struktur anpassad för besökaren

20 Med sunt förnuft kan man komma långt Ett klick för att ta sig tillbaka till första sidan

21 Skilj på innehåll och utseende HTML för innehåll och struktur (helst XHTML) CSS för utseende <em> helt annat än <i> <h1> helt annat än.huvudrubrik

22 Google är blind h1 huvudrubrik h2 underrubrik h3 mellanrubrik h4 ingress h5 bildtext h6 byline Men för AA måste man nästla H rätt

23 Språk Så enkelt och lättläst som möjligt (målgrupp) Inte säkert att alla läser allt Inte säkert att alla börjar från början En webbplats för alla? Eller flera riktade webbplatser?

24 Lättläst Klarspråk:

25 Mer än svenska Officiella språk i Sverige Samiska, finska, meänkiele, romani, jiddisch (och teckenspråk) Största minoritetsspråken? Finska, norska, danska, engelska, spanska, franska, kurdiska, serbokroatiska, persiska/ farsi, thai, arabiska

26 Vilka språk Jämför vilka språk olika myndigheter stödjer Kommuner, invånare - turister

27 Typografi Georgia och Verdana de bästa skärmtypsnitten som alla har Läshastighet, motivation

28 Andale Mono Arial Arial Black Courier New Comic Sans MS Georgia Impact Times New Roman Trebuchet MS Verdana

29 Bra typsnitt för skärm Lite rundare och bredare, stort hålrum inuti bokstäverna Hög X-höjd Kraftiga grundstreck och seriffer Hellre Opentype än Truetype Vem gjorde typsnittet, i vilket syfte

30 Från vänster: Georgia, Palatino, New Century Schoolbook, Times New Roman, Hoefler, Goudy, Garamond Från vänster: Charcoal, Verdana, Trebuchet, Arial, Helvetica, Lucida Grande, Franklin, Gill

33 Plats Times New Roman = 100% Georgia 110% Arial 110% Verdana 120%

34 Skärm jfr papper Något större text Något större radavstånd Något kortare rader (typsnittet tar mer plats) Tydligare styckeindelning Kursiv och understruken alltför svårläst, fet stil bättre

35 Listor ofta bra på skärm (bättre än på papper) Man kan använda förstaradsindrag men det bör vara något större

36 Färg Tillräcklig kontrast (mindre grad kräver större kontrast) Färg får inte ha betydelse, bara dekoration (erbjud alternativ) Skärm utan färg, färgblind

37 Färg betydelse Symbolisk betydelse Sorg, svart i Sverige, vit i Asien Blått är flott, gult är fult, grönt är skönt Purpur endast för högre adel

38 Färg betydelse Måndag, grön Tisdag, blå Onsdag, vit Torsdag, brun Fredag, gul 1 dl, röd 1/2 dl, svart 1 msk, orange 1 tsk, gul 1 krm, vit Lördag, rosa Söndag, röd Trafikljus

39 Stilmallar, CSS Erbjuda alternativa stilmallar Tex Instruktioner om hur man själv anpassar sin webbläsare

40 CSS Ange alternativ för typsnitt Aldrig!Important CSS för layout, koden i rätt ordning

41 Webbläsare Internet Explorer 6, vanligast och sämst Firefox, bäst? IE 7, bättre men få använder Fortfarande 1% IE 5 Nån % av varje, Safari, Camino, Netscape, Opera, Mozilla...

42 Lär känna webbläsaren Stänger av och på bilder, javascript mm Förstorar/förminskar Navigera med tangentbordet CSS-problem Kan man använda en egen stilmall

43 Lässvårigheter Förutom språk, struktur och typografi Intelligent sökfunktion (tillåta stavfel) 30% av sökningarna inget resultat Site-map (enklare att känna igen ord än att stava/gissa själv)

44 Talsyntes Oftast meningslöst på webservern De som behöver talsyntes har det oftast själva Ska man ha det måste användaren själv kunna välja vad som ska läsas upp

45 Talsyntes Kombineras med en skärmläsare (tex jaws) Tolkar webbsidan, skickar vidare till talsyntesen Ofta i kombination med ett brailletangentbord lang=sv, en...

46 Ljud Ljud också som text Undertexter, SMIL Alternativ sida (longdesc) Ljudet så rent som möjligt

47 Video Video också som text Undertexter, SMIL Alternativ sida (longdesc)

48 Skärmstorlek 640 x 480 eller 800 x 600 pixlar Nervskada, synskada, rullstol... Absolut inte scrolla horisontellt

49 Uppkoppling En majoritet använder bredband Men många använder fortfarande modem Surfa mot en diskett ( hastighet som modem)

50 Webbsidan INTE auto-uppdatering eller pop-up fönster Pop-up meny helst en OK-knapp INTE java-script för navigering Undvik Flash (kan funka ibland) Varje frame måste ha ett bra och logiskt namn

51 Länkar Länkar måste ha bra/logiska namn Ev lägga till title Tabindex för bättre ordning av länkar Kunna hoppa över långa listor med länkar

52 Bilder Bilder ska ha alt-texter (förutom om de bara är dekor) Nyhetsgrafik, ge text-alternativ (longdesc)

53 Tabeller INTE tabell i tabell Använd TH för tex tidtabeller Tabeller för tabelldata (helt inte layout) Lista istället för tabell?

54 <table summary= sundsvall hudiksvall busstidtabell > <tr> <td></td> <th scope= col >Buss 1</th> <th scope= col >Buss 2</th> </tr> <tr> <th scope= row >Sundsvall</th> <td>12.00</td> <td>14.00</td> </tr> <tr> <th scope= row >Hudiksvall</th> <td>13.10</td> <td>15.10</td> </tr> </table>

55 Flash & PDF Bättre och bättre användbarhet men inte perfekt Adobe arbetar hårt (äger både PDF och Flash)

56 Kom ihåg Du kan inte hjälpa alla Men varje litet steg räknas En utmaning

57 Checklista Skärm 800 x 600 pixlar Surfa utan bilder, använd bara tangentbordet Flytta stolen 40 cm bakåt Lägg dina webbsidor på en diskett Validera HTML och CSS Testa i olika webbläsare, olika märken, gamla & nya, Mac & PC

58 Länktips

Relevanta dokument

Grafisk design För synskadade och lite om dyslexi

Grafisk design För synskadade och lite om dyslexi Färgblind Tritanopi/tritanomali, blått Protanopi/protanomali, röd Deuteranopi/deuteranomali, grönt Röd-grön vanligast Gul-blå ovanlig Mycket ovanligt,