Vieraskynä: Kuvien ALT-tekstit

Tässä tekstissä käydään läpi, mikä on ALT-teksti ja mihin sitä tarvitaan. Toisaalta pohditaan myös sitä voiko niistä olla jopa jossain tilanteessa haittaa saavutettavuuden kannalta. Lopuksi annetaan vielä vinkkejä ALT-tekstien laatimiseen.

Mihin ALT-tekstejä tarvitaan?

ALT-tekstit eli alternative text tarkoittaa nimensä mukaisesti vaihtoehtoista tekstiä. Se ei ole oletuksena kuvan yhteydessä näkyvä kuvateksti tai kuvan otsikko, eikä se ole tarkoitettukaan näkymään kaikille käyttäjille.

Yleisesti ajatellaan, että saavutettavuuden kannalta olisi tärkeää, että jokaisella kuvalla olisi oma ALT-teksti. Myös saavutettavuusdirektiivi edellyttää, että kaikelle ei-tekstimuotoiselle verkkosisällölle tarjotaan tekstivastineet. Esimerkiksi ruudunlukuohjelmat lukevat tavallisesti tekstivastineen henkilölle, joka käyttää sivustoa sellaisen avulla.

ALT-teksteistä voi olla hyötyä saavutettavuuden lisäksi myös hakukoneoptimoinnin kannalta. Hakukoneet, kuten Google, löytää kuvien vaihtoehtoiset teksti. Usein noihin teksteihin saadaan sisällytettyä esimerkiksi keskeisimpiä hakusanoja, mikä voi nostaa verkkosivun sijoitusta hakutuloksissa tai saada näkyvyyttä myös kuvahaun tuloksiin. Vaihtoehtoisista teksteistä voi olla hyötyä myös tilanteissa, joissa käyttäjän selain ei syystä tai toisesta lataa kuvaa, silloin käyttäjä näkee vaihtoehtoisen tekstin.

Hyödyttääkö ALT-tekstit aina saavutettavuutta?

ALT-tekstejä täytyy aina harkita tapauskohtaisesti, koska joissain tilanteissa niistä voi olla jopa haittaa saavutettavuuden kannalta. Esimerkiksi tilanteessa, jossa kaikilla sivuston kuvilla on ALT-teksti ja kuvia on todella paljon, voi sen lukeminen ruudunlukuohjelmalla mennä todella raskaaksi.

On myös hyödytöntä tehdä tarpeetonta toistoa erilaisten kuvakkeiden, kuten sosiaalisen median ikoneiden osalta. Tuo tuskin mitään lisäarvoa, että ruudunlukija toistaa jokaisen sosiaalisen median kanavan nimeä useampaan kertaan.

Tarvitseeko ALT-teksti määrittää jokaiselle kuvalle?

Aina ei ole tarpeen määrittää kuville ALT-tekstiä. Sitä ei tarvita esimerkiksi silloin, jos kyseessä on puhtaasti koristekuva tai muuten täysin merkityksetön kuva muun sisällön kannalta. Jos tekstivastike olisi täysin sama kuin esimerkiksi kuvateksti, silloin on yleensä perusteltua jättää se kirjoittamatta.

Jos ALT-tekstin haluaa jättää tyhjäksi, se on tärkeää tehdä oikein. Muussa tapauksessa osa ruudunlukuohjelmista lukee kuvan tiedostonimen vaihtoehtoisen tekstin puuttuessa. ALT-tekstin voi jättää tyhjäksi merkinnällä: alt=””

Koriste- tai kuvituskuvat

Kuvituskuvia saatetaan käyttää elävöittämään sisältöä ja toisaalta kiinnittämään lukijan huomion. Jos kyseessä on tekstin kannalta täysin merkityksetön kuva tai puhtaasti koristekuva, voi tekstivastikkeen pois jättäminen olla perusteltua.

Erilaisia koristekuvia suositellaan lisäämään mahdollisuuksien mukaan suoraan taustaan. Tällaisia voisivat olla erityisesti esimerkiksi erilaiset tekstiä jaksottavat kuvaelementit tai erilaiset ikonit.

W3C Web Accessibility initiative on koonnut sivustolleen hyviä käytäntöjä koskien koristekuvien ALT-tekstejä: https://www.w3.org/WAI/tutorials/images/decorative/

Taulukot ja listat

Erilaiset taulukon tai listan sisältävät kuvat voivat olla myös haastavia tekstivastikkeiden kannalta, ja siksi ne kannattaakin ensisijaisesti toteuttaa suoraan HTML-taulukkona tai -listana. Ruudunlukuohjelmat osaavat lukea suoraan HTML-taulukoita.

Infografiikat

Paljon tekstiä sisältävät infografiikat ovat myös haastavia ALT-tekstien kannalta, sillä niiden teksteistä tulee helposti todella pitkiä. Kannattaakin aina ensimmäisenä tarkistaa löytyvätkö keskeiset sisällöt jo muusta tekstistä. Mikäli löytyvät, voi ALT-tekstissä mainita vain infografiikan aiheen ja sen, että sisältö löytyy tekstinä sivulta. Jos sisältö ei löydy muusta tekstistä, täytyy se kirjoittaa mahdollisimman napakasti tekstivastikkeeseen.

Kuvat, jotka sisältävät linkin

Linkkinä toimivat kuvat tarvitsevat yleensä tekstivastikkeen, sillä jos linkin sisältävälle kuvalle ei ole lisätty ALT-tekstiä, lukee ruudunlukuohjelma yleensä linkin osoitteen kirjain kerrallaan. Hyvä tekstivastike tällaiselle kuvalle voisi olla esimerkiksi lisätietoja aiheesta x. Sanaa linkki ei ole tarpeen kirjoittaa erikseen, koska ruudunlukuohjelmat tunnistavat myös linkit.

Millainen on hyvä ALT-teksti?

