Andra upplagan av frukostseminariet "Web für alle" som hölls den 19/9 av Gro Dahlbom och Carl Törnquist hos Metamatrix. Vi pratade om tillgänglighet, hur det kopplar till mobilwebb och responsiv design samt vad man som webbredaktör kan tänka på när det gäller tillgänglighet.

1. 2013-09-19
Webb für alle
Frukostseminarium 19 september 2013

2. 2013-09-192013-09-19

3. 3
• Vad är tillgänglighet och varför är det viktigt?
• Strategi för en hållbar webb
• Att jobba med innehåll och praktiska exempel
Vad ska vi prata om idag?

4. 4
• Vad är tillgänglighet och varför är det viktigt?
• Strategi för en hållbar webb
• Att jobba med innehåll och praktiska exempel
Vad ska vi prata om idag?

5. 5
AvailabilityAccessibility och
• användbarhet för personer
som faller utanför normen, på
grund av funktionsnedsättning
• ej valbart
• användbarhet för personer
som faller utanför normen, på
grund av teknik
• ”valbart”
Vad är tillgänglighet och varför är det viktigt?

6. 6
Användbarhet
Tillgänglighet
Vad är tillgänglighet och varför är det viktigt?
“Accessibility is a
subset of a more
general pursuit:
usability”
- Shawn Lawton Henry, WAI

7. 7
16-19%
Vad är tillgänglighet och varför är det viktigt?
» Andel av Sveriges
befolkning med någon typ
av funktionsnedsättning
Källa: Statistiska centralbyrån, Jordbruksverket

8. 8
Källor: Statistiska centralbyrån, Centrum för lättlläst
?
25%15%
Vad är tillgänglighet och varför är det viktigt?

9. 9
Vad är tillgänglighet och varför är det viktigt?
» Konsekvenser

10. 10
Källa: dn.se
Bild: feber.se
» Konsekvenser
Vad är tillgänglighet och varför är det viktigt?

11. 11
• Skärmläsare
• Tangentbordsnavigering
• Alternativa färgscheman
+ många andra
Vad är tillgänglighet och varför är det viktigt?
Hjälpmedel

12. 2013-09-192013-09-19

13. 13
Hjälpmedel - tangentbordsnavigering
Vad är tillgänglighet och varför är det viktigt?

14. 14
Vad är tillgänglighet och varför är det viktigt?
Hjälpmedel– Alternativa färgscheman

15. 15
• Skärmläsare
• Tangentbordsnavigering
• Alternativa färgscheman
+ många andra
Följ standarder
HTML, CSS, WCAG m.fl.
Vad är tillgänglighet och varför är det viktigt?
Hjälpmedel – följa standarder

16. 16
• Vad är tillgänglighet och varför är det viktigt?
• Strategi för en hållbar webb
• Att jobba med innehåll och praktiska exempel
Vad ska vi prata om idag?

17. 17
Strategi för en hållbar webb
• Tillgänglighet från början till slut
• Strategi för tillgänglighet under utveckling …
• … och under förvaltning.
Räcker det?

18. 18
tillgänglighet responsiv design innehåll
Strategi för en hållbar webb

19. 19
Strategi för en hållbar webb
Appar och mobilsajter

20. 20
Strategi för en hållbar webb
Responsiv design

21. 21
Strategi för en hållbar webb
Responsiv design

22. 22
Filosofi: webb für alle
Strategi för en hållbar webb

23. 23
• Vad är tillgänglighet och varför är det viktigt?
• Strategi för en hållbar webb
• Att jobba med innehåll och praktiska exempel
Vad ska vi prata om idag?

24. 24
Bild: http://www.xkcd.com
Att jobba med innehåll och praktiska exempel
Att sålla bland innehållet

25. 25
Källa: DN.se

26. 26
»Börja med det viktigaste
»Använd en tydlig struktur
»Undvik svåra begrepp
»Skriv till en målgrupp
Hur skriver jag tillgängliga texter?
Att jobba med innehåll och praktiska exempel

27. 27
Hur skriver jag tillgängliga texter?
Att jobba med innehåll och praktiska exempel
Bild: http://www2.sofi.se/Svenska/template.htm

28. 28
Källa: Webaim
Att jobba med innehåll och praktiska exempel

29. 29
Att jobba med innehåll och praktiska exempel
Texter och responsiv design

30. 30
Att jobba med innehåll och praktiska exempel
Texter och responsiv design

31. 31
• Alt: ”Webbkonsulter poserar för foto”
• Alt: ””
Att jobba med innehåll och praktiska exempel
Bilder

32. 32
ALT-texter
Ha samma funktion som bilden
Vara kortfattade och kärnfulla
Vara överflödiga eller säga exakt samma sak
som texten kring bilden

33. 33
Att jobba med innehåll och praktiska exempel
Undertexter

34. 34
Källa: medocular
Att jobba med innehåll och praktiska exempel

35. 35
Att jobba med innehåll och praktiska exempel

36. 36
»Tillgänglighet är ett angreppsätt, inte
en aktivitet
Sammanfattningsvis
Webb für alle
»Mobilparadigm, innehållsstrategi och
tillgänglighet går ihop
»Redaktören är en nyckelperson

37. 37
metamatrix.se
Sveavägen 31, 111 34 Stockholm | c/o Malmö Arena, Norra Vallgatan 20, 211 25 MALMÖ
Växel: 08-50 65 33 00

38. 38
7 kriterier för ett bra digitalt koncept
Framöver på Metamatrix
Välkomna den
7:e november 2013
kl 9.00 – 10.00
»7 kriterier för ett bra digitalt
koncept

39. 39
Bildkällor
• Man med portfölj http://pixabay.com/en/icon-blue-people-man-silhouette-33032/ (Public domain)
• Världskarta http://commons.wikimedia.org/wiki/File:World_Map_Blank.svg (Public domain)
• Alfapetbrickor http://www.flickr.com/photos/tjt195/4394706964/ (Creative Commons 2.0
Generic)
• Äldre par http://pixabay.com/en/old-sign-symbol-people-person-24343/ (Public domain)
• Tunnelbane-T: https://commons.wikimedia.org/wiki/File:Stockholm_metro_symbol.svg (Public
domain)
• Tangentbord. http://pixabay.com/sv/tangentbord-bokst%C3%A4ver-datorn-65042/ (Public
domain)
• Wywallet/Röda korset http://feber.se/mobil/art/266061/wywallet_snker_rda_korset/ (Använd
med tillstånd)
• Sjömagasinet. Skärmdump från http://www.sjomagasinet.se/
• Harvard. Skrämdump från http://www.harvard.edu/
• Innehåll på universitetswebbar http://xkcd.com/773/ (Använd med tillåtelse)
• Artikel om PRV. Skärmdump från: http://xkcd.com/773/
• Att skriva bättre. Skärmdump från: http://www2.sofi.se/Svenska/template.htm
• Läsa på tunnelbanan: http://www.flickr.com/photos/49093093@N02/4638656232/ (Creative
Commons Attribution 2.0 Generic)
•Transkribering
http://commons.wikimedia.org/wiki/File:Transcription_using_cylinder_phonograph.png (Public
Domain)
• iPad i solsken http://www.flickr.com/photos/sanfranannie/5416471211/ (Creative commons 2.0
Generic)