Mikä on saavutettavuus? WCAG ja esteetön suunnittelu selitettynä

Verkon saavutettavuus tarkoittaa sivustojen ja sovellusten rakentamista niin, että vammaiset ihmiset voivat käyttää niitä – olivatpa he sokeita ja käyttävät ruudunlukijaa, eivät voi käyttää hiirtä, heikkonäköisiä tai värisokeita, kuulovammaisia tai kognitiivisesti tai oppimisessa vammaisia. Käytännössä se tarkoittaa esimerkiksi kuvien tekstivaihtoehtoja, riittävää värikontrastia, lomakkeita, joilla on kunnolliset nimilaput, ja sitä, että kaikki toimii pelkällä näppäimistöllä. Sen kansainvälinen standardi on WCAG, Web Content Accessibility Guidelines -ohjeet W3C:ltä.

Saavutettavuudesta käytetään usein lyhennettä a11y – ”a”, 11 kirjainta, ”y”.

Miksi saavutettavuus on tärkeää, kun rakennat tekoälyllä

Tekoälyrakentajat osaavat tehdä sovelluksia, jotka näyttävät oikeilta. Saavutettavuus koskee pitkälti sitä, mitä kuvakaappauksesta ei näe: onko painike oikeasti painike, onko kentässä nimilappu, jonka ruudunlukija voi lukea, pääseekö valikkoon Tab-näppäimellä.

Siksi on tärkeää kysyä:

• Sitä on helppo unohtaa. Mukautettu pudotusvalikko voi näyttää täydelliseltä ja olla mahdoton käyttää ilman hiirtä. Et huomaa sitä ellet testaa.
• Sen oikein tekeminen aikaisin on halvempaa. Saavutettavien komponenttien pyytäminen ensimmäisestä kehotteesta maksaa lähes ei mitään. Valmiin sovelluksen jälkikäteen korjaaminen tarkoittaa jokaisen näkymän koskemista.
• Se hyödyttää kaikkia. Tekstitykset auttavat meluisissa paikoissa, hyvä kontrasti auttaa puhelimella auringonvalossa, ja selkeät nimilaput auttavat kaikkia täyttämään lomakkeita nopeammin.
• Se liittyy hakukoneoptimointiin. Oikeat otsikot, kuvaavat linkit ja alt-tekstit auttavat hakukoneita ymmärtämään sivujasi – katso SEO tekoälyllä rakennetuille verkkosivuille.
• Se voi olla pakollista. Riippuen siitä, missä toimit ja keille palvelet, saavutettavuus voi olla lakisääteinen velvoite.

Arkinen vertaus

Ajattele rakennuksen sisäänkäyntiä.

Portaat toimivat monille ihmisille. Luiska toimii pyörätuolin käyttäjille – ja myös vanhemmille lastenvaunujen kanssa, kuljetustyöntekijöille kärryjen kanssa ja matkustajille matkalaukkujen kanssa. Automaattiovet, selkeät opasteet, hissinapit pistekirjoituksella ja hyvä valaistus poistavat esteen jollekin.

Verkon saavutettavuus on sama ajatus digitaalisille tiloille: sovelluksesi luiskat, opasteet ja kaiteet. Ja kuten rakennuksessa, luiska on paljon helpompi sisällyttää suunnitelmiin kuin lisätä jälkikäteen, kun betoni on kovettunut.

WCAG lyhyesti

WCAG:n julkaisee W3C:n Web Accessibility Initiative. Nykyinen versio on WCAG 2.2, joka julkaistiin ensimmäisen kerran lokakuussa 2023. Se on taaksepäin yhteensopiva: sisältö, joka täyttää WCAG 2.2:n, täyttää myös 2.1:n ja 2.0:n, ja W3C kannustaa käyttämään uusinta versiota. WCAG 2.2 on myös hyväksytty kansainväliseksi standardiksi ISO/IEC 40500:2025. Hyvin erilainen WCAG 3 on kehitteillä varhaisena luonnoksena, ei valmiina standardina.

WCAG on jäsennelty neljän periaatteen mukaan, joita usein muistetaan lyhenteellä POUR:

Jokaisella ohjeella on testattavia onnistumiskriteerejä kolmella tasolla:

• Taso A – vähimmäisvaatimus. Näiden epääminen estää joitakin ihmisiä kokonaan.
• Taso AA – tavoitetaso, ja se, johon useimmat lait ja käytännöt viittaavat.
• Taso AAA – korkein taso. Hyödyllinen tavoite joissakin kohdissa, mutta W3C ei suosittele vaatimaan sitä koko sivustolle, koska jotkin sisällöt eivät voi täyttää sitä.