Hyvä ALT-teksti tarjoaa mahdollisimman tarkkaa tietoa kuvasta, mutta ei toista sivuston muuta sisältöä kuten kuvatekstiä. Vaihtoehtoisen tekstin tulisi myös liittyä muuhun sisältöön, eli se ei voi olla täysin irrallinen muusta sisällöstä.

Mieti, onko kuvan sisältöä kerrottu jo ympäröivässä tekstissä ja mitä jää kertomatta, jos kuvaa ei näe. Näiden pohjalta on hyvä lähteä kirjoittamaan tekstivastinetta kuvalle.

Huomioi kontekstin ja ympäröivän tekstin

ALT-tekstiä laatiessa tulisi huomioidaan, mikä kuvan tarkoitus kyseisessä kontekstissa on. Samalla kuvalla voi olla eri yhteyksissä hieman erilaisia tekstivastikkeita, joten kannattaakin pohtia, mikä kuvassa on merkittävää juuri kyseisessä kontekstissa. Onko se esimerkiksi kuvassa olevat henkilöt vai ennemmin se, mitä kuvan henkilöt tekevät?

Tekstivastikkeen tyyli tulisi olla myös mahdollisimman lähellä muun tekstin tyyliä. Kannattaakin käyttää sellaista sanastoa, joka sopii muuhun tekstiin.

Selkeä kieli ja lyhyet lauseet

Tekstivastike tulisi kirjoittaa mahdollisimman napakasti ja selkeästi. Siinä kannattaa käyttää lyhyitä lauseita ja mahdollisuuksien mukaan sanojen perusmuotoja. Kielen ei kuitenkaan kannata olla tökeröä, vaan se täytyy aina kirjoittaa ihmistä ajatellen. Tekstissä tulisi käyttää aina myös oikeaa kirjoitusasua välimerkkeineen.

Älä kirjoita ALT-tekstiin sanoja kuvassa tai linkkiä, vaikka kyseessä olisikin linkki. Erilaiset ruudunlukuohjelmat tunnistavat niin kuvat kuin linkitkin ja kertovat niistä ohjelman käyttäjälle. Jos tekstivastine alkaa vielä sanalla kuvassa, tulee siitä vain turhaa toistoa.

Neutraali kuvaus

Vältä tulkintaa ja pyri kirjoittamaan kuvasta mahdollisimman neutraali kuvaus, etenkin, jos kyseessä on jonkun muun valitsema kuva. Kuvan konteksti kannattaa tietenkin huomioida ja mahdollisuuksien mukaan myös sanoma, mitä kuvalla halutaan juuri kyseisessä kohdassa välittää.

Jackrussellinterrieri leikkii nurmikolla tennispallon kanssa.

Katsotaan, millainen ALT-teksti yllä olevalle kuvalle sopisi:

Välttävä: alt=”Koira”

Parempi: alt=”Koira leikkii nurmikolla.”

Paras: alt=”Jackrussellinterrieri leikkii nurmikolla tennispallon kanssa.”

 

Viisi pikavinkkiä ALT-tekstin laatimiseen

  1. Mieti, mitä tietoa jää saamatta ilman kuvaa ja kirjoita se ALT-tekstiin.
  2. Älä toista sisältöä, joka löytyy jo jossain muodossa sivustolta.
  3. Suosi lyhyitä virkkeitä ja selkeää kieltä.
  4. Käytä oikeaa kirjoitusasua.
  5. Kirjoita mahdollisimman neutraali kuvaus.

 

Juuso KatajaKirjoittaja Juuso Kataja on Zoner Oy:n markkinointipäällikkö. Zoner on kotimainen hostingpalveluita tarjoava yritys, jonka kautta saa verkkotunnuksia, WordPress-optimoituja palvelimia, webhotelleja ja sähköposteja.

Haluatko oman tekstisi julki saavutettava.fi:ssä? Laita meille sähköpostia osoitteeseen saavutettava@saavutettava.fi ja kerro mistä haluaisit kirjoittaa.

Vieraskynä: Poimi selkokielestä parhaat palat verkkokirjoittamiseesi

Selkokieli on suomen kielen supistettu muoto, joka on mukautettu sisällöltään, sanastoltaan ja rakenteeltaan yleiskieltä luettavammaksi ja ymmärrettävämmäksi tietyn kohderyhmän tarpeita ajatellen.

Saavutettavan tekstin kirjoittaminen vaatii tekstin tuottajalta kirkasta ajatuksenjuoksua ja paljon raakaa työtä. Sisältö on pilkottava sopivan kokoisiksi annospaloiksi ja tarjoiltava se lukijalle järkevässä järjestyksessä. Parhaat tekstit on myös paketoitu kauniisti, jotta ne houkuttelevat lukemaan ja helpottavat asian sisäistämistä.

Lue alta Selkokeskuksen suosituksiin pohjautuvia vinkkejä, ja hyödynnä niitä omassa verkkokirjoittamisessasi.

1. Näkökulma ja rajaus

Selkokielen yleisöksi ajatellaan usein tiettyjä erityisryhmiä, kuten maahanmuuttajat, koululaiset, vanhukset tai kehitysvammaiset. Asiantuntija- tai kuluttajaviestinnässä kohderyhmä ei useinkaan ole näin tarkasti määritelty, mutta niissäkin jokaisen valinnan tulisi lähteä kohderyhmän tarpeista.

Kysy itseltäsi ainakin seuraavat kysymykset:

  • Onko aihe relevantti ja kiinnostava kohdeyleisölleni juuri nyt ja tässä kanavassa?
  • Paljonko voin olettaa lukijoiden tietävän aiheesta ennakkoon?
  • Onko lukijoilla aiheesta ennakkokäsityksiä, joita haluan vahvistaa tai murtaa?
  • Miksi on tärkeää kirjoittaa juuri tämä teksti?

2. Tiedon määrä ja visualisointi

