Saavutettavuusasiantuntija vibe-koodasi oman kontrastitarkistimen

Tekoäly on tehnyt ohjelmistojen ja erilaisten työkalujen kehittämisestä saavutettavampaa. Ideasta pääsee ensimmäiseen versioon huomattavasti nopeammin kuin ennen, eikä vahva koodaustausta ole enää aina ehdoton edellytys.

Samalla on syntynyt ilmiö, jota usein kutsutaan “vibe codingiksi”. Termiä käytetään erityisesti tilanteissa, joissa ei-koodarit rakentavat ratkaisuja pitkälti tekoälyn varassa. Tämä avaa uusia mahdollisuuksia asiantuntijatyöhön, mutta tuo mukanaan myös uusia haasteita laadun ja ylläpidettävyyden näkökulmasta.

UX/UI-suunnittelija ja saavutettavuusasiantuntijamme Hanna hyödynsi tätä käytännössä. Hänellä on taustaa front end -tekniikoista ja graafisesta suunnittelusta, mutta varsinainen sovelluskehitys ei ole hänen ydinosaamistaan. Silti hän koodasi Codexin avulla sisäisen työkalun, joka sujuvoittaa värikontrastien tarkistamista Hurjan saavutettavuusauditoinneissa.

Tässä artikkelissa kerromme, miksi työkalu syntyi, miten se rakennettiin ja miten se tukee käytännön auditointityötä.

Värikontrastien tarkistaminen vaati saavutettavuusauditoinneissa manuaalista työtä

Saavutettavuusauditoinnissa selvitetään, kuinka hyvin digitaalinen palvelu täyttää WCAG 2.2 -kriteerit eli kansainväliset saavutettavuusohjeet. Yksi keskeinen kriteeriryhmä koskee AA-tasolla värikontrasteja: tekstin, painikkeiden, ikonien ja linkkien täytyy erottua taustastaan riittävän selkeästi, jotta ne ovat luettavissa myös heikomman näön omaavilla käyttäjillä. AA-taso, johon moni organisaatioista on digipalvelulain nojalla velvoitettu, asettaa tarkat suhteet sille, kuinka paljon kontrastin täytyy vähintään olla.

Värikontrastin tarkistaminen kuulostaa yksinkertaiselta: verrataan kahta väriä, katsotaan täyttyykö vaatimus, kirjataan tulos raporttiin. Käytännössä prosessi on kuitenkin pitkä ketju manuaalisia vaiheita.

Ensin verrattavat värit pitää saada luotettavasti esiin. Joskus ne löytyvät lähdekoodista tai CSS:stä, joskus väri pitää poimia pipetillä käyttöliittymästä, ja toisinaan se selvitetään kuvakaappauksen kautta Photoshopissa. Vasta sitten HEX-värikoodit syötetään erilliseen kontrastitarkistimeen ja tulokset siirretään auditointiraporttiin.

Saatavilla olevat työkalut auttavat usein vain osassa tätä ketjua. Automaattiset lisäosat tunnistavat ongelmia, mutta ne eivät aina ymmärrä kontekstia tai anna mahdollisuutta valita, mitä elementtejä tarkistetaan. Tämä korostuu erityisesti painikkeissa, joissa olennaisia kontrasteja on kaksi: teksti suhteessa painikkeen väriin sekä painike suhteessa taustaan.

Lopputulos oli se, että teknisesti suoraviivainen tarkistus oli auditoinnissa turhauttavan hidas työvaihe, jossa hypittiin työkalusta toiseen.

Ratkaisu rakentui vibe codingin avulla

Hanna päätti rakentaa sisäisen työkalun, joka vastaisi paremmin saavutettavuusauditoinnin todelliseen työnkulkuun. Vaikka hänellä on taustaa front end -tekniikoista, oman työkalun rakentaminen alusta asti oli uusi haaste. Tekoäly toi siihen uuden työkalun ja käytännöllisen tavan edetä.