WCAG 2.2 lisäsi versioon 2.1 yhdeksän onnistumiskriteeriä, mukaan lukien Kohteen koko (vähimmäis) tasolla AA – napautettavien kohteiden tulisi yleensä olla vähintään 24 × 24 CSS-pikseliä, poikkeuksin – ja Saavutettava todennus (vähimmäis), joka rajoittaa kirjautumisvaiheita, jotka nojaavat muistiin tai palapeleihin, kuten salasanan uudelleenkirjoittamiseen ilman mahdollisuutta liittää sitä. Se poisti myös vanhan ”Parsing”-kriteerin vanhentuneena.

Esimerkki: rekisteröitymislomake

Tässä on rekisteröitymislomake, jonka tekoäly voi tuottaa, ja mitä saavutettavuustarkistus löytää:

Niistä mikään korjaus ei muuta lomakkeen ulkoasua paljon. Kaikki ne muuttavat sitä, voivatko jotkin ihmiset käyttää sitä lainkaan.

Keskeiset termit

Yleiset väärinkäsitykset

• ”Saavutettavuus koskee vain sokeita käyttäjiä.” Se kattaa näkö-, motoriset, kuulo-, puhe- ja kognitiiviset vammat sekä tilapäiset tilanteet, kuten murtunut käsi.
• ”Saavutettavat sivustot näyttävät tylsiltä.” Saavutettavuus rajoittaa muutamia asioita – kontrastia, fokustyylejä, tekstin kokoa – mutta hyvännäköiset saavutettavat sivustot ovat normi, eivät poikkeus.
• ”Automaattinen tarkistin antaa 100 pistettä, joten olemme valmiit.” Automaattiset työkalut löytävät vain osan ongelmista. Ihminen tarvitaan tarkistamaan, onko alt-teksti todella merkityksellinen tai toimiiko kulku ruudunlukijalla.
• ”Overlay-widget tekee meistä vaatimustenmukaisia.” Päälle liimatut työkalupalkit eivät voi korjata puuttuvia nimilappuja tai rikkinäistä näppäimistöyhteyttä koodissasi. Korjaa lähde.
• ”Meillä ei ole vammaisia käyttäjiä.” Saatat yksinkertaisesti tietää heistä vain vähän. Monet vammat eivät näy päällepäin, ja ihmiset, jotka kohtaavat esteen, yleensä vain poistuvat.

Mitä pyytää tekoälyrakentajaltasi

• ”Rakenna tämä täyttämään WCAG 2.2 -tason AA.”
• ”Käytä semanttista HTML:ää: oikeita painikkeita, linkkejä, otsikoita oikeassa järjestyksessä ja nimilappuja jokaiselle lomakekentälle.”
• ”Varmista, että jokainen interaktiivinen elementti toimii pelkällä näppäimistöllä ja sillä on näkyvä fokustyyli.”
• ”Tarkista kaikkien tekstien ja kuvakkeiden värikontrasti – 4,5:1 tavalliselle tekstille, 3:1 suurelle tekstille ja kuvakkeille.”
• ”Lisää merkityksellinen alt-teksti informatiivisiin kuviin ja tyhjä alt-teksti koristekuviin.”
• ”Näytä lomakevirheet tekstinä, kytkettynä kenttään, eikä pelkästään värillä.”
• ”Kunnioita käyttäjän vähennetyn liikkeen asetusta animaatioissa.”
• ”Aja automaattinen saavutettavuustarkistus ja listaa, mitä se ei voi testata, jotta voin tarkistaa sen käsin.”

Testaa sitten itse: laita hiiri sivuun ja yritä suorittaa pääkulku pelkällä Tab-, Shift+Tab-, Enter- ja välilyöntinäppäimellä. Kokeile puhelimesi sisäänrakennettua ruudunlukijaa pääsivulla. Zoomaa selain 200 %:iin ja katso, hajoaako mikään.

Saavutettavuus Mythexissä

Mythexissä ei ole erillistä saavutettavuustarkistinta, joten käsittele saavutettavuutta osana kehotteitasi ja testausta. Pyydä WCAG 2.2 AA -tasoa ensimmäisestä kehotteesta, tarkista tulos esikatselussa näppäimistöllä ja käytä /test-komentoa, jolla agentti käy pääkulut läpi ennen julkaisua – katso Sovellustestaus. SEO-ohje pyytää myös semanttisia otsikoita ja kuvaavia alt-tekstejä, jotka palvelevat molempia tavoitteita.

Käytännön tarkistuslistan löydät artikkelista miten teet verkkosivustostasi saavutettavan. Designiin lue miten suunnittelet hyvännäköisen sovelluksen tekoälyllä, ja ennen julkaisua miten testaat sovelluksesi ennen julkaisua. W3C:n oma WCAG-yleiskatsaus on virallinen lähde.

Kysymykset