Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
0
SAAVUTETTAVUUSRAPORTTI
Hämeenlinnan responsiivinen verkkosivusto
Tapio Haanperä
Juha Sylberg
Avaava
Katariina Saksilaise...
1
SISÄLLYS
SAAVUTETTAVUUSRAPORTTI
Hämeenlinnan responsiivinen verkkosivusto
1. Johdanto 2
2. Taustaa 4
3. Yleiskatsaus 5
4...
1. JOHDANTO 1/2
A
B
A
Tilaaja:
Kaisa Paavilainen
verkkotoimittaja
Raatihuoneenkatu 9, 3. krs.
PL 84, 13101 Hämeenlinna
Saa...
JOHDANTO 2/2
A
B
A
3
Arviointi aloitettiin yleiskatsauksella tutustumalla sivustoon
ruudunlukuohjelmalla. Esiarviossa voit...
Lainsäädännöllinen tilanne
EU:n komissio valmistelee direktiiviä verkkopalveluiden
saavutettavuudesta. Direktiivin tarkoit...
Sivusto on pääasiallisesti toteutettu saavutettavilla tekniikoilla ja on monelta
osin teknisesti saavutettava
Sivustolla o...
1. Logo 2. Hakutoiminto
3. Päänavigaatio
4. Alanavigaatio 5. Sivun pääsisältö
6. Täydentävä
sisältö
7. Sivusta riippumatto...
Sivuston rakenteesta
Seuraavaksi käydään läpi sellaisia oleellisia tekijöitä ja toimintoja, jotka
koskettavat koko verkkos...
Sivun otsikko - Title <title>
Tämä luetaan ruudunlukukäyttäjälle
ensimmäisenä, kun hän avaa uuden
sivun
Sivun titlen tulis...
Otsikot ja otsikkorakenne <h>
Otsikoiden ja otsikkorakenteiden
tulisi olla loogisia ja selkeitä
Toimii yksittäisen sivun
s...
Otsikot ja otsikkorakenne <h>
Oheista otsikkorakennetta olisi
hyvä noudattaa myös muilla
sivuilla
Sivun pääsisällön otsikk...
Kuvat ja kuvatekstit <alt=“…”>
Kuvilla tulisi olla niitä kuvaava
vaihtoehtoinen tekstivastine
Tekstivastineiden käyttö aut...
Hyppylinkki sivun pääsisältöön
Käyttäjille voidaan tarjota
hyppylinkki, jolla voidaan ohittaa
kaikki sivusta toiseen toist...
Maamerkit - Landmarks
Jaottelee sivun eri osat suuremmiksi
kokonaisuuksiksi:
banneri; hakutoiminto; päänavigaatio;
alanavi...
Asiointi-sivu jaettuna maamerkeillä
1. Logo (Banner) 2. Hakutoiminto (Search)
3. Päänavigaatio (navigation)
4. Alanavigaat...
Yhdenmukaisuus ja lukemisjärjestys
Käyttäjä olettaa eri sivuilla olevien
samanlaisten asioiden olevan
samassa paikassa
Par...
Linkit
Varmista, että linkit ovat
visuaalisesti tunnistettavissa
linkeiksi
Linkkien nimeäminen kunnolla on
tärkeää:
Linkin...
Murupolku
Auttaa käyttäjää hahmottamaan
paremmin, missä kohtaa sivustoa
hän on
Tärkeä ominaisuus, jos sivuston
navigaatior...
Sosiaalisen median linkit
Toistaiseksi sosiaalisen median
linkkejä on vaikea ja osittain
mahdotonta käyttää
ruudunlukuohje...
Yhteystiedot
Yhteystietojen näkyminen jokaisella sivulla on tärkeää
Yhteystietojen löytäminen on tehtävä helpoksi
Yhteysti...
Hakutoiminto
Hakutoiminnon on hyvä olla esillä
kaikilla sivuilla
Käyttäjälle täytyy olla selvyys
siitä, mihin hakutoiminto...
Esimerkkinä Etusivu ja Anna palautetta –sivu
Seuraavaksi käydään osittain läpi sivujen Etusivu ja Anna palautetta –sivu
pä...
Etusivu
Etusivulta pääsee helposti siirtymään muille sivuille
Sivun keskellä oleva “karuselli” ei ole saavutettava sokeall...
Anna palautetta
“Katso ohjevideo”
Tällaiset ovat hyödyllisiä ja havainnollistavia
On kuitenkin tarpeellista antaa ohjeet m...
Anna palautetta: Ikäihmisten palvelut
Palautteet eri osiot olisi hyvä jaotellla selkeämmin käyttäen kunnollista
otsikkorak...
25
A
B
A
Vasemman yläkulman logo
Hämeenlinnan kaupungin vasemmassa ylälaidassa
olevaan logoon/linkkiin etusivulle on nyt l...
26
A
B
A
Sivujen pääotsikot (title)
Eri alasivuilla on nyt asianmukaiset ja kuvaavat
pääotsikot (title). Tämä auttaa kaikk...
27
A
B
A
Etusivulla olleet linkit
Etusivulla verkkosivuston aikaisemmassa versiossa
muutama linkki (esim. “Kaikki tiedotte...
6. SIVUSTON ARVIOIMINEN TEHTYJEN KORJAUSTEN
JÄLKEEN WCAG2.0-KRITEEREIN
28
A
B
A
1.1 Tekstivastineet: Tarjoa tekstivastinee...
29
1.2 Aikasidonnainen media: Tarjoa vastine aikasidonnaiselle medialle.
Kriteeri Heuristiikka Sivut (URI) Kommentit OK
1....
30
1.3 Mukautettava: Tuota sisältöä, joka voidaan esittää eri tavoin (esimerkiksi yksinkertaisemman asettelun avulla) info...
31
1.4.3
(AA-taso)
Onko tekstin tai tekstiä esittävän kuvan
kontrastisuhde vähintään 4,5:1? Onko ison
tekstin (yli 18px ta...
32
2.2 Tarpeeksi aikaa: Anna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä.
Kriteeri Heuristiikka Sivut (URI) Komm...
33
2.4.1
(A-taso)
Onko sivulla mahdollista ohittaa
verkkopalvelun toistuvat rakenteet,
esimerkiksi joka sivulla toistuvat
...
34
3.1 Luettava: Tee tekstisisällöstä luettavaa ja ymmärrettävää.
Kriteeri Heuristiikka Sivut (URI) Kommentit OK
3.1.1
(A-...
35
3.3 Syötteen avustaminen: Auta käyttäjiä välttämään ja korjaamaan virheitä.
Kriteeri Heuristiikka Sivut (URI) Kommentit...
36
4.1 Luettava: Tee tekstisisällöstä luettavaa ja ymmärrettävää.
Kriteeri Heuristiikka Sivut (URI) Kommentit OK
4.1.1
(A-...
7. LISÄTIETOA SAAVUTETTAVUUDESTA
37
A
B
A
Tuore suomenkielinen tietopaketti saavutettavuudesta:
http://www.celia.fi/celia-...
Avaava
Katariina Saksilaisen katu 6 B, TH4
00560 Helsinki
puhelin 045 135 8932
www.avaava.fi
Próxima SlideShare
Cargando en…5
×

Esteetön verkkopalvelu

Esteetön verkkopalvelu, case Hämeenlinna. Hämeenlinnan verkkotoimittaja Kaisa Paavilainen. Puheenvuoro kuntien verkkotiedottajille 4.2.2016. Kuntien verkkotiedottajien tapaaminen 4.–5.2.2016, Logomo, Turku

  • Sé el primero en comentar

Esteetön verkkopalvelu

  1. 1. 0 SAAVUTETTAVUUSRAPORTTI Hämeenlinnan responsiivinen verkkosivusto Tapio Haanperä Juha Sylberg Avaava Katariina Saksilaisen katu 6 B, TH4 00560 Helsinki puhelin 045 135 8932 www.avaava.fi
  2. 2. 1 SISÄLLYS SAAVUTETTAVUUSRAPORTTI Hämeenlinnan responsiivinen verkkosivusto 1. Johdanto 2 2. Taustaa 4 3. Yleiskatsaus 5 4. Arvioinnin tulokset ja kehittämisehdotuksia 6 5. Sivustolle tehdyt korjaustoimenpiteet sekä niiden vaikutukset käyttäjille 25 6. Sivuston arvioiminen tehtyjen muutosten jälkeen WCAG 2.0-kriteerein 28 7. Lisätietoa saavutettavuudesta 37
  3. 3. 1. JOHDANTO 1/2 A B A Tilaaja: Kaisa Paavilainen verkkotoimittaja Raatihuoneenkatu 9, 3. krs. PL 84, 13101 Hämeenlinna Saavutettavuuskartoitus/toimittaja Karanttia Oy Perusturva / Avaava Katariina Saksilaisen katu 6 B 00560 Helsinki Yhteyshenkilöt: Tapio Haanperä Juha Sylberg Saavutettavuusasiantuntija +358 46 923 0905 juha.sylberg@avaava.fi 2 Tässä raportissa arvioidaan Hämeenlinnan responsiivisen verkkosivuston saavutettavuutta. Kartoitus on tehty vuoden 2015 syyskuussa. Kehittämiskohdat sekä niiden liitteenä olevat suunnitteluohjeet perustuvat vammaisjärjestöjen ja eri käyttäjäorganisaatioiden suosituksiin ja WCAG 2.0 ohjeistukseen Arviointi tehtiin WCAG 2.0 AA-tason kriteeristön mukaisesti. Tätä kriteeristöä käytetään myös valmisteilla olevan eurooppalaisen julkisten verkkopalveluiden saavutettavuus- direktiivin pohjana. Saavutettavuus arvioitiin ensisijaisesti näkövammaisten ruudunlukuohjelmaa käyttävien henkilöiden kannalta. Jonkin verran sivustoa katsottiin myös tekstinsuurennusohjelmaa käyttävien heikkonäköisten henkilöiden kannalta. Vähemmälle huomiolle jätettiin kognitiivinen saavutettavuus. Nyt tehty arvio ottaa kantaa ensisijaisesti html-koodin oikeellisuuteen, kun taas kognitiivinen saavutettavuus perustuu paljon sisällöntuottajien tuottamaan tekstiin, jota on helppo korjata myös valmiissa sivustossa. Sen sijaan html- koodin rakenteiden muuttaminen valmiiseen sivustoon on huomattavasti työläämpää.
  4. 4. JOHDANTO 2/2 A B A 3 Arviointi aloitettiin yleiskatsauksella tutustumalla sivustoon ruudunlukuohjelmalla. Esiarviossa voitiin todeta, että Hämeenlinnan kaupungin verkkosivut olivat teknisesti melko hyvät saavutettavuuden suhteen. Ruudunlukuohjelmalla sivustoa läpikäydessä ei tullut vastaan suurempia teknisiä esteitä, jotka olisivat täysin estäneet sivuston käytön. Sivustolla oli kuitenkin joitain yksittäisiä esteellisiä elementtejä, joita sokea ruudunlukuohjelman käyttäjä tai näppäimistökäyttäjä ei voinut käyttää tai joiden käyttäminen oli hyvin hankalaa. Löydettyjen havaintojen perusteella verkkosivustolle tehtiin korjausehdotuksia saavutettavuuden parantamiseksi. Korjausehdotuksissa keskityttiin erityisesti sivuston käyttöön näkövammaisten ruudunlukuohjelman käyttäjien kannalta. Sivuston laajuuden vuoksi (yli 5000 alasivua), tässä arvioinnissa paneuduttiin: •sivuston yleisen rakenteen kehittämiseen •usein toistuvien esteellisten elementtien korjaamiseen Kävimme läpi myös sivuston sisältöön liittyviä asioita ja siitä, miten sisällöstä on mahdollista tehdä saavutettavampaa.
  5. 5. Lainsäädännöllinen tilanne EU:n komissio valmistelee direktiiviä verkkopalveluiden saavutettavuudesta. Direktiivin tarkoitus on parantaa verkkopalveluiden saavutettavuutta kaikkien käyttäjien kannalta, mutta erityisesti tavoitteena on huomioida vaikeimmassa asemassa olevien näkövammaisten ruudunlukuohjelmaa käyttävien henkilöiden tarpeet. Lainsäädännön on tarkoitus kattaa kaikki julkiset verkkopalvelut. Lainsäädäntö on vielä valmisteluvaiheessa, mutta sen tarkoitus on olla yhteensopiva WCAG2.0 ohjeistuksen kanssa muutamaa poikkeusta lukuun ottamatta. Poiketen W3C-ohjeistuksesta, direktiivistä luultavasti jätetään pois vaatimus videoiden tekstitykseen. Myös joitakin tiedostotyyppejä jätetään direktiivin ulkopuolelle. Sen sijaan näyttää siltä, että esimerkiksi tyypillisesti saavutettavuuden kannalta ongelmalliset Flash-videot on sisällytetty direktiivin piiriin. Kuntalaisen sähköisessä asioinnissa välttämätöntä sähköistä tunnistautumista ei ole direktiivissä erikseen mainittu ja sen saavutettavuus tuleekin aina tarkastella tapauskohtaisesti. 4 Arvioinnissa käytetyt välineet Verkkosivun arviointitestaukset suoritettiin viidellä näkövammaisilla henkilöillä tyypillisesti käytössä olevalla laitteistolla: •Windows 7 pro käyttöjärjestelmä, Internet Explorer 10 selain. Jaws ruudunlukuohjelma. •Windows 7 pro käyttöjärjestelmä, ja NVDA ruudunlukuohjelma, Chrome selain. •iPad Air 2. iOS 9 käyttöjärjestelmä. Safari selain ja VoiceOver ruudunlukuohjelma. •MacBook Pro, OS X El Capitan, Safari, VoiceOver. •iPhone 6 . iOS 9. VoiceOver. 2. TAUSTAA
  6. 6. Sivusto on pääasiallisesti toteutettu saavutettavilla tekniikoilla ja on monelta osin teknisesti saavutettava Sivustolla olevista esteellisistä elementeistä voidaan suhteellisen pienellä vaivalla tehdä täysin esteettömiä Sivuston rakennetta voidaan selkeyttää ja oikean sisällön löytämisestä voidaan pienillä parannuksilla tehdä vaivattomampaa myös näkövammaisille ja muille näppäimistökäyttäjille 3. YLEISKATSAUS
  7. 7. 1. Logo 2. Hakutoiminto 3. Päänavigaatio 4. Alanavigaatio 5. Sivun pääsisältö 6. Täydentävä sisältö 7. Sivusta riippumattomia yleisiä tietoja 4. ARVIOINNIN TULOKSET JA KEHITTÄMISEHDOTUKSET Hämeenlinnan sivuston rakenne
  8. 8. Sivuston rakenteesta Seuraavaksi käydään läpi sellaisia oleellisia tekijöitä ja toimintoja, jotka koskettavat koko verkkosivustoa ja jotka tulee huomioida kaikilla sivuilla. Arvioinnisa käytiin läpi sivusto respo.hameenlinna.fi – Työpöytäversio Etusivulla oleva rakenne toistuu suurelta osin myös muilla sivuilla. Etusivun ja sivuston rakenteen kehittäminen parantaa koko sivuston saavutettavuutta. Pelkän etusivun saavutettavuus usein korreloi vahvasti koko sivuston saavutettavuuden kanssa
  9. 9. Sivun otsikko - Title <title> Tämä luetaan ruudunlukukäyttäjälle ensimmäisenä, kun hän avaa uuden sivun Sivun titlen tulisi kuvastaa sivun sisältöä ja olla yhdenmukainen yksittäisen sivun sisällön kanssa Title on käytännössä usein sama kuin sivun ensimmäinen otsikko Sivun titleen lisäksi kaupungin nimi Usealla eri sivustoilla voi olla sivu, jonka nimi on “Etusivu” Auttaa käyttäjää tietämään, millä sivulla hän on Tällä hetkellä title on: Asiointi - respo.hameenlinna.fi - NOT FOR COMMERCIAL USE Tulisi olla: <title>Asiointi - Hämeenlinnan kaupunki</title>
  10. 10. Otsikot ja otsikkorakenne <h> Otsikoiden ja otsikkorakenteiden tulisi olla loogisia ja selkeitä Toimii yksittäisen sivun sisällysluettelona Tämä auttaa erityisesti sokeita ruudunlukuohelman käyttäjiä: Löytää nopeasti ja vaivattomasti oleellinen ja mielenkiintoinen sisältö Navigoida vaivattomasti sivun eri osioiden välillä Esimerkiksi etusivulla tulisi olla näin <h1>Hämeenlinnan kaupunki</h1> <h2>TIEDOTTEET</h2> <h3>Esimerkkitiedote 1</h3> <h3>Esimerkkitiedote 2</h3> … <h2>KUULUTUKSET</h2> <h2>PÄÄTÖKSET</h2> <h2>TAPAHTUMAT</h2> <h3>Esimerkkitapahtuma 1</h3> <h3>Esimerkkitapahtuma 2</h3> <h2>KOKOUKSET</h2> Footer: <h1>PALVELUT</h1> <h1>ANNA PALAUTETTA</h1>
  11. 11. Otsikot ja otsikkorakenne <h> Oheista otsikkorakennetta olisi hyvä noudattaa myös muilla sivuilla Sivun pääsisällön otsikko on aina H1-tason otsikko Seuraavan kerran H1-tason otsikoita voi käyttää footerissa Otsikkotasojen oikeaoppinen käyttö helpottaa sokeita käyttäjiä Esimerkiksi Asiointi-sivulla tulisi olla näin <h1>Asiointi</h1> <h2>Asioi verkossa</h2> <h2>Kaupunki sosiaalisessa mediassa</h2> <h2>Tule paikan päälle palvelupisteeseen</h2> <h2>Soita ja kysy</h2> <h2>Yhteystiedot</h2> <h2>Anna palautetta</h2> <h2>Tee kuntalaisaloite</h2> <h2>Yhdistykset Kanta-Hämeessä</h2> <h2>Suomi.fi</h2> <h1>Palvelut</h1> <h1>Anna palautetta</h1>
  12. 12. Kuvat ja kuvatekstit <alt=“…”> Kuvilla tulisi olla niitä kuvaava vaihtoehtoinen tekstivastine Tekstivastineiden käyttö auttaa hakukoneoptimoinnissa Dekoratiivisille kuville ei suositella tekstivastineita Vältä sellaisten kuvien käyttöä, joissa on pelkkää tekstiä Poikkeuksia voivat olla esimerkiksi logot Jos kuva on linkki, vaihtoehtoinen teksti on erityisen tärkeä Tulisi olla Vasemmassa ylälaidassa oleva Hämeenlinnan kaupungin “logo”: <alt=“Hämeenlinnan kaupunki - etusivulle”> Dekoratiivinen kuva, joka ei sisällä mitään merkityksellistä informaatiota: <alt=“”>
  13. 13. Hyppylinkki sivun pääsisältöön Käyttäjille voidaan tarjota hyppylinkki, jolla voidaan ohittaa kaikki sivusta toiseen toistutava sisältö: hakutoiminnot, navigaatiolinkit, mainokset, ylälaidan bannerit yms.) Hyppylinkin tulisi olla sivun ensimmäinen elementti Auttaa kaikkia, jotka selaavat verkkosivuja käyttäen pelkkää näppäimistöä Tulisi olla <body> <a href=“#paasisalto”>Hyppää sisältöön</a> … <main id=“paasisalto”> <h1>Asiointi</h1>
  14. 14. Maamerkit - Landmarks Jaottelee sivun eri osat suuremmiksi kokonaisuuksiksi: banneri; hakutoiminto; päänavigaatio; alanavigaatio; pääsisältö; täydentävä sisältö; yleiset tiedot Auttaa sokeita käyttäjiä: siirtymään sivun eri osioiden välillä havaitsemaan, missä kohtaa sivua käyttäjä kulloinkin on Näiden käyttö navigoinnin tukena verkkosivuilla on kasvanut huomattavasti näkövammaisten keskuudessa Tulisi olla Logo ja kielivalinta: <header>…<div id”……” role=“banner”>…</div> Hakutoiminto: <div id=“……” role=“search”>…</div>…</header> Päänavigaatio: <nav id=“……” role="navigation" aria-label="Päänavigaatio">…</nav> Alanavigaatio (Asiointilinkit): <nav id=“……” role="navigaton" aria-labelledby=“leftnavheading”> …</nav> Pääsisällön: <main role="main"> Täydentävä sisältö (oikea laita): <aside id=“……” role=“complementary"…</aside> Footer: Palvelut ja Anna Palautetta (footer . sivun alaosa): <footer id=“……” role="contentinfo">…</footer>
  15. 15. Asiointi-sivu jaettuna maamerkeillä 1. Logo (Banner) 2. Hakutoiminto (Search) 3. Päänavigaatio (navigation) 4. Alanavigaatio (navigation) 5. Sivun pääsisältö (main) 6. Täydentävä sisältö (complementary) 7. Sivusta riippumattomia yleisiä tietoja (contentinfo)
  16. 16. Yhdenmukaisuus ja lukemisjärjestys Käyttäjä olettaa eri sivuilla olevien samanlaisten asioiden olevan samassa paikassa Parantaa käytettävyyttä kaikille Erityisen tärkeää sokeille ja kognitiivisista haasteista kärsiville käyttäjille Toisiinsa liittyvien asioiden tulisi olla peräkkäin
  17. 17. Linkit Varmista, että linkit ovat visuaalisesti tunnistettavissa linkeiksi Linkkien nimeäminen kunnolla on tärkeää: Linkin tarkoitus tulee käydä selväksi kontekstista riippumatta Linkistä tulee käydä selväksi, mille sivulle käyttäjä ohjataan Moni sokea käyttäjä käy verkkosivuilla läpi pelkkiä linkkejä Ei näin: <a href=“…”>Paina tästä</a> <a href=“…”>Lue lisää…</a> Tulisi olla Esimerkki Asumaan-sivulta (linkkinä oleva osuus on alleviivattu); oikealla on teksti: “Voit selata verkossa neljä kertaa vuodessa ilmestyvää asukaslehteä parempi teksti: “Selaa verkossa Hämeenlinnan kaupungin asukaslehteä. Lehti ilmestyy neljä kertaa vuodessa. Näin linkin tarkoitus tulee käyttäjälle selväksi ilman kontekstia
  18. 18. Murupolku Auttaa käyttäjää hahmottamaan paremmin, missä kohtaa sivustoa hän on Tärkeä ominaisuus, jos sivuston navigaatiorakenne on syvä Hämeenlinnan sivulla tämä on toteutettu onnistuneesti… paitsi, että etusivulle johtavan linkin kohdalla on pieni talon kuva, jossa ei ole vaihtoehtoista tekstivastinetta Etusivu / Asiointi / Palvelupisteet / Hauhon kirjasto-palvelupiste
  19. 19. Sosiaalisen median linkit Toistaiseksi sosiaalisen median linkkejä on vaikea ja osittain mahdotonta käyttää ruudunlukuohjelmalla Tältä SoMe -linkit kuulostavat ruudunlukuohjelmalla sokealle käyttäjälle: Facebook frame Like button Like 0 Facebook frame end +1 frame 0 +1 frame end Tweet button frame Link tweet Link 0 Tweet button frame end Link graphic share on mouse over Tulisi olla näin Sosiaalinen media Tykkää sivusta Facebookissa Suosittele tätä Google+ -palvelussa julkisesti käyttäjänä Matti Meikäläinen Jaa Twitterissä (Muiden jakamisvaihtoehtojen kohdalla käyttäjä viedään erilliselle sivulle)
  20. 20. Yhteystiedot Yhteystietojen näkyminen jokaisella sivulla on tärkeää Yhteystietojen löytäminen on tehtävä helpoksi Yhteystiedot on hyvä esittää yhdenmukaisella tavalla sivusta riippumatta Yhteystietojen luettavuus helpoksi: Vaihde (03) 6211 —> Vaihde 03 6211
  21. 21. Hakutoiminto Hakutoiminnon on hyvä olla esillä kaikilla sivuilla Käyttäjälle täytyy olla selvyys siitä, mihin hakutoimintoa voi käyttää mistä ja mitä haetaan HTML-koodiin on laitettava asianmukaiset labelit sokeita käyttäjiä varten Tällä hetkellä: hakupainikkeen linkki “__dopostback(‘ctl00…” Parannusehdotus: Linkki/painikkeen label: “Hae”
  22. 22. Esimerkkinä Etusivu ja Anna palautetta –sivu Seuraavaksi käydään osittain läpi sivujen Etusivu ja Anna palautetta –sivu pääsisältöjä ja kerrotaan miten kehittää saavutettavuutta ja käytettävyyttä näiden sivujen pääsisällössä. Tässä kohtaa ei käydä läpi sivujen muita osia (navigaatiorakenteet, yhteystiedot, sosiaalisen median linkit yms.)
  23. 23. Etusivu Etusivulta pääsee helposti siirtymään muille sivuille Sivun keskellä oleva “karuselli” ei ole saavutettava sokealle Tällä hetkellä kuvissa ei ole tekstivastineita Tiedotteet, Kuulutukset, Päätökset SEKÄ Tapahtumat, Kokoukset - välilehdet ovat vaikeasti hahmotettavissa ruudunlukuohjelmalla “Kaikki tiedotteet >” -linkin teksti katoaa, kun siihen kohdistaa näppäimistön
  24. 24. Anna palautetta “Katso ohjevideo” Tällaiset ovat hyödyllisiä ja havainnollistavia On kuitenkin tarpeellista antaa ohjeet myös tekstiversiona Navigoimisen helpottamiseksi, kaikki eri aiheet, joista palautetta voi antaa, olisi hyvä otsikoida Helpottaa näppäimistökäyttäjiä löytämään haluamansa aiheen nopeammin ja vaivattomammin Miten tältä sivulta palataan Hämeenlinnan kaupungin sivulle?
  25. 25. Anna palautetta: Ikäihmisten palvelut Palautteet eri osiot olisi hyvä jaotellla selkeämmin käyttäen kunnollista otsikkorakennetta Pakollisten kenttien havaitseminen on sokealle mahdotonta: “Sinisellä -merkillä merkityt kentät ovat pakollisia” “Ahe #” —> “Aihe (pakollinen):” Osa painikkeista on nimeämättömiä - sokea ei siis voi tietää, mitä niiden painamisesta seuraa Anna palautteen sijainti kohta on sokealle henkilölle tällä hetkellä mahdoton Kartta osuuden ohittamisen ruudunlukijalla vaaditaan yli 40 näppäinpainallusta Etunimi- ja sukunimikentillä ei ole omia labeleita
  26. 26. 25 A B A Vasemman yläkulman logo Hämeenlinnan kaupungin vasemmassa ylälaidassa olevaan logoon/linkkiin etusivulle on nyt lisätty kuvaava tekstivastine (alt=”Hämeenlinnan kaupunki – etusivu”) ruudunlukuohjelman käyttäjille. Hakupainikkeen nimilappu (label) Hakutoiminnon Hae –painikkeeseen on lisätty kuvaava nimilappu (label “Hae”) ruudunlukuohjelman käyttäjille. Staattisten linkkien nimet Sivustolla on yleisesti ottaen selkeytetty useiden staattisten linkkien nimeämistä. Tämä helpottaa huomattavasti sellaisia ruudunlukuohjelman käyttäjiä, jotka navigoivat linkkien avulla. Osa linkeistä generoidaan automaattisesti. Tällaisten linkkien nimeämiskäytäntöön ei ole puututtu. 5. SIVUSTOLLE TEHDYT KORJEUSTOIMENPITEET JA NIIDEN VAIKUTUKSET KÄYTTÄJILLE
  27. 27. 26 A B A Sivujen pääotsikot (title) Eri alasivuilla on nyt asianmukaiset ja kuvaavat pääotsikot (title). Tämä auttaa kaikkia käyttäjiä hahmottamaan, millä sivulla käyttäjä on. Ruudunlukuohjelman käyttäjille tämä (title) luetaan usein ensimmäisenä, kun sivu aukeaa. Hyvin nimetty sivun pääotsikko auttaa myös hakukoneoptimoinnissa. Sosiaalisen median linkit ja painikkeet Sosiaalisen median linkkien ja painikkeiden osalta on nyt otettu käyttöön saavutettavuuslaajennus, joka mahdollistaa niiden käytön myös ruudunlukuohjelmilla. Staattinen otsikkorakenne (<h1>, <h2>, … <h6>) Eri alasivujen staattiset otsikkorakenteet on nyt muutettu selkeämmäksi näppäimistökäyttäjille. Sivuja voi vaivattomasti selata otsikkorakenteen avulla käyttäen sivuilla esiintyviä <h1>, <h2>, … ja <h6> - elementtejä.
  28. 28. 27 A B A Etusivulla olleet linkit Etusivulla verkkosivuston aikaisemmassa versiossa muutama linkki (esim. “Kaikki tiedotteet”) hävisi näkyvistä (fontin väri muuttui), kun sen päälle kohdisti näppäimistön. Tämä aiheutti hämmennystä näppäimistökäyttäjissä. Vika on nyt korjattu. Sisältö Sisällöllisesti verkkosivusto oli jo ensimmäisessä testattavassa versiossa varsin hyvä saavutettavuuden suhteen. Sisällöntuottajille on kuitenkin annettu ohjeita entistä saavutettavamman sisällön luomiseen. Näistä esimerkkeinä linkkien ja kuvien nimeämiset sekä otsikointiin liittyvät asiat. Verkkosivuston toimittaja oli antanut osasta näitä edelleen ohjeita, miten ne saadaan toteutetuksi.
  29. 29. 6. SIVUSTON ARVIOIMINEN TEHTYJEN KORJAUSTEN JÄLKEEN WCAG2.0-KRITEEREIN 28 A B A 1.1 Tekstivastineet: Tarjoa tekstivastineet kaikelle ei-tekstuaaliselle sisällölle. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 1.1.1 (A-taso) Onko käyttäjän kannalta olennaista informaatiota sisältäville kuville annettu kuvaava ja riittävän informaation sisältävä tekstivastine? http://www.hameenlinna.fi/Palvelu t/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Sivulla ei ole käyttäjän kannalta olennaista informaatiota sisältäviä kuvia NA 1.1.1 (A-taso) Linkitetyillä kuvilla ja lomakkeiden kuvapainikkeilla on kuvaava tekstivastine tai -arvo. http://www.hameenlinna.fi/Palvelu t/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Sivun kuvalla (talon kuva) ei ole alt tekstivastinetta 0 1.1.1 (A-taso) Onko käyttäjän kannalta epäolennaisille kuville annettu määre alt="" tai toteutettu ne css-taustakuvana? http://www.hameenlinna.fi/Palvelu t/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Sivun kuvalla (vammaispalvelut.png) ei ole alt tekstivastinetta eikä määrettä määre alt="" 0 1.1.1 (A-taso) Onko CAPTCHA tai muuta vastaavat ratkaisut toteutettu saavutettavasti? http://www.hameenlinna.fi/Palvelu t/Vammaispalvelut/Hakemukset- ja-lomakkeet/ NA 1.1.1 (A-taso) Onko lomakkeiden kentillä kuvaavat nimilaput (label)? http://www.hameenlinna.fi/Palvelu t/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Hakukentällä on käytetyn tilan puitteissa riittävä label 2 1.1.1 (A-taso) Onko kaikelle muulle ei-tekstimuotoiselle sisällölle annettu tekstivastine? http://www.hameenlinna.fi/Palvelu t/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Sivun 12 ei tekstimuotoisesta elementistä 11 on nimetty ja 1 Twitter elementti nimeämätön 2
  30. 30. 29 1.2 Aikasidonnainen media: Tarjoa vastine aikasidonnaiselle medialle. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 1.2.1 (A-taso) Onko audiomuotoiselle sisällölle (podcastit, mp3-tiedostot ym.) olemassa vastaavan informaation sisältävä tekstimuotoinen vastine? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ NA 1.2.1 (A-taso) Onko videoille olemassa vastaavan informaation sisältävä tekstimuotoinen vastine tai audiotiedosto? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ NA 1.2.2 (A-taso) Onko tekstitykset tarjottu kaikelle nauhoitetulle audiosisällölle synkronoidussa mediassa? Tekstityksien tulee tarjota audioraidan sisältö tekstimuodossa, sisältäen informaatiota, joka ei välttämättä liity itse dialogeihin (esimerkiksi "huokaisee", "oven narahdus" tai "salamointia"). http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ NA 1.2.3 (A-taso) Onko verkkosivuilla oleville videoille olemassa kuvaileva tekstivastine tai kuvaileva ääniselite (mikäli videon oma ääniraita ei sisällä riittävää informaatiota kaikesta videon sisällöstä)? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ NA 1.2.4 (AA-taso) Onko suoran videosisällön ääniraita tekstitetty. http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ NA 1.2.5 (AA- taso) Onko erillinen kuvaileva ääniselite tarjolla kaikelle videosisällölle? http://www.hameenlinna.fi/Pal velut/Vammaispalvelut/Hake mukset-ja-lomakkeet/ NA
  31. 31. 30 1.3 Mukautettava: Tuota sisältöä, joka voidaan esittää eri tavoin (esimerkiksi yksinkertaisemman asettelun avulla) informaatiota tai rakennetta menettämättä. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 1.3.1 (A-taso) Onko verkkosivun rakenne ja elementtien suhteet ilmaistu HTML- kielen avulla tai vastaava informaatio on annettu tekstimuotoisena? http://www.hameenlinna.fi/Palv elut/Vammaispalvelut/Hakemu kset-ja-lomakkeet/ Otsikoita ja maamerkkejä on pääpiirteittäin käytetty oikein. Navigaatiopalkkien maamerkkien rolea ei ole määritelty 2 1.3.2 (A-taso) Onko HTML-koodin kautta määrittyvä sisällön lukemisjärjestys looginen ja intuitiivinen? http://www.hameenlinna.fi/Palv elut/Vammaispalvelut/Hakemu kset-ja-lomakkeet/ Pääosin oikein. Ainoa poikkeus 3 tason otsikko Vammaispalvelut jälkeen tulee h3 tason otsikoita ja lopun footerissa on jälleen h2 tason otsikoita 2 1.3.3 (A-taso) Onko verkkosivuston käyttämiseen tarkoitetut ohjeet toteutettu niin, että niiden ymmärtäminen ei vaadi kykyä kuulla tai nähdä? http://www.hameenlinna.fi/Palv elut/Vammaispalvelut/Hakemu kset-ja-lomakkeet/ NA 1.4 Onko verkkosivustolla esitettävät ohjeet toteutettu niin, että niiden ymmärtäminen ei vaadi kykyä kuulla tai näh dä? Kriteeri Heuristiikka Sivut (URI) Kommentit OK 1.4.1 (A-taso) Onko käytetty muitakin visuaalisia keinoja kuin väriä välittämään informaatiota verkkosivulla? http://www.hameenlinna.fi/Palv elut/Vammaispalvelut/Hakemu kset-ja-lomakkeet/ On 2 1.4.2 (AA-taso) Onko verkkosivulla mekanismi äänen pysäyttämiseksi, hiljentämiseksi tai sen voimakkuuden säätämiseksi mikäli se käynnistyy automaattisesti ja soi yli 3 sekuntia? http://www.hameenlinna.fi/Palv elut/Vammaispalvelut/Hakemu kset-ja-lomakkeet/ NA
  32. 32. 31 1.4.3 (AA-taso) Onko tekstin tai tekstiä esittävän kuvan kontrastisuhde vähintään 4,5:1? Onko ison tekstin (yli 18px tai 14px lihavoituna), kontrastisuhde vähintään 3:1? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ On 2 1.4.4 (AA-taso) Onko verkkosivu on luettava ja voidaanko sitä käyttää ilman ongelmia, jos tekstin kokoa kasvatetaan 200%? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ On 2 1.4.5 (AA-taso) Onko vältetty tekstin tarpeetonta esittämistä kuvamuodossa? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ On 2 2.1 Käytettävissä näppäimistöltä: Toteuta kaikki toiminnallisuus siten, että se on käytettävissä näppäimistöltä. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 2.1.1 (A-taso) Sivun kaikki toiminnot ovat käytettävissä näppäimistön kautta. http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Kylla 2 2.1.2 (A-taso) Näppäimistön fokus ei milloinkaan lukitu sivun mihinkään elementtiin. Jos näppäimistöllä voidaan siirtyä johonkin sivun elementtiin, siitä on mahdollista näppäimistön avulla myös pois. http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Kyllä 2
  33. 33. 32 2.2 Tarpeeksi aikaa: Anna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 2.2.1 (A-taso) Jos sivulla tai sovelluksella on aikaraja, onko käyttäjän mahdollista kytkeä aikaraja pois päältä, säätää sitä tai jatkaa sitä? http://www.hameenlinna.fi/Palvelut/ Vammaispalvelut/Hakemukset-ja- lomakkeet/ NA 2.2.2 (A-taso) Voidaanko automaattisesti käynnistyvä liikkuva, välkkyvä tai vierivä sisältö keskeyttää, pysäyttää tai piilottaa käyttäjän toimesta? http://www.hameenlinna.fi/Palvelut/ Vammaispalvelut/Hakemukset-ja- lomakkeet/ NA 2.3 Sairauskohtaukset: Älä suunnittele sisältöä tavalla, jonka tiedetään aiheuttavan sairauskohtauksia. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 2.3.1 (A-taso) Mikään sivun oleva sisältö ei välky tiheämmin kuin 3 kertaa sekunnissa? http://www.hameenlinna.fi/Palvelut/ Vammaispalvelut/Hakemukset-ja- lomakkeet/ 2 2.4 Navigoitava: Tarjoa käyttäjille tapoja navigoida, etsiä sisältöä ja määrittää sijaintinsa. Kriteeri Heuristiikka Sivut (URI) Kommentit OK
  34. 34. 33 2.4.1 (A-taso) Onko sivulla mahdollista ohittaa verkkopalvelun toistuvat rakenteet, esimerkiksi joka sivulla toistuvat navigointirakenteet? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ On. Ainoa parannus olisi hyppää sisältöön linkki 2 2.4.2 (A-taso) Onko verkkosivuilla kuvaavat ja informatiiviset otsikot (“Page title”)? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ On 2 2.4.3 (A-taso) Onko verkkosivun navigoitavien elementtien (linkit, lomake-elementit yms.) navigointijärjestys looginen ja intuitiivinen? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ On. Poikkeuksena pääsisällön alue (role=main) ei ole käytetty. Header elementtiä on käytetty hyvän käytännön vastaisesti 2 2.4.4 (A-taso) Voidaanko jokaisen linkin tarkoitus selvittää yksin linkkitekstistä tai linkkitekstistä ja sen kontekstista yhdessä? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Kyllä. Poikkeuksena sivulla on tyhjä linkki joka ei sisällä tekstiä (linkki ei näy ruudulla eikä ruudunlukuohjelma lue sitä) 2 2.4.5 (AA-taso) Verkkosivu on löydettävissä sivustolta useammalla kuin yhdellä tavalla. http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Kyllä 2 2.4.6 (AA-taso) Ovatko otsikot (h1, h2, jne.) kuvaavia ja informatiivisia? Ovatko lomake- ja muiden vuorovaikutteisten toimintoelementtien nimilaput (labels) kuvaavia ja informatiivisia? http://www.hameenlinna.fi/Palvel ut/Vammaispalvelut/Hakemukset- ja-lomakkeet/ Kyllä. Poikkeuksena hakukentän label johon käytettävissä olevaan tilaan ei mahdu täydellistä kuvausta. Oppaita ja linkkejä linkin nimi voisi olla Oppaita ja linkkejä 2 2.4.7 (AA-taso) Näkeekö käyttäjä, missä verkkosivun elementissä näppäimistön fokus kulloinkin on? Kyllä 2
  35. 35. 34 3.1 Luettava: Tee tekstisisällöstä luettavaa ja ymmärrettävää. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 3.1.1 (A-taso) Onko verkkosivun kieli määritetty? Ei 0 3.1.2 (A-taso) Onko käyttäjälle kerrottu (lang-attribuutilla), jos verkkosivun jokin sisältöelementti on esitetty sivulle määritetystä kielestä poikkeavasti? Ei. Myös vieraskielisillä sivuilla kieli oli määritelty http-equiv="Content-Language" content="fi". Myös näillä sivuilla oli suomenkielinen ylänavigaatiopalkki 0 3.2 Ennakoitava: Tee verkkosivuista sellaisia, että niiden ilmiasu ja toiminta ovat ennakoitavissa. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 3.2.1 (A-taso) Kun verkkosivun jokin elementti vastaanottaa fokuksen, sen seurauksena • sivu ei merkittävästi muutu • pop-up -ikkuna ei avaudu • näppäimistön fokus ei siirry loogisesta paikastaan • ei tapahdu mitään muuta muutosta, joka voisi hämmentää tai disorientoida käyttäjää. OK 2 3.2.2 (A-taso) Kun käyttäjä syöttää tietoa tai muuttaa jonkin verkkosivun elementin asetusta tai arvoa, tämän seurauksena • sivu ei merkittävästi muutu • pop-up -ikkuna ei avaudu • näppäimistön fokus ei siirry loogisesta paikastaan • ei tapahdu mitään muuta muutosta, joka voisi hämmentää tai disorientoida käyttäjää, ellei tästä ole kerrottu käyttäjälle etukäteen. OK 2 3.2.3 (AA-taso) Pysyykö useilla sivuilla toistuvien navigaatioelementtien linkkijärjestys samana verkkopalvelun eri sivuilla? Kyllä 2 3.2.4 (AA-taso) Saman toiminnon toteuttavat elementit esitetään verkkopalvelun eri sivuilla johdonmukaisesti. Kyllä 2
  36. 36. 35 3.3 Syötteen avustaminen: Auta käyttäjiä välttämään ja korjaamaan virheitä. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 3.3.1 (A-taso) Jos lomakkeella havaitaan syötevirhe, sen paikka osoitetaan ja virheen kuvaus esitetään tekstimuotoisena. http://www.hameenlinna.fi/Valikko/ Googlehaku/?hakusana=H%C3%B 6p%C3%B6%C3%A4 2 3.3.2 (A-taso) Onko käyttäjää ohjeistettu riittävästi mikäli hänen edellytetään syöttävän tietoa verkkopalveluun? http://www.hameenlinna.fi/Valikko/ Googlehaku/?hakusana=H%C3%B 6p%C3%B6%C3%A4 2 3.3.3 (AA-taso) Jos lomakkeella havaitaan syötevirheitä, korjausehdotukset esitetään käyttäjälle (mikäli ne tunnetaan). http://www.hameenlinna.fi/Valikko/ Googlehaku/?hakusana=H%C3%B 6p%C3%B6%C3%A4 NA 3.3.4 (AA-taso) Voiko käyttäjä peruuttaa, tarkistaa tai vahvistaa lähettämänsä syötteen, jos se: • aiheuttaa lakiin perustuvia sitoumuksia • aiheuttaa taloudellisia seuraamuksia • sisältää käyttäjän testivastauksia • muuttaa tai poistaa käyttäjän hallinnoimaa dataa NA
  37. 37. 36 4.1 Luettava: Tee tekstisisällöstä luettavaa ja ymmärrettävää. Kriteeri Heuristiikka Sivut (URI) Kommentit OK 4.1.1 (A-taso) Onko verkkopalvelun sisältämä HTML-koodi sellaista, että käytettävät ohjelmat (esim. selaimet ja ruudunlukuohjelmat) pystyvät esittämään (jäsentämään) sen oikein? On 2 4.1.2 (A-taso) Ovatko kaikki käyttöliittymäkomponentit toteutettu niin, että niitä voidaan käyttää ohjelmallisesti? On 2
  38. 38. 7. LISÄTIETOA SAAVUTETTAVUUDESTA 37 A B A Tuore suomenkielinen tietopaketti saavutettavuudesta: http://www.celia.fi/celia-asiantuntijana/esteettomyyssalkku/esteettomyyssalkku/ Valtiovarainministeriön SADe-ohjelman Esteettömyystoimintamalli http://vm.fi/documents/10623/1181303/Esteett%C3%B6myyden+toimintamalli/f32947bb- 1ec3-4256-933f-6d8f93ad6602 Kehitysvammaliiton Papunet- verkkopalveluyksikön projektissa tuotettu julkishallinnon verkkosivustojen saavutettavuuden arviointimalli http://papunet.net/saavutettavuus/saavutettavuuden-arviontimalli. JHS 129 Julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteet http://www.jhs-suositukset.fi/web/guest/jhs/recommendations/129 W3C tarkistuslista WCAG 2.0 version verkkosivustojen tekijöitä varten: http://www.w3.org/WAI/WCAG20/quickref/. Tarkempi tarkastuslista WWW-sivujen esteettömyyden tarkistamiseen Jyväskylän yliopiston sivuilla: https://www.jyu.fi/hallinto/esteet/www/tarkistuslista. W3C validaattorilla voi testata verkkosivun teknistä saavutettavuutta:http://validator.w3.org/ . Työkalu listaa järjestyksessä sivulla havaitut virheet lähdekoodissa.
  39. 39. Avaava Katariina Saksilaisen katu 6 B, TH4 00560 Helsinki puhelin 045 135 8932 www.avaava.fi

×