Saavutettava verkkokauppa

On mahdotonta antaa yleispätevää arviota, koska jokaisella verkkokaupalla on erilaiset lähtökohdat.

Yksinkertaisen ja hyvin rakennetun verkkokaupan saavutettavuuden voi saada hyvälle mallille muutamassa viikossa jos tietää, mitä tekee. Isompien ja monimutkaisempien verkkokauppojen ja kokonaisuuksien kanssa saattaa mennä kuukausia.

Aikaa tarvitaan

• ymmärryksen ja osaamisen kehittämiseen
• työn organisointiin ja suunnittelemiseen
• kehityskohteiden tunnistamiseen ja korjaamiseen
• testaamiseen.

On myös vaikea vetää rajaa ajankäytölle, koska saavutettavuus ei ole koskaan ”valmis”, vaan jatkuvasti kehitettävä osa-alue.

Tähän emme ikävä kyllä pysty antamaan yksiselitteistä vastausta.

Pienimmillään toimijalle aiheutuu suoria kustannuksia vain palvelun saavutettavuuden auditoinnista, jonka hinta on viidestä yli kymmeneen tuhanteen euroa. Toisessa ääripäässä on laajat verkkokaupparatkaisut, joiden rinnalla toimii muita palveluita, kuten mobiilisovellus. Silloin auditoitavaa ja kehitettävää on enemmän, joten myös kustannukset nousevat.

Sosiaali- ja terveysministeriön vuonna 2021 teettämän arvioinnin mukaan saavutettavuusauditointi verkkokaupalle maksaa noin 10 000 euroa. Mikäli verkkokauppaan tarvitsee tehdä pieniä muutoksia, on auditoinnin ja muutostöiden hinta yhteensä ehkä noin 20 000 – 30 000 euroa. Hinta kuitenkin vaihtelee voimakkaasti, varsinkin jos palkkaat kokonaisen konsulttiarmeijan hoitamaan saavutettavuutta.

Taulukossa on kooste selvityksen arviossa olevasta kustannuslaskelmasta yksittäisille toimijoille. Sen mukaan suurimmalle osalle eli noin 65 prosentille verkkokauppoja riittää vain auditointi. Noin 30 prosenttia koskee auditointi ja korjaukset, kun suuret muutostyöt koskevat vain noin viittä prosenttia palveluista.

Oma näkemyksemme on kuitenkin, että korjauksia vaativien verkkokauppojen määrä on huomattavasti suurempi kuin 30 %. Arvioimme, että yli 95 % verkkokaupoista vaatii jonkinlaisia saavutettavuuskorjauksia. Löydät taulukon kokonaisuudessaan STM:n arviosta (PDF).

Koska haluat palvella kaikkia maksavia asiakkaitasi ja tarjota heille helpon ja miellyttävän ostokokemuksen. Tai ehkä haluat, että asiakkaat palaavat verkkokauppaan yhä uudelleen.

Niin, ja tietenkin sinun on pakko, jos esteettömyysdirektiivi vaatii sinua tekemään niin. Toisin sanoen sinun on pakko huomioida saavutettavuus, jos verkkokauppasi myy kuluttajille ja sen

• palveluksessa on yli 10 työntekijää ja
• vuosittainen liikevaihto on vähintään 2 miljoonaa euroa tai
• vuosittainen taseen loppusumma on vähintään 2 miljoonaa euroa.

Käytännössä verkkokauppojen tuli täyttää saavutettavuusvaatimukset 28.6.2025 mennessä, mutta vieläkään ei ole liian myöhäistä.

Verkkokaupassa saavutettava käyttöliittymä tarkoittaa miellyttävää ja helppokäyttöistä asioimisen ympäristöä. Tärkää on esimerkiksi se, että visuaalinen ilme tukee asiakkaan toimintaa.

Saavutettava käyttöliittymä kertoo esimerkiksi

• millä sivulla käyttäjä on (otsikointi ja visuaalinen sekä ohjelmallinen osoitin sille, millä sivulla käyttäjä on)
• mitä käyttäjän pitää tehdä ostoprosessin eri vaiheissa
• jos jokin toiminto onnistuu
• jos jokin toiminto epäonnistuu
  • miten käyttäjän pitää muuttaa toimintaa.

Saavutettava käyttöliittymä on hyvin suunniteltu käyttöliittymä, joka huomioi erilaisten asiakkaiden tarpeet.

Median hallinta

Kaikilla käyttäjillä pitää olla aina mahdollisuus pysäyttää, tauottaa tai piilottaa käyttöä häiritseviä elementtejä. Sellaisia ovat esimerkiksi kaikki itsestään liikkuvat elementit, kuten videot bannerissa. Käyttäjällä pitää olla mekanismi, jonka avulla voi pysäyttää tai piilottaa sivulla esiintyvät äänet ja videot. Suositus on, että ääni tai video ei saisi alkaa automaattisesti ilman varoitusta.

Värien käyttö

Pelkää väriä ei saa käyttää välittämään informaatiota. Havaitsemisen lisäksi värien käyttö liittyy kognitiiviseen saavutettavuuteen, koska väreihin liittyy tiettyjä merkityksiä ja oletuksia. Esimerkiksi pelkkä punainen tai vihreä pallo kertomassa, onko tuotetta saatavilla voi olla vaikea ymmärtää, vaikka henkilö näkisi värit hyvin.

