SlideShare una empresa de Scribd logo
1 de 31
Att bygga inkluderande
Tillgänglighet och användbarhet
johanna.blomgren@bonvoyage.se

Twitter: johannablomgren
Design som förändrar
Kärlek till Nätet och Människor
• Tillgängligt = Användbart?
• Användbart = Tillgängligt?
Varför är det viktigt med
tillgänglighet?
"Ska vi som har ett handikapp straffas för att
vi hamnade i den situationen som vi är i?" 

Natalie Chanise Eriksson, 17 år student och modell. 

Rullstolsburen född med CP-skada.
En fråga om demokrati…
Källa: http://www.aftonbladet.se/debatt/article20788960.ab
Fotograf: Oscar Wettersten.
Vem bygger vi tillgängligt för?
• Blinda & Synsvaga
• Bruten arm
• Dyslektiker
• Koncentrationssvårigheter
• Minnessvårigheter
• Färgblinda
• Utmattningssyndrom
Typer av funktionsvariationer
• Aspergers
• Cp-skador
• Rörelsesvårigheter
• Tillfälliga skador
• Åldersrelaterade svårigheter
• Hörselnedsätting
• osv osv, osv
Människor med funktionsvariationer är inte en enskild
målgrupp, de finns i alla målgrupper.
”Ni borde låna en dator med t ex skärmläsare, sätt en
bindel för ögonen och sätt på datorn. Gå in på din
favoritsida på webben. Väldigt snart tror jag ni förstår
vad jag menar.
Talsyntesen säger inte allt, man kommer av sig… så är
det för oss synsvaga/blinda varje dag! Hade personerna
som gör sidorna testat, hade de säkert byggt dem
annorlunda? ”
- enkätdeltagare 2010 kring problem med att surfa på
webben som gravt synskadad eller blind.
70 % av dagens pensionärer 

använder internet dagligen.
Källa: http://www.poi2014.se/
• För kommuner och statliga myndigheter har riktlinjer
funnits sedan början av 2000-talet. 

• I dagsläget utgår vi från de riktlinjer som finns i wcag 2.0
AA nivå utvecklat av W3C. 

• På svenska finns www.webbriktlinjer.se

• Sedan 1/1 2015 gäller detta även privata aktörer med fler
än 10 anställda. 

• Lagstiftningen ska hjälpa oss förbättra våra lösningar.





Lagstiftning och riktlinjer
”Den som är ansvarig för en verksamhet är skyldig
att vidta skäliga åtgärder för att verksamheten ska
vara tillgänglig för en person med
funktionsnedsättning.”
- Diskrimineringsombudsmannen om nya diskrimineringslagen
Hur går det till rent
praktiskt?
Kod, layout och content
Innehållstruktur
• Strukturera informationen efter vad
användaren letar efter i kombination
med vad målet för er verksamhet är.

• Lägg tid på navigationskonceptet.
Gruppera, sortera, ta bort.
KodStruktur
• Använd taggarna till det de är till för. 

<h1> Störst = viktigast
<h2> Underrubrik nivå 2
<h3> Underrubrik nivå 3
<h2> Kan följas av en rubrik 2.
Kontraster
• Kontraster - se till att det går att läsa
texter och testa kontrasten.
• Använd verktyg som: 

http://leaverou.github.io/contrast-ratio/
Alt-text
• Alt-texter - se till att alla bilder har
ordentliga alt-texter som hjälper
användaren. Hjälper ju även google.

• Även bilder som endast är där för att
förstärka designen ska ha alt-text. En
tom alt-text…

Ja – ”Hand med många smycken som
håller i tusenlappar”
Nja – ”pengar”
Nej – ”bild”
Om bilden endast har en
designfunktion:
alt=””
Länkar
• Se till att de är mer än bara en färg
som utmärker en textlänk. 

• Kan annars bli svårt att urskilja för
människor med exempelvis
färgblindhet. 

• Understrykning i kombination med
annan hoover färg är bra. 


 Festivalprogram 2015
Festivalprogram 2015
Film
• Bra för besökare som har svårt att
läsa!

• Se till att den går att få i textad
version eller att informationen i den
går att ta till sig även om en inte hör
vad som sägs i den.
• Se till att filmspelaren går att styra 

med tangentbordet.
Ikoner
• Ikoner - bra för att förstärka en
funktion eller ett budskap. 

