2023-04-08

DESIGN FÖR ALLA

MAX WALTER

MARTIN RYTTLER

2011-03-10

2

Designföralla(Universal design)

3

Designförvem?

4

Människor

5

Människormed funktionsnedsättning

• Kognitiva• Visuella• Motoriska• Hörsel

6

Människoräldre än 65

7

Människor”normalstörda” - användbarhet

cc by-nc-sa supersimbo.blogspot.comcc by-nc-sa /*dave*/@flickr

00:00

8

Design för alla

=

Tillgänglighet ökar användbarhet, och vice versa!

9

MellanhänderAggregatorer

SökmotorerPrisjägareRSS

10

MellanhänderSociala medier

FacebookTwitterLinkedin

.. .. .. … .. . .. . .. … . . . .. …. .. . .

.. .. .. … .. . .. . .. … . . . .. …. .. . .

11

Design för alla

=

Tillgänglighet för människor ger tillgänglighet för maskiner, och vice versa!

12

Design för alla =Ingen anpassning för målgruppen?

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

14

Design för allaTillgänglighet, användbarhet, nytta

Tillgänglighet Användbarhet

15

Tillgänglighetby example

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/

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Verktyg

SkärmläsareFangs - http://bit.ly/h2a8GP

32

33

34

35

36

37

Verktyg

Testa texterhttp://valideratext.se

38

39

Designför allaTillgänglighet, hittbarhet och användbarhet stöder varandra!

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)

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

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.

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.

metamatrix.se