Voit siis käyttää väriä, mutta sama tieto pitäisi olla saatavilla myös eri muodoissa. Tiedon tuotteen saatavuudesta voit kirjoittaa esimerkiksi pallon yhteyteen myös tekstimuodossa. Kaikilla elementeillä olisi hyvä olla näkyvä tekstivastine. Sen avulla käyttäjät tietävät varmasti, mitä mistäkin toiminnallisuudesta tapahtuu.

Linkkien tarkoitus

Linkkien tarkoituksen tulee selvitä helposti ja niiden tulee olla helppo erottaa toisistaan. Linkin tarkoituksen pitää selvitä asiayhteydestä tai kaikista mieluiten selkeästä linkkitekstistä. Suositus on, että linkissä olisi aina näkyvä teksti, eikä esimerkiksi pelkkä ikoni. Huolehdi, että samannimiset linkit vievät aina samaan kohteeseen!

Otsikoiden ja toiminnallisuuksien nimet

Otsikoiden ja toiminnallisuuksien nimilappujen tulee olla mahdollisimman kuvaavia. Nimilappu viittaa tässä yhteydessä esimerkiksi painikkeiden tai lomakkeiden syötekentissä oleviin näkyviin teksteihin. Kun otsikot ja nimilaput ovat kuvaavia, käyttäjä tietää, mitä mistäkin painikkeesta tapahtuu ja tunnistaa, miten sivusto rakentuu.

Suositus: Vältä häiritseviä elementtejä

Häiritseviä elementtejä ovat esimerkiksi liian monet ponnahdusikkunat tai automaattisesti toistettavat videot. Ne tekevät palvelun käyttämisestä vaikeampaa, minkä lisäksi liikkuvat elementit voivat aiheuttaa joillekin käyttäjille pahoinvointia. Siksi niiden tarpeellisuutta kannattaa harkita tarkkaan.

Tue käyttäjää navigoimisessa

Tarjoa käyttäjälle useita tapoja paikallistaa sijaintinsa ja löytää sivuja muiden joukosta. Siihen sopivia keinoja ovat esimerkiksi

• navigaatio
• haku
• murupolku
• sisällysluettelo
• sivukartta
• linkit etusivulla kaikkiin palvelun kohteisiin.

Esimerkiksi murupolku ja aktiivisen sivun merkitseminen navigaatiossa ovat keinoja auttaa käyttäjää tunnistamaan, missä kohdassa verkkokaupasta hän on.

Elementtien johdonmukaisuus

Kaikkien samaa käyttötarkoitusta edustavien komponenttien tulee esiintyä aina samalla tavalla ja nimellä läpi palvelun. Tämä koskee niiden ulkonäköä, nimilappuja sekä saavutettavia nimiä.

Tarjoa apua johdonmukaisesti (WCAG 2.2)

Kun käyttäjälle on tarjolla apua, sen pitää esiintyä johdonmukaisesti aina samassa paikassa. Esimerkiksi chatin tai yhteystietojen tulee olla jokaisella sivulla samassa paikassa.

Suositus: Auta käyttäjiä tuotteiden löytämisessä

Tarjoa useita keinoja tuotteen etsimiseen ja hakemiseen. Esimerkiksi suodattimet, hakutoiminto ja suosituslinkkaukset voivat auttaa käyttäjää löytämään haluamansa tuotteen palvelusta. Toista valittuja keinoja mahdollisuuksien mukaan samalla tavalla kaikilla sivuilla.

Selkeät ohjeet lomakkeissa

Lomakkeiden ohjeiden tulee olla selkeät ja syötteillä pitää olla näkyvät nimilaput. Kun lomake ohjeistaa käyttäjää, hän tietää heti, mitä hänen tulee tehdä ja missä muodossa syöttää tietoa.

Myös pakollisista kentistä pitää kertoa selkeästi, mieluusti tekstimuodossa. Jos pakollisuutta ilmaistaan asteriskia (*) käyttämällä, pitää sen tarkoitus selittää lomakkeen alussa.

Ei aistinvaraisia ohjeistuksia

Kun ohjeistat käyttäjää verkkokaupassa, varmista, että ohjeet eivät riipu yksinomaan komponenttien aistinvaraisista ominaispiirteistä. Se tarkoittaa, että ohjeen ei saa viitata ainoastaan komponentin

• muotoon
• kokoon
• visuaaliseen sijaintiin
• suuntaan
• ääneen.

Esimerkiksi ”Voit ottaa meihin yhteyttä chatin kautta, jonka löydät sivun oikeasta alakulmasta” ei ole saavutettava tapa ohjeistaa käyttäjää. Voit sen sijaan käyttää esimerkiksi elementin yhteydessä olevan otsikon nimeä kertomaan komponentin sijainnista.

Tunnista ja korjaa virheitä lomakkeella

Lomakkeiden tulee tunnistaa käyttäjän tekemiä virheitä ja antaa niihin korjausehdotuksia. Käyttäjän pitää aina saada tieto tekemästään virheestä tekstimuodossa. Lisäksi lomakkeen pitäisi antaa korjausehdotuksia jos korjausehdotus on tiedossa ja mikäli se ei vaaranna tietoturvaa tai sisällön merkitystä.

Lomakkeen pitäisi myös täydentyä automaattisesti toistuvien tietojen osalta. Käyttäjän ei toisin sanoen pitäisi joutua syöttämään samoja tietoja kahta kertaa samaan lomakkeeseen.

Näin teet saavutettavan päänavigaation:

• Sijoita päänavigaatio tuttuun sijaintiin kuten sivun ylälaitaan, että käyttäjä löytää sen helposti.
• Varmista, että navigaatio pysyy samanlaisena läpi verkkokaupan eri sivujen.
  • Navigaation sijainti ei vaihdu ja sen linkit pysyvät samassa järjestyksessä kaikilla alasivuilla.
• Kiinnitä erityisesti huomiota navigaation rakenteen ja nimien selkeyteen.
  • Ovatko tuotekategoriat loogisia?
  • Ovatko linkit yksiselitteisiä?
    • Merkitse käyttäjän nykyinen sijainti navigaatioon niin visuaalisesti ja ohjelmallisesti. (Ohjelmallisesti tehtävissä aria-current-attribuutin avulla)
• Laita navigaatio nav-maamerkkiroolin sisään, jotta apuvälinekäyttäjät tunnistavat ja löytävät sen nopeammin.
  • Jos palvelussa on useampia navigaatioita, tulee ne nimetä yksilöllisesti aria-label-attribuutin avulla.
  • Esimerkiksi

    <nav aria-label="Päänavigaatio”>.

Näin teet saavutettavan hakutoiminnon:

• Varmista, että haku on tunnistettavissa. Paras tapa on lisätä sille näkyvä nimilappu.
• Tarjoa hakutoiminnossa automaattisia kirjoitusvirheiden korjausehdotuksia.
• Hakukentän yhteydessä tarjottavat
  automaattiset tuote-ehdotukset voivat nopeuttaa käyttäjän toimintaa.
  • Käyttäjä näkee heti, tuleeko hänen käyttämällään hakusanalla tuloksia.
  • Jos käytät automaattisia ehdotuksia, niiden tulee olla myös apuvälinekäyttäjien hyödynnettävissä.
    • Toteuta niin, että käyttäjä aktivoi itse ehdotuksen – ei niin, että sivu päivittyy heti.
• Hakutulokset kannattaa sijoittaa hakukentän alapuolelle. Silloin siirtyminen hausta tuloksiin ja tuloksista hakuun on helppoa.
• Kun hakutulokset päivittyvät, välitä apuvälineelle tieto tuloksien lukumäärästä.
  • Tämän toteuttamisessa voidaan hyödyntää roolia role=”status”.
• Jos sivu päivittyy, hakutuloksista tulee ilmoittaa sivuotsikossa (<title>)
  • Kohdistus voi myös siirtyä suoraan hakutuloksiin.
• Jos haku ei tuota tuloksia, voit tarjota vaihtoehtoisia hakusanoja tai ohjata käyttäjä toisiin kategorioihin.

Huomioi nämä asiat suodattimissa:

• Jos suodatinvaihtoehtoja on paljon, laita suodattimet ja valinnat valikoiden sisään.
  • Käyttäjä voi halutessaan ohittaa epäolennaiset suodattimet tai koko suodatinvalikon helposti.
  • Jos kaikki suodattimet ovat suoraan esillä, voi niiden selaaminen näppäimistöllä tai apuvälineellä olla hidasta.
• Varmista suodattimien toiminta myös apuvälineillä, kuten pelkällä näppäimistöllä ja ruudunlukijalla. Auditoinneissamme on tullut ilmi, että suodattimissa on lähes poikkeuksetta saavutettavuusongelmia.
  • Varmista, että näppäimistökohdistus siirtyy suodattimiin ja kaikki valikot sekä interaktiiviset elementit ovat käytettävissä pelkällä näppäimistöllä ja avustavalla teknologialla.
  • Huolehdi, että elementtien kohdistusjärjestys on looginen.
  • Suodattimen valinnat tulee myös pystyä tyhjentämään tai nollaamaan.
  • Nimeä suodattimet selkeästi ja yhdistä nimet syötekenttiin ohjelmallisesti, jotta käyttäjät ymmärtävät niiden tarkoituksen.
  • Ruudunlukijakäyttäjän tulee saada tieto
    • valituista kohteista
    • valikoiden tilasta
    • hakutuloksista
    • liukusäätimien arvojen muutoksista
    • valintojen tyhjentämisestä
    • kaikista muutoksista käyttöliittymissä, jotka yleensä havainnoidaan näköaistin avulla.

Tuotetiedoille tai -kuvauksille ei ole erikseen ohjeita saavutettavuusvaatimuksissa, mutta ne ovat erittäin tärkeitä asiakkaan palvelemisen ja asiakaskokemuksen näkökulmasta. Monen ihmisen on helpompaa hahmottaa tuotteen ominaisuuksia, kun niitä on kuvailtu myös sanallisesti.

Kuluttajan kannalta voi olla esimerkiksi merkityksellistä, millainen jalka televisiossa on tai miltä puolelta sen johdot kulkevat. Mitä enemmän tietoa tarjoat, sitä enemmän myös esimerkiksi hakukoneet tietävät tuotteesta ja osaavat suositella sitä. Tuotetiedoilla on siis suora vaikutus verkkokauppasi hakukoneoptimointiin (SEO).

Esteettömyysdirektiivillä on myös yksi lisävaatimus kaikille lain piiriin kuuluville verkkokaupoille.

”Palveluntarjoajan on annettava tietoa verkkokaupassaan olevien tuotteiden ja palvelujen esteettömyydestä ja saavutettavuudesta, jos kyseisistä tuotteista ja palveluista vastuussa oleva talouden toimija on toimittanut nämä tiedot palveluntarjoajalle.” (lähde: Valtioneuvoston asetus eräiden digitaalisten palvelujen saavutettavuusvaatimuksista)