Yleissääntö on: pitäydy pääkohdissa ja karsi rönsyt. On parempi, jos lukijasi sisäistää muutaman pääasian kuin että hänen huomionsa hajautuu tärkeiden ja vähäpätöisempien asioiden kesken. Verkkoteksteissä on kätevää tarjota halukkaille pääsy lisätietoihin linkkien kautta.

Mieti tiedon määrää sekä kokonaisuutena että pienempien merkitysyksikköjen tasolla:

  • Pidä virkkeet ja kappaleet lyhyinä, ja kerro niissä yksi asia kerrallaan.
  • Käytä toiston voimaa, mutta maltilla.
  • Asettele teksti ilmavasti.
  • Hyödynnä selkotaiton periaatteita, joissa huomioidaan muun muassa typografia, rivitys ja palstoitus, tausta ja värit sekä visuaaliset elementit.

3. Rakenteet ja jäsentely

Tekstiä jäsennellessä pidä tiukasti kiinni punaisesta langasta. Tavoittele helppoa silmäiltävyyttä:

  • Käytä kuvaavia otsikoita ja väliotsikoita.
  • Hyödynnä luetteloja.
  • Etene aiheen käsittelyssä johdonmukaisesti.
  • Suosi suoraa sanajärjestystä.

Suomen kieli mahdollistaa monenlaisia taivutusmuotoja ja pitkiä määritejonoja. Hyviä uutisia: kaikkia näitä mahdollisuuksia ei tarvitse käyttää! Erityisesti verkkoteksteissä kannattaa suosia yksinkertaisuutta. Esimerkiksi hankalan sijamuodon välttäminen voi onnistua vaihtamalla verbiä.

VINKKI! Pääasioiden hahmottamista voi auttaa, jos järjestelet sisällön itsellesi pieneksi luurangoksi tai ajatuskartaksi ennen kirjoitustyön aloittamista.

4. Sananvalinta

Saavutettavan tekstin sananvalinta on harkittua niin määrällisesti kuin laadullisestikin. Kiinnitä huomiota ainakin seuraaviin asioihin:

  • Käytä lyhyitä ja yleisesti tunnettuja sanoja.
  • Suosi mieluummin konkreettisia kuin abstrakteja sanoja.
  • Jos tilanne vaatii ammattitermin tai muuten vaikean sanan käyttämistä, selitä se.
  • Varo substantiivitautia. Mieluummin vähennä substantiivien määrää ja käytä nasevaa verbiä.
  • Kirjoita lyhenteet auki.

VINKKI! Tekstin työstämisen loppusuoralla voi olla avuksi, jos kampaat tekstin vielä kertaalleen läpi miettien jokaisen sanan kohdalla, onko se todella tarpeellinen.

5. Sävy ja puhuttelu

Saavutettava teksti on lukijaa kunnioittava ja motivoiva. Selkokielellä tai selkeällä yleiskielellä kirjoittaminen ei tarkoita, että tekstin tulisi olla tylsä. Tekstissä saa näkyä persoona, ja se usein auttaakin viemään viestiä paremmin perille.

Saavutettava teksti on kiinnostava ja ajatuksia herättävä, joskus yllättäväkin. Käytä vertauskuvia harkiten ja konkretisoi viestiäsi aina kun mahdollista. Pidä kohderyhmä mielessä joka käänteessä.

Hyvä tapa tarkistaa tekstisi toimivuutta on lukea sitä ääneen tai parhaassa tapauksessa luettaa se ennakkoon kohderyhmän edustajalla.

Lähteitä:

Selkokirjoitusohjeita ja konkreettisia tekstiesimerkkejä: https://selkokeskus.fi/selkokieli/selkokirjoitusohjeet/

Arvioi tekstisi selkokielisyyttä selkomittarin avulla: https://selkokeskus.fi/wp-content/uploads/2018/10/SELKOMITTARI_2018_11.10.18.pdf

Selkokielikoulutuksia: https://selkokeskus.fi/koulutukset/

Leskelä, Leealaura: Selkokieli. Saavutettavan kielen opas. 2019.

 

Tiina Leivo

Kirjoittaja Tiina Leivo on viestintäyrittäjä, kääntäjä ja selkomukauttaja, jonka mielestä verkkoteksti ei ole valmis silloin kun siihen ei ole lisättävää, vaan silloin kun siitä ei saa enää mitään pois.

Haluatko oman tekstisi julki saavutettava.fi:ssä? Laita meille sähköpostia osoitteeseen saavutettava@saavutettava.fi ja kerro mistä haluaisit kirjoittaa.

Selityksen makua eli miksi esteettömyys ei myy

Kirjoittaja Emil Virkki on esteettömyyden yksityisyrittäjä. Hänen keväällä 2006 perustettu yrityksensä, Rauha 2 Webdesign, on erikoistunut esteettömien verkkopalvelujen suunnitteluun ja esteettömyyden arviointiin.


Viisi prosenttia suomalaisista tarvitsee erityispalveluja webissä. Alle prosentti verkon materiaaleista on edes likipitäen esteetöntä. Suurin osa verkkosivustoista myydään aivan muiden taikasanojen kuin esteettömyyden avulla. Miksi esteettömyyttä ei käytetä myyntivalttina – tai oikeammin, miksi esteettömyys voi olla tuotteelle jopa rasite?

”Jos ne on sokeita, niin miksi ne on tietokoneella?”

Asiakkaalle voi olla yllätys, että sokeat tai kehitysvammaiset käyttävät internetiä. Leuka saattaa loksahtaa lopullisesti auki, kun ilmenee millaisia uusia mahdollisuuksia nämä erityisryhmät voivat verkosta saada. Sokeat voivat lukea uusimmat uutiset itsenäisesti ja hakea tietoa, eikä liikuntarajoitteisten tarvitse vaivautua ahtaaseen ja pyörätuolirampittomaan lähikauppaan, vaan he voivat tilata tavaransa verkosta.

