Usability & accessibility Användbarhet & tillgänglighet
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
Tillgänglighet Första hindret, utan tillgång ingen användning
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
Everyone Man menar verkligen alla Man radar inte upp några undantag
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
Public service Kommun, stat, landsting, självklart Men även bank, post, försäkring, matbutiker, tåg, buss...
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)
Funktionshinder Fysiska (nedsatt syn, hörsel, nervskador...) Kognitiva (dyslexi, dyskalkyli...) 1.3 miljoner i Sverige 650 miljoner i världen
Funktionshinder Varierar med miljö Åk till Ryssland eller Japan och försök klara er utan hjälp
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
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...
WAI Web Accessibility Initiative www.w3.org/wai Statskontorets, Vervas 24-timmars myndigheten www.verva.se USA section 508
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 www.contentquality.com
Webbdesign Struktur och navigering Gäller alla, med eller utan funktionshinder Kan man mäta detta automatiskt?
Struktur - navigering Följa standarder Kundvagn - tomtesläde Framåt - bakåt Länkfärger Namn, skärm, bildskärm, monitor, singularis eller pluralis
Struktur? www.miun.se Aftonbladet - DN Apple Namn, jfr olika kommuner
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
Struktur Oftast trädstruktur Praktiskt, använda Word och Whiteboard Testa, testa och testa Vanligaste felet, organisationsstruktur, inte struktur anpassad för besökaren
Med sunt förnuft kan man komma långt www.useit.com www.hi.se/surfautanhinder Ett klick för att ta sig tillbaka till första sidan
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 www.csszengarden.com
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
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?
Lättläst www.lattlast.se Klarspråk: www.regeringen.se/sb/d/2518
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
Vilka språk Jämför vilka språk olika myndigheter stödjer www.riksdagen.se www.spv.se Kommuner, invånare - turister
Typografi Georgia och Verdana de bästa skärmtypsnitten som alla har Läshastighet, motivation
Andale Mono Arial Arial Black Courier New Comic Sans MS Georgia Impact Times New Roman Trebuchet MS Verdana
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
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
Plats Times New Roman = 100% Georgia 110% Arial 110% Verdana 120%
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
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
Färg Tillräcklig kontrast (mindre grad kräver större kontrast) www.etre.com/tools/colourcheck Färg får inte ha betydelse, bara dekoration (erbjud alternativ) Skärm utan färg, färgblind www.vischeck.com
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
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
Stilmallar, CSS Erbjuda alternativa stilmallar Tex www.swedbank.se, www.sundsvall.se Instruktioner om hur man själv anpassar sin webbläsare
CSS Ange alternativ för typsnitt Aldrig!Important CSS för layout, koden i rätt ordning
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...
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
Lässvårigheter Förutom språk, struktur och typografi Intelligent sökfunktion (tillåta stavfel) www.ne.se 30% av sökningarna inget resultat Site-map (enklare att känna igen ord än att stava/gissa själv)
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
Talsyntes Kombineras med en skärmläsare (tex jaws) Tolkar webbsidan, skickar vidare till talsyntesen Ofta i kombination med ett brailletangentbord lang=sv, en...
Ljud Ljud också som text Undertexter, SMIL Alternativ sida (longdesc) Ljudet så rent som möjligt
Video Video också som text Undertexter, SMIL Alternativ sida (longdesc)
Skärmstorlek 640 x 480 eller 800 x 600 pixlar Nervskada, synskada, rullstol... Absolut inte scrolla horisontellt
Uppkoppling En majoritet använder bredband Men många använder fortfarande modem Surfa mot en diskett ( hastighet som modem)
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
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
Bilder Bilder ska ha alt-texter (förutom om de bara är dekor) Nyhetsgrafik, ge text-alternativ (longdesc)
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?
<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>
Flash & PDF Bättre och bättre användbarhet men inte perfekt Adobe arbetar hårt (äger både PDF och Flash)
Kom ihåg Du kan inte hjälpa alla Men varje litet steg räknas En utmaning
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
Länktips www.aardman.co.uk www.apple.com www.pixar.com www.funkanu.se