Toisin sanoen tuotetiedoissa on hyvä kertoa kaikki tuotteen saavutettavuutta ja esteettömyyttä koskevat tiedot, jos ne ovat saatavilla esimerkiksi tuotteen valmistajalta tai maahantuojalta. Tällä on merkitystä, koska puutteet tuotteen esteettömyydessä ja saavutettavuudessa voivat haitata tai pahimmillaan estää tuotteen käytön kokonaan. Saavutettavuus- ja esteettömyystiedot kertovat siis kuluttajalle, voiko hän käyttää tuotetta.

Tarkkaa tietoa kriteerin oikeaoppisesta toteutustavasta ei vielä ole, mutta mahdollisia vaihtoehtoja on antaa saavutettavuus- ja esteettömyystiedot

• tuotetiedoissa
• linkkinä
• tiedostossa, jos tiedot on toimitettu siinä muodossa.

Väri vaikuttaa usein kuluttajan ostopäätökseen, vaikka kuluttaja ei itse näkisikään värejä. Siksi tieto väreistä täytyy antaa muutenkin kuin visuaalisesti. Esimerkkikuvassa näet, miksi pelkkä visuaalinen väri-indikaattori ei toimi esimerkiksi värisokeille käyttäjille.

Älä siis tee näin:

Vaan näin: 

Kerro tuotteen väri selkeästi mieluiten jo tuotenimessä. Anna värille myös tekstimuotoinen vastine värinvalintamekanismiin. Silloin kaikki käyttäjät saavat tiedon väristä näkökyvystä riippumatta. Lisäämällä näkyvän tekstin palvelet siis kaikkia kuluttajia. Varmista lisäksi, että ruudunlukija lukee värin aina väriä valitessa.

Alt-teksti eli vaihtoehtoinen teksti välittää kuvan olennaisimman informaation sanallisesti avustavan teknologian käyttäjille. Ilman alt-tekstiä esimerkiksi näkövammainen käyttäjä ei välttämättä saa tietää tarpeeksi paljon tuotteen ulkonäöstä, muodosta tai muista ostopäätökseen vaikuttavista yksityiskohdista.

Jos alt-tekstit ovat sinulle vieras asia, tutustu ensin näihin kirjoittamiimme blogiteksteihin:

• Alt-tekstit – ikkuna näkevien maailmaan
• Alt-tekstin sisällöllä on väliä
• Tuotekuvien alt-tekstit – verkkokauppojen suurin haaste?

Alt-tekstit tuotelistauksessa

Vaihtoehto 1. Jätä tuotekortin kuvan alt-teksti tyhjäksi

Yksi vaihtoehto on jättää tuotekortin kuvan alt-teksti tyhjäksi. Silloin käyttäjälle luetaan vain tuotteen nimi ja muut kortilla näkyvät tiedot. Tässä toteutustavassa kuvalla olisi kuitenkin alt-teksti tuotesivulla.

Tämä on hyvä vaihtoehto sille, että alt-tekstinä olisi vain tuotteen nimi. Silloin ruudunlukija lukisi tuotteen nimen kahteen kertaan: sekä kuvan alt-tekstistä että tuotekortin otsikosta.

Älä kuitenkaan poista kuvalta alt-attribuuttia! Jos se puuttuu kokonaan, lukevat ruudunlukijat monesti kuvatiedoston nimen. Se on harvoin kovin kuvaava tai tarpeellista tietoa käyttäjälle.

Vaihtoehto 2. Lisää tuotekortin kuvalle lyhyt alt-teksti
Koska ulkonäkö vaikuttaa usein siihen, haluaako käyttäjä siirtyä ylipäätään tuotesivulle, voi kuvaavan alt-tekstin lisääminen olla perusteltua myös tuotekortin kuvalle.

Tuotesivulla ruudunlukijakäyttäjä saa kuitenkin paljon tietoa. Liian pitkä alt-teksti voi turhaan kuormittaa käyttäjää.

Tuotesivun alt-tekstit

Tuotesivulla on yleensä useita kuvia tuotteista, jolloin myös alt-tekstejä olisi lisättävänä enemmän. Vaihtoehtoja alt-tekstien tekemiseen on ainakin kolme:

Vaihtoehto 1. Kuvaile tuote tuotetekstissä
Plussat:

• Tieto kaikille käyttäjille samassa muodossa.
• Korostaa laadukkaan ja saavutettavan tuotekuvauksen merkitystä!
• Voi edistää ostopäätöstä.
• Auttaa käyttäjiä kiinnittämään huomion merkityksellisiin asioihin.

Miinukset:

• Ruudunlukijakäyttäjältä voi jäädä olennaista huomaamatta visuaalisuudesta, jos tuotekuvaus ei kuvaile tarpeeksi.
• Tuotteen kuvailua voi olla vaikea löytää tuotetiedoista.
• Käyttäjän on vaikea tietää, että kuvaus on tulossa.
• Tuotekuvauksesta voi tulla pitkä.

Vaihtoehto 2. Lisää ensimmäiselle kuvalle kuvaileva alt ja muihin tuotteen nimi
Plussat:

• Apuvälinekäyttäjä saa heti tiedon tuotteen yleisilmeestä.
• Saattaa edistää tuotteen hakukonenäkyvyyttä.

Miinukset:

• Kuvissa voi ilmetä seikkoja, jotka eivät näy ensimmäisessä kuvassa.
• Esimerkiksi johtojen sisään- ja ulostulojen sijainnit laitteen taustapuolella.
• Näitä asioita ei välttämättä ole kuvailtu tuotetekstissä.