Kun asiakas ei tiedä, ei hän osaa myöskään vaatia esteetöntä jälkeä. Kun tarjouspyyntöön vastaaja mainitsee lisäksi huolehtivansa esteettömyydestä, siirtää asiakas tarjoajan b-kastiin, koska ”me kyllä palvellaan ennen kaikkea normaaleja ihmisiä”. Tarjouksessa täytyy selittää hyödyt juurta jaksain, jolloin esteettömyydestä tulee sen pääasia, joka jättää helposti varjoonsa asiakkaan pyytämät ominaisuudet – eikä näin ollen herätä luottamusta: ”Tämä myy kyllä kivoja juttuja, mutta ei niitä mitä me pyydettiin.”

Erityisryhmiä on niin vähän

Erityisryhmät tuntuvat pieniltä, koska tilastotiedot eivät tule yleensä esille juuri missään. Yleisin perustelu esteelliselle toteutukselle on erityisryhmien pieni määrä. Erityisryhmiä on kuitenkin paljon. Prosenttilukuna viisi prosenttia kuulostaa pieneltä, mutta vastaa 250 000 henkilöä. Siinä on paljon ostovoimaa, jonka saa käyttöön vain panostamalla esteettömyyteen.

Rahalla on helpompi myydä: niinpä viisi prosenttia suurempi asiakaskunta kannattaa muuttaa rahaksi. Kuinka monta euroa liikevaihtoa toisi viiden prosentin kasvu asiakaskunnassa?

Se on niin vaikeaa ja kallista

Esteettömyys kuulostaa vaikealta. Miten sokean voi saada lukemaan nettisivuja? Tilaaja on tottunut siihen, että sivuja luetaan, joten ruudunlukija kuulostaa vaikealta ja monimutkaiselta. Vielä monimutkaisemmalta kuulostaa hämärä tekninen säätö, jolla sivut saadaan toimiviksi myös ruudunlukijalla – puhumattakaan tekstisisällön ja valikoiden viilaamisesta ymmärrettävämmäksi – se vasta salatieteeltä kuulostaakin. Kaikki vaikea on yleensä kallista, ja ihmeelliseltä kuulostava esteettömyys, jolla markkinoi vain muutama yritys, erityisen kalliilta. Tarjouspyyntöön sitä ei siis voi laittaa, koska tarjouksethan eivät sitten enää mahdu budjettiin!

Niinpä suurin osa tarjouksista tulee yrityksiltä, jotka eivät ymmärrä esteettömyydestä mitään. Todennäköisesti joku näistä tarjouksista on hiukan halvempi, joten lopputuloksesta tulee esteettömyydeltään huono. Lopulta asiakas menettää osan asiakkaistaan, koska tämän sivut ovat ruudunlukijan käyttäjälle vaikeat – ja tämä voi tulla monin verroin kalliimmaksi.

Ei meidän asiakkaissa ole vammaisia

Asiakas ei yleensä ole web-osaaja. Hän ei tiedä, millainen webin käyttäjäskaala on eikä välttämättä edes oman sivustonsa oikeaa käyttäjäkantaa. Hän kuitenkin ymmärtää, että on turha tehdä sivustosta sopivaa ryhmälle, joka ei sitä käytä. Ongelman muodostavat erityisesti kalliilla hankitut käyttäjätilastot, jotka väittävät, ettei sivustolla ole vammaisia käyttäjiä. No ei tietenkään ole, jos he eivät sivustoa pysty käyttämään!

Urheiluvälinevalmistajan nettisivuillakin on vammaisia kävijöitä. Heikkonäköiset, kehitysvammaiset ja värisokeat etsivät sauvakävelysauvoja siinä missä muutkin. Näkövammainen saattaa olla muiden asialla tai etsiä itselleen erikoisvälineitä. Ties vaikka hän olisi näkövammaisten keihäänheiton moninkertainen maailmanmestari Timo Sulisalo tarjoamassa yritykselle sponsorisopimusta. Asiakas saattaa yllättyä erilaisista käyttötilanteista, ja niistä kannattaa kertoa.

Esteettömyys ei ole coolia (paitsi nörttien keskuudessa)

Flash on aika siistiä. Se vilkkuu, liikkuu ja tarvittaessa myös paukkuu. Esteettömästä sivusta tulee ensimmäiseksi mieleen tylsä ja väritön sivu. Asiakas on nähnyt jo satoja hyvännäköisiä leiskautuksia, joiden fonttikoko on kahdeksan pistettä ja sekin toteutettu kuvana, joten sellaisia hän myös haluaa. ”Me halutaan näyttää asiakkaille, että me ollaan tekniikan huipulla. Siksi me hyväksytään vain flash-toteutus”. Luettavan kokoinen fontti ja riittävä kontrasti eivät asiakkaalle näytä ammattimaisilta, joten niitä on muutettava, vaikka hänen asiakkaansa ei enää saisikaan tekstiä luettua.

Se on kaikki tai ei mitään

Tilaajan on vaikea ymmärtää, että esteettömyys ei ole absoluuttista. Yksikään sivu ei ole täysin esteellinen tai täysin esteetön. Asiakas voi luulla, että esteetön verkkopalvelu edellyttää WCAG AAA -tason saavuttamista ja kuukausia kestävää testausta. Näin ei kuitenkaan ole: koska vähäkin auttaa paljon, voi pieni lisäpanostus parantaa esteettömyyttä huomattavasti. Yrittäminenkin auttaa, ja uusia asiakkaita tavoitetaan jo vähällä vaivalla.

Se on liian hyvää ollakseen totta

Esteettömyydestä on jopa liikaa hyötyä: uudet käyttäjäryhmät, parempi toimivuus, helppokäyttöisyys ja hakukonenäkyvyys. Tämä saattaa vaikuttaa poppakonstilta, eikä herätä luottamusta. Varsinkin, jos esteettömyydestä kerrotaan bullshit-bingosta tutuin termein, alkaa asia vaikuttaa rahastukselta. Asiakas ei itse huomaa suurta eroa esteettömän ja esteellisen sivuston välillä, joten perustelujen on vaikea kuulostaa hyviltä.