• Förstärk med text-label för dem som
ej förstår metaforer, ej ser ikonen etc.

• Ikoner förändras över tid.
Content
• KLARSPRÅK - skriv med ett språk
som dina besökare förstår. 

• Ha korta och informativa rubriker
som hjälper besökaren att sortera
innehållet. 

• Länkar ska gå att förstå för sig själva.

• Vi läser inte på webben, vi skummar
och letar efter rätt information.
Festivalprogram 2015
Läs mer
Testa
internt och externt
Testa internt
• Navigera med tangentbordet
• Kan du hoppa över
huvudmenyn
• Sker navigeringen i logisk
följd?
• Ser du vart du är i
navigeringen?

• Stäng av CSS:en. Det är i denna
ordning innehållet blir uppläst i
skärmläsare.

Testa externt
• Ha med funktionsvariationer i
testgruppen.

• Bjud in människor med olika
funktionsvariationer.

• Granska era egna lösningar eller ta in
någon för att göra det åt er. Bättre att
ni förekommer beställaren...

Hur tänker du?
Verktyg
Finns en uppsjö av verktyg att använda. Läs på!
• https://validator.w3.org/
• Firefox accessibility extension (add-on för firefox).
• WAVE evaluation tool (add-on för Chrome)
• Lista med verktyg: http://www.w3.org/WAI/ER/tools/
• https://make.wordpress.org/accessibility/
• https://codex.wordpress.org/Accessibility

• Teman som har granskats taggas med ”Accessibility ready”
Om wordpress och tillgänglighet
Tänk inte på tillgänglighet som ett ont måste,
det hjälper alla användare.

Alla kan hamna i en situation där en
tillgänglig webb plötsligt blir viktigt för dig
eller någon som står dig nära.


Det är på vårt ansvar som arbetar med
webben. utvecklare, designers eller
kommunikatörer att se till att vi bygger
inkluderande.
Tack!
www.bonvoyage.se
Twitter: hejbonvoyage
Feedback och kontakt

Twitter: johannablomgren
johanna.blomgren@bonvoyage.se

Más contenido relacionado

Similar a Att bygga en inkluderande webb 150609

Värmland24maj201anette2
Värmland24maj201anette2Värmland24maj201anette2
Värmland24maj201anette2
camillakallgren
 
Net 21 lärande akk
Net 21 lärande akkNet 21 lärande akk
Net 21 lärande akk
fralof
 

Similar a Att bygga en inkluderande webb 150609 (20)

BESÖK: Basutbildning i tillgänglighet 6 sep 2012
BESÖK: Basutbildning i tillgänglighet 6 sep 2012BESÖK: Basutbildning i tillgänglighet 6 sep 2012
BESÖK: Basutbildning i tillgänglighet 6 sep 2012
 
Användbarhet 1
Användbarhet 1Användbarhet 1
Användbarhet 1
 
Användarcentrerad systemutveckling
Användarcentrerad systemutvecklingAnvändarcentrerad systemutveckling
Användarcentrerad systemutveckling
 
Användarcentrerad systemutveckling systvet ht 2011
Användarcentrerad systemutveckling systvet ht 2011Användarcentrerad systemutveckling systvet ht 2011
Användarcentrerad systemutveckling systvet ht 2011
 
Introduktion till användbarhet på webben
Introduktion till användbarhet på webbenIntroduktion till användbarhet på webben
Introduktion till användbarhet på webben
 
Inspirationsdagen 5.2.2014 - sammandrag
Inspirationsdagen 5.2.2014 - sammandragInspirationsdagen 5.2.2014 - sammandrag
Inspirationsdagen 5.2.2014 - sammandrag
 
Introduktion om entreprenörskap
Introduktion om entreprenörskapIntroduktion om entreprenörskap
Introduktion om entreprenörskap
 
Värmland24maj201anette2
Värmland24maj201anette2Värmland24maj201anette2
Värmland24maj201anette2
 
Net 21 lärande akk
Net 21 lärande akkNet 21 lärande akk
Net 21 lärande akk
 
Fortbildning 190107
Fortbildning 190107Fortbildning 190107
Fortbildning 190107
 
Åstorp folkhögskola
Åstorp folkhögskolaÅstorp folkhögskola
Åstorp folkhögskola
 