Vaihtoehto 3. Lisää kaikkiin uutta tietoa tuoviin kuviin kuvaavat alt-tekstit
Plussat:

• Mahdollisesti hyödyllisin vaihtoehto apuvälinekäyttäjälle?
• Apuvälinekäyttäjä saa kuvista olennaisen tiedon tuotteen ulkonäöstä.

Miinukset:

• Työläin vaihtoehdoista.
• Huomio: Mieti kuvien järjestystä!
  • Kuvailevat alt-tekstit sisältävät kuvat kannattaa sijoittaa ensimmäiseksi.
  • Ruudunlukijakäyttäjä ei välttämättä ymmärrä kuunnella kaikkia kuvia läpi, jos välissä on tyhjiä tai tuotenimellä varustettuja alt-tekstejä.

Tuotteen luonne vaikuttaa alt-tekstiin

Parasta toteutustapaa valitessa kannattaa huomioida verkkokaupassa myytävien tuotteiden luonne.

Vaatteiden alt-teksteissä voi olla tärkeä kuulla esimerkiksi tuotteen

• malli ja yleisilme (esimerkiksi polviin asti ulottuva takki, capri-housut, lyhyt t-paita jne.)
• väri
• istuvuus (löysä, tyköistuva, kauluksen muoto)
• materiaali (jos erottuu kuvassa)
• käytäntöön vaikuttavat yksityiskohdat, kuten näkyvät vetoketjut tai napit.

Toisaalta nämä ovat asioita, joita kannattaa kertoa tuotekuvauksessa. On tärkeä löytää tasapaino siinä, miten alt-tekstit ja tuotekuvaukset suhteutuvat toisiinsa. Esimerkiksi värin kuvailua kannattaa harkita, jos tuotteen väriä voi vaihtaa tuotesivulla.

Tuotteen ulkonäön kuvailu voi olla hankalaa, jos kaikki tuotteet ovat keskenään hyvin samannäköisiä. Esimerkiksi pesukoneiden alt-tekstit alkavat helposti toistaa itseään, jos kaikissa lukee ”Edestä täytettävä valkoinen pesukone”.

Elektroniikkaa tai kodinkoneita ostaessa tuotteen ulkonäöllä voi olla väliä, mutta ostopäätökseen vaikuttavat enemmän myös tekniset tiedot. Kuvassa voi kuitenkin näkyä tärkeitä asioita, jotka eivät selviä teknisistä tiedoista, kuten

• tuotteen muoto
• väri
• esimerkiksi näytön jalan muoto ja sijainti tai
• kummalla puolella johdot sijaitsevat.

Eri tuotekategorioiden alt-tekstejä kannattaakin toteuttaa eri tavoilla. Mieti, mikä erottaa keskenään samankaltaiset tuotteet toisistaan, mikä on kuvan merkitys ostopäätökseen ja tee linjaus alt-teksteistä sen perusteella. Mitä tietoa itse haluaisit missäkin järjestyksessä, jos et näkisi sivua?

Ostoskori on toisaalta taustalla oleva muistuttaja, joka kannustaa asiakasta ostamiseen. Silloin sen rooli muistuttaa kirjanmerkkiä tai avoinna olevaa välilehteä. Toisaalta ostoskori on myös ostoprosessin ensimmäinen askel. Rooli muuttuu ostoprosessin osaksi heti, kun asiakas avaa ostoskorin. Asiakas siirtyy aina ostoskorin kautta tilaamaan, mikä tekee siitä ostamisen kannalta kriittisen toiminnon.

Lisää ostoskoriin -painikkeen suunnittelu

Yleisimmin verkkokaupassa tuote lisätään ostoskoriin tuotteen kohdalla olevan painikkeen avulla. Huomioi painikkeen suunnittelussa seuraavat asiat:

• Erottuuko painike muusta sisällöstä?
  • Tarkista painikkeen värit ja kontrastit
• Onko painike selkeästi nimetty niin visuaalisesti kuin ohjelmallisesti?
  • Anna painikkeelle mieluusti yksilöllinen ohjelmallinen nimi
    • Yksilöllinen nimi voi olla esimerkiksi ”Lisää [tuotteen nimi] ostoskoriin”.
    • Voit hyödyntää esimerkiksi aria-labelledby-attribuuttia
  • Visuaalisessa käyttöliittymässä pelkkä ”Lisää ostoskoriin” tai vastaava riittää
• Onko painike toteutettu semanttisesti niin, että se toimii kaikilla eri tavoilla ja laitteilla?
  • Saako painike esimerkiksi selkeän näkyvä kohdistuksen hiirellä tai näppäimistöllä?
• Kuinka helppoa painike on löytää?
• Kuinka helppoa on hahmottaa, mihin tuotteeseen painike liittyy?

Kerro käyttäjälle onnistuneesta lisäyksestä

Käyttökokemuksen näkökulmasta minimivaatimus on, että kaikki käyttäjät saavat tiedon tuotteen onnistuneesta lisäämisestä ostoskoriin.

Jos käyttäjä ei saa tietoa, hän voi

• luulla, että ostoskoriin lisääminen epäonnistui
• yrittää lisätä tuotetta ostoskoriin uudelleen
• tuotteita voi tulla koriin vahingossa liikaa.

Anna tieto vähintään tekstimuodossa! Teksti on aina paras tapa kertoa käyttäjälle onnistuneesta toiminnosta. Tekstimuotoinen ilmoitus välittyy myös avustaville teknologioille, kun se tehdään oikein. Voit pohtia, mikä olisi paras sijainti ja ulkomuoto tällaiselle onnistumisviestille.

