Ohje
Kirjaudu sisään

Teemojen saavutettavuus

Kun mukautat teemaasi, tee suunnittelu- ja sisältövalintoja, jotka auttavat pitämään verkkokauppasi saavutettavana. Saavutettava verkkosivu on suunniteltu niin, että kaikki voivat käyttää sitä, myös vammaiset henkilöt. Kun teet verkkokauppaasi koskevia valintoja saavutettavuus huomioiden, voit tarjota osallistavan kokemuksen kaikille asiakkaillesi.

Alla olevat ohjeet on luotu verkkosisällön saavutettavuusohjeet (WCAG) huomioiden. Koska saavutettavan verkkosivun luomisessa on otettava huomioon monia tekijöitä, pelkästään alla olevien ohjeiden noudattaminen ei takaa, että verkkokauppasi on täysin saavutettava. Voit oppia lisää verkon saavutettavuudesta WCAG:n verkkosivulta tai tutustumalla alla lueteltuihin resursseihin.

Tällä sivulla

Tekstin saavutettavuus

On tärkeää, että verkkokauppasi teksti on luettavaa asiakkaille, joilla on heikko näkö tai joiden on vaikea lukea tiiviitä tekstikappaleita.

Värikontrasti

Kun muokkaat verkkokauppasi värejä, varmista, että kaikki teksti on saavutettavaa asiakkaille, jotka ovat värisokeita tai joilla on muuten heikko näkö. Nämä asiakkaat tarvitsevat riittävän värikontrastin erottaakseen asiat toisistaan visuaalisesti. Voit käyttää kontrastisuhdetyökalua kauppasi eri osien kontrastin tarkistamiseen.

Alla olevassa esimerkissä tekstin kontrastisuhde taustaansa nähden on 2,4:1, ja joidenkin asiakkaiden on vaikea lukea sitä.

Vaaleanharmaata tekstiä tasaisen valkoisella taustalla.

Seuraavassa esimerkissä tekstin kontrastisuhde on 4,8:1, ja se on monille asiakkaille helpompi lukea.

Tummanharmaata tekstiä tasaisen valkoisella taustalla.

Testaa kaiken tekstin kontrasti, mukaan lukien leipätekstin, otsikoiden, linkkien ja lomakekenttien kontrasti. Noudata seuraavia ohjeita:

  • Leipätekstin ja painiketekstin värin kontrastisuhde taustaansa nähden on vähintään 4,5:1.
  • Otsikoiden ja muun suuren tekstin (fonttikoko vähintään 24 px) värin kontrastisuhde taustaansa nähden on vähintään 3:1.
  • Kaiken kuvien päällä olevan tekstin, mukaan lukien diaesitysten, bannerien ja videoiden tekstin, kontrastisuhteen taustaansa nähden on oltava riittävä. Suuren tekstin (fonttikoko vähintään 24 px) kontrastin on oltava vähintään 3:1. Pienemmän tekstin kontrastin on oltava vähintään 4,5:1.
  • Muiden kuin tekstielementtien, kuten syöttökenttien reunojen ja kuvakkeiden, värin kontrastisuhde taustaansa nähden on vähintään 3:1.

Tekstien otsikot

Kun lisäät sivullesi otsikoita RTF-editorilla, on tärkeää pitää ne peräkkäisessä järjestyksessä (1–6). Avustavat teknologiat käyttävät otsikoita kertoakseen, miten sivun sisältö on järjestetty. Tasojen yli hyppääminen, kuten otsikkotasoa 2 seuraava otsikkotaso 4, voi olla käyttäjille hämmentävää. Noudata seuraavaa ohjetta:

  • Otsikoita käytetään peräkkäisessä järjestyksessä, eikä tasoja jätetä väliin.

Tekstin koko ja tasaus

Kun muokkaat teemasi typografia-asetuksia, varmista, että tekstisi on riittävän suurta, jotta asiakkaat voivat lukea sitä vaivattomasti.

