Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Design för alla

2 723 vues

Publié le

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

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

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

×