Saavutettavuus

Saavutettavuusesitys WordPress-yhteisön Meetupissa

Olin viikko sitten puhumassa WordPress Helsinki -yhteisön meetupissa saavutettavuudesta. Yleisön pyynnöstä nyt näyttämäni diat luettavissa. Alla olevan SlideShare-upotuksen lisäksi voit lukea esityksen kalvot PDF-tiedostona.

Jos et ollut seuraamassa esitystäni paikan päällä, dioista ei välttämättä ole hirveästi iloa. Ehkä niistä saa kuitenkin kipinän tulla joskus kuuntelemaan, mitä oikein aiheesta puhun!


Aikuisten töihin

Aloitan maanantaina työt ensimäisessä ”kunnon” työpaikassani. Olenhan minä ennenkin töitä tehnyt – todella lyhyitä pätkiä, keikkatöitä ja etänä kotona kaikenlaista – mutta tämä on ensimmäinen ihan sellainen kunnon työ, jossa on säännöllinen palkka, työyhteisö ja työpaikkakin, johon mennä.

Työskentelen siis vuoden 2019 loppuun Kehitysvammaliitossa Somettamalla uutta kohtaamista -hankkeessa sovellussuunnittelijana. Olen mielettömän innoissani!

Minun ei todellakaan pitänyt mennä töihin nyt. Tai no opintojen ohella pieniä tuntimääriä ajattelin tehdä, mutta en mitään tällaista. Minun piti opiskella ahkerasti seuraavat pari vuotta niin, että kandidaatin tutkinto valmistuisi täksi jouluksi (puuttuu muutama kurssi) ja sitten saisin nopeasti maisterini kasaan. No nyt teen pieniä opintopistemääriä opintoja töiden ohella, enkä todellakaan ole saamassa kandiani jouluksi, nopeasta maisteritutkinnosta puhumattakaan. Elämä kuitenkin heitti eteeni mahdollisuuden, johon oli aivan pakko tarttua.

Törmäsin työpaikkailmoitukseen Twitterissä ja vaikken varsinaisesti mitään töitä etsinytkään, luin sen. Mielestäni ilmoituksessa kuvailtiin minut aika täydellisesti. Näytin työpaikkailmoituksen myös avomiehelleni ja hän oli samaa mieltä siitä, että minä sopisin hommaan kuin nakutettu. Pohdin aika pitkään, haenko. Minunhan piti opiskella! Ja 60 prosentin työaika, mitä siinä ehtii tehdä samaan aikaan. Entä haluanko varmasti olla yli kaksi vuotta samassa hankkeessa, kun saavutettavuusdirektiivin voimaantulo lähestyy ja se voisi tarjota kaikkia todella mielenkiintoisia mahdollisuuksia. Tulin kaiken pohdintani jälkeen siihen tulokseen, etten voi päästää tätä tilaisuutta ohi edes yrittämättä.

Niinpä lopulta hain työpaikkaa, kävin haastattelussa ja minut valittiin. En tainnut olla väärässä siinä, että homma sopii minulle täydellisesti!

Maanantaina työt alkaa. Kutkuttavan innostavaa ja jännittävää.

Luin pari päivää sitten uudestaan läpi hankkeen kuvauksen ja olen kyllä jatkuvasti enemmän pähkinöinä tästä.

”Somettamalla uutta kohtaamista -hankkeessa rohkaistaan tukea tarvitsevia nuoria ja aikuisia sosiaaliseen kanssakäymiseen sosiaalisen median keinoin. Hankkeen tavoitteena on yksinäisyyden vähentäminen, ja sitä kautta hyvinvoinnin lisääminen.

