Verkkosivujen suunnittelijana vastaani tulee enenevässä määrin tekoälyllä luotuja sivustoja. Varsinkin yhdistysten ja järjestöjen tapauksessa on ymmärrettävää, että pieniä budjetteja yritetään venyttää tekoälyn keinoin. Tällä hetkellä tekoäly-yritysten yksi päätulonlähteistä on juurikin koodin tuottaminen eri tarkoituksiin. Tekoäly on todella tehokas työkalu haastavampien ohjelmointipulmien ratkomiseen ja hyödynnän sitä itsekin siihen tarkoitukseen. Suunnittelutyötä en kuitenkaan ole itse valmis ulkoistamaan tekoälylle.
Tekoälyllä tuotettujen verkkosivujen ulkoasut ovat usein helposti tunnistettavissa, koska niissä toistuvat tietyt piirteet, elementit ja ratkaisut. Valitettavasti tämä tarkoittaa, että näillä sivustoilla toistuvat myös samat saavutettavuusongelmat.
Mistä voi tunnistaa tekoälyllä tehdyn nettisivuston?
1. Isot otsikot korostetulla sanalla
Näitä hero-osioksi usein kutsuttuja alueita löytyy varsinkin useilta etusivuilta. Otsikoissa saattaa myös esiintyä pitkä ajatusviiva (—), josta on tullut eräänlainen tekoälytunniste.
2. Koristeotsikot varsinaisten otsikoiden yläpuolella
Varsinaisen otsikon yläpuolelle ilmestyy usein sana tai fraasi, joka näyttää otsikolta mutta ei ole sellainen. Itse kutsun näitä koristeotsikoiksi. Näiden koristeotsikoiden kaverina esiintyy usein myös palloja, viivoja tai painiketyylejä.
3. Pyöreäkulmaiset laatikot ruudukkomuodostelmassa
Laatikoiden sekä kuvien reunat on usein pyöristetty, ja kursorin mennessä näiden päälle, laatikko nousee tai liikahtaa sekä sen varjo voimistuu. Laatikkoasetelmissa tyypillisesti esitellään tuotteita tai niiden ominaisuuksia, ajankohtaisia uutisia tai tulevia tapahtumia.
Yksi syistä, miksi monet tekoälyn tuottamat verkkosivut muistuttavat paljon toinen toisiaan, on se, että ne usein hyödyntävät TailwindCSS-nimistä tyylikirjastoa. Jokseenkin vastaavanlainen ilmiö tapahtui aiemmin 2010-luvulla, kun silloinen Twitter julkaisi Bootstrap-nimisen tyylikirjastonsa.
Toinen syy on kehittäjien laiskuus ja tyytyminen tekoälyn tarjoamiin ehdotuksiin ilman syvällisempää suunnittelu- tai saavutettavuusajattelua. Tyylikirjastojen myyntivaltti on juuri se, että heikommillakin suunnittelutaidoilla pystyy helposti ja nopeasti tekemään jotain, mikä näyttää riittävän hyvältä. Pintapuolisesti arvioituna sivut saattavat todellakin näyttää riittävän hyviltä, mutta saavutettavuuden osalta niihin jää usein isoja puutteita.
Mitä saavutettavuusongelmia tekoäly usein tuottaa?
Riittämätön kontrasti eri elementeissä
Jos värien valinnan jättää vain tekoälyn tehtäväksi, on hyvin todennäköistä, että WCAG 2.2:n onnistumiskriteeri 1.4.3 Kontrasti (minimi) (AA) ei tule täyttymään. Kriteeri edellyttää, että tavallisen tekstin ja taustan välinen kontrastisuhde on vähintään 4,5:1 ja suuren tekstin osalta vähintään 3:1. Tämän kriteerin suhteen epäonnistuvat usein myös ihmissuunnittelijat, jos suunnittelua ohjaa vain se, mikä näyttää hienolta tai tyylikkäältä. Kun saavutettavuus huomioidaan suunnittelussa heti alusta alkaen, korjauksista ei tule myöhemmin erillistä laskua.
Ohituslinkki puuttuu
Yksi helpoimpia verkkosivujen saavutettavuuden edistämisen toimenpiteitä on ohituslinkin lisääminen. Linkin avulla käyttäjä, joka selaa sivustoa näppäimistön avulla, voi hypätä suoraan kyseisen sivun pääsisältöön ilman esimerkiksi navigaatiolinkkien läpiselaamista. Linkin lisäämällä sivusto täyttää onnistumiskriteerin 2.4.1 Ohita lohkot (A). Omien huomioideni perusteella tämä linkki uupuu useista tekoälyn tuottamista verkkosivuista.
Puutteelliset alt-tekstit
Useista tekoälyn tuottamien sivujen kuvista uupuvat alt-tekstit kokonaan. Joissain tapauksissa kuvaukseksi on myös päätynyt kyseisen kuvan tiedostonimi tai läheinen otsikko. Toisinaan kuvausteksti sanoo kyllä jotain kuvasta, mutta ei varsinaisesti kuvaile, mitä kuvassa selkeästi näkyy. Vaihtoehtoiset tekstit eli alt-tekstit ovat WCAG 2.2 -ohjeistuksen vaatimus onnistumiskriteerissä 1.1.1 Ei-tekstuaalinen sisältö (A).
Alt-tekstin oikea sisältö riippuu kuvan tarkoituksesta. Kirjoitin aiemmin tarkemmin siitä, millainen alt-teksti sopii informatiiviselle, toiminnalliselle ja koristeelliselle kuvalle.
Liian pieni ja himmeä teksti
Kuten aiemmin mainitsin, tekoälyllä on tapana tuottaa verkkosivujen otsikoiden yhteyteen koristeotsikoita, jotka ovat usein hyvin pienellä kirjasinkoolla sekä käyttävät himmeää väriä. Tällaiset otsikot voivat luonnollisesti olla haastavia lukea. WCAG 2.2 ei kuitenkaan määritä verkkosivujen tekstille minimikokoa, mutta pieni ja himmeä teksti voi helposti jättää onnistumiskriteerin 1.4.3 Kontrasti (minimi) (AA) toteutumatta.
Otsikkotasojen hierarkian rikkomukset
Tekoälyn tuottamat sivustot eivät aina noudata otsikoiden hierarkkista valintaa. Useimmiten sivustot sisältävät H1-tason otsikon, mutta tuleeko tämän jälkeen H2- tai H3-tason otsikko onkin vaihtelevampaa. Kun otsikkotasoja ei ole valittu järjestelmällisesti, onnistumiskriteerin 1.3.1 Informaatio ja suhteet (A) täyttyminen epäonnistuu. Saavutettavuusajattelun puuttuessa tekoäly valitsee otsikon todennäköisesti sen perusteella, minkä se “näkee” koon ja tyylin puolesta parhaiten kyseiseen kohtaan sopivaksi, eikä sen perusteella, minkä otsikkotason tulisi hierarkkisesti tulla seuraavaksi.
Fokustyylin riittämätön erottuvuus
Näppäimistöllä sivustoa selaavalle on oleellista, että eri elementtien fokustyyli on riittävän erottuva. Tekoälyllä tuotetut sivustot nojaavat usein selaimen oletusfokustyyliin, eikä se sinänsä ole virhe. Kontrastivaatimukset eivät koske selaimen oletustyylejä, joita tekijä ei ole muokannut. Oletustyyli voi monissa tapauksissa olla riittävä, mutta ongelmat syntyvät, kun se korvataan puolittain. Tyypillisintä on, että oletuskehys poistetaan näkyvistä, ja jäljellä jää vain esimerkiksi himmeä varjo.
Fokusindikaattorin ja sen viereisten värien välisen kontrastin tulee olla vähintään 3:1 (1.4.11 Ei-tekstimuotoisen sisällön kontrasti, AA), ja kohdistuksen tulee ylipäätään näkyä (2.4.7 Näkyvä kohdistus, AA). Joskus riittävä kontrasti syntyy vasta, kun reunuksen lisäksi vaihdetaan myös elementin taustaväri. AAA-tason kriteeri 2.4.13 Kohdistuksen ulkoasu menee asiassa vielä tarkemmalle. Sen mukaan fokusindikaattorin tulee olla vähintään kahden pikselin paksuinen ja fokusoidun tilan erottua fokusoimattomasta kontrastisuhteella 3:1.
Älä siis poista selaimen oletustyyliä ilman korvaavaa tyyliä, ja kun mittaat kontrastia, mittaa se kehyksen ja sen vieressä olevan värin väliltä.
Turhat linkit
Turhat eli toistuvat linkit eivät suoranaisesti ole saavutettavuusongelma, vaan enemmänkin käytettävyysongelma, joka koskettaa varsinkin ruudunlukijakäyttäjiä. Monet verkkosivut sisältävät osioita, joissa esitellään maistiaisia muusta sivuston sisällöstä. Tällaiset osiot usein esittelevät sisällön ruudukossa, jossa on 3–4 laatikkoelementtiä rinnakkain. Yhdessä laatikossa on usein kuva, otsikko ja mahdollisesti esittelyteksti. Tekoäly tuottaa usein sekä kuvalle että otsikolle omat erilliset linkkielementit.
Saavutettavampi ratkaisu on linkittää vain otsikko ja laajentaa tarvittaessa sen klikkausalue kattamaan myös kuva. Näin esimerkiksi ruudunlukijaa käyttävä välttyy turhilta linkeiltä, jotka hidastavat sivuston käyttämistä.
Tekoäly on työkalu, ei suunnittelija
Tekoälyn avulla on mahdollista tuottaa laadukkaita ja jopa saavutettavia verkkosivuja. Alan osaaja voi halutessaan häivyttää näitä toistuvia piirteitä sekä saavutettavuusongelmia tarkentavilla prompteilla.
Saavutettavuustyössä ihmisen kädenjälki on kuitenkin toistaiseksi korvaamaton. Automaattiset saavutettavuustyökalut kuten WAVE, axe DevTools ja Lighthouse auttavat työssä, mutta ne tunnistavat vain osan saavutettavuusongelmista. Tämän takia osana omia verkkosivutoteutuksia testaan aina kaikki tuottamani sivustot yhdessä näkövammaisen kokemusasiantuntijan kanssa. Esimerkkinä tästä on ITAKin sivustouudistus.
Jos tarvitset yhdistyksellesi tai yrityksellesi oikeasti saavutettavia verkkosivuja, niin ole yhteydessä.