Esteettömyyttä voi olla vaikea tuotteistaa

Web-sivuston tilaamiseen tuntihinnoittelulla liittyy epävarmuutta ja riskejä, joita asiakkaat haluavat välttää. Tuote on helpompi ja turvallisempi hankkia kuin palvelu. Mutta miten esteettömyyden voi tuotteistaa? Esteettöminä sivustopaketteina räätälöitynä joka makuun ja maksukykyyn? A-, AA- ja AAA-sivustopaketit erikokoisina? Eritasoiset ja -laajuiset esteettömyystarkistukset?

Onko eettistä myydä sivustopaketteja, joista osa on esteettömämpiä kuin toiset? Eikö kaikkien pitäisi tehdä parhaansa esteettömyyden eteen? Jäljelle jää mahdollisuus toteuttaa erikokoisia sivustopaketteja mahdollisimman esteettömästi ja arvioida kaikkien sivustojen esteettömyys mahdollisimman tarkasti. Tai sitten heittää omatunnolla vesilintua.

Ennen kaikkea

Esteettömyyttä on vaikea myydä, jos sitä ei voi perustella. Esteettömyyttä on vaikea perustella, jos asiakas ei halua kuulla. Esteettömyyttä on siis vaikea myydä asiakkaalle, joka ei jo tiedä esteettömyydestä ja sen hyödyistä. Kaikki perustelut, jotka esteettömyyttä vastaan sanotaan, ovat esimerkkejä tästä. Kun ei tiedetä, ei ole aikaa kuunnella – sillä ei tiedetä, miksi pitäisi.

Konsultin johdolla saavutettavuuteen

Kirjoittaja Tino Rossi toimii Steerco Oy:ssä graafisen suunnittelun ja käytettävyyden konsulttitehtävissä. Hän tekee työkseen käyttöliittymäsuunnittelua, grafiikkaa ja käytettävyys- ja saavutettavuusarvioita.


Jälleen on edessä yksi käytettävyyden asiantuntija-arvio. Heuristiset listat odottavat pöydänkulmalla ja raporttipohjakin on valmiina. Näitähän on tehty – käytettävyyden tutkimisen perusteet ovat tilaajallekin tuttuja, ja raporttia esiteltäessä neuvotellaan tilaajan kanssa vain siitä, millä ehdoin tekstivärin ja taustavärin kontrastia voi pitää riittävänä, tai miten tilaajalle rakas brändielementti on luettavuutta riskeeraava vesileimakuva tekstin taustalla.

Tilaajan käytettävyysvaatimuksissa kuitenkin kummittelee esteettömyys ja saavutettavuus. Julkishallinnon tilaaja on tehnyt kotiläksynsä ja osaa suorastaan nimetä standardit, joita pitäisi noudattaa: suunnittelu- ja saavutettavuuskriteereinä JHS 129 ja WAI:n A-taso. Ja kuitenkin itse luulen, ettei tilaaja kyllä tiedä, mitä näillä standardeilla vaatii. Pistänkö sitten raporttiin korjattavaksi ongelmakohdaksi sen, jos sisä- ja ulkolinkit eivät ole erilaisia, tai jos sivulla olevan ranskankielisen sutkauksen lang-attribuuttia ei ole merkattu? Ja kun näitä käytettävyys- tai esteettömyysriskejä asiakkaalle esittelen, miten vakavina ne esitän? Ovathan ne kuitenkin tilaajan osoittaman standardin vastaisia…

Saavutettavuuden nuorallatanssia

Arviointiraportin kirjoittaneen asiantuntijan mielipiteistä, intohimoista, ortodoksisuudesta ja henkilökohtaisesta näkemyksestä on paljolti kiinni se, millaisia korjauksia tai toimintaperiaatteita tilaaja vaatii tekniseltä toimittajaltaan tai palvelun ylläpitäjiltä. Saavutettavuustavoitteet pitäisi varmaankin sijoittaa realistisesti johonkin kohtaa sellaista janaa, jonka toisessa päässä on antiikkista ruudunlukuohjelmaa kuunteleva sokea ihminen ja toisessa päässä haukankatseinen lyhytjännitteinen nuori huippumikronsa kanssa. Asiaan sisältyy melkein aina kompromisseja ja tahtotilaa jostain sellaisesta ihanteesta, joka ei vielä ole toteutuskelpoinen.

Asiantuntijan tehtävänä on esittää huomioitaan ja arvioita näiden vakavuudesta, vaikka kaikki osapuolet saattavat ounastella, että korjaustoimenpiteisiin ei kuitenkaan ryhdytä. Sillä tosin voi lohduttautua, että ajatus voi jäädä muhimaan asiakkaan mieleen ja tulla otetuksi huomioon jossain seuraavassa isossa palveluremontissa.

Yhteisesti jaetussa tahtotilassa on vielä näkyvimpänä ja kuuluvimpana osapuolena se ”keskivertokäyttäjä”, jonka palaute kantautuu tilaajalle kaikkein keskeisimpänä. Todennäköisesti verkkopalvelun ylläpitäjät eivät koskaan saa tietoonsa sitä, jos tekstiselaimen käyttäjät eivät onnistu lähettämään lomaketta, mutta heille voi sataa kiukkuisia valituksia siitä, että tekstikoko on lukukelvottoman pientä. Ja näissä yhteydenotoissa on kysymys siitä, että loppukäyttäjän selaimesta on huomaamatta säädetty tekstikoko minimiin, ja hänellä ei ole aavistustakaan siitä, miten sitä voisi itse suurentaa tai että siihen voi ylipäätään itse vaikuttaa. Tällaisessa tapauksessa verkkopalvelusta vastaavat valitsevat rutinan lopettamiseksi ilman muuta kiinteästi määritellyn pistekoon tekstille, vaikka kuinka hyvin tietäisivät suhteellisen tekstikoon edut ja standardinmukaisuuden. Päätös jää tietysti tilaajalle, mutta kuinka sitten palveluntarjoajia ja käyttäjiä valistetaan? Ja milloin siihen esteettömämpään tulevaisuuteen päästään?