Hankkeessa luodaan helppokäyttöinen sosiaalisen median palvelu, jossa voi viestiä muiden käyttäjien kanssa ja harjoitella turvallisesti vuorovaikutus- ja sosiaalisia taitoja. Palvelussa voi tutustua uusiin ihmisiin, siellä voi etsiä itselleen ystävää, keskustelu- tai seurustelukumppania tai sopivaa seuraa erilaisiin harrastuksiin. Palvelun avulla voi löytää samassa elämätilanteessa olevia tai samanhenkisiä, samoista asioista kiinnostuneita ihmisiä. Tavoitteena on myös lisätä käyttäjien itsetuntemusta ja itseluottamusta. Palvelu rohkaisee sosiaaliseen kanssakäymiseen muiden käyttäjien kanssa ja luomaan sosiaalisia verkostoja ja aitoja ihmissuhteita, myös verkon ulkopuolella.”

Pääsen suunnittelemaan palvelua todella tarpeelliseen ja tärkeään käyttöön. Tämä hanke yhdistää aika täydellisesti minun humanistipuoleni ja teknisen puoleni, sillä molempia tarvitaan.

Valtavan innostuksen lisäksi hieman kauhistuttaa, mihin olen oikein ryhtynyt. Edessä on paljon uutta ja jännittävää, mistä minulla ei ole aiempaa kokemusta. Tekemällä sitä oppii, eikös niin? Onneksi ei sentään yksin tarvitse olla ja ihmetellä esimerkiksi julkisen kilpailutuksen kiemuroita.

Kohta se alkaa! Jee!

Saavutettavaa kuvaviestintää Twitterissä

Tiesitkö, että Twitterissä on mahdollista lisätä twiittien kuviin kuvailut, ”alt-tekstit”? Alla olevalla videolla näytän, kuinka se tehdään. Videon alta sama löytyy tiiviisti tekstinä.

Twitterin mobiilisovelluksissa kuvailujen lisääminen kuviin onnistuu, kunhan ensin laittaa ominaisuuden päälle sovelluksen asetuksissa. iOS-sovelluksessa se onnistuu näin:

asetukset -> asetukset ja yksityisyys -> käyttöapu

Pistetään asetus ”Kirjoita kuville kuvauksia” päälle, klikataan valmis ja siinä se!

Nyt, jos lisäät twiittiisin kuvan, voit kirjoittaa kuvalle myös kuvauksen ja kertoa, mitä siinä kuvassa oikein onkaan. Ruudunlukuohjelma osaa sitten lukea kuvan kuvauksen hienosti ääneen.

Ilman kuvausta twiiteissä olevat kuvat luetaan vain muodossa ”kuva”. Voin kertoa sen olevan aika ärsyttävää etenkin silloin, jos twiitin tekstistä tiedän, että kuvassa olisi kse koko jutun the pointti. Usein esimerkiksi twiittaillaan kuvakaappauksia tai jotain muita kuvia, joissa on tekstiä. Ilman kuvausta niistä ei sokkona saa yhtään mitään irti.

Minua ilahduttaa suuresti jokainen feediini ilmestyvä twiitti, jonka kuva on kuvailtu. Varsin harvassa niitä vielä on, ehkä ilo on siksi suurempi. On mielettömän hauskaa, kun sokkonakin voin seurata kuvilla viestittyjä asioita.

Millainen kuvaus on hyvä?

Kuvasta kannattaa kertoa olennainen sisältö: se, mihin näkevä katsoja kiinnittää huomiota ja se, mikä on kuvan pointti. Kuvausta ei tarvitse aloittaa kertomalla ”Kuvassa on …”, koska kyllä ruudunlukuohjelman käyttäjätkin tietävät, että nyt tässä on kuva.

Ruutukaappauksesta hyvä kuvaus voisi olla esimerkiksi: ”Ruutukaappaus käyttäjän X twiitistä. TWIITIN TEKSTI.” Jos taas twiittaat kuvan hankkimastasi söpöstä koiranpennusta, voit kirjoittaa vaikka: ”Ruskeaturkkinen koiranpentu katsoo kameraa”.

