Upload
arto-paavola
View
54
Download
0
Embed Size (px)
Citation preview
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