Design för alla
-
Upload
metamatrix -
Category
Technology
-
view
2.199 -
download
1
description
Transcript of Design för alla
![Page 1: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/1.jpg)
2023-04-08
DESIGN FÖR ALLA
MAX WALTER
MARTIN RYTTLER
2011-03-10
![Page 2: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/2.jpg)
2
Designföralla(Universal design)
![Page 3: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/3.jpg)
3
Designförvem?
![Page 4: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/4.jpg)
4
Människor
![Page 5: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/5.jpg)
5
Människormed funktionsnedsättning
• Kognitiva• Visuella• Motoriska• Hörsel
![Page 6: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/6.jpg)
6
Människoräldre än 65
![Page 7: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/7.jpg)
7
Människor”normalstörda” - användbarhet
cc by-nc-sa supersimbo.blogspot.comcc by-nc-sa /*dave*/@flickr
00:00
![Page 8: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/8.jpg)
8
Design för alla
=
Tillgänglighet ökar användbarhet, och vice versa!
![Page 9: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/9.jpg)
9
MellanhänderAggregatorer
SökmotorerPrisjägareRSS
![Page 10: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/10.jpg)
10
MellanhänderSociala medier
FacebookTwitterLinkedin
.. .. .. … .. . .. . .. … . . . .. …. .. . .
.. .. .. … .. . .. . .. … . . . .. …. .. . .
![Page 11: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/11.jpg)
11
Design för alla
=
Tillgänglighet för människor ger tillgänglighet för maskiner, och vice versa!
![Page 12: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/12.jpg)
12
Design för alla =Ingen anpassning för målgruppen?
![Page 13: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/13.jpg)
13
Design för alla ≠Ingen anpassning för målgruppen?
Nej, det är skillnad på att en webbplats är tillgänglig för alla och att den skapar nytta för alla
![Page 14: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/14.jpg)
14
Design för allaTillgänglighet, användbarhet, nytta
Tillgänglighet Användbarhet
![Page 15: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/15.jpg)
15
Tillgänglighetby example
![Page 16: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/16.jpg)
16
WCAG 1.0
Statiskasidor
WCAG 2.0
WAI ARIA
Webb-applikationer
Vägledningen24-timmarswebben
Teknik-perspektiv
Användar-perspektiv
1999 2011
Riktlinjerför att skapa tillgänglig webbplatser
Vägledning förwebbutveckling
http://beta.webbriktlinjer.se/
![Page 17: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/17.jpg)
17
![Page 18: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/18.jpg)
18
![Page 19: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/19.jpg)
19
![Page 20: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/20.jpg)
20
![Page 21: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/21.jpg)
21
![Page 22: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/22.jpg)
22
![Page 23: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/23.jpg)
23
![Page 24: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/24.jpg)
24
![Page 25: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/25.jpg)
25
![Page 26: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/26.jpg)
26
![Page 27: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/27.jpg)
27
![Page 28: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/28.jpg)
28
![Page 29: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/29.jpg)
29
![Page 30: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/30.jpg)
30
![Page 31: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/31.jpg)
31
Verktyg
SkärmläsareFangs - http://bit.ly/h2a8GP
![Page 32: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/32.jpg)
32
![Page 33: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/33.jpg)
33
![Page 34: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/34.jpg)
34
![Page 35: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/35.jpg)
35
![Page 36: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/36.jpg)
36
![Page 37: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/37.jpg)
37
Verktyg
Testa texterhttp://valideratext.se
![Page 38: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/38.jpg)
38
![Page 39: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/39.jpg)
39
Designför allaTillgänglighet, hittbarhet och användbarhet stöder varandra!
![Page 40: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/40.jpg)
40
DESIGN FÖR ALLATIPS FÖR DIG SOM JOBBAR MED WEBB
• Installera flera webbläsare. (Olika webbläsare kan visa olika resultat)– Internet Explorer (Version 8 är den vanligaste)– Firefox (Version 3+. Här finns många hjälpsamma verktyg som kan installeras som tillägg. Vi
listar dom på nästa bild.)– Chrome– Safari
• Bokmärk följande webbplatser:– https://www.valideratext.se/ (Verktyg för att testa hur lättläst en text är)– http://validator.w3.org (Verktyg för att validera kod-standard på webbplatser)– http://www.eutveckling.se/riktlinjer/webb/ (Riktlinjer för att skapa tillgängliga
webbplatser. Med läsanvisningar och checklistor för olika faser/roller.)– http://www.funkanu.se/wcag-translation/ (WCAG 2.0 på svenska)
![Page 41: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/41.jpg)
41
DESIGN FÖR ALLATILLÄGG TILL WEBBLÄSAREN FIREFOX
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.)• Web developer Toolbar• Fangs Screen Reader
För dig som är lite mer tekniskt intresserad av HTML-kod:• Firebug• YSlow
![Page 42: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/42.jpg)
42
DESIGN FÖR ALLAHUR BÖRJAR DU MED WEB DEVELOPER TOOLS?
Du hittar Web developer tools genom att högerklicka på webbsidan. I popupmenyn som visas hittar du Web developer och där under alla verktyg.• Granska kodstandard genom att välja Tools -> Validate HTML• Se sidan utan visuell formgivning. Stäng av CSS genom att välja
Tools -> CSS -> Disable styles -> All styles• 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.)
• Under Tools -> Information hittar du även Document outline som visar en överblick på sidans uppbyggnad.
![Page 43: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/43.jpg)
43
DESIGN FÖR ALLAHUR BÖRJAR DU MED FANGS?
Du hittar Fangs genom att högerklicka på den webbsida som du vill granska och välja View Fangs. 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.
![Page 44: Design för alla](https://reader035.fdocuments.net/reader035/viewer/2022062614/54741a25b4af9fb40a8b569d/html5/thumbnails/44.jpg)
metamatrix.se