MarkkinointiKollektiivi tapahtuman antia saavutettavista verkkosisällöistä

Osallistuimme Markkinointikollektiivin Aamukahviseuraan 5.11.2024 aiheella ”5+1 vinkkiä verkkosisältöjen saavutettavuuteen”. Saavutettavat verkkosisällöt vaikuttavat suoraan liiketoiminnan menestykseen ja myyntiin. Kun verkkopalvelut ovat selkeitä ja helppokäyttöisiä, ne tukevat sekä konversioita että brändin arvoa. Myös hakukoneoptimointi paranee, ja orgaaninen näkyvyys kasvaa, kun linkitykset ja muut tekniset sisällöt ovat kunnossa.

Kävimme tapahtuman aikana läpi muun muassa: Miten saavutettavat sisällöt vaikuttavat liiketoimintaan? Millaiset otsikot, linkit, painikkeet, kuvat ja videot ovat saavutettavuusmääritysten mukaisia? Mitä muutoksia esteettömyysdirektiivi tuo verkkokauppoihin? Miksi tuotetietojen laadulla on niin suuri merkitys? Katso koko esitys ja tutustu yleisön kysymyksiin ja vastauksiin—ehkä näistä on apua myös sinulle!

Mihin voi vaikuttaa, kun käytössä on räätälöity alusta Adobe Magentolla?

Magentolla pystyy lähtökohtaisesti säätämään sisällön perusominaisuuksia, kuten kuvien vaihtoehtoisia tekstejä sekä tekstisisällön laatua, kuten otsikointeja sekä yleistä tekstin muotoilua.

Magentossa, kuten monissa muissakin järjestelmissä, saatavilla oleviin ominaisuuksiin vaikuttaa käytetty teema ja muu tehty räätälöinti. Yleensä sisällöntuottajan mahdollisuuksia vaikuttaa esimerkiksi tarkemmin sivun rakenteeseen on saatettu rajoittaa.

Tähän on hieman hankala vastata täysin tyhjentävästi, koska emme tiedä minkä verran ja millä tavalla alustaa on räätälöity. Jos huomaat, että et voi omassa työssäsi tehdä saavutettavaa sisältöä, kannattaa keskustella järjestelmän toimittajan kanssa ja selvittää voidaanko saavutettavan sisällön tuottamiseksi tehdä parannuksia.

Mitkä ovat parhaat tavat optimoida kuvat kampanjoihin desktop ja mobiili?

Muista lisätä kuville niitä kuvaava vaihtoehtoinen teksti. Jos kuvassa on tekstiä, tee tekstistä riittävän näkyvä. Varmista, että kontrastia tekstin ja taustan välillä on riittävästi ja lisää tarvittaessa ylimääräinen tausta tekstin ja kuvan väliin.

Jos kuvassa on tekstiä, panosta myös tekstin fonttiin. Kuvat monesti pienenevät puhelimen näytöllä,  joten varmista, että teksti on mahdollisimman helposti luettavaa vaikka se ei näkyisikään ihan siinä koossa kuin mihin se on suunniteltu.

Jos mahdollista, suosi modernimpia kuvaformaatteja, kuten WebP ja SVG. Näissä tiedoston koko on pienempi. Myös jpg-muotoisen kuvan kokoa voi optimoida, mutta varo, ettet pakkaa kuvaa liikaa. Pakkaaminen heikentää kuvan laatua, joten pyri välttämään kuvan pikselöitymistä.

Varmista, että kuvan resoluutio on riittävä, mutta ettei se ole tarpeettoman suuri. Myös tämä vaikuttaa myös kuvatiedoston kokoon. Joillakin sivustoilla ja palveluissa kuvien optimointia tehdään automaattisesti, joten tämä on hyvä myös ottaa huomioon, ettei kuvalle tule tarpeettomasti montaa eri pakkaamiskertaa. Huomioi myös onko kuvan tarkoitus toimia myös korkean resoluution näytöillä, eli onko tarkoituksena käyttää ns. retinakuvaa.

Hyödyntäisimme mielellämme monimutkaisien asioiden selittämisessä infograafeja, mutta kuinka huomioida saavutettavuus?

Infograafit ovat kyllä hyvä lisäkeino asioiden selittämisessä. Niiden saavutettavuus hieman riippuu siitä toteutetaanko graafi kuvana vaiko interaktiivisena elementtinä.

