Sininen puuovi jossa munalukko

Saavutettavuus auttaa kaikkia käyttäjiä – minä tarkistin nämä

Takaraivossani on ollut se ajatus, ettei blogi jatkuvasta kehittymisestä huolimatta ollut aiemmin kovin kätevä. Viimeisen sysäyksen ulkoasun ja käytettävyyden tarkistamiseen antoi 1.4.2019 voimaan tullut direktiivi. Sen tarkoitus on varmistaa verkkopalveluiden saavutettavuus kaikille käyttäjille.

Saavutettavuus on käsitteenä digitaalisen maailman vastine fyysisen maailman esteettömyydelle. Läheistäni auttaessani olen oppinut huomaamaan, että 2 cm korkea kynnys voi estää pääsyn haluttuun paikkaan. Verkkopalveluissa puolestaan vaikkapa epäselvä otsikointi tai vilkkuvat elementit voivat estää sivuston käyttämisen.

Kuuntelin huhtikuussa Kumu Communicationsin esityksen saavutettavuuden varmistamisesta verkkopalveluissa ja sen innoittamana tarkistin blogista muutaman itseäni häirinneen asian kuntoon. Kokosin tähän alle muutamia lähteitä, joiden avulla voivat muutkin edetä.

…ja ei sitten taas muuta kuin:

Tuumasta toimeen!

Jotkut asiat blogissa olivat jo kunnossa. Esimerkiksi navigointi on helppoa, sillä sivustolla ei ole suurta määrää alisivuja. Etusivulle on nostettu aina tuoreimmat tekstit ja hakutoimintoon pääsee aina. Uudistuksen jälkeen haku on paitsi etusivulla, myös artikkelisivuilla oikeassa sivupalkissa.

Käyttäjälle tarjotaan myös palautetta. Esimerkiksi sivujen sijainti (leivänmurupolku) on aina näkyvissä. Artikkelien julkaisuajankohta on niin ikään aina näkyvillä, jotta tiedon tuoreutta voi arvioida. Jos joku lähettää lomakkeen sivuston kautta, onnistuneesta lähetyksestä saa vahvistuksen.

Saavutettavuuteen kuuluu myös selkeä kieli ja monimutkaisen terminologian välttäminen. Tämän parantelu on jatkuvaa työtä, mutta lähtökohtaisesti pyrin käyttämään lyhyitä tekstikappaleita sekä listoja sisällön palasteluun. Ammattitermien käytön kanssa painin, kuten monet muutkin asiantuntijat.

Jos sivusto on kovin laaja, kaikki tarkistukset, jotka ovat automatisoitavissa, kannattaa automatisoida. Skannerit löytävät HTML-koodin tasolta asioita, jotka voisivat toimia paremmin. Koska käytän WordPressiä, enkä oikeastaan tee käsin HTML:ää mihinkään, en turvautunut näihin tarkistuksiin.

Erilaisia tarkistuslistoja ja skannereita löytyy runsaasti, kun tietoa hakee. Tässä joitakin esimerkkejä:

Värit ja kontrasti

Ihmisen havaittavaksi jää värien kontrastiin ja ymmärrettävyyteen liittyviä asioita. Sivustoni aiemman ulkoasuteeman ongelmana oli sen kellertävänruskea perusfontti ja artikkelikuviin lisätty harmahtava peittoväri. Kun joskus yritin muuttaa väriyhdistelmiä teeman asetuksista yhdestä kohdasta, kokonaisuus räjähtikin toisesta nurkasta pieleen.

Aiemman teeman oletusväriyhdistelmä ei siis tarjonnut saavutettavuuden kannalta riittävää kontrastia ja tämän kertoi myös Contrast Checker -työkalu (https://webaim.org/resources/contrastchecker) ihan virallisesti:

Ruutukaappauskuva kontrastin tarkistustyökalusta
Contrast Checker kertoi sen, mitä itse epäilinkin.

FAIL-teksti kertoi karua kieltään: värien kontrastin täytyisi olla normaalille tekstille vähintään 4.5:1 ja suurifonttisille 3:1.

Uudessa ulkoasussa värikikkailuja ei ole. Artikkelien tausta on valkoinen, otsikot mustalla ja linkit selkeästi sinisellä.

Kuvien alt-tekstit

Hyvin valittu kuva vaikuttaa käyttäjäkokemukseen positiivisesti. Artikkelien näkymistä Googlessa voi myös parantaa hyvin valituilla ja oikeilla metatiedoilla varustetuilla kuvilla. Kiireinen lukija voi hypätä suoraan tarkistuslistoihin:

Eniten blogissa parannusta kokivat kuvien alt-tekstit. Nämä ovat niitä vaihtoehtoisia tekstejä, jotka näytetään, jos varsinaista kuvaa ei jostain syystä pystytä näyttämään. Alt-tekstejä käyttävät myös ruudunlukijasovellukset eli niillä on tärkeä rooli siinä, kuinka saavutettavuus toteutuu.

Alt-teksti selittää ytimekkäästi mitä kuvassa tapahtuu: “Moniväriset ilmapallot katossa” tai “Musta koira sohvalla” tai “Kaksi aikuista ostoksilla kaupassa”. Se EI sisällä valokuvaajan nimeä eikä hakukonetermejä peräkkäin listattuna. WordPressin käyttäjälle näiden eron ymmärtäminen ei aina ole helppoa ja myönnän, että olenpa itsekin mokannut! Jatkossa kiinnitän enemmän huomiota myös kuvatiedostojen nimeämiseen.

Iso suositus tälle artikkelille, joka vääntää rautalangasta alt-tekstien mekaniikan:

Muuta hyödyllistä

Koska blogi on ajatusteni kotipesä, lukijoita kannattaa ohjata tutustumaan myös kirjoittajan #henkilöbrändiin tarkemmin. Some-asiantuntija Hanna Takala Zentosta vinkkasi minulle LinkedIn-badgen lisäämisestä. Uudistuksen jälkeen sellainen sivustolta nyt löytyykin. Voit itsekin lisätä badgen esimerkiksi näillä ohjeilla:

Yleisesti ottaen haluan pitää sivuston ilmeen yksinkertaisena ja keskittyä tuottamaan laadukasta sisältöä. Sivuston asettelussa ja käyttökokemuksesta mobiilikäytön toimivuus on tärkeimpänä ajatuksena, ”Mobile first”.

Jos jokin EI toimi saavutettavuus-mielessä hyvin tai voisi toimia paremmin, anna palautetta!