Kvalitetsmodellen vadå kvalitet januari 2014
Kvalitetsmodellen vadå kvalitet januari 2014Kvalitetsmodellen vadå kvalitet januari 2014
Kvalitetsmodellen vadå kvalitet januari 2014
 
Kvalitetsmodellen vadå kvalitet januari 2014 Rättelse: Läs beskrivningen!!
Kvalitetsmodellen vadå kvalitet januari 2014 Rättelse: Läs beskrivningen!!Kvalitetsmodellen vadå kvalitet januari 2014 Rättelse: Läs beskrivningen!!
Kvalitetsmodellen vadå kvalitet januari 2014 Rättelse: Läs beskrivningen!!
 
Kom loss med tjänstekvalitet! KvalitetsMagasinet Live 2016
Kom loss med tjänstekvalitet! KvalitetsMagasinet Live 2016Kom loss med tjänstekvalitet! KvalitetsMagasinet Live 2016
Kom loss med tjänstekvalitet! KvalitetsMagasinet Live 2016
 
Btj Sthlm Personas
Btj Sthlm PersonasBtj Sthlm Personas
Btj Sthlm Personas
 
Innehåll, tonalitet och digital identitet
Innehåll, tonalitet och digital identitetInnehåll, tonalitet och digital identitet
Innehåll, tonalitet och digital identitet
 
Nyttovärdering 3.0
Nyttovärdering 3.0Nyttovärdering 3.0
Nyttovärdering 3.0
 
NEA - The design way 22 jan 2015
NEA - The design way 22 jan 2015NEA - The design way 22 jan 2015
NEA - The design way 22 jan 2015
 
“Oväntade effekter” – De oväntade nyttorna av effekt-, målstyrning och impact...
“Oväntade effekter” – De oväntade nyttorna av effekt-, målstyrning och impact...“Oväntade effekter” – De oväntade nyttorna av effekt-, målstyrning och impact...
“Oväntade effekter” – De oväntade nyttorna av effekt-, målstyrning och impact...
 
Tillgänglighet – mindre krångel, mer kvalitet funka nu
Tillgänglighet – mindre krångel, mer kvalitet   funka nuTillgänglighet – mindre krångel, mer kvalitet   funka nu
Tillgänglighet – mindre krångel, mer kvalitet funka nu
 