Ostoskoriin voi lisäyksen jälkeen myös tulla esimerkiksi numero, joka kertoo siellä olevien tuotteiden lukumäärän. Se muistuttaa ostoskorin olemassaolosta ja ohjaa käyttäjää palaamaan sinne myöhemmin. Varmista, että myös apuvälinekäyttäjä saa tiedon ostoskorissa olevien tuotteiden lukumäärästä.

• Tieto voi olla esimerkiksi ”Ostoskorissa on 5 tuotetta”.
• Tilasta kertovia tekstejä pystyy välittämään esimerkiksi hyödyntämällä roolia role=”status”.

Yhtä tärkeää on kertoa käyttäjälle myös siitä, jos ostoskoriin lisääminen ei syystä tai toisesta onnistu.

Modaali-ikkuna vie käyttäjäkokemuksen pidemmälle

Minimivaatimus on harvoin kuitenkaan paras tai asiakkaan näkökulmasta käytettävin vaihtoehto. Ostoskoriin lisäämisen jälkeen käyttäjä voi joko jatkaa ostoksia tai siirtyä suoraan maksuprosessiin. Näitä toimintoja voi ja kannattaa tukea tilasta kertovan viestin yhteydessä.

Voit esimerkiksi antaa tiedon onnistuneesta ostoskoriin lisäämisestä modaali-ikkunassa. Siinä voit antaa käyttäjälle mahdollisuuden jatkaa ostoksia tai siirtyä ostoskoriin eli maksuprosessin ensimmäiseen vaiheeseen.

Tämä toteutus on hyvä myös siitä näkökulmasta, että näppäimistö- ja apuvälinekäyttäjän on helpompaa löytää ostoskoriin modaali-ikkunan kautta. Myös kiireinen ihminen kiittää tästä pienestä oikopolusta.

Voit lisätä modaali-ikkunaan halutessasi myös muita toimintoja. Voit miettiä esimerkiksi:

• Sisältääkö modaali yhteenvedon tuotteiden määrästä?
• Voiko modaalissa muuttaa tuotteen määrää?
• Voiko modaalissa poistaa tuotteita ostoskorista?
• Voiko modaalissa muokata ostoskoria muulla tavalla?

Ole tarkkana, ettei modaalista tule liian raskas ja epäselvä. Se on kuitenkin ”ylimääräinen näkymä” käyttäjälle. Emme tietenkään halua, että se alkaa ärsyttämään.

Joskus ostoskorilla voi olla aikaraja, jonka jälkeen tuotteet poistuvat korista. Muista antaa tieto tällaisista rajoista kaikille käyttäjille! Käyttäjällä pitäisi olla mahdollisuus joko pysäyttää aika, säätää aikarajaa tai jatkaa aikaa juuri ennen sen loppumista.

Tässä olennaisimpia kriteerejä ja vinkkejä saavutettavan ostoskorin toteutukseen:

• Sillä on otsikko, joka kertoo sen olevan ostoskori.
• Ostoskorin elementit ovat jäsennelty selkeästi niin, että sisältö on helppo hahmottaa.
• Tuotteet ovat jäsennelty selkeästi, esimerkiksi allekkain
  • allekkain jäsentely on kognitiivisesti helpompi hahmottaa kuin esimerkiksi vierekkäin kortteina.
• Tuotteista tarjotaan sopiva määrä tietoa käyttäjälle, kuten
  • tuotteen tai palvelun saatavuus ja toimitusaika
  • väri, koko ja materiaali.
• Tekstit ja elementit täyttävät kontrastivaatimukset.
• Tuotteiden nimet toimivat linkkeinä tuotesivuille, jotta käyttäjä pääsee helposti tarkastelemaan tuotteita.
• Tuotteet on merkitty HTML-koodiin listaksi, jotta apuvälinkäyttäjät tietävät montako erilaista tuotetta ostoskorissa on.
• Käyttäjä pystyy poistamaan tuotteita ostoskorista helposti.

Ostoskorin toiminnallisuudet

Tuotteiden määrää on yleensä hyvä pystyä muuttamaan ostoskorissa. Anna käyttäjälle mahdollisuus muuttaa lukumäärää eri tavoin, esimerkiksi plus- ja miinuspainikkeilla sekä syötekentällä, johon lukumäärän voi kirjoittaa. Lukumäärän vaihtaminen pudotusvalikossa voi olla joissain tapauksissa hyvä asia, esimerkiksi jos tuotteiden määrä on rajattu. Joidenkin käyttäjien voi myös olla helpompaa käyttää pudotusvalikkoa.

Tee selkeät painikkeet ostosten jatkamiseen, ostoskorin ikkunan sulkemiseen sekä kassalle siirtymiseen. Nämä toiminnot sijaitsevat usein korin lopussa. Varmista, että kaikki painikkeet

• ovat nimetty kuvaavasti, myös ohjelmallisesti
• toimivat kaikilla mahdollisilla tavoilla, kuten
  • osoittimella
  • näppäimistöllä
  • apuvälineillä
• ovat tarpeeksi isoja, jotta niitä on helppo käyttää kaikilla laitteilla ja eri tavoilla
• välittävät tietoa niiden tiloista ja muutoksista ostoskorissa.

Tällaisia muutoksia ovat muun muassa

• tuotteen määrän muutos
• ostosten kokonaishinnan muutos
• tuotteen poisto ostoskorista.

