Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design för alla

2,723 views

Published on

Från frukostseminariet "Nästa steg för tillgänglighet" den 9 juni 2011.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Design för alla

  1. 1. Design för ALLA<br />Max walter<br />Martin Ryttler<br />2011-03-10<br />
  2. 2. Design<br />för<br />alla<br />(Universal design)<br />
  3. 3. Design<br />för<br />vem?<br />
  4. 4. Människor<br />
  5. 5. Människor<br />med funktionsnedsättning<br /><ul><li>Kognitiva
  6. 6. Visuella
  7. 7. Motoriska
  8. 8. Hörsel</li></li></ul><li>Människor<br />äldre än 65<br />
  9. 9. Människor<br />”normalstörda” - användbarhet<br />00:00<br />cc by-nc-sa supersimbo.blogspot.com<br />cc by-nc-sa /*dave*/@flickr<br />
  10. 10. Design för alla<br />Tillgänglighet ökar användbarhet, och vice versa!<br />=<br />
  11. 11. Mellanhänder<br />Aggregatorer<br />Sökmotorer<br />Prisjägare<br />RSS<br />
  12. 12. Mellanhänder<br />Sociala medier<br />.. .. .. … .. . .. . .. … . . . .. …. .. . .<br />.. .. .. … .. . .. . .. … . . . .. …. .. . .<br />Facebook<br />Twitter<br />Linkedin<br />
  13. 13. Design för alla<br />Tillgänglighet för människor ger tillgänglighet för maskiner, och vice versa!<br />=<br />
  14. 14. Design för alla =<br />Ingen anpassning <br />för målgruppen?<br />
  15. 15. Design för alla ≠<br />Ingen anpassning <br />för målgruppen?<br />Nej, det är skillnad på att en webbplats är tillgänglig för alla och att den skapar nytta för alla<br />
  16. 16. Design för alla<br />Tillgänglighet, användbarhet, nytta<br />Tillgänglighet<br />Användbarhet<br />
  17. 17. Tillgänglighet<br />by example<br />
  18. 18. Riktlinjer<br />för att skapa tillgänglig webbplatser<br />Användar-<br />perspektiv<br />Teknik-<br />perspektiv<br />Vägledningen<br />24-timmarswebben<br />Vägledning för<br />webbutveckling<br />WCAG 2.0<br />Webb-<br />applikationer<br />Statiska<br />sidor<br />WAI ARIA<br />WCAG 1.0<br />1999<br />2011<br />http://beta.webbriktlinjer.se/<br />
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31.
  32. 32.
  33. 33. Verktyg<br />Skärmläsare<br />Fangs - http://bit.ly/h2a8GP<br />
  34. 34.
  35. 35.
  36. 36.
  37. 37.
  38. 38.
  39. 39. Verktyg<br />Testa texter<br />http://valideratext.se<br />
  40. 40.
  41. 41. Design<br />för alla<br />Tillgänglighet, hittbarhet och användbarhet stöder varandra!<br />
  42. 42. Design för alla<br />Tips för dig som jobbar med webb <br />Installera flera webbläsare. (Olika webbläsare kan visa olika resultat)<br />Internet Explorer (Version 8 är den vanligaste)<br />Firefox (Version 3+. Här finns många hjälpsamma verktyg som kan installeras som tillägg. Vi listar dom på nästa bild.)<br />Chrome<br />Safari<br />Bokmärk följande webbplatser:<br />https://www.valideratext.se/ (Verktyg för att testa hur lättläst en text är)<br />http://validator.w3.org (Verktyg för att validera kod-standard på webbplatser)<br />http://www.eutveckling.se/riktlinjer/webb/ (Riktlinjer för att skapa tillgängliga webbplatser. Med läsanvisningar och checklistor för olika faser/roller.)<br />http://www.funkanu.se/wcag-translation/ (WCAG 2.0 på svenska)<br />
  43. 43. Design för alla<br />Tillägg till webbläsaren Firefox<br />För dig som jobbar lite mer med tillgänglighetsfrågor, eller dig som engagerad redaktör så rekommenderar vi följande tillägg till webbläsaren Firefox. I menyn i Firefox hittar du ’Tillägg’ där du kan söka och installera dessa. (Ett par av verktygen finns även för Internet Explorer.)<br />Web developer Toolbar<br />FangsScreenReader<br />För dig som är lite mer tekniskt intresserad av HTML-kod:<br />Firebug<br />YSlow<br />
  44. 44. Design för alla<br />Hur börjar du med Web developertools? <br />Du hittar Web developertools genom att högerklicka på webbsidan. I popupmenyn som visas hittar du Web developer och där under alla verktyg.<br />Granska kodstandard genom att välja Tools -> Validate HTML<br />Se sidan utan visuell formgivning. Stäng av CSS genom att välja Tools -> CSS -> Disablestyles -> All styles<br />Du kan även välja att visa information genom att välja Tools -> Information. (Access keys och Tab index ger bra startpunkt för att se hur man kan navigera utan muspekare.)<br />Under Tools -> Information hittar du även Documentoutline som visar en överblick på sidans uppbyggnad.<br />
  45. 45. Design för alla<br />Hur börjar du med Fangs? <br />Du hittar Fangs genom att högerklicka på den webbsida som du vill granska och välja ViewFangs. Resultatet visas i ett nytt fönster. Där hittar du tre flikar med information som simulerar hur en skärmläsare ser och läser upp sidans innehåll.<br />

×