Att bygga en inkluderande webb 150609

  • 1. Att bygga inkluderande Tillgänglighet och användbarhet johanna.blomgren@bonvoyage.se
 Twitter: johannablomgren
  • 3. Kärlek till Nätet och Människor • Tillgängligt = Användbart? • Användbart = Tillgängligt?
  • 4. Varför är det viktigt med tillgänglighet?
  • 5. "Ska vi som har ett handikapp straffas för att vi hamnade i den situationen som vi är i?" 
 Natalie Chanise Eriksson, 17 år student och modell. 
 Rullstolsburen född med CP-skada. En fråga om demokrati… Källa: http://www.aftonbladet.se/debatt/article20788960.ab
  • 7. Vem bygger vi tillgängligt för?
  • 8. • Blinda & Synsvaga • Bruten arm • Dyslektiker • Koncentrationssvårigheter • Minnessvårigheter • Färgblinda • Utmattningssyndrom Typer av funktionsvariationer • Aspergers • Cp-skador • Rörelsesvårigheter • Tillfälliga skador • Åldersrelaterade svårigheter • Hörselnedsätting • osv osv, osv
  • 9. Människor med funktionsvariationer är inte en enskild målgrupp, de finns i alla målgrupper.
  • 10. ”Ni borde låna en dator med t ex skärmläsare, sätt en bindel för ögonen och sätt på datorn. Gå in på din favoritsida på webben. Väldigt snart tror jag ni förstår vad jag menar. Talsyntesen säger inte allt, man kommer av sig… så är det för oss synsvaga/blinda varje dag! Hade personerna som gör sidorna testat, hade de säkert byggt dem annorlunda? ” - enkätdeltagare 2010 kring problem med att surfa på webben som gravt synskadad eller blind.
  • 11. 70 % av dagens pensionärer 
 använder internet dagligen. Källa: http://www.poi2014.se/
  • 12. • För kommuner och statliga myndigheter har riktlinjer funnits sedan början av 2000-talet. 
 • I dagsläget utgår vi från de riktlinjer som finns i wcag 2.0 AA nivå utvecklat av W3C. 
 • På svenska finns www.webbriktlinjer.se
 • Sedan 1/1 2015 gäller detta även privata aktörer med fler än 10 anställda. 
 • Lagstiftningen ska hjälpa oss förbättra våra lösningar.
 
 
 Lagstiftning och riktlinjer
  • 13. ”Den som är ansvarig för en verksamhet är skyldig att vidta skäliga åtgärder för att verksamheten ska vara tillgänglig för en person med funktionsnedsättning.” - Diskrimineringsombudsmannen om nya diskrimineringslagen
  • 14. Hur går det till rent praktiskt? Kod, layout och content
  • 15. Innehållstruktur • Strukturera informationen efter vad användaren letar efter i kombination med vad målet för er verksamhet är.
 • Lägg tid på navigationskonceptet. Gruppera, sortera, ta bort.
  • 16. KodStruktur • Använd taggarna till det de är till för. 
 <h1> Störst = viktigast <h2> Underrubrik nivå 2 <h3> Underrubrik nivå 3 <h2> Kan följas av en rubrik 2.
  • 17. Kontraster • Kontraster - se till att det går att läsa texter och testa kontrasten. • Använd verktyg som: 
 http://leaverou.github.io/contrast-ratio/
  • 18. Alt-text • Alt-texter - se till att alla bilder har ordentliga alt-texter som hjälper användaren. Hjälper ju även google.
 • Även bilder som endast är där för att förstärka designen ska ha alt-text. En tom alt-text…
 Ja – ”Hand med många smycken som håller i tusenlappar” Nja – ”pengar” Nej – ”bild” Om bilden endast har en designfunktion: alt=””
  • 19. Länkar • Se till att de är mer än bara en färg som utmärker en textlänk. 
 • Kan annars bli svårt att urskilja för människor med exempelvis färgblindhet. 
 • Understrykning i kombination med annan hoover färg är bra. 
 
 Festivalprogram 2015 Festivalprogram 2015
  • 20. Film • Bra för besökare som har svårt att läsa!
 • Se till att den går att få i textad version eller att informationen i den går att ta till sig även om en inte hör vad som sägs i den. • Se till att filmspelaren går att styra 
 med tangentbordet.
  • 21. Ikoner • Ikoner - bra för att förstärka en funktion eller ett budskap. 
 • Förstärk med text-label för dem som ej förstår metaforer, ej ser ikonen etc.
 • Ikoner förändras över tid.
  • 22. Content • KLARSPRÅK - skriv med ett språk som dina besökare förstår. 
 • Ha korta och informativa rubriker som hjälper besökaren att sortera innehållet. 
 • Länkar ska gå att förstå för sig själva.
 • Vi läser inte på webben, vi skummar och letar efter rätt information. Festivalprogram 2015 Läs mer
  • 24. Testa internt • Navigera med tangentbordet • Kan du hoppa över huvudmenyn • Sker navigeringen i logisk följd? • Ser du vart du är i navigeringen?
 • Stäng av CSS:en. Det är i denna ordning innehållet blir uppläst i skärmläsare.

  • 25. Testa externt • Ha med funktionsvariationer i testgruppen.
 • Bjud in människor med olika funktionsvariationer.
 • Granska era egna lösningar eller ta in någon för att göra det åt er. Bättre att ni förekommer beställaren...
 Hur tänker du?
  • 27. Finns en uppsjö av verktyg att använda. Läs på! • https://validator.w3.org/ • Firefox accessibility extension (add-on för firefox). • WAVE evaluation tool (add-on för Chrome) • Lista med verktyg: http://www.w3.org/WAI/ER/tools/ • https://make.wordpress.org/accessibility/ • https://codex.wordpress.org/Accessibility
 • Teman som har granskats taggas med ”Accessibility ready” Om wordpress och tillgänglighet
  • 28. Tänk inte på tillgänglighet som ett ont måste, det hjälper alla användare.

  • 29. Alla kan hamna i en situation där en tillgänglig webb plötsligt blir viktigt för dig eller någon som står dig nära. 

  • 30. Det är på vårt ansvar som arbetar med webben. utvecklare, designers eller kommunikatörer att se till att vi bygger inkluderande.
  • 31. Tack! www.bonvoyage.se Twitter: hejbonvoyage Feedback och kontakt
 Twitter: johannablomgren johanna.blomgren@bonvoyage.se