Julkaisujärjestelmä ei ole saavutettavuuden ystävä

Saavutettavuuden esteistä suurimpia eivät enää pitkään aikaan ole olleet high tech -nörtit tai visuaalisuuden ehdoin ajattelevat graafiset suunnittelijat. Päinvastoin, nämä ovat kääntäneet osaamisensa esteettömyyden tavoitteluun, ja uudeksi yhteiseksi viholliseksi on noussut sisällönhallintajärjestelmien huima kehittyneisyys.

Monikanavajulkaiseminen ja massiiviset, käyttäjäystävälliset julkaisujärjestelmät tuottavat helposti sellaisia lopputuloksia, joiden yksittäisiin esteettömyysongelmiin ei ole mahdollista puuttua. Sivuston omistajallakin voi olla vilpitön halu saavutettavuuteen, mutta on turha kuvitella, että oto-tiedottaja pystyisi tuottamaan julkaisujärjestelmällä taulukon otsikkosolulle sarakeryhmämäärittelyjä tai tägejä akronyymien tarkentamiseen. Mitä näppärämmin copy-paste sujuu, sitä esteellisempää lähdekoodista näkyy syntyvän. Järjestelmän valmistajakin saattaa olla samaa mieltä, mutta neuvoo odottamaan seuraavaa versiota ongelmien ratkaisemiseksi.

Meidän sivujamme eivät sokeat käytä

Kaikki esteettömyyden eteen tehty työ tähtää vain yhteen asiaan: käyttökokemuksen helpottamiseen. Mutta keitä nuo sivustolle tulvivat ihmiset oikein ovat? Ja ketä heistä palvellaan innokkaimmin? Sopivan saavutettavuuden tason määrittely vaatii tietoa sivustolle saapuvista käyttäjistä ja heidän laitteistostaan. Asiakkaalla on useimmiten hyvä kuva keskiarvoasiakkaastaan, mutta olennaisesti vähemmän tietoa erilaista pienryhmistä, jotka myös löytävät tiensä palveluun.

Vastauksia marginaalissa surffaavien määrästä voi koettaa onkia erilaisista kävijätilastoista. Dataa on useimmiten tallennettu kunnioitettavia määriä, mutta aina kerättyä tietoa ei ole kuitenkaan hyödynnetty tehokkaimmalla mahdollisella tavalla. Palvelua suunnitteleva taho ei aina kommunikoi tietoa keräävien ihmisten kanssa. Yleinen hämmennys valtaa usein tilaajan, kun käy selville että prosenttiluvut eri selaimista, käyttöjärjestelmistä ja resoluutioista ovat tosiaan saatavissa, kunhan sellaista tietoa vain osaa pyytää. Lukujen valossa on kenties helpompi päättää, millaiselle käyttäjälle kumarretaan ja millaiselle pyllistetään.

Ammattimainen pomminpurkaja

Tilanne ei ole mitenkään lohduton. Vaikka verkko on vieläkin saavutettavuuspommeja tulvillaan, sivut ovat parantuneet viime vuosina. Kaukana ollaan vielä yleisestä saavutettavuusperiaatteesta, mutta ainakin asiasta puhutaan, ja yhä useammin esteettömyyttä osataan vaatia. Ammattilaiset osaavat jo tehdä asiat oikein, jos heitä siihen patistetaan. Onneksi kukaan ei enää kehtaa möläyttää sellaisia sammakoita kuin jo kadonneen uusmediafirman myyntimies: ”Jos ne ei osaa ladata uusinta selainta, niin ei niitä kyllä asiakkaiksi kaivatakaan”.

Taiteilijat saavutettavuuden asialla

Kirjoittaja Pekka Nikrus on AD Satama Interactivessa.


Art Director, AD, on vastuussa siitä, että projektin lopputulos näyttää hyvältä ja tukee brändiä. Hänen vastuualueitaan ovat värit, kuvitus, merkit ja muodot, asettelu ja typografia. Hän on taiteilija, joka suunnittelee linjat ja visioi ”visut” eli kaiken sen, joka tekee lopputuloksesta ulkonäöllisesti uskottavan ja haluttavan.

Samalla tavalla kuin hyvällä printtimedian AD:lla on ymmärrys, miten eri paperit toimivat, miten värit reagoivat, mitä hauskaa rasterilla voi tehdä ja miten painokone toimii, olisi nettikollegan ymmärrettävä vähintään yhtä hyvin oman mediansa erityisominaisuudet.

Muste kuivuu ja paperin koko pysyy, joten printti-AD:n työ saavuttaa joskus lopullisen muotonsa. Netti-AD:n riesana taas on useita muuttujia, joita on mahdotonta kontrolloida. Näytön ja selainikkunan koko sekä käytetty tekniikka vaihtelevat ja värejä on paljon, mutta ne eivät ehkä ole sitä, mitä niiden on tarkoitettu olevan. Viestin vastaanottajalla, käyttäjällä, ei ehkä ole jotain tiettyä fonttia tai selainlaajennusta. Lista eroista on pitkä.

Yhdestä on moneksi

Ehkä tärkein ero kollegoiden välillä on kohderyhmä – he, jotka vastaanottavat viestin. Kaikella viestinnällä on vastaanottaja, mutta verkkopalveluiden vastaanottajat ovat monimuotoisempia. Siinä missä printtipuolella erityisryhmiä, esimerkiksi näkörajoitteisia, yleensä lähestytään omilla versioilla ja jopa eri medioilla (esim. äänikirjat), rakennetaan nettipalveluita sopiviksi mahdollisimman monelle käyttäjälle.

