1.
Design för ALLA<br />Max walter<br />Martin Ryttler<br />2011-03-10<br />

2.
Design<br />för<br />alla<br />(Universal design)<br />

3.
Design<br />för<br />vem?<br />

4.
Människor<br />

5.
Människor<br />med funktionsnedsättning<br /><ul><li>Kognitiva

6.
Visuella

7.
Motoriska

8.
Hörsel</li></li></ul><li>Människor<br />äldre än 65<br />

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.
Design för alla<br />Tillgänglighet ökar användbarhet, och vice versa!<br />=<br />

11.
Mellanhänder<br />Aggregatorer<br />Sökmotorer<br />Prisjägare<br />RSS<br />

12.
Mellanhänder<br />Sociala medier<br />.. .. .. … .. . .. . .. … . . . .. …. .. . .<br />.. .. .. … .. . .. . .. … . . . .. …. .. . .<br />Facebook<br />Twitter<br />Linkedin<br />

13.
Design för alla<br />Tillgänglighet för människor ger tillgänglighet för maskiner, och vice versa!<br />=<br />

14.
Design för alla =<br />Ingen anpassning <br />för målgruppen?<br />

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.
Design för alla<br />Tillgänglighet, användbarhet, nytta<br />Tillgänglighet<br />Användbarhet<br />

17.
Tillgänglighet<br />by example<br />

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.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.
Verktyg<br />Skärmläsare<br />Fangs - http://bit.ly/h2a8GP<br />

34.

35.

36.

37.

38.

39.
Verktyg<br />Testa texter<br />http://valideratext.se<br />

40.

41.
Design<br />för alla<br />Tillgänglighet, hittbarhet och användbarhet stöder varandra!<br />

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