Hyvässä kuvailussa ei ole ryhdytty kuvailemaan ja tulkitsemaan liikaa. Useinkaan ei ole tarkoituksenmukaista kertoa aivan kaikkea, mitä kuvasta voisi saada irti. Ihan se pääpointti riittää. Kuvan kuvailu riippuu myös aika paljon sen tarkoituksesta: jos on tarkoituksena ohjeistaa kuvalla jonkin asian tekeminen, pitäisi tekstinä olevasta kuvailusta saada sama informaatio. Jos taas kuva on ihan vain kuvituskuva, voi sen sisällön kuitata parilla sanalla.

Viisi vinkkiä ruudunlukuohjelmalle saavutettavan webbisivun tekoon

EU:n parlamentti on hyväksynyt direktiivin, jonka mukaan kaikkien julkishallintoon liittyvien verkkosivujen ja sovellusten tulee olla saavutettavia vuoteen 2021 mennessä. Vaikka vaatimus koskee julkishallintoa, saavutettavat palvelut on kilpailuvaltti myös yksityisille. Eikä ole pakko odottaa sinne 2021 vuoteen saakka. Aiheeseen liittyen olin elokuussa juttelemassa Fraktiolla digitaalisten palveluiden saavutettavuudesta. Joku siellä ehdotti, että olisi hienoa, jos jossain olisi listattuna esim viisi tärkeintä seikkaa saavutettavan verkkosivun tekoon. Tässä ne ovat.

Ensin pari sanaa nettisivujen selailusta ruudunlukuohjelmalla.

Ensinäkin, se on todella erilaista kuin näkevänä. Voi ajatella, että ruudunlukuohjelman kanssa verkkosivu on yksiulotteinen taulukko; kaikki sivun sisältö tulee luettavaksi peräkkäin. Sellaisia käsitteitä kuin ”oikealla ylhäällä” tai ”vasemman reunan valikossa” ei ruudunlukuohjelman käyttäjälle ole olemassa (unohdetaan tässä hetkeksi kosketusnäytön mahdollisuudet). Netissä liikutaan näppäimistön ja näppäinkomentojen avulla, täysin ilman hiirtä.

Sitten niitä vinkkejä.

1. Semanttinen rakenne

Koska html on kehitetty tekstin jäsentämiseen, siitä löytyy elementit otsikoille, taulukoille, listoille yms. Voisi sanoa, että kaikelle sisällölle löytyy oma, semanttinen html-elementtinsä (html5:ssä myös videolle). Käyttäkää niitä! Ruudunlukuohjelmalla on lähes mahdotonta selata verkkosivua, jossa otsikot ei ole koodattu otsikoina (h-elementteinä), vaan tehty kivasti otsikon näköiseksi muotoiluilla. Se ei riitä! Valikon linkkilista on järjettömän paljon helpompi löytää, jos se on oikeasti lista. Niin ja jos vaikkapa ohjeissa puhutaan painikkeesta, on todella hämmentävää ja väärin, jos oikeasti ei löydykään painiketta (button) vaan linkki (a).

Ruudunlukuohjelman kanssa sivuilla liikkuminen onnistuu siis myös tiettyihin elementteihin, aina ei tarvitse lukea sivua järjestyksessä alusta loppuun. Siksi ne semanttiset vastineet ovat niin tärkeitä. Esimerkiksi Googlessa hakukenttään pääsee, kun etsii tekstikentän (yksi näppäin), haun jälkeen hakutulokset löytyy helposti h-tasoina (jälleen yksi näppäin). Myös listat, taulukot, painikkeet, kuvat, linkit…. kaikki elementit on ruudunlukuohjelmalla löydettävissä niitä vastaavilla komennoilla, mikäli ne on koodattu oikein.

2. Lähdekoodin järjestys

Kyllä, sillä on väliä, missä järjestyksessä sivun sisältö on lähdekoodissa/domissa. Vaikka CSS:n avulla elementit saa mukavasti visuaalisesti käytännössä mihin tahansa välittämättä siitä, missä se sijaitsee lähdekoodissa, ruudunlukuohjelma lukee sivua eri tavalla. Siksi sokean käyttäjän käsitys siitä, mikä on ”sivun alussa” voi olla täysin eri kuin näkevän. Tärkeintä lähdekoodin järjestyksen kanssa on ne tilanteet, joissa jotain valikon kohdetta painamalla avautuu alivalikko. Jos se ilmestyykin jonnekin aivan muuhun kohtaan sivulla kuin alkuperäinen valikon kohde, on sitä lähes mahdotonta löytää ikinä.