Jos infograafi on kuva, sillä pitää olla myös kuvaava vaihtoehtoinen teksti. Monimutkaisen asian kohdalla suosittelemme ennemmin jättämään vaihtoehtoisen tekstin tyhjäksi ja kuvaamaan graafin sisällön sivun muussa sisällössä, jotta graafin sisällön saa kuvattua selkeästi ja kattavasti. Tässä voi myös hyödyntää muun muassa taulukoita. Jos kuvauksesta tulee kovin pitkä eikä se ole sivulla järkevä, voi tällöin hyödyntää ratkaisuna esimerkiksi infograafin läheisyyteen lisättävää sisältöhaitaria, jonka sisälle kuvaus lisättäisiin.

Älä ilmaise infograafissa asioita pelkällä värillä, vaan hyödynnä myös muita visuaalisia keinoja, kuten viivan tyyppiä tai esimerkiksi taustavärin lisäksi kuvioita. Näin tietoa ymmärtää myös henkilö, joka ei näe osaa tai kaikkia väreistä.

Infograafissa yleensä on selite, joka kertoo mitä mikäkin palkki tai viiva tarkoittaa. Tämä on tavanomaisesti erillisessä laatikossa (ns. legend-elementissä). Tämä ei ole saavutettavuuden kannalta paras, vaan olisi hyvä jos tämä tieto olisi kunkin graafin tiedon yhteydessä. Molempia tapoja voi kylläkin käyttää, eli erillisen laatikon käyttäminen muiden keinojen lisänä on ihan hyvä ratkaisu.

Interaktiivisen infograafin osalta työkaluvalinta on tärkeä. Kannattaa katsoa mainitseeko palveluntarjoaja työkalun saavutettavuudesta tietoa. Esimerkiksi ainakin itselleni nimenä tuttu Venngage mainitsee, että heillä on sekä saavutettava editori graafien luomiselle sekä saavutettavat graafipohjat. Jos vasta etsit työkalua infograafien tekemiseen, vertaile eri palveluntuottajien hinnoittelu ja saavutettavuustiedot.

Miten tekoälyä voi hyödyntää verkkokaupan saavutettavuuden parantamisessa?

Tekoälyä voi hyödyntää monissa asioissa. Saavutettavuuden ja sisällöntuottajan näkökulmasta tekoäly voi auttaa sisältötekstien selkeyttämisessä ja kuvien kuvailussa. On tärkeää muistaa, että tekoälyn tuottamat sisällöt täytyy vielä tarkistaa ihmisen toimesta!

Tekoälyä voi käyttää myös sparrailukaverina ja tuomaan uusia näkökulmia. Tekniikka on mennyt jo sen verran eteenpäin, että keskustelu tekoälyn kanssa tuntuu jopa melko luontevalta.

Tekoälyn kielimallit tuntevat saavutettavuusaiheen melko hyvin, joten tekoälyä voi hyödyntää myös saavutettavuusvinkkien kyselemiseen. Mutta myös tässä on hyvä muistaa, että tuloksiin ei aina kannata automaattisesti luottaa. Joskus esimerkiksi ChatGPT kertoo valheellista tietoa varsin itsevarmasti. Ei toki tahallaan, mutta emme ole kuitenkaan vielä niin pitkällä, että tekoäly osaisi oikeasti tulkita saamaansa dataa.

Onko saavutettavuus asia, johon tulisi pyrkiä 100% ja onko se mahdollista? Vai riittääkö vähempi, jos kertoo puutteista saavutettavuusselosteessa.

100% saavutettavuus on käsitteenä melko haastava. Olemme kaikki yksilöitä, joka tarkoittaa sitä, että sama ratkaisu ei toimi meille kaikille. Oli kyseessä sitten käytettävyyteen, saavutettavuuten tai muuhun liittyvä asia. Eli käytännössä joudumme aina tekemään jonkinlaista kompromissia. Se ei tarkoita sitä, etteikö saavutettavuuteen kannattaisi pyrkiä ja etteikö jo hieman pienemmistäkin työpanoksista olisi hyötyä.

