Esteettömyys kela.fi-verkkopalvelussa
-
Upload
arto-paavola -
Category
Internet
-
view
157 -
download
3
Transcript of Esteettömyys kela.fi-verkkopalvelussa
![Page 1: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/1.jpg)
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/
![Page 2: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/2.jpg)
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
![Page 3: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/3.jpg)
Sisältö: osa 1
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
3
![Page 4: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/4.jpg)
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
![Page 5: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/5.jpg)
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
![Page 6: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/6.jpg)
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
![Page 7: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/7.jpg)
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.php 7
![Page 8: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/8.jpg)
Sisältö: osa 2
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
8
![Page 9: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/9.jpg)
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
![Page 10: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/10.jpg)
Kela.fi-uudistus 2/6
• Responsiivinen
käyttöliittymä
• Lähes 7000 sivua,
1000 liitetiedostoa
• Suomi, ruotsi,
englanti,
suomenkielinen
viittomakieli
10
![Page 11: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/11.jpg)
Kela.fi-uudistus 3/6
• Uudistusprojektiin ei sisältynyt
• Kelan sähköiset asiointipalvelut
• erillissovelluksia (esim. PDF-lomakepankki, palvelupisteen
haku)
11
![Page 12: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/12.jpg)
Kela.fi-uudistus 4/6
• Uudistus kahdessa osassa
1. Visuaalinen ilme, HTML5-prototyyppi (kevät 2012)
2. Tekninen toteutusprojekti ( 09/2012 – 06/2013)
12
![Page 13: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/13.jpg)
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
![Page 14: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/14.jpg)
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
![Page 15: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/15.jpg)
Sisältö: osa 3
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
15
![Page 16: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/16.jpg)
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.html 16
![Page 17: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/17.jpg)
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
![Page 18: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/18.jpg)
Suunnittelu ja toteutus 3/7
• Otsikot
• Älä lihavoi tekstiä, vaan käytä otsikkoa
− Vastavalmistunut saa työttömyysetuuden…
18
![Page 19: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/19.jpg)
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
![Page 20: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/20.jpg)
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
![Page 21: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/21.jpg)
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
![Page 22: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/22.jpg)
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
![Page 23: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/23.jpg)
Sisältö: osa 4
1. Saavutettavuus
2. Kela.fi-uudistus
3. Suunnittelu ja toteutus
4. Palvelun jatkokehitys
23
![Page 24: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/24.jpg)
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
![Page 25: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/25.jpg)
Linkkejä
• Verkkosisällön saavutettavuusohjeet (WCAG) 2.0
• Getting Started with Web Accessibility
• Verkkopalvelun saavutettavuus (suomi.fi)
• Saavutettava.fi
25
![Page 26: Esteettömyys kela.fi-verkkopalvelussa](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a4746b1a28abf4108b458c/html5/thumbnails/26.jpg)
Kiitos!
Kiitos mielenkiinnosta!
Twitter: @artopaavola
fi.linkedin.com/in/artopaavola/
26