On ihan normaalia, että sivuston ”päävalikko” löytyy ensimmäisenä, kun ruudunlukijan kanssa sivulle menee, eikä se ole ollenkaan huono. Silloin alkaa kyllä ottaa jo päähän, jos kaikki mahdolliset valikot ja mainokset ja turhuudet ja epäolennaisuudet tulee vastaan ennen sivun pääasiallista sisältöä. Siis, jos vaikka johonkin lehtijuttuun klikatessani päädyn lukemaan ensin koko lehden sivuston kaikki valikot ja lehden kaikkien muiden artikkeleiden otsikot ja linkit mainostajille ennen kuin pääsen juttuun, jonka halusin lukea, voi hieman ketuttaa.

3. For-attribuutit lomakkeissa

Lomake-elementeissä on sellainen juttu kuin for-attribuutti. Sillä saa näppärästi kerrottua, mikä labeli kuuluu millekin tekstikentälle tai checkboxille. Saattaa tuntua turhalta sellainen, kun kyllähän se lukee siinä vieressä. Niin. Etenkin pitkiä lomakkeita täyttäessä on mukavan helppoa siirtyä lomakkeen kohdasta toiseen pelkästään tabia painamalla. Lomakkeissa, joissa on for- ja id-attribuutit kohdallaan, tämä onkin helppoa ja vaivatonta; seuraavaan elementtiin siirryttäessä ruudunlukuohjelma kertoo, mikä kohta on kyseessä (esim: ”sukunimi, tekstikenttä”). Jos forit puuttuu, tiedän päätyneeni vaan tekstikenttään. Sitä onkin sitten kiva miettiä, että mitäs tietoja tähän syötetään.

4. Fokuksen siirto dynaamisilla sivustoilla

On hienoa, että nykyään voi sivulle tuottaa lisää sisältöä ilman, että se täytyy kokonaan ladata uudestaan. Mutta miten sitten ruudunlukuohjelman käyttäjä näkee uuden sisällön? Fokuksen siirto on ratkaisu tähän silloin, kun sisältö on tarpeellista – jos se on vaan vaihtuva mainos, ÄLÄ siirrä fokusta sinne, huh. Jos vaikkapa lomakkeen täytön jälkeen pitää vielä kuitata, että kyllä, todellakin haluan lähettää nämä tiedot ja kuittauspyyntö ilmestyykin vaan jonnekin ruudulla, on ystävällistä siirtää fokus sinne. Muutoin saattaa ruudunlukijalla sivua käyttävä epäillä jo, että mitään ei tapahdu, kun mitään ei tapahdu. Toki myös 2. kohdassa mainitsemani avautuvan alivalikon voisi toteuttaa fokusta siirtämällä, jos ei millään tahdo laittaa sitä lähdekoodissa oikeaan kohtaan. Parhaassa tapauksessa sille sokealle käyttäjälle voi myös kertoa, että hei muuten, siirrettiin sinut sivulla toiseen paikkaan (tähän on olemassa tapoja, jotka ei ilman ruudunlukuohjelmaa näy).

5. Alt-tekstit merkityksellisissä kuvissa

Nykyään on kivaa ja näppärää sekin, että kuvasta voi tehdä ”linkin”, jota painamalla pääsee jonnekin. Kivaa ja näppärää joo, kunhan muistetaan ne alt-tekstit. Jos sivulle on ihan vaan kuvitukseksi läntätty söpö kuva koirasta, ei siinä ole välttämättä tarpeen olla kovin tarkkaa alt-tekstiä koiran rotuineen, mutta jos kuva on merkityksellinen ja etenkin jos se toimii linkkinä, alt-tekstit ovat äärimmäisen tärkeitä. Kuvitelkaa tilanne, jossa verkko-ostoksen maksamista varten eteen ilmestyy parikymmentä mustaa ruutua, joista valita oikea pankki. No ei nyt ehkä mustia ruutuja, mutta kuvia, joiden alt-tekstinä on ”select”. Eli siis parikymmentä select-linkkiä, joista sitten arpoa se oikea. Tässä tapauksessa alt-tekstit tyyliin ”Osuuspankki”, ”Nordea”, ”S-pankki” helpottaisivat elämää melkoisesti.