Tekstissä tulisi myös olla yhdenmukainen sanojen ja kirjainten välistys, jotta se olisi helppolukuista. Alla olevassa esimerkissä tekstin tasaus on molempiin reunoihin, mikä luo epäyhdenmukaisen välistyksen sanojen väliin.

Molemmista reunoista tasattu tekstilohko. Jokainen tekstirivi täyttää tilan reunasta reunaan, mikä pakottaa sanojen välit vaihtelevan kokoisiksi.

Seuraavassa esimerkissä teksti on tasattu vasempaan reunaan, mikä luo yhdenmukaisen välistyksen sanojen väliin.

Vasemmalle tasattu tekstikappale, jossa on tasaiset sanavälit.

Kun mukautat tekstin kokoa ja tasausta, noudata seuraavia ohjeita:

  • Leipätekstin pienin fonttikoko on 16 px:ää vastaava koko.
  • Tekstiä ei ole tasattu molempiin reunoihin. Molemmista reunoista tasattu teksti luo epäyhdenmukaisen välistyksen sanojen väliin.

Tekstilinkit

Tekstilinkkien tulisi olla alleviivattuja, tai niillä tulisi olla jokin muu visuaalisesti erottuva tyyli tavalliseen tekstiin verrattuna. Koska joillakin asiakkailla on vaikeuksia nähdä värejä, et voi luottaa pelkkään värinmuutokseen erottaaksesi linkin tavallisesta tekstistä.

Tekstilinkkien tulisi avautua samalle välilehdelle. Uudelle välilehdelle tai uuteen ikkunaan avautuvat linkit voivat aiheuttaa hämmennystä, erityisesti mobiililaitteissa, joissa vanha ikkuna ei ole näkyvissä. Tällaiset linkit eivät ole saavutettavia kaikille asiakkaille, etenkään niille, jotka käyttävät näytönsuurennusta tai ovat teknisesti vähemmän taitavia.

Jos muokkaat teemasi tyylitaulukkoa, varmista, ettet poista tekstilinkkien tyylejä. Noudata seuraavia ohjeita:

  • Tekstilinkit on joko alleviivattu tai niillä on jokin muu visuaalinen erottava tekijä kuin pelkkä väri, jotta asiakkaat voivat erottaa linkit tavallisesta tekstistä.
  • Tekstilinkit avautuvat samalle välilehdelle, kun niitä klikataan.

Kuvien vaihtoehtoinen teksti

Kun lisäät kuvia verkkokauppaasi, on tärkeää tehdä niistä saavutettavia sokeille tai heikkonäköisille asiakkaille. Voit tehdä tämän lisäämällä vaihtoehtoisen tekstin, joka kuvaa tarkasti jokaista kuvaa. Ruudunlukuohjelmia käyttävät asiakkaat luottavat vaihtoehtoiseen tekstiin, joka välittää verkkokauppasi kuvien sisällön.

Voit lisätä vaihtoehtoista tekstiä tuotekuviisi Shopifyn ohjausnäkymässä. Voit lisätä vaihtoehtoista tekstiä teemasi muihin kuviin teemaeditorissa.

Kun lisäät kuvaan vaihtoehtoista tekstiä, hyvä käytäntö on kuvitella, että kuvailet kuvaa henkilölle, jolla on silmät kiinni. Auta häntä luomaan kuva mielessään. Tapa, jolla kuvailet kuvan, riippuu myös verkkosivusi asiayhteydestä. Voit esimerkiksi kuvailla kuvaa eri tavalla, jos yrityksesi on matkatoimisto kuin jos se on retkeilyvarustekauppa. Tarkastele seuraavaa kuvaa:

Kaksi reppua kantavaa ystävystä käsivarret toistensa ympärillä katsovat merelle

Matkatoimiston tapauksessa voisit mainita maan ja alueen, jossa ystävykset matkustavat, sekä meren nimen, jota he katsovat. Retkeilyvarustekaupan tapauksessa taas voisit keskittyä ystävysten reppujen brändeihin ja ominaisuuksiin.

