Pienen lapsen paljaat jalat kalliolla

Saavutettavuus, miksi suutarin lapsilla ei ole kenkiä?

Tarinaa oman sivustomme saavutettavuusongelmista

Tämä on kertomus siitä, miten oma sivustomme sisältää saavutettavuushaasteita ja miksi tilanteeseen on päädytty.

Teetimme sivustollemme saavutettavuustestauksen yhteistyökumppanillamme, näkövammaisella saavutettavuustestaajalla saimme hyvin kattavan raportin sivuston tilasta. Sivustolla on varsin kriittisiäkin saavutettavuusongelmia, mikä ei tullut meille yllätyksenä. Tiedostimme jo ennalta tilanteen ja osan haasteista mutta raportissa oli myös löydöksiä, joita emme olleet itse havainneet.

Kerron tämän siksi, että corellia.fi on esimerkki tavanomaisesta verkkosivustosta, joka vuosien saatossa on muovaantunut nykyiseen tilaansa, ja jonka luontiaikaan saavutettavuus ei ollut tavoitteena. Sivuston tilaan vaikuttavat monet tekijät, joista yksi on käyttöön valittu tekniikka sen käyttötapa.

Olkoon tämä tarina opiksi ja ohjeeksi sekä varoitukseksi muille.

Tietoa sivustosta

Corellian sivusto on toteutettu WordPressillä käyttäen valmisteemaa, sekä valittuja lisäosia. Sivustolla on 115 blogiartikkelia tämä mukaan lukien. Julkaistuja sivuja on 153. Yllätyin itsekin niiden lukumäärästä. Määrä on suuri ja selittyy sillä, että jokainen kurssituotteemme on oma sivunsa ja vaikka valikoimasta poistuneet kurssit eivät ole enää mukana aikataulutuksessa, on sivut jätetty tarkoituksella julkiseksi. Lisäksi on sitten kaikkea muuta sisältöä ja lisäksi vielä kieliversioita.

Sivusto on julkaistu tässä muodossaan jo 2014 ja sillä on siis ikää yli 5 vuotta. Viidessä vuodessa on tapahtunut paljon omassa toiminnassamme, sivuston tekniikassa, saavutettavuuden saralla ja maailmassa muutenkin. Olemme kaikki osallistuneet sivuston ylläpitoon ja voi olla, että joskus joku harvemmin sisältöä muokkaava ei ole ihan muistanut miten pitäisi toimia.

Viiden vuoden aikana sivustolle on tarvittu uutta toiminnallisuutta, uusia lisäosia, kytköksiä ulkoisiin palveluihin ja upotettua sisältöä. Kaiken tämän seurauksena kerran suhteellisen vakaasta ja kompaktista paketista on ajan kuluessa kasvanut himmeli, jonka muokkaaminen on muuttunut kerta kerralta haastavammaksi.

Jossain kohtaa saavutettiin tilanne, jossa tiesin, että sivusto on uusittava kokonaan. Uusi sivusto on jo suunnitteilla, mutta nykyisellä mennään vielä ensi vuoden puolelle.

Sama kohtalo on monella muullakin sivustolla. Aiemmin luodun sivuston mukauttaminen tulevaisuuteen ei ole enää kannattavaa, vaan on siirryttävä kokonaan uuteen. Sivuston uudistaminen ei ole mitenkään poikkeuksellista, sitä tapahtuu ihan ilman sen kummempia syitäkin. Itseasiassa olemme pärjänneet varsin pitkään ja hyvin nykyisellä.

Miten sivusto testattiin

Sivusto on testattu ja arvioitu teknisen ja kognitiivisen saavutettavuuden kannalta WCAG 2.1 ohjeiston mukaisesti huomioiden useiden eri vammaisryhmien erityistarpeita. Samalla tarkasteltiin sivujen rakennetta ja käytettävyyttä.

Testaus tehtiin käyttäen Windows- ja iOS-käyttöjärjestelmiä ja niiden tarjolla olevia saavutettavuuden aputekniikoita. Avustavina tekniikoina käytettiin testauksessa mm. Jaws + IE yhdistelmää, NVDA + IE ja Firefox sekä VoiceOver + Safari yhdistelmiä. Selaimina oli testissä mukana myös Edge ja Chrome.

Saavutettavuustestauksen havaintoja

En yritä listata tässä kirjoituksessa kaikkia havaintoja mutta kerron minkä tyyppisiä haasteita sivustollamme on saavutettavuuden näkökulmasta.

Otsikkorakenne

Pääsääntöisesti otsikkorakenne oli kunnossa mutta esimerkiksi Kurssit-sivulla oli otsikkorakenteessa hyppy suoraan h1-otsikosta h3-tasoiseen otsikkoon. Tämä oli helppo korjata.

Lomakkeet ja painikkeet