*******

Presikseni Fraktiolla löytyy YouTubesta. Siellä on reilun tunnin verran asiaa saavutettavuudesta – vaikka silloin taisin vielä puhua väärin esteettömyydestä.

*******

Ruudunlukuohjelmia ja niillä nettisivujen käyttöä on helppo kokeilla. Kaikille alustoille löytyy ilmaisia ohjelmia:

Kesäleirit rules

Minulla on tapana viettää kaikki kesät leireilemässä NKL:n (näkövammaisten keskusliitto) nuorisotoimen leireillä. Tänä kesänä on kaksi leiriä, jotka ovat hyvin lähellä toisiaan. Ensimmäinen leiri oli viime viikolla Pieksämäellä ja pääsimme paikallisuutisiin sekä Etelä-Savon maakuntaradioon. Molemmat jutut tulivat ulos keskiviikkona ja pitäisi löytyä netistä.

Kesäleireillä parasta on, kun pääsee tekemään kaikkea kivaa mukavassa seurassa. Jo pelkkä vertaistuellinen porukka on hieno juttu, sillä nuorisotoimen leireillä uskaltaa aina olla oikeasti näkkäri. Siellä ei mieti, mitä nuo toiset ajattelevat, kun nyt kävelen puuta päin tai hortoilen muuten vain ympäriinsä. Vaikka sitä ei aina näkevienkään seurassa ajattelisi, on se kuitenkin aivan eri juttu. On vapauttavaa saada olla joskus ihan rauhassa sokea. Tuolla kun sokkonakin voi osallistua kaikkeen, eikä tarvitse miettiä, onnistuuko tämä nyt, kun en näe. Se pistetään onnistumaan.

Pieksämäen leirin teemana oli valintojen maailma. Leirille saimme etukäteen valita päivän ohjelman, workshopin. Vaihtoehtoja oli muun muassa bändi, liikunta, kädentaidot (puutyöt, kipsin muotoilu, rautalanka), draama, vesipaja (melomista, hengenpelastusta, lautan rakentamista), erätaidot, päivävaellus ja kuunnelma. Itse olin yleisurheilemassa, draamassa improvisoimassa, muotoilemassa kipsiä ja vääntämässä rautalankaa. Näiden valintojemme lisäksi meillä oli toki myös kaikille yhteistä ohjelmaa.

Torstain vietimme lähes kokonaan Varkaudessa, kun ensiksi aamupäivällä oli ollut perinteiset leiriolympialaiset. Kumikalkkunakin (kalkkunan muotoinen kuminen vinkulelu) oli jälleen mukana. Kumikalkkunaa piti ampua ihmisritsalla tällä kertaa lentopalloverkon yli, kun aikaisemmin se piti saada lentämään vain mahdollisimman pitkälle. Muita lajeja olympialaisissa oli mm. naulan lyöminen, kananmunan kanto lusikalla, vesiviesti, lelujen etsiminen säkistä, viheltävän keihään heitto ja tarinan keksiminen käyttäen annettuja sanoja. Suurin osa lajeista oli ryhmähenkeä vaativia.

Varkaudessa kävimme katsastamassa mekaanisen musiikin museon. Oli aivan upeaa, että museossa sai koskea asioihin. Kosketeltavat museot ovat oikeasti mielettömän harvassa. Museossa oppaamme olivat aivan loistavia. Sen lisäksi, että he kertoivat soittimista asiantuntevasti, ei huumorintajuakaan heiltä puuttunut. ”Tässä laulaa Annikki Tähti… Jorma Hynninen.”