Jos yrityksesi on matkatoimisto, huono esimerkki vaihtoehtoisesta tekstistä voisi olla ”Kaksi ihmistä meren edessä”. Saman toimiston tapauksessa hyvä esimerkki vaihtoehtoisesta tekstistä voisi olla ”Kaksi ystävystä matkustaa Lagosissa Portugalissa ja katselee Praia do Camilon hiekkaista poukamaa aurinkoisena päivänä”.

Diaesitysten ja videoiden saavutettavuus

Kun lisäät videoita verkkokauppaasi, varmista, että otat huomioon heikkonäköisten, kuurojen tai huonokuuloisten asiakkaiden tarpeet sekä niiden asiakkaiden tarpeet, jotka saattavat olla alttiita tasapainoelimen häiriöille.

Jotkut näistä asiakkaista luottavat ruudunlukuohjelmien puhesynteesiin, joka lukee ääneen verkkosivun sisällön. Videoiden ja musiikin ylimääräinen ääni voi vaikeuttaa kokemusta, erityisesti silloin, kun se on odottamatonta. Kuuroja tai huonokuuloisia asiakkaita varten videoihin kannattaa lisätä tekstitys, jotta hekin voivat käyttää sisältöä.

Asiakkaat, joilla on tasapainoelimen häiriöitä, voivat kokea huimausta liikkuvasta sisällöstä. Tämän vuoksi on tärkeää, että diaesitykset ja videot eivät käynnisty automaattisesti ja että asiakas voi ohjata diaesitystä ohjauspainikkeilla.

Diaesitykset

Kun lisäät diaesityksen verkkokauppaasi, noudata seuraavia ohjeita:

  • Diaesitykset eivät käynnisty automaattisesti.
  • Jos diaesitykset käynnistyvät automaattisesti, niissä on oltava ohjaimet, joiden avulla asiakkaat voivat keskeyttää, siirtyä eteenpäin tai pysäyttää diaesityksen.

Videot

Kun lisäät videon verkkokauppaasi, noudata seuraavia ohjeita:

  • Videot eivät käynnisty automaattisesti.
  • Jos videot käynnistyvät automaattisesti, niiden ääni on mykistetty.
  • Jos video sisältää ääntä, sen on oltava kokonaan näkyvissä, eivätkä muut sivun elementit saa peittää sitä. Tällöin tekstitys pysyy näkyvissä.
  • Jos video sisältää dialogia, siitä on oltava saatavilla tekstivastine. Se voi olla joko samalla sivulla tai linkkinä erilliselle sivulle.

Nämä ohjeet koskevat myös diaesityksessä olevia videoita.

Näppäimistötuki

Asiakkaat, joilla on näkö- tai motorisia rajoitteita, saattavat käyttää näppäimistöä navigoidakseen ja suorittaakseen tehtäviä verkossa. Nämä asiakkaat luottavat visuaaliseen ilmaisimeen, joka kertoo, missä kohtaa verkkosivua näppäimistön kohdistus on. Alla olevassa esimerkissä Sähköposti-kentässä on visuaalinen kohdistuksen ilmaisin:

Verkkokaupan asiakkaan kirjautumisnäyttö, jossa on sähköpostin ja salasanan lomakekentät. Sähköposti-kentän ympärillä on sininen reunus.

Jos muokkaat teemasi tyylitaulukkoa, varmista, ettet poista näppäimistön kohdistustyyliä mistään sivun elementistä. Noudata seuraavaa ohjetta:

  • Kaikilla interaktiivisilla sivuelementeillä on selkeä visuaalinen ilmaisin, kun näppäimistön kohdistus on niissä. Tällaisia elementtejä ovat muun muassa linkit, painikkeet ja lomakekentät.

Resurssit

Jos haluat lisätietoja verkon saavutettavuudesta tässä artikkelissa käsiteltyjen aiheiden osalta, tutustu seuraaviin resursseihin.

Värikontrastia koskevat resurssit

Tekstiä koskevat resurssit

Vaihtoehtoisen tekstin resurssit

Diaesitysten ja videoiden resurssit

Näppäimistötuen resurssit

Tässä osiossa