Tämä on järkevää, koska se on mahdollista. Järkevää myös siksi, että se on ylläpidon kannalta helpompaa, ja siksi, että sitä on helpompi markkinoida.

Kohderyhmä ei muutu, vaikka vastaanottaja käyttäisi palvelua läppärillä, kännykällä tai puhesyntetisaattorin avulla. Miksi siis samalle kohderyhmälle pitäisi tehdä useampi eri palvelu? Siihen ei ole syytä. Tätä on saavutettavuus. Tämä on nykyaikaa.

Look & feel: miltä se tuntuu

Tuntuman säilyttäminen mediasta toiseen on osa netti-AD:n työtä. Siinä missä palvelun pitää tukea brändiä kannettavalla tietokoneella, pitää sen tehdä sitä myös hyvin pienellä näytöllä. Tuntuman pitää olla sama myös silloin, jos viestin vastaanottaja ei näe kuvia tai käyttää omaa tyylitiedostoaan. Jos palveluiden tuntuma ja yleisilme on sama, on työ tehty oikein. Tuntuma ja brändin tukeminen ei riipu kuitenkaan pelkästään ulkonäöstä. Käytettävyys on tärkeää. Toimiiko palvelu niin kuin käyttäjä haluaa?

Vaikka netti-AD:t ovat suuria taiteilijoita ja visionäärejä, jotka luovat ”kuuleja visuja ja fänsiä grafiikkaa”, olisi kuitenkin hyvä, että hekin, hyvien printtikollegoidensa tapaan, olisivat kavereita painokonehoitajan kanssa. Ei niinkään siksi, että AD:n tarvitsisi oppia käyttämään painokonetta, vaan siksi, että painokoneen hallitseva henkilö osaa paljon mediaan olennaisena osana kuuluvia asioita, jotka AD:nkin on hyvä tietää. Painokoneenhoitajia tässä mediassa ovat tietenkin koodarit. He toteuttavat käyttöliittymän, jonka ulkonäön AD on suunnitellut. Koodari on AD:n kaveri.

Näyttää hyvältä

Vaikka saavutettava sivusto ei tarkoita vuoden 1997 insinöörisivustoa, jättää moni AD asian toisten huoleksi. Eihän printti-AD:n tarvitse miettiä asiaa. Miksi siis meidän nettipuolella toimivien pitäisi? No siksi, että se on olennainen osa sitä mediaa, joka meidän on osattava. Meidän ei tarvitse miettiä kohdelakkaa, nuuttauksia ja preeglauksiakaan. Sen sijaan on hyvä miettiä sisältöä ja sisällön tärkeyttä. Sitä että tärkeät asiat erottuvat.

Ulkonäön tarkoitus ei ole voittaa palkintoja, vaan sen tarkoitus on tuoda sisältö selkeästi esiin. Hyvässä palvelussa ulkonäkö tukee sisältöä. Hyvin rakennetussa palvelussa ulkonäkö on eriytetty sisällöstä kokonaan. Tämä vaatii osaamista. Se on sitä median hallitsemista ja sen ymmärtämistä.

Suunnittele palvelun perusteet kaverisi, koodarin, kanssa. Näin pääsette molemmat yhteisymmärrykseen siitä, mikä on tavoitteesi. Jos lähdet liikkeelle puhtaasti visuaalisesta ideasta ilman, että ajattelet palvelun rakennetta, kannattaa vilauttaa tuotoksia kaverillesi heti, kun olet saanut valmiiksi jotain näytettävää.

Desiderata: kuinka se tehdään?

Jokainen sivusto on yksilö ja siksi mitään vedenpitäviä ohjeita siihen, miten AD:n pitäisi suunnitella saavutettava ulkoasu, ei ole. Olen kuitenkin tähän kerännyt joitain hyviä neuvoja ja oppeja vuosien varrelta.

Ymmärrä mitä olet tekemässä niin sivuston, asiakkaan kuin loppukäyttäjänkin kannalta. Ymmärrä myös mediasi. Mitä tyylitiedostot ja semanttinen koodaus voivat tarjota sinulle? Opi erottamaan sisältö ulkonäöstä.

”Kuuli” ulkonäkö ei ole väärin, se vain ei ole tärkein asia. Sinun tehtäväsi on tehdä käytettävä ja saavutettava palvelu, ei voittaa kilpailuja. Kilpailuiden voittaminen on toki hyväksi sinulle ja yrityksellesi, mutta tyytyväisten käyttäjien merkitystä asiakkaillesi ja heidän asiakkailleen ei kannata unohtaa.

Lyö mahdollisimman ajoissa lukkoon käytettävä perusfonttikoko ja tee siitä tarpeeksi iso ja luettava. Muista myös, että käyttäjät voivat muuttaa fonttikokoa kuten haluavat. Kestääkö sinun leiskasi sen?

Värejä valitessa pyri vähintään 70 % valöörieroon tekstin ja taustan välillä, etenkin jos teksti tai tausta ei kumpikaan ole valkoinen tai musta. Muista myös, että värillä on väliä. Ei niinkään brändiväreillä, mutta niillä väreillä, joilla sisältö esitetään. Pidä mielessä värisokeat ja ne, joiden monitorit eivät ole yhtä hyviä kuin sinun.

Mitä skaalautuvammaksi palvelu suunnitellaan, sitä aikaisemmassa vaiheessa on pääasiallinen visusuunnittelu tehtävä koodarin kanssa yhteistyönä. Näin varmistetaan myös se, että tarpeen vaatiessa taitto myös hajoaa tyylikkäästi.

Pyri siihen, että mahdollisimman paljon käyttöliittymän grafiikasta on tyylitiedostossa, ja että mahdollisuuksien mukaan tyylitiedosto luo näkyvät elementit. Ymmärrä, mitä se tarkoittaa, ja käytä sitä hyväksesi.

Tarkista palvelun ulkonäkö ilman tyylitiedostoa. Näin varmistut, että sisältö on selkeästi jäsennelty ja olennainen välittyy.

