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/

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

Sisältö: osa 1

1. Saavutettavuus

2. Kela.fi-uudistus

3. Suunnittelu ja toteutus

4. Palvelun jatkokehitys

3

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

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

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

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

Sisältö: osa 2

1. Saavutettavuus

2. Kela.fi-uudistus

3. Suunnittelu ja toteutus

4. Palvelun jatkokehitys

8

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

Kela.fi-uudistus 2/6

• Responsiivinen

käyttöliittymä

• Lähes 7000 sivua,

1000 liitetiedostoa

• Suomi, ruotsi,

englanti,

suomenkielinen

viittomakieli

10

Kela.fi-uudistus 3/6

• Uudistusprojektiin ei sisältynyt

• Kelan sähköiset asiointipalvelut

• erillissovelluksia (esim. PDF-lomakepankki, palvelupisteen

haku)

11

Kela.fi-uudistus 4/6

• Uudistus kahdessa osassa

1. Visuaalinen ilme, HTML5-prototyyppi (kevät 2012)

2. Tekninen toteutusprojekti ( 09/2012 – 06/2013)

12

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

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

Sisältö: osa 3

1. Saavutettavuus

2. Kela.fi-uudistus

3. Suunnittelu ja toteutus

4. Palvelun jatkokehitys

15

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

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

Suunnittelu ja toteutus 3/7

• Otsikot

• Älä lihavoi tekstiä, vaan käytä otsikkoa

− Vastavalmistunut saa työttömyysetuuden…

18

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

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

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

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

Sisältö: osa 4

1. Saavutettavuus

2. Kela.fi-uudistus

3. Suunnittelu ja toteutus

4. Palvelun jatkokehitys

23

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

Linkkejä

• Verkkosisällön saavutettavuusohjeet (WCAG) 2.0

• Getting Started with Web Accessibility

• Verkkopalvelun saavutettavuus (suomi.fi)

• Saavutettava.fi

25

Kiitos!

Kiitos mielenkiinnosta!

Twitter: @artopaavola

fi.linkedin.com/in/artopaavola/

26