Joka kerta, kun vammainen asiakas ei pysty käyttämään kassaasi, täyttämään tuotesuodatinta tai lukemaan tuotekuvauksiasi, menetät myynnin. Yli joka neljännellä yhdysvaltalaisella aikuisella on jonkinlainen vamma. Se ei ole pieni markkinasegmentti. Se on sinun markkinasi.
Verkkosivuston saavutettavuus ei ole vain eettinen kysymys. Se on lakisääteinen vaatimus. Americans with Disabilities Act (ADA) vaatii, että yritykset tekevät palvelunsa saavutettaviksi vammaisille ihmisille. Tämä koskee myös verkkokauppoja. Tuhannet verkkosivustot saavat vuosittain oikeudellisia vaatimuksia saavutettavuusrikkomuksista, ja verkkokaupat ovat useimmin kohteena. Tässä artikkelissa käydään läpi, mitä saavutettavuus tarkoittaa, miksi sillä on merkitystä kaupallesi, mitä laki vaatii ja miten sen toteuttaa ilman kalliita erikoistyökaluja.
Mitä verkkosivuston saavutettavuus on?
Verkkosivuston saavutettavuus tarkoittaa, että sivustosi on kaikkien käytettävissä, myös vammaisten. Tähän kuuluvat ihmiset, jotka ovat sokeita tai heikkonäköisiä, kuuroja tai huonokuuloisia, joilla on liikuntavamma, joka vaikeuttaa hiiren käyttöä, joilla on kognitiivisia tai oppimisvaikeuksia tai joilla on muita tiloja, jotka vaikuttavat siihen, miten he käyttävät verkkoa.
Saavutettavat sivustot toimivat apuvälineteknologioiden kanssa, kuten ruudunlukijoiden (ohjelmisto, joka lukee tekstin ääneen), pelkän näppäimistön avulla tapahtuvan navigoinnin (ihmisille, jotka eivät voi käyttää hiirtä) ja suurennustyökalujen kanssa. Saavutettava sivusto käyttää myös selkeää kieltä, riittävää värikontrastia, oikeaa otsikkorakennetta ja lomakkeiden nimikkeitä, jotka ruudunlukijat ymmärtävät.
Keskeinen periaate: asiakkaidesi pitää pystyä tekemään se, minkä vuoksi tulivat. Heidän pitää pystyä selaamaan, suodattamaan, lukemaan kuvauksia, lisäämään tuotteita ostoskoriin ja viimeistelemään kassa riippumatta siitä, mitä apuvälineteknologiaa tai mukautuksia he käyttävät.
Mikä ADA on ja miksi se koskee kauppaasi?
Americans with Disabilities Act (ADA), joka hyväksyttiin vuonna 1990, on Yhdysvaltain liittovaltion laki, joka kieltää vammaisten ihmisten syrjinnän. ADA:n osasto III vaatii, että kaikki yleisölle avoimet yritykset tarjoavat vammaisille yhdenvertaisen pääsyn. Tähän kuuluvat verkkosivustot ja verkkopalvelut. Laissa ei ole poikkeuksia pienille yrityksille tai verkkokauppiaille.
Verkkokauppasi lasketaan ADA:n mukaan yleisölle avoimeksi toimipaikaksi. Se tarkoittaa, että verkkosivustosi on oltava saavutettava. Et voi perustella, että kauppasi on liian pieni, liian uusi tai että saavutettavuus on liian kallista. Laki koskee sinua. Tuomioistuimet ovat johdonmukaisesti päättäneet, että ADA koskee verkkosivustoja, ja Yhdysvaltain oikeusministeriö on todennut, että verkkosivuston saavutettavuus on kansalaisoikeuskysymys, ei vapaaehtoinen.
WCAG 2.1 -taso AA: saavutettavuusstandardi
Verkon saavutettavuusstandardia, jota käytetään oikeustapauksissa ja vaatimustenmukaisuusvaatimuksissa, kutsutaan nimellä WCAG (Web Content Accessibility Guidelines) 2.1 -taso AA. WCAG:tä ylläpitää World Wide Web Consortium (W3C), voittoa tavoittelematon järjestö, joka asettaa verkon standardit.
WCAG 2.1 -taso AA sisältää ohjeita neljällä pääalueella:
Havaittava: käyttäjät näkevät tai kuulevat sisältösi
Sisältösi on esitettävä tavalla, jonka asiakkaat voivat havaita. Se tarkoittaa tekstikuvausten (alt-tekstien) antamista kaikille tuotekuville, tekstitysten lisäämistä videoihin, sen varmistamista, että tekstillä ja painikkeilla on riittävä värikontrasti (vähintään 4.5:1 tavalliselle tekstille), ja sellaisen sisällön välttämistä, joka vilkkuu useammin kuin 3 kertaa sekunnissa ja voi aiheuttaa epilepsiakohtauksia.
Käytettävä: käyttäjät voivat navigoida ja toimia kaupassasi
Käyttäjien on voitava navigoida kaupassasi pelkällä näppäimistöllä (hiirtä ei vaadita). Linkkien ja painikkeiden on oltava käytettävissä näppäimistöllä. Lomakkeissa on oltava selkeät nimikkeet, jotka ruudunlukijat ymmärtävät. Kauppasi ei saa jumittaa näppäimistön käyttäjiä päättymättömiin silmukoihin tai vaatia ajastettuja toimintoja, joita käyttäjät eivät voi säätää. Valikkokohtien ja lomakekenttien on oltava helppo löytää ja käyttää.
Ymmärrettävä: käyttäjät ymmärtävät, mitä kauppasi sanoo ja tekee
Kauppasi on oltava helppo ymmärtää. Käytä selkeää kieltä ja lyhyitä lauseita. Selitä ammattisanat ensimmäisellä käyttökerralla. Järjestä sivusi loogisesti oikeilla otsikkorakenteilla (yksi H1 sivua kohden, sen jälkeen H2:t ja H3:t järjestyksessä). Selitä lomakkeiden virheilmoitukset selvästi. Pidä sivustosi yhdenmukaisena, jotta käyttäjät osaavat ennakoida, miten navigointi ja toiminnot toimivat.
Toimintavarma: kauppasi toimii apuvälineteknologioiden kanssa
Koodisi on kirjoitettava oikein, jotta ruudunlukijat ja muut apuvälineet ymmärtävät sen. Se tarkoittaa oikean semanttisen HTML-merkinnän käyttöä (painikkeet ovat oikeita button-elementtejä, eivät painikkeilta näyttäviksi muotoiltuja div-elementtejä), oikeaa otsikkohierarkiaa ja ARIA-nimikkeitä siellä, missä niitä tarvitaan monimutkaisten interaktiivisten elementtien kuvaamiseen. Kauppasi pitäisi toimia eri selaimilla ja laitteilla.
Yleisimmät saavutettavuusesteet verkkokaupoissa
Nämä ovat yleisimmät verkkokaupoista löytyvät saavutettavuusongelmat:
Puuttuvat tai huonot tuotekuvien alt-tekstit
Monissa verkkokaupoissa tuotekuvilla ei ole alt-tekstiä tai se on epämääräinen, kuten "kuva" tai "tuotekuva". Ruudunlukijoiden käyttäjät eivät näe kuvia. Alt-tekstin pitää kuvata, mikä kuvassa on tärkeää. Punaiselle t-paidalle hyvä alt-teksti on "punainen puuvillainen pyöreäkauluksinen t-paita rintataskulla", ei "paita" tai "punainen paitakuva". Tuotevaihtoehtojen valitsimessa alt-teksti voi kuvata värimallin tai tyylivaihtoehdon selkeästi. Jokainen tuotekuva tarvitsee tarkan, kuvailevan alt-tekstin.
Lomakkeet ilman kunnollisia nimikkeitä
Kun lomakekentällä (sähköpostikenttä, puhelinkenttä, osoitekenttä) ei ole siihen liitettyä nimikettä tai nimike on vain visuaalinen paikkamerkkiteksti, ruudunlukijoiden käyttäjät eivät tiedä, mitä kenttään pitää kirjoittaa. Oikein nimetyissä lomakkeissa on näkymättömät mutta saavutettavat nimike-elementit, jotka kertovat ruudunlukijoille, mihin kukin kenttä on tarkoitettu.
Näppäimistönavigointi puuttuu
Joillakin sivustoilla navigointi tai oston viimeistely vaatii hiirtä. Vain näppäimistöä käyttävät eivät voi käyttää alasvetovalikoita, eivät näe, mikä kohde on valittuna, tai eivät voi siirtyä lomakekenttien välillä Tab-näppäimellä loogisessa järjestyksessä. Jokaisen toiminnon pitäisi olla käytettävissä näppäimistöllä. Näppäimistön kohdistuksen pitäisi näkyä sivulla, jotta käyttäjät tietävät, missä he ovat.
Huono värikontrasti
Vaaleanharmaa teksti valkoisella pohjalla voi olla sinulle luettavaa. Heikkonäköisille se ei ole. WCAG-taso AA vaatii vähintään 4.5:1 kontrastisuhteen tavalliselle tekstille. Painikkeiden, linkkien ja kaiken tekstin, jonka käyttäjien täytyy lukea, on täytettävä tämä standardi. Tarkista kontrastisi ilmaisella kontrastintarkistimella.
Sekava otsikkorakenne
Ruudunlukijoiden käyttäjät liikkuvat sivuilla usein hyppäämällä otsikoiden välillä. Jos sivusi hyppää H1:stä H3:een ja sitten H2:een tai käyttää otsikoita vain ulkoasun tyylittelyyn, ruudunlukijat tuottavat sekavan kokemuksen. Käytä otsikoita loogisessa järjestyksessä sivun jäsentämiseen. Yksi H1 sivua kohden, sitten H2:t pääosioille ja H3:t alaosioille. Älä koskaan ohita otsikkotasoja.
Painikkeet ja linkit, joiden tarkoitus on epäselvä
Painike, jossa lukee "klikkaa tästä", ei kerro ruudunlukijoiden käyttäjille mitään siitä, mitä klikkaaminen tekee. Käytä kuvailevaa painiketekstiä: "Lisää ostoskoriin", "Näytä arvostelut", "Siirry kassalle". Jos tarvitset painikkeen kuvakkeella, lisää teksti tai ARIA-nimike, joka kuvaa toiminnon. Jokaisella interaktiivisella elementillä on oltava selkeä, kuvaileva nimike.
Saavuttamattomat alasvetovalikot ja suodattimet
Tuotesuodatinvalikot, kategorioiden alasvetovalikot ja lajitteluvaihtoehdot, jotka toimivat vain hiirellä, ovat yleisiä esteitä. Näppäimistön käyttäjien täytyy päästä niihin samalla tavalla. Monimutkaiset interaktiiviset komponentit tarvitsevat ARIA-rooleja ja näppäimistötuen toimiakseen apuvälineteknologian kanssa.
Miten teet kaupastasi saavutettavan
Saavutettavuus ei vaadi kalliin konsultin palkkaamista tai erikoisohjelmiston ostamista. Aloita perusasioista:
1. Kirjoita alt-tekstit kaikille tuotekuville
Tämä on yksittäinen vaikuttavin muutos. Käy tuotteesi läpi ja kirjoita kuvaileva alt-teksti jokaiselle kuvalle. Kuvaa tuote, sen väri, materiaali, kunto ja erottuvat piirteet. Testaa alt-tekstisi lukemalla se ääneen. Ymmärtääkö joku, joka ei näe kuvaa, tuotteen? Jos ei, paranna sitä.
2. Varmista, että kaikissa lomakkeissa on kunnolliset nimikkeet
Jokaisella lomakekentällä on oltava koodissasi siihen liitetty nimike-elementti. Älä luota paikkamerkkitekstiin. Poista paikkamerkkiteksti, kun kenttä saa kohdistuksen, tai pidä se mutta lisää oikea nimike. Valintaruutu- ja valintapainikeryhmät ryhmitellään ja nimetään selkeästi. Lomakkeiden virheilmoitusten pitää olla täsmällisiä ja kertoa käyttäjille tarkalleen, mitä korjata.
3. Varmista, että näppäimistönavigointi toimii
Testaa koko kauppasi pelkällä näppäimistöllä. Siirry Tab-näppäimellä. Pääsetkö jokaiseen painikkeeseen, linkkiin ja lomakkeeseen? Näetkö, missä kohdistus on? Onko Tab-järjestys looginen (vasemmalta oikealle, ylhäältä alas)? Jos näppäimistön käyttäjät jumittuvat tai eivät pääse johonkin, korjaa se. Useimmat saavutettavuusesteet ovat näppäimistöesteitä.
4. Tarkista ja paranna värikontrastia
Käytä ilmaista kontrastintarkistustyökalua tuotesivullasi, painikkeissa, linkeissä ja lomakkeiden nimikkeissä. Varmista, että teksti täyttää 4.5:1 kontrastin tavalliselle tekstille ja 3:1 suurelle tekstille (18 pt tai suurempi). Älä luota pelkkään väriin tiedon välittämisessä (esim. "punaiset tuotteet ovat alennuksessa"). Lisää tekstinimikkeitä tai kuvakkeita tukemaan merkitystä.
5. Korjaa otsikkorakenteesi
Käy sivusi rakenne läpi. Sinulla pitäisi olla yksi H1 (sivun pääotsikko), sitten H2:t pääosioille ja H3:t alaosioille. Älä koskaan ohita otsikkotasoja. Käytä otsikoita sisällön loogiseen jäsentämiseen, älä ulkoasun tyylittelyyn. Jos tarvitset tyylitellyn tekstin, joka ei ole oikea otsikko, käytä div-elementtiä ja CSS:ää, älä otsikkotagia.
6. Kirjoita selkeät linkki- ja painiketekstit
Ruudunlukijoiden käyttäjät avaavat usein luettelon kaikista sivun linkeistä. Linkkien pitäisi olla ymmärrettäviä ilman ympäröivää tekstiä. "Lue lisää toimitusvaihtoehdoista" on parempi kuin "lue lisää". "Näytä tuotearvostelut" on parempi kuin "lue arvostelut". Painikkeiden pitäisi kuvata toimintonsa selvästi: "Lisää ostoskoriin", "Siirry kassalle", "Tallenna myöhemmin".
7. Testaa apuvälineteknologialla
Lataa ilmainen ruudunlukija (esimerkiksi Windowsille) tai käytä Macin ja iPhonen sisäänrakennettuja saavutettavuustyökaluja. Kuuntele, miltä sivustosi kuulostaa. Pystytkö viimeistelemään ostoksen pelkällä näppäimistöllä ja ruudunlukijalla? Tämä on saavutettavuuden todellinen testi. Monet esteet tulevat ilmeisiksi, kun yrität käyttää omaa kauppaasi sokeana tai vain näppäimistöä käyttävänä käyttäjänä.
Saavutettavuuden testaus ja auditointi
Kun olet tehnyt muutokset, testaa kauppasi saavutettavuus. Aloita näillä työkaluilla:
Automaattiset testaustyökalut
Ilmaiset työkalut, kuten verkkopohjaiset saavutettavuustarkistimet ja Lighthouse (sisäänrakennettuna Chromeen), skannaavat sivusi ja merkitsevät yleiset ongelmat, kuten puuttuvat alt-tekstit, heikon kontrastin ja huonon otsikkorakenteen. Nämä työkalut löytävät ehkä 30 % saavutettavuusongelmista, joten ne ovat lähtökohta, eivät koko vastaus. Käytä niitä nopeaan skannaukseen, mutta älä oleta, että puhdas tulos tarkoittaa täysin saavutettavaa sivustoa.
Näppäimistötestaus
Siirry sivustollasi vain Tab-, Shift+Tab-, Enter- ja nuolinäppäimillä. Ei hiirtä. Tämä on tärkein testi. Pystytkö suorittamaan jokaisen tehtävän? Jumittuuko jokin? Näkyykö kohdistus? Onko Tab-järjestys järkevä? Jos näppäimistönavigointi ei toimi, kauppasi ei täytä saavutettavuusstandardia riippumatta siitä, mitä automaattiset työkalut sanovat.
Ruudunlukijatestaus
Kuuntele sivustoasi ruudunlukijalla (Windowsilla ilmaisella ruudunlukijalla tai Macilla sisäänrakennetulla). Kuvaako ruudunlukija tuotekuvat selkeästi? Ymmärrätkö lomakkeiden nimikkeet? Onko navigointi järkevä? Onko selittämättömiä painikkeita tai linkkejä? Ammattimaisissa saavutettavuusauditoinneissa käytetään usein sokeita testaajia, mutta suuret ongelmat löydät myös tekemällä perustestauksen ruudunlukijalla itse.
Koodin manuaalinen tarkistus
Tarkista HTML-koodisi semanttinen merkintä. Painikkeiden pitäisi olla button-elementtejä, ei tyyliteltyjä div-elementtejä. Linkkien pitäisi olla anchor-tageja. Lomakekentät tarvitsevat label-elementit. Otsikoiden pitäisi olla h1-, h2- ja h3-tageja järjestyksessä, ei h1, h3, h2. Hyvä semanttinen HTML on saavutettavuuden perusta.
Miten WEMASY auttaa saavutettavuudessa
WEMASYn sivustonrakentaja on rakennettu saavutettavuus mielessä. Alustassa on semanttinen HTML-rakenne, oikea lomakkeiden käsittely saavutettavine nimikkeineen, näppäimistöllä käytettävät valikot ja ostoskorin toiminnot sekä työkalut alt-tekstien lisäämiseen kuviin helposti. Kun rakennat kauppasi WEMASYllä, taustalla oleva HTML on jo rakennettu saavutettavuutta ajatellen. Et peri alustalta saavuttamatonta koodia.
Tämä ei tarkoita, että sivustosi on automaattisesti täysin saavutettava: sinun pitää silti kirjoittaa hyvät alt-tekstit, käyttää selkeää kieltä ja testata oikeilla käyttäjillä. WEMASYn perusta poistaa kuitenkin monia yleisiä esteitä, jotka vaivaavat muita verkkokauppa-alustoja. Katso, mitä kukin paketti sisältää, hinnoittelusivultamme.
Saavutettavuuden liiketoimintahyöty
Lakisääteisen vaatimustenmukaisuuden lisäksi saavutettavuus on hyvää liiketoimintaa. Saavutettavat sivustot ovat helpommin käytettäviä kaikille, eivät vain vammaisille. Selkeä kieli, hyvä kontrasti, looginen rakenne ja näppäimistönavigointi hyödyttävät vanhempia käyttäjiä, mobiililaitteiden käyttäjiä, meluisissa ympäristöissä olevia käyttäjiä ja hitaan internetyhteyden käyttäjiä. Vammaisille saavutettava sivusto on parempi sivusto kaikille käyttäjille.
Vielä suoremmin: yksi neljästä yhdysvaltalaisesta aikuisesta on vammainen. Se on noin 65 miljoonaa ihmistä. Jos kauppasi ei ole saavutettava, suljet ulos valtavan markkinan. Jätät myös rahaa pöydälle. Sokeat ja heikkonäköiset ostajat käyttävät verkossa miljardeja. He haluavat ostaa kaupastasi. Mahdollista se.
Oikeudellisesti riski on todellinen. Vuonna 2025 nostettiin yli 5,000 verkkosivustojen saavutettavuuteen liittyvää kannetta. Verkkokaupat vastaavat 70 %:sta näistä tapauksista. Saavutettavuusrikkomuksia koskeva vaatimuskirje maksaa aikaa ja oikeudenkäyntikuluja sen torjumiseen. Sovinto ilman taustalla olevien ongelmien korjaamista kutsuu vain lisää vaatimuksia. Viisainta on korjata sivustosi nyt, dokumentoida toimesi ja välttää ongelma kokonaan.
Aloittaminen
Jos kauppasi ei ole saavutettava, älä panikoi. Aloita vaikuttavimmista korjauksista: alt-tekstit, näppäimistönavigointi ja kontrasti. Nämä kolme muutosta poistavat suurimman osan saavutettavuusesteistä. Testaa näppäimistönavigoinnilla ja ruudunlukijalla. Korjaa löytämäsi ongelmat. Dokumentoi työsi. Testaa uudelleen säännöllisesti, etenkin kun muutat sivustoasi. Saavutettavuus ei ole kertaluonteinen projekti, vaan jatkuva käytäntö, jossa rakennetaan kaikki huomioiden.
UKK
Koskeeko ADA todella pientä kauppaani?
Kyllä. ADA koskee kaikkia yleisölle avoimia yrityksiä koosta riippumatta. Pienille yrityksille ei ole poikkeusta. Jos myyt verkossa, verkkosivustosi kuuluu lain piiriin.
Mitä eroa on saavutettavalla ja vaatimukset täyttävällä?
Saavutettava tarkoittaa, että vammaiset ihmiset pystyvät oikeasti käyttämään sivustoasi. Vaatimukset täyttävä tarkoittaa, että se täyttää teknisen standardin, kuten WCAG 2.1 -tason AA. Sivusto voi teknisesti täyttää standardin ja olla silti vaikea käyttää, tai se voi olla hyvin käytettävä mutta ei teknisesti täydellinen. Tavoitteena on molemmat: saavutettava käytännössä ja standardin mukainen.
Pitääkö minun palkata joku tekemään kauppani saavutettavaksi?
Ei välttämättä. Jos kaupassasi on perusongelmia (puuttuvat alt-tekstit, huono kontrasti, rikkinäinen näppäimistönavigointi), voit korjata monet niistä itse. Kirjoita alt-tekstit, tarkista kontrasti ilmaisella työkalulla ja testaa näppäimistöllä ja ruudunlukijalla. Jos sivustosi on rakennettu nykyaikaiselle alustalle, jossa on oikea HTML-rakenne, saavutettavuuden korjaaminen on usein suoraviivaista. Suuremmat, monimutkaisia toimintoja sisältävät sivustot voivat hyötyä ammattilaisen auditoinnista, mutta pienet kaupat voivat usein korjata suurimmat esteensä itse.
Mitä jos saan saavutettavuutta koskevan vaatimuskirjeen?
Suhtaudu siihen vakavasti. Älä sivuuta sitä. Vaatimuskirjeissä annetaan yleensä määräaika ongelmien korjaamiseen. Työskentele kehittäjäsi tai alustan tuen kanssa korjataksesi mainitut rikkomukset. Dokumentoi kaikki, mitä teet. Voit myös kysyä neuvoa saavutettavuuslainsäädäntöön perehtyneeltä lakimieheltä. Sovinto ilman taustalla olevien ongelmien korjaamista ei ole pitkän aikavälin ratkaisu: korjaa sivusto.
Hidastaako saavutettavuuden parantaminen sivuston latausaikoja?
Ei. Saavutettavuus ja suorituskyky ovat erillisiä asioita. Sivusto voi olla nopea ja saavuttamaton tai hidas ja saavutettava. Semanttinen HTML (saavutettavuuden vaatima koodirakenne) on usein kevyempää ja nopeampaa kuin huonosti kirjoitettu koodi. Monilla saavutettavuusparannuksilla, kuten oikealla otsikkorakenteella ja selkeällä kielellä, ei ole vaikutusta nopeuteen.
Kattaako WCAG 2.1 -taso AA kaiken, mitä tarvitsen lain noudattamiseen?
WCAG 2.1 -taso AA on useimmissa saavutettavuutta koskevissa oikeustapauksissa viitattu standardi. Tuomioistuimet ovat käyttäneet sitä mittapuuna sille, onko verkkosivusto saavutettava. WCAG 2.1 -tason AA noudattaminen on paras tapa osoittaa, että otit saavutettavuuden vakavasti ja täytit laillisen standardin.
Aiheeseen liittyvää luettavaa: Tietosuojaseloste, evästesuostumus ja GDPR verkkokaupassasi ja Näin suojaat brändisi ja tuotteesi kopioinnilta.