Mieti myös, miten välität olennaiset tiedot kaikille käyttäjille. Jos tuotteiden kohdalla näytetään esimerkiksi alennettu hinta, mieti järkevin toteutustapa kaikille käyttäjille. Esimerkiksi vanhan hinnan yliviivaus ei välity apuvälineille mitenkään.

Huomioi nämä asiat, jos asiakas saa tehdä muutoksia ostoskorissa:

• Varmista, että kaikki käyttäjät saavat suoraan palautetta kaikkien erilaisten ostoskoriin liittyvien muutosten yhteydessä, kuten:
• Tuotteen määrän muuttaminen.
• Tuotteen poistaminen korista kokonaan.
• Hinnan muuttuminen esimerkiksi alennuskoodin käytön seurauksena.

Muista! Muutokset saattavat olla selkeitä visuaalisesti, mutta tieto ei välttämättä välity apuvälineille, jos asiaan ei ole kiinnitetty huomiota teknisessä toteutuksessa.

Yksinkertaiset apuvälineille välittyvät viestit, kuten ”Tuote X poistettu ostoskorista” parantavat käyttökokemusta. Asia huomioidaan WCAG:n onnistumiskriteerissä 4.1.3 Tilasta kertovat viestit.

Lomake kaiken ytimessä

Asiakas- ja toimitustiedot täytetään tyypillisesti lomakkeeseen. Lomakkeisiin liittyy paljon teknisiä seikkoja, joita täytyy huomioida sen saavutettavassa toteutuksessa.

Jos yhteystietojen täyttämistä varten siirrytään uudelle sivulle, kannattaa sille antaa oma H1-otsikko, kuten Tilaajan tiedot. Sitten alkaa lomakkeen täyttäminen. Jos käyttäjä on kirjautunut palveluun, kannattaa tarjota mahdollisuutta lomakkeen automaattiseen täyttöön tiliin tallennetuilla tiedoilla.

Huomioi nämä asiat lomakkeen kentissä:

1. Anna syötekentille kuvaavat nimilaput.
   Yhdistä ne ohjelmallisesti syötekenttiin esimerkiksi for-attribuuttia käyttäen. Muista, että näkyvän nimilappuna tulee vastata kentän ohjelmallista nimeä.
2. Anna käyttäjälle kaikki tarvittavat ohjeet tietojen syöttämiseen.
   Jos haluat asiakkaalta tietoja tietyssä muodossa, kerro siitä esimerkiksi nimilapun yhteydessä. Tästä esimerkkinä päivämäärän muotoilu (pp.kk.vvvv).
3. Jos käyttäjä tekee virheen, ilmoita niistä tekstimuodossa.
   Voit lisäksi käyttää huomioväriä tai symbolia korostamaan virhettä. Varmista vain, että värin kontrasti on riittävä! Välitä virheilmoitus myös heti apuvälineille, kun se ilmaantuu sivulle. Yhdistä virheilmoitus kenttään aria-describedby -attribuutilla.Esimerkki huonosta virheilmoituksesta, jossa virheellinen päivämäärä on osoitettu pelkällä punaisella kentän reunavärillä. Vieressä parempi versio, jossa värin lisäksi kentän alla lukee ”Päivämäärä väärässä muodossa! Anna se muodossa pp.kk.vvvv”.
4. Käytä käyttäjää koskeviin tyypillisiin lomakekenttiin autocomplete-attribuuttia.
   Tyypillisiä lomakekenttiä ovat esimerkiksi nimi, sähköpostiosoite ja kotiosoite. Attribuutin käyttö mahdollistaa lomakkeen automaattisen täyttämisen ja nopeuttaa tilauksen tekemistä. Tätä vaaditaan WCAG:n kriteerissä 1.3.5 Määrittele syötteen tarkoitus. Tästä linkistä voit katsoa autocomplete-attribuutin sallitut arvot.

Toimitustavan valinta

Toimitustavan valinnassa on tärkeää, että näppäimistön ja apuvälineen kohdistus siirtyy loogisesti seuraavan vaiheen alkuun. Riippumatta siitä, onko toimitustavan valinta

• kokonaan oma sivu
• seuraavassa lomakkeen vaiheessa
• uusi sisältö dynaamisessa lomakkeessa
• suoraa jatkoa lomakkeelle omien tietojen täytön jälkeen.

Käyttäjälle lomakkeen täytön tulee olla suoraviivaista ja luonnollista, eikä hänen tarvitse etsiä seuraavaa kohtaa sivulta itse.

Toimitustavan ja noutopisteen valinnan voi toteuttaa esimerkiksi valintapainikkeina. Lomakkeen olisi hyvä reagoida valintaan ja tarjota seuraavia vaiheita vasta valinnan jälkeen.

Esimerkiksi jos asiakas valitsee noutopisteen, saisi hän nähdä ja valita tarkan pisteen vasta ensimmäisen valinnan jälkeen. Samalla voit tarjota asiakkaalle tietoa esimerkiksi noutopisteen sijainnista ja aukioloajoista. Tällaiset tiedot ovat turhaa tietoa asiakkaalle, joka haluaa valita toimituksen kotiovelle.

Älä pyydä käyttäjää syöttämään uudelleen tietoja, jotka hän on syöttänyt jo aiemmassa vaiheessa!

Toimituksen tiedoissa tarjotaan usein mahdollisuutta toimittaa tilaus muuhun kuin tilaajan osoitteeseen. Jos tilaaja haluaa kuitenkin toimituksen samaan osoitteeseen, ei hänen pitäisi enää joutua täyttämään aiemmin annettuja tietoja uudelleen. Toisto vie käyttäjän aikaa ja lisää kognitiivista kuormaa.

