näkökulma esteettömyyteen: sähköisen palvelun kehittäjä

Näkökulma esteettömyyteen: Sähköisen palvelun kehittäjä Arto Paavola

Erikoisasiantuntija, Kela

15.5.2013

Kuka?

• Suunnitellut ja toteuttanut verkkopalveluita

vuosituhannen alusta lähtien

• Kelan IT-osastolla 05/2009 –

• Front end –kehittäjä (HTML, CSS, JavaScript)

• Responsiivinen suunnittelu ja toteutus

• Saavutettavuus

2

Sisältö

• Uudistuksen sisältö ja rajaukset

• Suunnittelu ja toteutus

• Havaittuja ongelmia

• Toteutettuja korjauksia

• Palvelun jatkokehitys

3

Uudistuksen sisältö ja rajaukset 1/5

• Viestinnällisen sivuston uudistus

• Vuonna 2012 palveluun tehtiin 19 miljoonaa käyntiä

• Palvelee henkilöasiakkaita, työnantajia,

yhteistyökumppaneita, sidosryhmiä

4

Uudistuksen sisältö ja rajaukset 2/5

• Responsiivinen

käyttöliittymä

• Lähes 7000 sivua,

1000 liitetiedostoa

• Suomi, ruotsi,

englanti,

suomenkielinen

viittomakieli

5

Uudistuksen sisältö ja rajaukset 3/5

• Uudistusprojektiin ei sisältynyt

• Kelan sähköiset asiointipalvelut

• erillissovelluksia (esim. PDF-lomakepankki, palvelupisteen

haku)

6

Uudistuksen sisältö ja rajaukset 4/5

• Kelan julkisten www-sivujen ja asiointipalveluiden

toteuttava W3C:n Web Content Accessibility

Guidelines 2.0 -standardin (WCAG 2.0) tason AA

(Double-A, Kaksois-A) vaatimukset

7

Uudistuksen sisältö ja rajaukset 5/5

• Saavutettavuuden toteutuksen ja testauksen

ohjeistukset

• Verkkosisällön saavutettavuusohjeet (WCAG) 2.0

• WAI-ARIA 1.0 Authoring Practices

• Accessible Rich Internet Applications (WAI-ARIA) 1.0

• Testauksen apuvälineitä

• Total Validator

• Firefoxin WAVE-toolbar

• Juicy Studio Accessibility Toolbar

• Luminosity Colour Contrast Ratio Analyzer

8

Suunnittelu ja toteutus

• Uudistuksen sisältö ja rajaukset

• Suunnittelu ja toteutus

• Havaittuja ongelmia

• Toteutettuja korjauksia

• Palvelun jatkokehitys

9

Suunnittelu ja toteutus 1/4

• Kahdessa osassa

• Visuaalinen ilme ja käyttöliittymä kevät 2012

• Tekninen toteutusprojekti syksy 2012 alkaen

10

Suunnittelu ja toteutus 2/4

• Visuaalinen ilme ja HTML5-prototyyppi

• saavutettavuustestausta ensimmäisen kerran viikko

suunnittelun alkamisen jälkeen

− värikontrasteja parannettiin

− HTML:n semantiikkaa parannettiin

− navigaatiota kehitettiin

• automaattista ja manuaalista testausta

• käytettävyystestejä

11

Suunnittelu ja toteutus 3/4

• Tekninen toteutusprojekti (09/2012 - )

• Scrum: 5 kehittäjää, 2 viikon sprinteissä

• Definition of Done

− toiminnallisuus

− esteellinen käyttäjä

− visuaalisuus brändin mukaista

− kieliversiot

− kaikki selaimet (ennalta määritelty joukko)

12

Suunnittelu ja toteutus 4/4

• Tekninen toteutusprojekti

• osaan sprinteistä otettiin kattavampia saavutettavuuden

parantamiseen liittyviä tehtäviä

• beta-versio julkaistiin 25.2.

• beta-versiosta saadut palautteet backlogiin

• vierailu Iiris-keskukseen, jossa seurattiin beta-sivuston

käyttöä suurennus- ja ruudunlukuohjelmilla

13

Havaittuja ongelmia

• Uudistuksen sisältö ja rajaukset

• Suunnittelu ja toteutus