Kaikkia saavutettavuuspuutteita ei tarvitse saada kerralla korjattua. Parannuksia saa, ja kannattaakin, tehdä jatkuvana. Jos palvelussa on jotain kriittisiä puutteita, jotka estävät käytön kokonaan osalta käyttäjistä, ne toki kannattaa korjata aina mahdollisimman pikaisesti. Mutta käytännössä jokainen pieneltäkin tuntuva parannus voi olla käyttäjälle iso helpotus, eli puutteiden korjausta voi hyvin lähestyä myös niin, että hoitaa ne niin sanotusti helpot korjaukset ensin.

WCAG 2.1 AA -taso, joka vaaditaan laissa, on vain minimitaso saavutettavuudelle. Eli WCAG 2.1 AA ei vielä tarkoita, että palvelu olisi täysin saavutettava. Jotkin WCAG 2.1 AAA -tasolla olevat kriteerit ovat sellaisia, jotka mielestäni olisi hyvä toteuttaa jokaiseen palveluun. Esimerkiksi palvelun murupolku, joka kertoo käyttäjälle missä hän palvelussa kulloinkin on, vaaditaan vasta AAA-tasolla. Epätavallisten sanojen tai lyhenteiden selitykset vaaditaan vasta AAA-tasolla, minkä olen aina kokenut hieman hämmentävänä. Eli mielestäni ehdottomasti kannattaaa pyrkiä saavutettavuudessa pidemmälle kuin vain tämä AA-tason minimivaatimus.

On myös hyvä muistaa, että saavutettavuus vaatii enemmän kuin kertaluontoisen panostuksen, eli saavutettavuus vaatii huomiota koko palvelun elinkaaren ajan. Aina, kun palveluun tehdään muutoksia visuaalisuuteen, tekniseen toteutukseen tai sisältöön, täytyy saavutettavuus ottaa huomioon.Saavutettavuusselosteelle pitää merkitä kaikki palvelua koskevat puutteet. Mutta asia ei saa jäädä siihen, vaan saavutettavuusselosteella olevat puutteet pitäisi korjata. Saavutettavuusseloste on sivuston kävijän työkalu, joka kertoo onko sivusto käyttäjälle toimiva.

Onko asioita joita sisällöntuottaja voi tehdä saavutettavuuden eteen, vai onko kaikki ns. konepellin alla, eli sivuston asetuksista yms. riippuvaa?

Sisällöntuottajan rooli saavutettavuuden kanssa on todella suuri! Laadukkaalla ja selkeällä tekstisisällöllä on suuri merkitys käyttäjälle.

Käytännössä saavutettavuuden saavuttamiseen tarvitaan kaikkia osapuolia – suunnittelijat, kehittäjät tai sisällöntuottajat eivät yksin pysty tekemään palvelusta täysin saavutettavaa. Eli kullakin meistä on oma roolimme saavutettavuuden parantamisessa.

Jotta sisällöntuottaja voi tuottaa saavutettavaa sisältöä, pitää sivuston tekniikan, käyttöliittymän ja visuaalisen ilmeen tukea sisällöntuottajaa työssään.

Mitä ohjelmaa suosittelette verkkosivuston saavutettavuuden testaamiseen (+ vinkit mahdollisista ilmaisversioista)?

Saavutettavuuden testaamiseen on monia työkaluja. Osa työkaluista vaativat myös koodaajataustaa, mutta onneksi kaikki eivät.

Saavutettavuusasiantuntijoidemme suosikkeihin ilmaisista työkaluista kuuluu Dequen Axe DevTools -selainlaajennoksen ilmaisversio. Olemme kokeneet työkalun tulokset hieman ymmärrettävämmiksi kuin monessa muussa. Selaimen lisäosatyökaluilla voidaan tarkastella vain yhtä sivua kerrallaan. Lisäksi WAWE-työkalusta löytyy selaimessa ilman erillistä lisäosaa ajettava ilmainen työkalu.

Jos tavoitteena on seurata koko sivustoa, silloin yleensä tarvitaan maksullista työkalua. Me teemme tällä hetkellä yhteistyötä kolmen yrityksen kanssa: Webwarden, Siteimprove ja Eficode. Kaikki kolme työkalua ovat erilaiset keskenään niin ominaisuuksien kuin hintansakin puolesta. Eficoden Accessibility Keeper keskittyy saavutettavuuteen, kun taas sekä Webwarden että Siteimprove tarkastelevat myös muita yleisesti sivuston laatuun liittyviä asioita. Siteimproven vahvuus on analytiikassa, sitä muut työkalut eivät tunnu tarjoavan.