Sivustolla on saavuttamattomia lomakkeita. Itse asiassa lomakkeita on varsin vähän mutta niissä on kyllä ongelmaa. Se tiedettiin. Ongelmia on mm. siinä, että lomakkeissa syötekentän ja sen otsikon yhteys ei ole kytketty siten, että ruudunlukija osaisi ne yhdistää. Valintalaatikoissa (checkbox) oli sellaisia, joista ruudunlukija ei lukenut valintatekstiä lainkaan. Käytännössä tekee lomakkeesta mahdottoman käyttää.

Linkit ja navigaatio

Sivuston päänavigaatiossa ei linkkilistan käyttö toimi hyvin näppäimistöllä. Selattaessa navigaation päätasoa, on seuraavaan päätason valintaan päästäkseen käytävä läpi kaikki edellisen linkin alavalinnat. Turhauttavaa ja turhaa näppäilyä. Lisäksi navigaatio ei kerro avustaville tekniikoille onko alanavigaatio avattu vai ei.

Navigaation virheet olisi korjattava muuttamalla käytössä olevaa navigaatiorakennetta myös sen ohjelmallisen toteutuksen osalta. Mahdolliset aria-koodit olisi lisättävä valikkorakenteeseen, mikä ei ole käytössä olevassa teemassamme mahdollista.

Blogiartikkeleiden koontisivuilla ja listauksissa olevassa ”Lue koko juttu” -painikkeesta ei ruudunlukijan käyttäjä kykene päättelemään mikä juttu on kyseessä. Tässäkin tapauksessa linkit olisivat korjattavissa esimerkiksi WAI ARIA otsikoinnilla mutta mutta…. Arvatkaa vaan. Ei ole nykyisen teeman ja sen lisäosien käytössä mahdollinen ominaisuus.

 

Blogiartikkeleiden lue koko juttu painikkeet ja artikkeleiden sivutuslinkit

Blogiartikkelien listauksessa sivutus, linkit (pagination, aiemmat artikkelit) ovat englanninkielellä, vaikka sivun muu sisältö on suomeksi. Jälleen kerran syyllinen on käytössä oleva teema ja sen yhteydessä käytetty sivumuokkain ja sen komponentit. Korjaus edellyttäisi lähdekoodin muokkaamista kolmannen osapuolen valmistamassa osassa eikä ole toimiva ratkaisu.

Kuvalinkeissä on toistuva linkkiteksti. Eli ruudunlukija lukee sekä kuvaan liitetyn alt-tekstin että linkkitekstin, jolloin käyttäjä kuulee saman linkin kahteen kertaan. Tämä ei ole hyvää käyttökokemusta ja näissä tilanteissa olisikin voinut kuvalinkin piilottaa ruudunlukuohjelmalta.

Alt-tekstit

Sivustolla on joissain kohdin käytetty alt-tekstiä kuvissa turhaan sillä kuvaan liitetty otsikko toistaa saman asian. Näissä tilanteissa kuvan olisi voinut hyvin piilottaa ruudunlukijoilta. Joissain kuvissa oli alt-tekstiin päässyt livahtamaan ylimääräistä tekstiä, esimerkiksi maininta ”nettiin”.

Muita huomioita; Värit ja kontrastit, skaalautuminen, näppäinkäyttö

Tarkasteltaessa sivustoa suurikontrastisella mustalla väriteemalla esimerkiksi lomakekenttien rajat eivät näy. Muutamia liian alhaisia värikontrasteja jo korjasin. Esimerkiksi sivun yläpalkissa olleet some-linkkien kuvakkeet olivat heikosti erottuvia.

Etusivulla pitkät sanat menevät osin päällekkäin sivua skaalattaessa 200% tai yli. Tämäkin on sivun tuotannossa käytetyn sivunmuokkaimen ominaisuus ja siten hankala ennakoida tai muuttaa.

Näppäimistöä käytettäessä aktiivinen elementti (focus) ei aina erotu. Aktiivinen elementti tulisi aina korostaa myös visuaalisesti, että käyttäjä tietää missä kohden sivua on. Uutiskirjeen tilauslomakkeessa sarkainjärjestys on eri kuin sisällön järjestys visuaalisesti tarkasteltuna.

Kurssitaulukko, jossa listaamme aina seuraavan kuuden kuukauden kurssit, on saavuttamaton. Tällainen suuri taulukko on kaikissa tapauksissa hankala saavutettavuuden kannalta ja tässä haastetta lisää jälleen WordPressin lisäosa, jolla taulukko muodostetaan. Voimme itse vaikuttaa vain hyvin rajallisesti lisäosan tuottamaan taulukkoon.

Miksi näin on käynyt

Corellia on edelleen varsin pieni yritys ja toimimme rajallisin resurssein, jotka olisi syytä saada osallistumaan varsinaiseen liiketoimintaan ja minimoida muuhun käytettävä aika. Olosuhteiden pakosta sivusto rakennettiin nopeasti omin voimin helpoin työkaluin.

