Metamatrix tillgänglig webb
-
Upload
metamatrix -
Category
Technology
-
view
130 -
download
0
description
Transcript of Metamatrix tillgänglig webb
![Page 1: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/1.jpg)
CC-BY
Hur tillgänglig är du?
Bygg en webbplats alla kan använda Pär Lannerö 2014-09-11 CC-BY
![Page 2: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/2.jpg)
CC-BY
Bygg en webbplats alla kan använda Agenda
1. Vem?
2. Varför?
3. Vad?
4. Hur?
![Page 3: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/3.jpg)
CC-BY
Bygg en webbplats alla kan använda Innan vi börjar…
Pär Lannerö Upphovsrätt Illustrationer @plannero
delegationen CC-BY pictogram.se
webbriktlinjer.se = dela gärna
plannero ange källa
E-delegationen/webbriktlinjer.se
![Page 4: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/4.jpg)
CC-BY
![Page 5: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/5.jpg)
CC-BY
Vägledning för webbutveckling
![Page 6: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/6.jpg)
CC-BY
Användbar
Åtkomlig
över tid
Förtroende-
ingivande Effektiv
Tekniskt
oberoende
Vägledning för webbutveckling
Tillgänglig
Sex principer
![Page 7: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/7.jpg)
CC-BY
Användbar
Åtkomlig
över tid
Förtroende-
ingivande Effektiv
Tekniskt
oberoende
Vägledning för webbutveckling
Tillgänglig
Sex principer
![Page 8: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/8.jpg)
CC-BY
Grunderna för tillgänglighet
![Page 9: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/9.jpg)
CC-BY
![Page 10: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/10.jpg)
CC-BY
Varför?
26% i ålder 16-64 år
har någon
funktionsnedsättning
(SCB 2013).
![Page 11: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/11.jpg)
CC-BY
Varför?
100% har särskilda
behov ibland!
![Page 12: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/12.jpg)
CC-BY
Varför?
100% har särskilda
behov ibland!
![Page 13: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/13.jpg)
CC-BY
Varför?
Självständighet
![Page 14: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/14.jpg)
CC-BY
Varför?
Innanförskap
![Page 15: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/15.jpg)
CC-BY
Varför?
Tillgänglighet
ökar ofta
effektivitet
och
användbarhet
för alla
![Page 16: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/16.jpg)
CC-BY
Varför?
SEO
![Page 17: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/17.jpg)
CC-BY
Varför?
• Mindre support
• Nöjda kunder
• Nöjda medarbetare
![Page 18: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/18.jpg)
CC-BY
Varför?
Stolta
webbutvecklare
![Page 19: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/19.jpg)
CC-BY
Varför?
• EU-direktiv om
Reglering ser ut att gå från BÖR till SKALL
![Page 20: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/20.jpg)
CC-BY
![Page 21: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/21.jpg)
CC-BY
Vad? ALT-texter är viktiga, men de är inte ALLT!
![Page 22: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/22.jpg)
CC-BY
Vad?
1. Möjlig att uppfatta
2. Hanterbar
3. Begriplig
4. Robust
Från WCAG
Principer för tillgänglighet
![Page 23: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/23.jpg)
CC-BY
Vad?
Erbjud alternativ
1. Möjlig att uppfatta
![Page 24: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/24.jpg)
CC-BY
Vad? 1. Möjlig att uppfatta för den som använder hörseln
Koda för skärmläsare! • Beskriv allt viktigt med text
• Label på inmatningsfält
• H-rubriker
• Ange språk med lang
• ARIA landmarks
• ARIA live
• Förkortningar
• Provlyssna!
Erbjud skärmläsare?
Syntolka video?
![Page 25: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/25.jpg)
CC-BY
Vad? 1. Möjlig att uppfatta för den som använder känseln
Testade du med
skärmläsare så fungerar
det nog med punktskrifts-
display!
![Page 26: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/26.jpg)
CC-BY
Vad? 1. Möjlig att uppfatta för den som använder synen
• Tillräcklig kontrast
• Teckenstorlek till 200%
• Tänk på färgblindhet
• Texta video
• Transkribera ljudinspelningar
• Teckentolka vid behov
• Ta det lugnt med blinkningar
![Page 27: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/27.jpg)
CC-BY
Vad? 1. Möjlig att uppfatta
![Page 28: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/28.jpg)
CC-BY
Vad? 2. Hanterbar
![Page 29: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/29.jpg)
CC-BY
Vad? 2. Hanterbar
![Page 30: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/30.jpg)
CC-BY
Vad? 2. Hanterbar
![Page 31: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/31.jpg)
CC-BY
Vad? 3. Begriplig
![Page 32: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/32.jpg)
CC-BY
Vad? 3. Begriplig
![Page 33: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/33.jpg)
CC-BY
Vad? 4. Robust
Responsiv
Robust
![Page 34: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/34.jpg)
CC-BY
Vad? 4. Robust
Responsiv
Robust
![Page 35: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/35.jpg)
CC-BY
![Page 36: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/36.jpg)
CC-BY
Hur?
![Page 37: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/37.jpg)
CC-BY
Hur?
Ställ krav vid
beställningar:
• Uppfylla WCAG 2.0 AA
• Utgå från
webbriktlinjerna
![Page 38: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/38.jpg)
CC-BY
Hur?
Ställ krav vid
beställningar
CC-BY Åke Walldius, Clas Thorén, Användningsforum.se
![Page 39: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/39.jpg)
CC-BY
Hur?
Låt riktiga
användare testa
![Page 40: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/40.jpg)
CC-BY
Hur?
Låt personas ha
olika funktions-
nedsättningar!
![Page 41: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/41.jpg)
CC-BY
Hur?
Använd verktyg
Ex. – Validator.w3.org
– WAVE, WAT
– Validerat.se
– Colorbrewer
– Fangs
– NVDA, VoiceOver
– …
![Page 42: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/42.jpg)
CC-BY
Hur?
• Testa regelbundet
• Lätt att ta sönder
något som har
fungerat
![Page 43: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/43.jpg)
CC-BY
Hur?
• Bestäm
• Fördela ansvar
• Tilldela resurser
![Page 44: Metamatrix tillgänglig webb](https://reader034.fdocuments.net/reader034/viewer/2022042521/54741857b4af9f980a8b5530/html5/thumbnails/44.jpg)
CC-BY
Slut
Kontakta mig gärna!
par.lannero
@metamatrix.se
@plannero
0739-442043
CC-BY