Älä suunnittele itsellesi. Testauta leiskasi henkilöillä, jotka eivät tiedä, mitä olet tekemässä. Sinä olet vain tekijä, et käyttäjä.

Kova maailma

Aina se ei ole niin helppoa. Vaikka haluaisikin toteuttaa palveluita, jotka ovat saavutettavia ja käytettäviä ja joissa pääasiana on sisältö, on todellisuus karu. Suurten ohjelmistotalojen valmiit pakettiratkaisut tekevät sotkuisella koodillaan saavutettavien palveluiden rakentamisen usein mahdottomaksi.

Tällöin ei voi muuta kuin langeta polvilleen suuren teknologian eteen ja antaa periksi. Näkökulmaa työhön se ei muuta, mutta lähestymistapaa kyllä. Lopputuloksen on kuitenkin oltava mahdollisimman selkeä. Parhaansa pitää tehdä haasteista riippumatta.

Elämyksiä – mutta millä hinnalla?

Onnistuneessa verkkopalvelussa pitää markkinoinnin halujen ja käyttäjien tarpeiden lyödä kättä. Valitettavan usein asiakkaan markkinointiosasto on se, joka loppupeleissä vaikuttaa siihen millaisia verkkopalvelun käyttöliittymä ja rakenne ovat. Vaikka kuinka halutaan olla käyttäjälähtöisiä, rakenne määräytyy firman organisaatiohierarkian mukaan (joka ei aina ole ihan väärin).

Halutaan ”elämyksellisyyttä”, jotain mikä nähdään äänenä, animaationa – järisyttävän upeana kokemuksena, joka saa ihmiset heti rakastumaan sivustoon ja palaamaan aina vain uudestaan ja uudestaan.

AD:n kannattaakin kysyä itseltään onko asia todella näin. Haluaako palvelun kohderyhmä sirkushuveja vai riittääkö hyvä ja tuore leipä. Haluavatko käyttäjät saada elämyksiä esimerkiksi pankkipalveluista? Flashia, vilinää ja vilskettä! Olisiko sirkuspelle pankissa elämyksellisyyttä? Jonglöörit ja tulennielijät oven eteen! Meidän pankki on elämyspankki! Tuo meidän pelleille rahasi!

Vai onko käyttäjälle paras elämys yksinkertaisesti helppokäyttöinen ja ongelmaton palvelu. Hyvä palvelu muistetaan. Se on parasta mainosta. Onnistuneena esimerkkinä voisi pitää Amazon.com-verkkokauppaa. Sen karu, mutta nimenomaan sisältöä tukeva ulkonäkö toimii hienosti niin käyttäjille kuin kaupan markkinoinnillekin.

Minä, joka tietenkin edustan käyttäjäkunnasta vain yhtä henkilöä, en tarvitse haku-, pankki- tai apteekkipalveluihin muuta kuin että pystyn tekemään siellä sen, mitä sinne tulen tekemään. En katso olevani uniikki tämän suhteen. Mitä enemmän sivulla on elämyksellisyyttä, sen heikommin se tukee saavutettavuuden periaatetta. Sisältö on tärkein ja siihen on keskityttävä. Sen kertovat käytettävyystestitkin.

AD:n työssä tämä tarkoittaa sitä, että suunnitellaan ulkonäkö sisällön ehdoin. Tehdään kokonaisuudesta puhutteleva ja selkeä, mutta erotetaan mainossisältö siitä, mitä käyttäjät tulevat etsimään. Selitetään asia maksavalle osapuolelle järkevästi ja rauhallisesti. Jotta viesti voisi saavuttaa vastaanottajan, on ymmärrettävä, mitä kieltä pitää puhua. Markkinoinnille saavutettavuus myydään esimerkiksi mahdollisuutena tavoittaa suurempi ryhmä kuluttajia, säästönä tiedonsiirtokustannuksissa tai parempana hakukonenäkyvyytenä.

End of slideshow, click to exit

Pyyhkiessäni kuolat suupielistä ja rinnuksilta kaiken tämän saarnaamisen jälkeen huomaan, etten ole keskittynyt vain saavutettavuuteen, vaan olen ottanut mukaan muutakin. Näin tässä aina käy, mutta asiat eivät mielestäni ole niin helposti erotettavissa toisistaan.

Tuli tarvitsee palaakseen kolme elementtiä: palamiskelpoista ainetta, happea ja lämpöä. Verkkopalvelu ei loista, jos jokin elementti puuttuu. Saavutettavuudesta ei ole hyötyä, jos sivusto ei ole käytettävä. Hyvästä sisällöstä ei ole iloa, jos käytettävyys on heikolla tasolla, ja niin edelleen. Ymmärrätte varmaan.

Entä miksi sekoittaa AD tähän soppaan? AD:llä on usein hyvä kokonaiskuva palvelun ulkonäöstä – tai ainakin pitäisi olla. Koska ulkonäkö tukee sisältöä, pitää AD:lla olla myös ymmärrys sisällöstä – mistäs sitä muuten tietää mitä pitää tehdä? Koska ulkonäön on myös tuettava käytettävyyttä ja saavutettavuutta, on hyvä, että netti-AD:lla on myös taju siitä, mitä on ulkonäön takana.

Kaiken muun ohella, tietenkin.

Pieni AD-suomi -sanakirja

  • Kohdelakka = kiiltävä lakkapinta, joka painetaan tiettyyn osaan painopintaa.
  • Nuuttaus (taiveura) = paperiin painettu ura, joka helpottaa taittamista.
  • Preeglaus = korkopainanta, jossa lopputulos on joko kohokuvio tai syvennys.
  • Rasteri = tapa simuloida sävyjä erikokoisin tai eri tiheyksisin pistein.
  • Typografia = pinnan suunnittelu: fontit, värit, tasapaino, kokonaisuus, yksityiskohdat.
  • Valööri = värin vaaleus-/tummuusaste.