Suunnittelun alkuvaiheessa Hanna hahmotteli Figmassa yksinkertaisen rautalangan, jota käytettiin tekoälylle annettavana kontekstina: kuvauksena siitä, miltä näkymän ja raportoinnin pitäisi käytännössä näyttää. Sen jälkeen työkalu rakentui iteratiivisesti Codexin avulla määrittelyn, testauksen ja nopeiden kokeilujen kautta. Kehitys eteni vibe codingin logiikalla, mutta suuntaa ohjasi koko ajan syvällinen ymmärrys saavutettavuusauditoinnin arjesta.

Miten työkalu toimii?

Valmis työkalu yhdistää kaksi tarkistustapaa saman kokonaisuuden alle.

Automaattinen sivuskannaus perustuu Playwrightiin. Se avaa auditoitavan sivun ohjelmallisesti, käy näkymää läpi ja kerää tarkistettavat elementit talteen. Löydökset listataan niin, että yhdellä silmäyksellä näkee, mitkä kohdat läpäisevät WCAG 2.2 AA -tason vaatimuksen ja mitkä vaativat huomiota. Hylätyissä kohdissa näkyvät perustelut ja korjausehdotus suoraan raportointia varten.

Kuvakaappaukseen perustuva rajaustyökalu täydentää automaattista skannausta. Käyttäjä voi rajata haluamansa alueen hiirellä, ja työkalu vertailee rajauksen sisältä poimittuja värejä keskenään. Löydös luokitellaan automaattisesti esimerkiksi teksti-, painike-, ikoni- tai linkkilöydökseksi, jotta kontrastisuhdetta voidaan tulkita oikein. Kuvakaappaus, kategoria, värit ja kontrastisuhde näkyvät samassa näkymässä, ja hex-koodit saa kopioitua leikepöydälle napin painalluksella.

Asiantuntijuus ohjaa, tekoäly nopeuttaa

Projekti kuvaa hyvin, mistä vibe codingissa on parhaimmillaan kyse. Työkalu syntyi hyvin määritellyn ongelman ja selkeän vision pohjalta, ja kehittyi iteratiivisesti oikeaan käyttötarkoitukseen sopivaksi. Tekoäly auttoi toteutuksessa, mutta ratkaiseva tekijä oli asiantuntijuus: ymmärrys siitä, miten auditointiprosessi toimii ja missä kohdissa manuaalista työtä kannattaa vähentää.

Olemme kirjoittaneet aiemmin laajemmin siitä, mitä vibe coding tarkoittaa ohjelmistoarkkitehtuurin näkökulmasta ja milloin nopeasti syntynyt sovellus tarvitsee rinnalleen rakenteellista ajattelua.

Tekoälyä käytännön työn tueksi

Hannan kontrastitarkistin on yksi konkreettinen esimerkki siitä, miten kehitämme Hurjalla omia työskentelytapojamme tekoälyn avulla. Tässä tapauksessa työkalu syntyi suoraan saavutettavuusauditoinnin arjesta: tarpeesta saada kontrastien tarkistaminen, rajaus ja raportointiin tarvittavat tiedot sujuvammin yhteen paikkaan.

Työkalu nopeuttaa kontrastien tarkistamista ja tekee auditointityöstä sujuvampaa. Saavutettavuusauditoinnissa työkalut, manuaalinen testaus ja asiantuntijan tekemä arviointi kulkevat rinnakkain, jotta löydökset saadaan kirjattua selkeästi ja tulkittua osana palvelun kokonaisuutta.

Hyödynnämme tekoälyä laajasti omassa tekemisessämme, ja autamme myös asiakkaitamme löytämään sille toimivan roolin omissa prosesseissaan. Jos haluat tietää, missä kunnossa palvelusi saavutettavuus on tai miten tekoäly voisi sujuvoittaa työnkulkujanne, ota yhteyttä.