Esitys saavutettavuudesta kela.fi-palvelussa Näkövammaistiedon ajankohtaispäivillä 9.10.2013

1. Esteettömyys kela.fi-
verkkopalvelussa
Arto Paavola
Erikoisasiantuntija, Kela
Näkövammaistiedon ajankohtaispäivät 9.10.2013
Twitter: @artopaavola
fi.linkedin.com/in/artopaavola/

2. Kuka olen?
• Suunnitellut ja toteuttanut verkkopalveluita
vuosituhannen alusta lähtien
• Kelan IT-osastolla 2009 –
• Front end –kehittäjä (HTML, CSS, JavaScript)
• Responsiivinen suunnittelu ja toteutus
• Saavutettavuus
2

3. Sisältö: osa 1
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
3

4. Saavutettavuus 1/4
• Verkkosisällön rooli kasvaa kaikilla elämänalueilla
• Saavutettava verkkosisältö on yhtäläisesti kaikkien
ulottuvilla riippumatta vammoista ja rajoitteista
• Esim. näkö-, kuulo-, puhe, kognitio-, kieli- ja
oppimisvaikeudet
• Tärkeää: saavutettava verkkosisältö parantaa
käytettävyyttä kaikille käyttäjille
4

5. Saavutettavuus 2/4
• Käyttäjätarinoita:
[DRAFT] Stories of Web Users - How People with Disabilities Use the Web
• Ms. Olsen
• Mr. Yunus
• Ms. Laitinen
How People with Disabilities Use the Web. Shadi Abou-Zahra, ed.
Copyright © 2012 W3C® (MIT, ERCIM, Keio).
Status: Draft Updated 1 August 2012. http://www.w3.org/WAI/intro/people-use-web/Overview
5

6. Saavutettavuus 3/4
• Sisältö
• Selaimet, mediasoittimet
• Avusteiset teknologiat
• Käyttäjien osaaminen, kokemus
• Suunnittelijat, ohjelmoijat, sisällöntuottajat
• Julkaisujärjestelmät
• Arviointityökalut, validaattorit
6

7. Saavutettavuus 4/4
Essential Components of Web Accessibility. Shawn Lawton Henry, Michael Duffy
Copyright © 1994-2012 W3C® (MIT, ERCIM, Keio).
August 2005. http://www.w3.org/WAI/intro/components.php7

8. Sisältö: osa 2
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
8

9. Kela.fi-uudistus 1/6
• Viestinnällisen sivuston uudistus
• Vuonna 2012 palveluun tehtiin 19 miljoonaa käyntiä
• Palvelee henkilöasiakkaita, työnantajia,
yhteistyökumppaneita, sidosryhmiä
9

10. Kela.fi-uudistus 2/6
• Responsiivinen
käyttöliittymä
• Lähes 7000 sivua,
1000 liitetiedostoa
• Suomi, ruotsi,
englanti,
suomenkielinen
viittomakieli
10

11. Kela.fi-uudistus 3/6
• Uudistusprojektiin ei sisältynyt
• Kelan sähköiset asiointipalvelut
• erillissovelluksia (esim. PDF-lomakepankki, palvelupisteen
haku)
11

12. Kela.fi-uudistus 4/6
• Uudistus kahdessa osassa
1. Visuaalinen ilme, HTML5-prototyyppi (kevät 2012)
2. Tekninen toteutusprojekti ( 09/2012 – 06/2013)
12

13. Kela.fi-uudistus 5/6
• Scrum-menetelmä
• Definition of Done
• toiminnallisuus
• esteellinen käyttäjä
• visuaalisuus brändin mukaista
• kieliversiot
• kaikki selaimet (ennalta määritelty joukko)
13

14. Kela.fi-uudistus 6/6
• Saavutettavuuden toteutuksen ja testauksen
ohjeistukset (linkkejä esityksen lopussa)
• Testauksen apuvälineitä
• Total Validator
• Firefoxin WAVE-toolbar
• Juicy Studio Accessibility Toolbar
• Luminosity Colour Contrast Ratio Analyzer
14

15. Sisältö: osa 3
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
15

16. Suunnittelu ja toteutus 1/7
• Tarkistuslista
• Sivun title-otsikko
• Kuvien vaihtoehtoiset tekstit eli alt-tekstit
• Otsikot
• Värien kontrastierot
• Zoomaus
• Näppäimistönavigointi
• Lomakkeet
• Multimedia
• Pelkkä sivun sisältö
Easy Checks - A First Review of Web Accessibility
Copyright © 2013 W3C® (MIT, ERCIM, Keio).
Status: Draft Updated 9 July 2013. http://www.w3.org/WAI/eval/preliminary.html16

17. Suunnittelu ja toteutus 2/7
• Sivun title-otsikko
• Kenelle
• Näin haet
• Perheenjäsenenä
• Verotus
• Title on ensimmäinen asia, jonka käyttäjä sivulta
havaitsee
• Erittäin tärkeä tekijä myös hakukoneoptimoinnissa
• Perussääntö: title = sisällön h1-otsikko
17

18. Suunnittelu ja toteutus 3/7
• Otsikot
• Älä lihavoi tekstiä, vaan käytä otsikkoa
− Vastavalmistunut saa työttömyysetuuden…
18

19. Suunnittelu ja toteutus 4/7
• Taulukot kela.fi:ssä
• Vain datan esittämiseen
− Määrä
− Reseptimerkinnät
• Ei saa käyttää sivun layoutin vuoksi
− Kelasto
− Kelalaisia työssään
19

20. Suunnittelu ja toteutus 5/7
• Linkit
• Kuvaava teksti, joka on ymmärrettävä myös, kun linkki
luetaan irrotettuna kontekstistaan
− Lue lisää
• Tärkein asia ensimmäiseksi linkin tekstiin
• Jos sivulla on useita samannimisiä linkkejä, niiden tulisi
johtaa samalle sivulle
• Avautuminen uuteen ikkunaan?
• Kelan äitiyspakkaus herättää kansainvälistä kiinnostusta
• Sotilasavustusta voi hakea verkossa
• Säädökset
20

21. Suunnittelu ja toteutus 6/7
• Näppäimistönavigointi
• WAI-ARIA maamerkit (landmark)
− WAI-ARIA parhaat käytännöt (englanniksi)
− role=”main”
− role=”navigation”
21

22. Suunnittelu ja toteutus 7/7
• Siirtyminen maamerkkien välillä
• JAWS (versiosta 10 alkaen)
− Seuraava maamerkki ; (puolipiste)
− Edellinen maamerkki Shift + ; (puolipiste)
− Maamerkkien listaus CTRL + INS + ; (puolipiste)
• NVDA
− Seuraava maamerkki D
− Edellinen maamerkki Shift + D
− Maamerkkien listaus NVDA + F7
• VoiceOver (iOS)
− Roottori
• Firefoxin lisäosa
22

23. Sisältö: osa 4
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
23

24. Palvelun jatkokehitys
• Sivuston käyttöliittymän jatkokehitys
• Mobiili, esim. iOS / VoiceOver
• Kontrastit, vaikka täyttävätkin WCAG-vaatimukset
• Megamenu
• Sisällön jatkokehitys
• Leipätekstin seassa olevien linkkien ryhmittely
24

25. Linkkejä
• Verkkosisällön saavutettavuusohjeet (WCAG) 2.0
• Getting Started with Web Accessibility
• Verkkopalvelun saavutettavuus (suomi.fi)
• Saavutettava.fi
25

26. Kiitos!
Kiitos mielenkiinnosta!
Twitter: @artopaavola
fi.linkedin.com/in/artopaavola/
26