Jos kaipaat apua maksullisen työkalun löytämisessä, me autamme mielellämme!

Missä määrin evästeet ja niiden mahdollinen hyväksyntä/hylkääminen voivat vaikuttaa sivuston saavutettavuuteen – onko jotain mitä tulisi huomioida niiden osalta?

Evästeiden elementti itsessään voi aiheuttaa sivustolle saavutettavuushaasteita. On tärkeää varmistaa, että evästeet voi hyväksyä tai hylätä käyttämällä myös ruudunlukijaa tai pelkkää näppäimistöä. Näissä on todella usein puutteita.

Varmista, että evästeistä kerrotaan selkeällä ja ymmärrettävällä kielellä, moni käyttäjä ei ymmärrä evästeistä juurikaan mitään. Eli älä oleta, että käyttäjä ymmärtää eväiseisiin liittyvän sanaston ja jargonin. Varmista myös, että evästeet pystyy yhtä helposti sekä hyväksymään että hylkäämään.

Jos evästeiden hyväksyntää tai hylkäämistä ei ole pakko tehdä ennen kuin sivustoa lähtee käyttämään, voi auki jäävä evästeikkuna haitata sivuston saavutettavuutta peittämällä allensa liikaa sisältöä.

Monesti videoiden näkyminen sivustolla (esim. YouTube-videot) määritetään evästeissä, koska YouTube asettaa videoissaan evästeitä. Tämä kannattaa huomioida sivuston sisällössä. Jos videolla on tärkeää sisältöä, on sen hyvä olla myös sivulla tekstimuodossa, jotta jokainen käyttäjä sen sisällön varmasti saa.

Mikä on tyypillisin verkkosivustolla näkyvä ei-saavutettava ominaisuus? Ja mikä on tyypillinen ”olisi helppo tehdä saavutettavasti” ominaisuus – kontrasti, fonttikoot, titlet?

Yleisin saavutettavuuspuute sivustolla on riittämätön kontrasti tekstin ja taustan välillä. Joskus yrityksen brändivärit eivät vain ole riittävän saavutettavat. Mutta usein nähdään myös erilaisia harmaan sävyjä, joiden kontrasti ei vain riitä.

Muita yleisimpiä puutteita – ja samalla myös niitä, mitkä on varsin helppo tehdä saavutettaana – ovat seuraavat:

• Linkkitekstit eivät ole ymmärrettäviä

• Kuvilla ei ole tekstivastineita

• Painikkeissa ei ole tekstiä

• Sivuston kieltä ei ole merkitty

• Linkkejä ei voi tunnistaa muusta tekstistä muutoin kuin värin perusteella

Kaikkia näitä puutteita yhdistää se, että ne ovat löydettävissä automaattisilla testaustyökaluilla, eli nämä eivät vaadi saavutettavuusasiantuntijan testausta. Käsittelimme näitä ominaisuuksia hieman tarkemmin blogissamme: Eurooppa ei ole vielä valmis uusiin saavutettavuusvaatimuksiin.

Yritysten ainutlaatuinen äänensävy häviää helposti, jos sisällöt tehdään vain SEO-optimoinnin näkökulmasta; ts. sivustot alkavat kuulostaa toisiltaan. Miten välttää tämä ansa?

Hakukoneoptimoinnin ja saavutettavuuden kannalta parasta on jos sisältö tuotetaan ensisijaisesti lukijalle eikä hakukoneille. Vältä monimutkaista kieltä, ellei se ole tärkeä osa yrityksen ääntä. Kun kohdistat sisällöt lukijalle, on yrityksen oma äänensävy helpommin säilytettävissä.

Hakukoneet arvostavat käyttäjälähtöistä, aitoa sisältöä. Eli älä vie SEO-optimointia hakusanaviljelyksi, vaan käytä erityisesti tärkeimpiä hakusanoja osana sisältöä siellä missä se on luontevaa. Hyödynnä kuvien vaihtoehtoisissa teksteissä yrityksen omaa ääntä, mutta muista varmistaa, että kuvan sisältö on ymmärrettävissä. Kun yhdistät hakukoneoptimoinnin ja saavutettavuuden yrityksen omaan äänensävyyn, varmistat, että sisällöt ovat löydettäviä, saavutettavia ja oman yrityksen näköisiä.