Kipsin muotoilu oli sellainen asia, jota kovin moni ei ollut ikinä tehnyt. Jotkut olivat kipsanneet kipsinauhalla kätensä tai kasvonsa, toiset taas valuttaneet kipsiä johonkin muottiin. Se ei myöskään ollut ihan niin helppo homma, mitä kuvittelin. Ainakin hyvin suuritöistä muotoilu on, kun sen haluaa tehdä huolella. Tein yhtä työtäni lounaasta päivälliseen (neljä tuntia) ja jatkoin sitä vielä päivällisen jälkeenkin. tässäkään vaiheessa työni ei ollut vielä täysin valmis, mutta enää ei ollut aikaa. Onneksi voin tehdä sen vaikka kotona loppuun, jos niikseen tulee. Nyt siitä jo erottaa, mitä se esittää.

Rautalankaa vääntelemässä meitä oli vain neljä. Minun tekemiseni siellä olivat kaksi naulakkoa, toisessa kaksi koukkua, otsaripa kaverilleni larpin proppeihin ja sormus. Tähänkin pajaan jäin vielä sen jälkeen väkertämään työtäni, kun kaikki muut olivat lähteneet. Ei mistään huomaa, että pidän kädentaidoista.

Lauantai-iltana meillä oli Openstage, jolloin lava oli vapaa kaikille halukkaille. Saimmekin nauttia useista musiikkiesityksistä, kuten bändipajoissa tehdyistä kappaleista. Näiden lisäksi ohjaajat esittivät meille kuunnelman, jonka naispääosaa esitti mies ja miespääosaa nainen. Kaikkia hahmoja esitti eri sukupuolta oleva henkilö. Itse kävin kahdesti stagella, ensiksi esittämässä muutaman kaverini ja isoveljeni kanssa lyhyenimprovisaation, jossa vilisi vaaleanpunaisia joutsenia ja sinisiä kirahveja. Toisella kertaa olin esittämässä taikatemppujaetarkemmin sanoen yhden taikatempun.

Openstagen jälkeen meillä oli disko. Diskossa parasta minusta oli se, ettei musiikkia soitettu liian lujalla. Sokkona sellaiset paikat ovat mielettömän inhottavia. meidän diskossamme onneksi musiikki oli vielä aivan inhimillisellä voimakkuudella, kuuli jopa toisten puheen huutamatta itsensä käheäksi. Jos musiikki on liian kovalla niin, ettei kuule mitään muuta kuin sen, on käsitys ympäröivästä maailmasta hyvin suppea. Silloin tajuaa vain itsensä ja sen, mihin koskee. Siksi minä haluankin aina kovaäänisissä paikoissa olla jonkun kanssa ihan kosketuksen välityksellä.

Nuorisotoimella on tavoitteena tarjota nuorille asioita, jotka ovat muuten ehkä saavuttamattomissa. Uskon kipsitöiden, erätaitojen ja vesijuttujen olleen osalle sellaisia. Itselleni aivan uusi juttu kipsaamisen lisäksi oli se, että nenästäni tui verta. Tällä vauhdikkuudellani ja riehumisellani en ole onnistunut siinä koskaan aikaisemmin. Nenä ei tosin ollut ainoa paikka, jonka hajotin viikon aikana. Esimerkiksi polvestani löytyy mukavan näköinen vekki ja peukalossani on rupi. En ole ikinä ennen ollut niin tapaturma-altis. Enkä edes juossut ovia päin.

Kipsitöiden tekeminen oli niin mukava juttu, että taidan käydä vielä joskus ostamassa kipsijauhetta. Rautalangoista asioiden väsääminen on sekin kivaa, että mahdollisesti rautakauppakin minua kutsuu. Toisaalta jostain askarteluliikkeestä saattaisi löytyä paremmin tarvitsemiani rautalankoja.

Ylihuomenna alkaa Tampereella seuraava leiri, sen jälkeen tulee varmasti juttua kuvailutulkatusta kesäteatterista, saavutettavista taikatempuista ja vakoilu- tai mediamuseosta.