Saavutettavuus ei ollut 5 vuotta sitten meillä tavoitteena, vaikka aihe oli tiedossa. Corellian kurssitarjonnan monet aiheet ovat sellaisia, joihin ei hakeudu esimerkiksi näkövammaisia käyttäjiä. Siksi saavutettavuus ei ollut sivuston suunnittelussa tavoitteena.

Ja jos aivan totta puhutaan, niin sivusto piti pystyttää kiireen ja paniikin vallassa epäonnistuneen verkkokauppakokeilun jälkeen. Jotain oli saatava nopeasti ja mahdollisimman halvalla, sillä yrityksellä ei ollut taloudellisia resursseja oikeaan verkkosivuprojektiin ja ulkoisen palvelun käyttöön. Varmasti sama tilanne ollut monella muullakin.

Miten välttää vastaavat ongelmat

Ensimmäinen ja tärkeä vaatimus on huolehtia siitä, että käytetty julkaisujärjestelmä on lähtökohtaisesti saavutettava. Sen lisäksi sen päälle toteutetun teeman ja käytettävien lisäosien tulee tukea saavutettavan sisällön tuottamista. Lopuksi sivuston sisällöntuottajien on osattava tuottaa sisältö kaikin osin saavutettavana.

Corellian sivusto on toteutettu WordPressillä. WordPress on varsin hyvin saavutettava mutta sivusto koostuu aina monesta osasta. Kaikki nämä osat eivät ole saavutettavia eikä loppukäyttäjä saa niitä tai niiden avulla tuotettua sisältöä aina saavutettavaksi. Yli viisi vuotta sitten toteutetun sivuston prioriteettina ei ollut saavutettavuus vaan sen merkitys on ilmennyt vasta myöhemmin.

Sivusto toteutettiin pakon sanelemana käyttäen ”valmisteemaa” ja sen mukana tullutta sivunrakennustyökalua, joka tarjoaa useita sisältöelementtejä lisättäväksi sivuille. Valitettavasti nämä eivät mahdollista kaikin osin saavutettavuuden toteuttamista. Lisäksi sivuston ominaisuuksia on ollut tarve lisätä käyttämällä lisäosia, jotka nekään eivät aina ole saavutettavia. Haluttuun käyttöön ei edes ole ollut saatavilla saavutettavana sisällön tuottavaa lisäosaa. Sama koskee esimerkiksi sivustolle upotettua sisältöä ja Chat-ikkunaa. Valitettavan paljon on asioita, joihin itse ei voi vaikuttaa tai jos haluaa myöhemmin korjata, on operaatio, ellei mahdoton, niin ainakin kannattamaton.

Ongelmia voi välttää huolellisella teeman ja lisäosien valinnalla, testauksella ja omalla työllä.

Meille kävin näin ja näin on käynyt monelle muullekin. Se, että sivusto ei ole kaikin osin saavutettava ei ole tarkoituksellista mutta tilanteeseen on jouduttu ajattelemattomuutta tai ulkoisten syiden pakottamina. Ymmärrämme tilanteen, sillä olemme kokeneet sen itsekin. Saavutettavuutta voi kuitenkin edistää. Opiskele aihetta, tutustu kriittisesti omaan sisältöösi, testaa, korjaa minkä voit ja hanki apua.

On valitettavan todennäköistä, että nykyisiä sivustoja ei saada saavutettaviksi ilman kohtuutonta vaivaa, mutta nykyiset virheet voidaan välttää uutta toteutettaessa.

Miten tästä eteenpäin

Corellian verkkosivusto on tullut tiensä loppumetreille ja uusi on suunnitteilla. Kyseessä on kuitenkin hyvin suuri muutos, sillä kyse ei ole vain sivustosta vaan läpi koko liiketoiminnan ulottuvien järjestelmien ja toimintojen yhdistämisestä ja tehostamisesta. Muutos on kuitenkin alkanut ja olemme ottaneet oppia aiemmista virheistämme.

Nykyisen sivuston puolustukseksi on silti sanottava, että se on ollut ratkaisuna erittäin toimiva ja kustannustehokas, vaikka siinä nykystandardien mukaan tarkasteltuna omat puutteensa onkin. Mutta niin maailmassa yleensäkin.

 

 

 

Kari on Corellian saavutettavuus ja web-tekniikoiden asiantuntija. Karin kiinnostuksen ja koulutusten aiheina on mm. Verkon tekniikat (HTML, CSS ja JavaScript), WordPress julkaisujärjestelmä ja sen käyttö, websuunnittelu, käytettävyys ja saavutettavuus verkossa.

Kari on IAAP (International Association of Accessibility Professionals) jäsen ja sertifioitunut saavutettavuusasiantuntija CPWA (CPACC + WAS)