• Havaittuja ongelmia

• Toteutettuja korjauksia

• Palvelun jatkokehitys

14

Havaittuja ongelmia 1/3

• Esimerkkejä havaituista ongelmista

• WAI-ARIA

• Päänavigaatio

− JavaScript-toteutus, jossa käytetty WAI-ARIA –spesifikaation

rooleja ja attribuutteja

− WAI-ARIA –ohjeistuksessa puutteita ja ristiriitaisuuksia

− esim. aria-expanded

• Ruudunlukuohjelmista laajalti käytössä vanhoja versioita,

joissa ei vielä ARIA-tukea

• Vanhat selaimet eivät tue ARIA:aa (esim. IE7)

• käyttäjät eivät välttämättä tiedä uusien versioiden mukana

tulevia ominaisuuksia

15

Havaittuja ongelmia 2/3

• HTML5

• outline-algoritmi sallii useita H1-otsikoita sivulla

16

<h1>Level 1</h1> <nav> <h1>Level 2</h1> </nav> <section> <h1>Level 2</h1> <article> <h1>Level 3</h1> <aside> <h1>Level 4</h1> </aside> </article> </section>

<h1>Level 1</h1> <nav> <h2>Level 2</h2> </nav> <section> <h2>Level 2</h2> <article> <h3>Level 3</h3> <aside> <h4>Level 4</h4> </aside> </article> </section>

Havaittuja ongelmia 3/3

• JAWS 12 ja 13 Internet Explorer -selaimella

• sotkevat otsikoiden hierarkiaa (myös Firefoxilla vastaavaa)

17

<h1>Level 1</h1> <nav> <h2>Level 2</h2> </nav> <section> <h2>Level 2</h2> <article> <h3>Level 3</h3> <aside> <h4>Level 4</h4> </aside> </article> </section>

<h1>Level 1</h1> <nav> <h2>Level 3</h2> </nav> <section> <h2>Level 3</h2> <article> <h3>Level 5</h3> <aside> <h4>Level 7</h4> </aside> </article> </section>

Toteutettuja korjauksia

• Uudistuksen sisältö ja rajaukset

• Suunnittelu ja toteutus

• Havaittuja ongelmia

• Toteutettuja korjauksia

• Palvelun jatkokehitys

18

Toteutettuja korjauksia 1/2

• ” tyttö katsoo ikkunasta Mielenterveysongelmat,

paniikkihäiriö tai masennus opintojen uhkana?”

• osa etusivun linkeistä sisälsivät HTML5-spesifikaation

sallimana kuvan ja otsikon

• kuvan alt-teksti: ”tyttö katsoo ikkunasta”

• h2-otsikko: ”Mielenterveysongelmat, paniikkihäiriö tai

masennus opintojen uhkana?”

• ratkaisu: kuva poistettu linkin sisältä

− (julkaistaan tuotantoon 17.5.)

19

Toteutettuja korjauksia 2/2

• Megavalikon käytettävyysongelmat

• pääsy ruudunlukijaa käyttämällä vaatii usein näppäimistön

ja hiiren(!) yhdistelmää

• ongelmia WAI-ARIA –toteutuksessa

• ratkaisu: sivun alun piilolinkki vie sivun alaosassa olevaan

navigaatioon

20

Palvelun jatkokehitys

• Uudistuksen sisältö ja rajaukset

• Suunnittelu ja toteutus

• Havaittuja ongelmia

• Toteutettuja korjauksia

• Palvelun jatkokehitys

21

Palvelun jatkokehitys

• Megavalikko

• Valikon avaaminen ainoastaan plus-painiketta klikkaamalla,

ei näppäimistöfokuksella, kuten tällä hetkellä

• WAI-ARIA –toteutuksen läpikäynti

− IE10-selaimen vuoksi jouduttu jo osittain purkamaan

• Sisällön jatkokehittäminen

• leipätekstin seassa olevia linkkejä pyritään ryhmittelemään

linkkilistaan leipiksen loppuun

• Ongelmalliset väriyhdistelmät

• Saavutettavuuden kehittäminen iOS / VoiceOver

22

Kiitos!

Kiitos mielenkiinnosta!

Twitter: @artopaavola

fi.linkedin.com/in/artopaavola/

23