Swappien verkkokauppa ja WCAG – käyttäjäkokemus
Sokea käyttäjä ei pysty ostamaan puhelinta Swappiesta. Ostoprosessi pysähtyy tuotevalinnoissa, koska ne on toteutettu elementeillä, joita ruudunlukija ei tunnista.
Käyttäjäkokemus — “5 havaintoa: voiko sokea oikeasti ostaa puhelimen?”
-
Osittainen
Etusivu
Navigaatiossa kymmeniä linkkejä. Puuttuu ”Siirry sisältöön”-linkki.
-
Onnistui
Tuotehaku
Tuotelinkit olivat selkeitä ja klikkaus toimi.
-
Epäonnistui
Tuotevalinnat
Muistikapasiteetti, väri ja kunto toteutettu <span>-elementeillä. Ei reagoi näppäimistöön.
-
Epäonnistui
Hinnat
Hinnanmuutos päivittyi näytöllä, VoiceOver ei ilmoittanut. Puuttuu aria-live.
-
Epäonnistui
SPA-navigointi
Sivun vaihtuessa fokus palaa alkuun. Navigaatio läpikäytävä joka kerta.
Kriittiset löydökset
Löydökset on ryhmitelty vaikuttavuuden mukaan. Yksityiskohtaiset korjauskoodit ovat teknisessä liitteessä.
| # | Ongelma | Vaikutus | Korjaus |
|---|---|---|---|
| 1 | Tuotevalinnat <span>-elementeillä | Ostoprosessi pysähtyy | <input type=”radio”> + <label> |
| 2 | Hinnat eivät välity ruudunlukijalle | Riski tilata kalliimpia tuotetilaus | aria-live=”polite” hintaelementtiin |
| 3 | SPA-fokus palaa sivun alkuun | Navigaatio läpikäytävä joka sivulla | useEffect + fokus H1:iin + blur |
| 4 | Puuttuu ”Siirry sisältöön”-linkki | Navigaatio alusta joka sivulla | Skip-link + <main id> |
Liitteet
Miksi Swappien verkkokauppa tarvitsee WCAG-saavutettavuuden?
Swappien kaltaiset verkkokaupat palvelevat 15 prosenttia väestöstä, jolla on jokin vamma tai toimintahäiriö. WCAG 2.1 -standardin mukaan saavutettava verkkosivusto parantaa käyttäjäkokemusta kaikille käyttäjille. Tilastokeskuksen 2023 raportin mukaan digitaaliset ostokanavat ovat entistä tärkeämpi palvelu suomalaisille, mikä tekee saavutettavuudesta kriittisen liiketoiminnallisen tekijän.
Mitä saavutettavuus tarkoittaa verkkokauppakontekstissa?
Saavutettava verkkokauppa tarkoittaa, että kaikki käyttäjät — mukaan lukien näkövammaiset, kuulovammaiset ja liikuntavammaiset — voivat navigoida sivustolla, etsiä tuotteita, lukea tuotetietoja ja suorittaa ostokset. WCAG 2.1 -standardin mukaan sivuston tulee tarjota riittävät värikontrastitusteet, näppäimistönavigaatio, tekstivaihtoehdot kuville ja selkeä sivuston rakenne.
Mitä konkreettisia löydöksiä Swappien auditoinnissa havaittiin?
Swappien auditoinnissa (31.1.2026, WCAG 2.1 AA) löydettiin 4 kriittistä saavutettavuusongelmaa: tuotevalinnat toteutettu <span>-elementeillä joita näppäimistö ei tunnista, hinnanmuutokset eivät välity ruudunlukijalle (puuttuu aria-live), SPA-navigoinnissa fokus palaa sivun alkuun joka sivunvaihdolla, ja sivulta puuttuu ”Siirry sisältöön” -skip-linkki. Kriittisin löydös: sokea käyttäjä ei pysty suorittamaan ostosta loppuun.
Mitä konkreettisia parannuksia Swappielle suositellaan?
Tärkein korjaus: tuotevalinnat (muistikapasiteetti, väri, kunto) tulee muuttaa <input type=”radio”> + <label> -elementeiksi. Toiseksi hintaelementtiin lisätään aria-live=”polite”, jolloin ruudunlukija ilmoittaa hinnanmuutoksesta. Kolmanneksi SPA-navigointiin lisätään useEffect-koukku, joka siirtää fokuksen H1-otsikkoon sivun vaihtuessa. Neljänneksi lisätään skip-link ja <main id> -ankkuri nopeaa sisältöön siirtymistä varten.
Kuinka saavutettavuusparannukset hyödyttävät liiketoimintaa?
Saavutettavan verkkokaupan kautta tavoitetaan laajempi asiakaskunta ja vähennetään palautuksia sekä asiakaspalvelun kuormitusta. Saavutettavuusparannukset parantavat myös hakukoneoptimointia ja sivuston käytettävyyttä mobiililla. Swappien kohdalla kriittisimpien puutteiden korjaaminen mahdollistaa näkövammaisten asiakkaiden itsenäisen ostoprosessin — merkittävä parannus sekä käyttäjäkokemukseen että konversioon.
Lähteet: WCAG 2.1, Web Accessibility Initiative (WAI), W3C; Tilastokeskus: Suomalaiset digitaaliset ostokanavat, 2023; WP Saavutettavuus: Swappie-auditointi 31.1.2026
