Luovaa ongelmanratkaisua ja näkevien silmien apua oikeassa paikassa: Näin toteutin Kajastus-blogin ulkoasun sokeana
Ronja Pahaoja
15.12.2024
Kun me Näkövammaisten Kulttuuripalvelun hallituksessa aloimme suunnitella Kajastus-lehdelle jatkajaksi blogisivustoa, minä hallituksen jäsenenä ja päivätyössäni ohjelmoiajana ja saavutettavuusasiantuntijana päädyin luontevasti sivuston toteuttajaksi. Kajastus-blogin julkaisemisesta on nyt noin puoli vuotta aikaa. Palataanpa ajassa taaksepäin siihen, kuinka Kajastus-blogin sivusto ja erityisesti sen ulkoasu käytännössä syntyi.
Kysyimme Kajastus-blogin kehittämiseen apua työnantajaltani Gofore oyj:ltä, ja sieltä lähdettiinkin projektiin mukaan pro-bonona. Gofore tarjosi meille designerin suunnittelemaan blogin ulkoasun. Siispä minä, täysin sokea koodari, päädyin ensimmäisen kerran toteuttamaan verkkosivustoa jonkun toisen tekemien suunnitelmien pohjalta. Se olikin jännittävä prosessi!
Gofore-kollegani kirjoitti visuaalisten ulkoasusuunnitelmien oheen sivun rakenteesta ansioikkaan tekstikuvauksen, jota käytin työn pohjana. Sain sen perusteella toteutettua hyvin ns. raakaversion, jossa sivun tärkeimmät elementit olivat suurin piirtein oikeissa paikoissa ja ainakin näin sokean ruudunlukijakäyttäjän näkökulmasta kaikki kunnossa. Visuaalisuuden osalta oli kuitenkin vielä paljon viilattavaa, raakaversioni ei näyttänyt vielä läheskään samalta kuin suunnitelmat.
Verkkosivuilla ulkoasun määrittelyyn käytetään CSS-kieltä. Siinä erilaisilla säännöillä määritetään esimerkiksi se, kuinka paljon tilaa elementtien väliin jää, minkä värinen ja kuinka paksu viiva alle piirretään, kuinka eri elementit asettuvat suhteessa toisiinsa, millainen pyöristys kulmissa on ja miltä näyttää, kun hiiren osoitin tai näppäimistökohdistus on linkin päällä. Teoriassa yksinkertaista ja täysin mahdollista sokeana – sen kun vain kirjoittaa säännöt oikein ja siinä se. Käytännössä kuitenkin toisinaan on hyvin mystistä ja epäintuitiivista, kuinka jonkin ylemmän tason elementin määritykset vaikuttavat toiseen. Lisäksi kaikilla HTML-elementeillä – painikkeilla, linkeillä, kuvilla, listoilla etc – on jokin oletusulkoasu, ja myös sen olemassaolo voi vaikuttaa mukautettuun tyylittelyyn yllättävillä tavoilla.
Minulla sokeana oli siis toisaalta haasteena tietää, miltä designerin tekemät suunnitelmat näyttävät, ja vastaavasti varmistaa, että toteutukseni vastaa suunnitelmia. Koska ulkoasun suunnitellut työkaverini asuu Jyväskylässä ja minä Espoossa, emme päässeet kauheasti työskentelemään sivun parissa rinnatusten – mikä olisi ollut antoisaa (toisaalta minä myös tein sivustoa enimmäkseen iltaisin ja viikonloppuisin, päivätyöni työajan ulkopuolella). Korvaamattomana apuna ulkoasun toteutuksessa oli puolisoni, jolla on myös kokemusta ”fronttikoodauksesta”, eli verkkosivustojen käyttöliittymien ohjelmoinnista.
Työskentelin Kajastus-blogin CSS:n parissa kotimme alakerrassa. Kun olin saanut jonkin vaiheen toteutettua, otin läppäirini mukaan ja kävelin puolison luokse yläkertaan. Hän kertoi minulle aina muutama asia kerrallaan, mitä korjata, minä palasin taas alakertaan tekemään viilauksia. Alkuun viilaukset olivat enemmän tyyliin ”aihetunniste-linkeillä sininen taustaväri ja pyöristys kulmissa”, myöhemmin ”lisää tilaa valikon valikkokohteiden väliin”. Hissukseen, pala kerrallaan alkoi sivusto muistuttaa enemmän ja enemmän suunnitelmia.
Aivan jokaista asiaa ei tarvitse ulkoasun toteutuksessa sokeanakaan käydä näkeviltä silmiltä varmistamassa. Selaimessa on kehittäjätyökaluna niinkutsuttu verkkoinspektori, joka näyttää kullekin elementille sivulla näkyvät ”lasketut arvot” CSS-säännöille. Monet tekemistäni muutoksista pystyin siis itsekin tarkistamaan, menikö niin kuin piti: menin ruudunlukijan kanssa tietyn elementin kohdalle, valitsin kontekstivalikosta kohdan ”tarkista”, selasin verkkoinspektorista itseni oikeaan taulukkoon ja kävin sieltä läpi kaikki lasketut CSS-arvot tietääkseni, oliko esimerkiksi elementin tyhjä marginaali muuttunut lähemmäs haluttua kokoa pikseleinä. Näkevänä tietysti sen näkisi heti ruudulta, sokeana vei hieman enemmän aikaa.
Elementtien asettelussa sivulle auttoi huomattavasti myös Macin ruudunlukijan VoiceOverin ominaisuus, jolla pystyy helposti tarkistamaan elementin koon sekä sijainnin suhteessa ylemmän tason elementin vasempaan ylänurkkaan. Aluksi VoiceOver kertoi minulle nämä tuumina, mutta tajusin asetuksista vaihtaa ne pisteiksi. Tämän avulla onnistuin esimerkiksi asettelemaan sivun yläpalkin ja pääsisällön alkamaan sivusuunnassa samasta tasosta; jossain vaiheessa yläpalkki oli 111 pistettä oikealle sivun vasemmasta ylänurkasta, pääsisältö taas 96 pistettä oikealle. Ilman apuvälinettä olisi ollut aika vaikea havaita itse.
Joskus sanallinen selitys oli hidasta tai vaikeaa, joten otimme avuksi myös piirtämisen. Puoliso piirsi minulle ritmuff-kalvolle esimerkiksi sivuston hakukentän ja -painikkeen, ja minä sain tunnustelemalla hyvän käsityksen siitä, mitä lähden tekemään.
Henkilökohtaisesti Kajastus-blogin toteuttaminen oli erittäin kiinnostava kokemus siitä, kuinka sokeana pystyn tekemään kaiken käyttöliittymän koodin. Ilman apuvälineitä ja riittävän helposti saatavillaolevia näkeviä silmiä siitä ei olisi tullut mitään. Tällainen työskentelytapa ei mitenkään erityisen kätevä ollut, mutta yllättävän hauskaa kuitenkin. Oikeasti vieressä istuvan designerin kanssa homman voisi saada suhteellisen näppäräksi. Haaveilen mys tekoälyavustajasta, joka voisi jatkuvasti seurata kehitysversiotani ja ulkoasun suunnitelmia ja kertoa eroavaisuuksista.