Kopioi siis tiedot automaattisesti toisteisiin lomakekenttiin. Tätä vaaditaan WCAG 2.2 kriteerissä 3.3.7 Redundant Entry.

Muista toteutuksessa nämä asiat:

• Anna lomakkeen alussa ohjeet lomakkeen täyttämiseen sekä muut olennaiset tiedot.
• Merkitse pakolliset kentät selkeästi niin visuaalisesti (tekstinä) kuin ohjelmallisesti.
• Otsikoi lomakkeen eri osiot hyvin ja tee niistä nimilappu ryhmälle.
• Apuvälinekäyttäjiä varten voit hyödyntää osioiden otsikoissa fieldset-legend yhdistelmää tai aria-labelledby-attribuuttia.
• Jos annat kentälle nimen lisäksi muuta lisätietoa tai -ohjeita, yhdistä se kenttään ”aria-described-attribuutilla.
• Jos mahdollista, piilota valinnaiset tai ylimääräiset kentät käyttäjiltä esimerkiksi pudotusvalikoihin. Se vähentää kognitiivista kuormaa.

Maksutavan valinta

Ennen maksamista tarjoa käyttäjälle mahdollisuus arvioida vielä kerran oston tiedot. Se ehkäisee virheitä ja voi vähentää reklamaatioita. Samalla vastaat WCAG:n onnistumiskriteeriin 3.3.4 Virheiden ennaltaehkäisy (oikeudellinen, taloudellinen, data).

Varmista, että tietojen tarkastus ennen maksua on mahdollista myös apuvälineillä. Tilauksen yhteenveto sijaitsee usein sivun laidassa, vasta maksuvalintojen jälkeen. Apuvälinekäyttäjien voi olla vaikea havaita kohtaa järjestyksen takia.

• Maksuvaihtoehtojen nimet tulee olla tekstimuodossa sivulla – pelkät pankkien tai maksutapojen logot eivät riitä.
  • Kaikki ihmiset eivät tunnista maksuvaihtoehtoja pelkistä logoista, eikä ruudunlukija tunnista nimeämättömiä linkkejä tai kuvia.
• Maksuvaihtoehdot kannattaa toteuttaa valintapainikkeina, että asiakas ei voi vahingossa valita useita maksutapoja.
• Esitä erityisesti osamaksu- ja laskuvaihtoehtojen ehdot, todellinen vuosikorko ja muut keskeiset tiedot selkeästi tekstimuodossa.

Maksupalvelut kuuluvat lain piiriin

Esteettömyysdirektiivi koskee myös maksupalveluja. Varmista maksupalveluntarjoajilta, että heidän palvelunsa täyttävät saavutettavuusvaatimukset. Näin saavutettava ostoprosessi verkkokaupassasi ei pysähdy kolmannen osapuolen palveluun.

Jos ostoa ei pysty suorittamaan, on periaatteessa lähes kaikki verkkokauppasi saavutettavuustyö turhaa.

Voit pyytää maksupalveluntarjoajilta esimerkiksi saavutettavuusselosteen tai muun selvityksen palvelun saavutettavuuden tilasta. Jos palvelussa on puutteita, kysy, milloin puutteet tullaan korjaamaan.

Maksun jälkeen

Ohjaa käyttäjä takaisin verkkokauppaan. Siellä asiakkaalle tulisi tarjota

• tieto maksun onnistumisesta
• tilauksen yhteenveto
• perumisohjeet
• yhteystiedot.

Esitä nämä asiat asiakkaalle sekä tekstimuodossa että ohjelmallisesti apuvälinekäyttäjille. Varmista, että asiakas saa selkeästi tiedon tilauksen käsittelystä ja seuraavista vaiheista. Häntä kiinnostaa todennäköisesti tilauksen käsittelyaika sekä toimituksen etenemisen seuranta.

Muutos- ja ongelmatilanteita varten kannattaa tarjota yhteystiedot. On aina parempi, jos asiakkaalla on useita mahdollisia tapoja ottaa yhteyttä, esimerkiksi

• yhteydenottolomakkeella
• sähköpostilla
• soittamalla.

Saavutettavuus ulottuu sähköpostiviestintään

Saavutettavuus ulottuu asiakkaan ostopolussa myös tilauksen jälkeiseen aikaan. Useimmiten käyttäjälle tarjotaan tiedot tilauksesta ja tilausvahvistus sähköpostilla. Huolehdi siitä, että kaikki sisältö on kaikkien käyttäjien luettavissa kaikissa tilanteissa.

Muistilista saavutettavaan sähköpostiin:

1. Otsikoi tilausvahvistus myös ohjelmallisesti.
2. Käytä tekstin muotoiluun valmiita työkaluja.
   • Lisää kaikki teksti tekstimuodossa, esimerkiksi luettelot luetteloina myös ohjelmallisesti.
   • Varmista linkkien saavutettavuus!
3. Varmista visuaalisen sisällön saavutettavuus.
   • Tarkista kontrasti: tekstin tulee erottua taustasta kaikissa tilanteissa.
   • Varmista myös riittävä fonttikoko ja että viesti toimii ilman kuvien lataamista.
4. Ohjeista asiakasta selkeästi ja puhuttele lukijaa suoraan.
   • Ymmärrettävä sisältö vähentää turhia yhteydenottoja.
5. Testaa sähköpostiviestin saavutettavuus erikseen