Mikä on esteetön verk­ko­si­vus­to ja miksi se on tärkeää?

Es­teet­tö­mät verk­ko­si­vus­tot var­mis­ta­vat, että eri­lai­sis­ta vammoista ja tarpeista kärsivät käyttäjät voivat käyttää verk­ko­si­vus­to­ja ilman ra­joi­tuk­sia ja ilman muiden apua. Es­teet­tö­män verk­ko­si­vus­ton tar­koi­tuk­se­na on siis estää tiettyjen ryhmien, kuten fyy­si­ses­ti tai hen­ki­ses­ti vam­mais­ten ihmisten, syr­jäy­ty­mi­nen verkosta.

Mikä on esteetön verk­ko­si­vus­to?

Es­teet­tö­män verk­ko­si­vus­ton luominen edel­lyt­tää verk­ko­si­säl­lön suun­nit­te­lua siten, että kaikki käyttäjät voivat käyttää ja ymmärtää sitä. Tähän kuuluvat myös henkilöt, jotka käyttävät apu­tek­no­lo­gioi­ta, kuten näy­tön­lu­ki­joi­ta, näp­päi­mis­tö­na­vi­goin­tia, suu­ren­nus­työ­ka­lu­ja tai teks­ti­tys­tä. Es­teet­tö­mät verk­ko­si­vus­tot ovat olen­nai­nen osa inklusii­vi­sen verk­ko­ko­ke­muk­sen luomista yri­tyk­sil­le, or­ga­ni­saa­tioil­le ja jul­ki­sil­le lai­tok­sil­le. Esteetön verk­ko­suun­nit­te­lu voi myös parantaa ha­ku­ko­neop­ti­moin­tia pa­ran­ta­mal­la käy­tet­tä­vyyt­tä ja tie­to­ra­ken­net­ta.

Esteet ovat haittoja, jotka vai­keut­ta­vat tai joissakin ta­pauk­sis­sa jopa estävät käyt­tä­jien pääsyn verk­ko­si­vus­ton sisältöön ja vuo­ro­vai­ku­tuk­sen sen kanssa. Vaikka tie­toi­suus fyysisten tilojen es­teet­tö­myy­des­tä on kasvanut mer­kit­tä­väs­ti, esteitä esiintyy edelleen usein ja usein ta­hat­to­mas­ti myös verkossa. Esteet voivat johtua tek­ni­sis­tä pää­tök­sis­tä, vi­su­aa­li­sis­ta suun­nit­te­lu­va­lin­nois­ta tai huonosti jä­sen­nel­lys­tä si­säl­lös­tä. Tut­ki­muk­set ja käytännön esimerkit osoit­ta­vat, että in­te­rak­tii­vi­set kom­po­nen­tit, kuten kir­jau­tu­mi­set tai tur­vao­mi­nai­suu­det, voivat aiheuttaa suuria haasteita. Tietyt CAPTCHA-tun­nis­tuk­set, joissa käytetään vää­ris­ty­nei­tä merkkejä tai pel­käs­tään vi­su­aa­li­sia pulmia, voivat rajoittaa mer­kit­tä­väs­ti nä­kö­vam­mais­ten pääsyä ja olla ris­ti­rii­das­sa nykyisten es­teet­tö­mien verk­ko­si­vus­to­jen odotusten kanssa.

Verk­ko­si­vu­jen es­teet­tö­myyss­tan­dar­dit es­teet­tö­mil­le verk­ko­si­vuil­le

Es­teet­tö­mien verk­ko­si­vus­to­jen tärkein kan­sain­vä­li­nen standardi on WCAG, tarkemmin sanottuna WCAG 2.2 (Web Content Acces­si­bi­li­ty Gui­de­li­nes, verk­ko­si­säl­lön es­teet­tö­myys­oh­jeet). Nämä W3C-ohjeet mää­rit­te­le­vät uusimmat vaa­ti­muk­set ja parhaat käytännöt, joiden avulla verk­ko­si­vus­tot voidaan tehdä es­teet­tö­mik­si kaikille käyt­tä­jil­le.

WCAG 2.2 korostaa pa­ran­net­tua käy­tet­tä­vyyt­tä, sel­keäm­pää näp­päi­mis­tö- ja fo­kus­na­vi­goin­tia sekä yk­sin­ker­tais­tet­tu­ja vuo­ro­vai­ku­tuk­sia mo­bii­li­lait­teil­la. Nämä päi­vi­tyk­set hei­jas­ta­vat muuttuvaa käyt­täy­ty­mis­tä ja poistavat esteitä, joita aiemmat versiot eivät täysin kattaneet.

WCAG 2.2 -stan­dar­din tär­keim­piä me­nes­tysk­ri­tee­re­jä ovat muun muassa:

• Näkyvä näp­päi­mis­tön kohdistus: In­te­rak­tii­vis­ten ele­ment­tien on oltava selvästi näkyvissä, kun niitä käytetään näp­päi­mis­töl­lä.
• Ohjaimien vä­him­mäis­ko­ko: Kli­kat­ta­vat ja kos­ke­tet­ta­vat alueet on oltava riittävän suuria, jotta vältytään ta­hat­to­mal­ta ak­ti­voin­nil­ta.
• Vaih­toeh­dot ve­tä­mi­sel­le: Vuo­ro­vai­ku­tus ei saa perustua yk­si­no­maan ve­tä­mi­seen ja pu­dot­ta­mi­seen.
• Turhien syöttöjen vält­tä­mi­nen: Käyt­tä­jien ei pitäisi joutua syöt­tä­mään samaa tietoa useita kertoja.
• Esteetön todennus: Kir­jau­tu­mispro­ses­sit eivät saa riippua kog­ni­tii­vi­sis­ta teh­tä­vis­tä, kuten pa­la­pe­liin pe­rus­tu­vis­ta CAPTCHA-testeistä.

WCAG 2.2 on modernin verk­ko­si­vus­to­jen ke­hit­tä­mi­sen tärkein ver­tai­lu­koh­ta ja muodostaa teknisen perustan es­teet­tö­myys­vaa­ti­muk­sil­le Yh­dis­ty­nees­sä ku­nin­gas­kun­nas­sa.

Ha­vait­ta­vis­sa oleva

Monet verk­ko­si­vus­tot si­säl­tä­vät vilkkuvia mainoksia, kom­ment­tio­siot ovat täynnä pienellä fontilla kir­joi­tet­tua tekstiä, ja joskus taus­ta­musiik­kia jopa soitetaan vah­vis­ta­maan sivun tunnelmaa tai teemaa. Vam­mai­suu­den tyypistä ja va­ka­vuu­des­ta riippuen jotkut verk­ko­si­vus­to­si kävijät eivät vält­tä­mät­tä havaitse näitä ele­ment­te­jä täysin tai lainkaan.

Esi­mer­kik­si sokeat ihmiset na­vi­goi­vat in­ter­ne­tis­sä ilman vi­su­aa­li­sia vihjeitä. Sen sijaan näy­tön­lu­ki­ja lukee verk­ko­si­vus­ton ääneen. Laite välittää luettavan datan käy­tet­tä­vis­sä oleviin apu­tek­no­lo­gioi­hin. Esi­mer­kik­si päi­vi­tet­tä­vä pis­te­kir­joi­tus­näyt­tö voi muuntaa tekstin pis­te­kir­joi­tuk­sek­si. Tämä mah­dol­lis­taa henkilön hahmottaa verk­ko­si­vus­to­si kos­ke­tuk­sen avulla. Teksti puheeksi -työkalu toistaa sisällön ää­ni­muo­dos­sa. Tämän tekniikan avulla käyttäjät luottavat kuuloonsa verk­ko­si­vus­ton sisällön kä­sit­te­lys­sä. Edellä mai­ni­tus­sa esi­mer­kis­sä taus­ta­musiik­ki kuitenkin häiritsee kes­kit­ty­mis­tä.

Ihmiset, joilla on lievempi näkövamma – mukaan lukien monet ikään­ty­neet – voivat nähdä verk­ko­si­vus­to­si sisällön sil­mil­lään, mutta he tar­vit­se­vat suu­ren­net­tua näyttöä. Vä­ri­so­keat ihmiset puo­les­taan eivät vält­tä­mät­tä huomaa va­roi­tuk­sia, jotka vä­li­te­tään vain värin avulla. Kuurot ihmiset eivät puo­les­taan pääse käsiksi ää­ni­tie­dos­to­jen si­säl­tä­mään tietoon eivätkä suureen osaan vi­deo­tie­dos­to­jen si­säl­lös­tä.

Ym­mär­ret­tä­vä

Hyvin nuoret käyttäjät, ikään­ty­neet tai kog­ni­tii­vi­ses­ti vammaiset henkilöt voivat olla vai­keuk­sis­sa ymmärtää tekstejä, jotka ovat täynnä teknistä kieltä, se­lit­tä­mät­tö­miä ly­hen­tei­tä tai mo­ni­mut­kai­sia lauseita. Jos verk­ko­si­vus­to erottaa toisiinsa liittyvät sisällöt tai käyttää epä­joh­don­mu­kais­ta ter­mi­no­lo­gi­aa, käyttäjät voivat olla vai­keuk­sis­sa ymmärtää tar­koi­te­tun mer­ki­tyk­sen.

Toimiva

Mo­bii­li­se­laa­mi­sen yleis­tyes­sä on erityisen tur­haut­ta­vaa, kun linkit ovat liian pieniä tai liian lähellä toisiaan, jotta niitä voisi napauttaa tarkasti. Sivustot, joita ei ole optimoitu äly­pu­he­li­mil­le ja joissa on tiheästi pakattuja, pieniä link­ki­teks­te­jä, voivat olla erityisen vaikeita käyttää ikään­ty­neil­le tai hen­ki­löil­le, joiden käden vakaus on hei­ken­ty­nyt.

Nykyään on kuitenkin kehitetty monia apu­vä­li­nei­tä lii­kun­ta­ra­joit­tei­sil­le ihmisille, jotka hel­pot­ta­vat tie­to­ko­nei­den käyttöä. Jotkut apu­vä­li­neet seuraavat silmien liikkeitä, kun taas toiset tek­no­lo­giat toimivat näp­päi­mis­tön avulla. Pe­ri­aat­tees­sa verk­ko­si­vus­to, joka on suun­ni­tel­tu es­teet­tö­mäk­si, tulisi rakentaa siten, että se voidaan tulkita täl­lai­sil­la apu­tek­no­lo­gioil­la. Jos verk­ko­si­vus­tol­la­si ei voi navigoida näiden avulla, po­ten­ti­aa­li­set asiakkaat, jotka ovat riip­pu­vai­sia niistä, eivät voi hyödyntää koko tar­jon­taa­si.

Kun käyttäjiä pyydetään täyt­tä­mään lomake, esi­mer­kik­si uu­tis­kir­jeen ti­laa­mis­ta varten, virheet eivät ole har­vi­nai­sia. Salasana on liian lyhyt tai syn­ty­mä­ai­ka ei vastaa mää­ri­tet­ty­jä pa­ra­met­re­ja. Siksi on tärkeää antaa selkeät ohjeet virheiden kor­jaa­mi­seen. Verk­ko­si­vus­ton käyttö sisältää myös na­vi­goin­nin. Pienellä näytöllä va­rus­tet­tu­ja laitteita käyttävät tai suu­ren­net­tua näyttöä käyttävät henkilöt tar­vit­se­vat siihen sopivia na­vi­goin­ti­pol­ku­ja ja selkeän, hyvin jä­sen­nel­lyn verk­ko­si­vus­ton.

Kom­ment­tio­sios­sa käyttäjät voivat antaa pa­lau­tet­ta. He voivat käyttää sitä jakamaan mie­li­pi­teen­sä tuot­tees­ta tai si­säl­lös­tä tai kom­mu­ni­koi­maan muiden kanssa. Nä­kö­vam­mai­set käyttävät usein näytön suu­ren­nus­la­sia kir­joit­taes­saan tie­to­ko­neel­la. Se suurentaa elementit ja lisää lu­ku­pal­kin ja syöt­tö­ken­tän välistä etäi­syyt­tä. Sijoita elementit vi­su­aa­li­ses­ti lähelle toisiaan, jotta käyt­tä­jien on helpompi olla vuo­ro­vai­ku­tuk­ses­sa keskenään.

Vankka

Verk­ko­si­vus­to­jen on oltava yh­teen­so­pi­via apu­tek­no­lo­gioi­den kanssa asian­mu­kai­sen koo­di­ra­ken­teen avulla. Se­mant­ti­nen HTML (kuten <main>, <nav>, <section>) auttaa näy­tön­lu­ki­joi­ta ym­mär­tä­mään sivun ra­ken­net­ta. Asian­mu­kai­set lomakkeen nimikkeet yh­dis­tä­vät syöt­tö­ken­tät niiden ku­vauk­siin for att­ri­buu­tin avulla. ARIA-maamerkit tarjoavat pi­ka­ku­vak­kei­ta näy­tön­lu­ki­jan na­vi­goin­tiin. Ilman näitä jopa hyvin suun­ni­tel­tu sisältö muuttuu käyt­tö­kel­vot­to­mak­si apu­tek­no­lo­gian käyt­tä­jil­le.

Mitkä ovat es­teet­tö­män verk­ko­suun­nit­te­lun edut?

Es­teet­tö­myy­ses­tei­den pois­ta­mi­nen parantaa verk­ko­si­vus­to­si käy­tet­tä­vyyt­tä ja vahvistaa nä­ky­vyyt­tä­si ha­ku­ko­neis­sa. Monet es­teet­tö­myys­käy­tän­nöt ovat samoja kuin käyt­tö­ko­ke­muk­sen ja ha­ku­ko­neop­ti­moin­nin parhaat käytännöt, mikä tar­koit­taa, että es­teet­tö­myy­den pa­ran­ta­mi­nen hyödyttää usein kaikkia kävijöitä.

Esteetön verk­ko­si­vus­to auttaa:

• mo­bii­li­lait­tei­den käyttäjät,
• fyy­si­ses­ti tai kog­ni­tii­vi­ses­ti vammaiset henkilöt,
• ikään­ty­neet
• vie­rai­li­jat, jotka eivät ehkä ole pe­reh­ty­nei­tä verk­ko­si­vu­jen käyttöön.

Esit­tä­mäl­lä tiedot selkeästi ja ra­ken­ta­mal­la verk­ko­si­vus­to­si loo­gi­ses­ti, parannat sekä sivustosi luet­ta­vuut­ta että käyt­tä­jien si­vus­tol­la­si viettämää aikaa. Vaikka es­teet­tö­myys vaatii lisätyötä ja testausta, sen edut ovat mittavat. Es­teet­tö­mät verk­ko­si­vus­tot tarjoavat paremman käyt­tö­ko­ke­muk­sen kaikille.

Kuinka tehdä verk­ko­si­vus­to es­teet­tö­mäk­si? Vinkkejä ja esi­merk­ke­jä

Jos haluat rakentaa es­teet­tö­män verk­ko­si­vus­ton, sinun tulee kiin­nit­tää erityistä huomiota tietojen ra­ken­tee­seen sekä sivuston eri­lai­siin vi­su­aa­li­siin kom­po­nent­tei­hin.

Vaihe 1: Varmista selkeä tie­to­ra­ken­ne

Anna verk­ko­si­vus­tol­le­si looginen, help­po­käyt­töi­nen rakenne ja käytä selkeää, käyt­tä­jäys­tä­väl­lis­tä kieltä. Tämä tekee si­säl­lös­tä­si helpommin lä­hes­tyt­tä­vän ja parantaa myös Google-si­joi­tus­ta­si, koska ha­ku­ko­neet arvioivat luet­ta­vuut­ta ja selkeyttä.

Tehokkaan ha­ku­ko­neop­ti­moin­nin tu­ke­mi­sek­si ja sivuston rakenteen jär­jes­tyk­sen yl­lä­pi­tä­mi­sek­si on syytä muistaa seuraavat seikat:

Vaihe 2: Käytä vi­su­aa­li­sia vihjeitä

Skaa­lat­ta­vat fontit ja vä­ri­sää­döt auttavat heik­ko­nä­köi­siä tai vä­ri­so­kei­ta ihmisiä lukemaan verk­ko­si­vus­ton sisältöä helpommin. Varmista, että teksti erottuu riittävän selvästi taustasta ja että in­te­rak­tii­vi­set elementit, kuten pai­nik­keet tai linkit, erottuvat selvästi.

Aut­taak­se­si käyttäjiä, jotka na­vi­goi­vat näp­päi­mis­töl­lä tai näy­tön­lu­ki­jal­la, korosta in­te­rak­tii­vi­set elementit seu­raa­vas­ti:

• näkyvät tar­ken­nuk­sen osoit­ti­met,
• hover-efektit,
• ak­tii­vi­set link­ki­tyy­lit.

Älä luota pel­käs­tään väreihin mer­ki­tyk­sen vä­lit­tä­mi­ses­sä — täydennä vä­ri­koo­de­ja sym­bo­leil­la, nu­me­roil­la tai tähdillä.

Close

Epi­lep­si­aa sai­ras­ta­vat henkilöt ovat vaarassa, jos verk­ko­si­vus­to sisältää gra­fiik­kaa tai videoita, jotka vilkkuvat yli kolme kertaa se­kun­nis­sa. Tutkijat ovat myös ha­vain­neet, että te­rä­vä­piir­tei­set, kont­ras­ti­rik­kaat ruu­duk­ko­mal­lit voivat laukaista koh­tauk­sia myös va­lo­her­kil­lä epi­lep­si­aa sai­ras­ta­vil­la hen­ki­löil­lä.

Vaihe 3: Esitä tiedot useissa eri muodoissa

Verk­ko­si­vus­ton es­teet­tö­myys tulisi olla osa päi­vit­täis­tä työn­kul­kua­si. Olitpa sitten op­ti­moi­mas­sa ha­ku­ko­nei­ta, jul­kai­se­mas­sa PR-sisältöä tai li­sää­mäs­sä uusia tuo­te­si­vu­ja, sään­nöl­li­ses­ti ladatun sisällön tulisi olla ra­ken­net­tu tavalla, joka on käyt­tö­kel­poi­nen kaikille kä­vi­jöil­le.

Verk­ko­si­vus­ton es­teet­tö­myy­den olen­nai­nen osa – joka tuo myös SEO-etuja – on kuvien vaih­toeh­toi­sen tekstin li­sää­mi­nen. Koska ha­ku­ro­bo­tit ja näy­tön­lu­ki­jat eivät pysty tul­kit­se­maan kuvia, vaih­toeh­toi­nen teksti tarjoaa mer­ki­tyk­sel­li­siä kuvauksia seu­raa­vil­le:

• sokeat käyttäjät,
• heik­ko­nä­köi­set,
• hitaiden in­ter­ne­tyh­teyk­sien käyt­tä­jil­le.

Transk­rip­tiot ja teks­ti­tyk­set

Transk­rip­tioi­den ja teks­ti­tys­ten luominen jat­ku­vas­ti ja oikea-ai­kai­ses­ti on laajempi tehtävä. Näiden työ­ka­lu­jen avulla voit tehdä ää­ni­si­säl­lön saa­vu­tet­ta­vak­si kuuroille tai kuu­lo­vam­mai­sil­le. Transk­rip­tio, joka muuntaa puhutut sanat sekä äänet ja taus­ta­me­lut tekstiksi, tulisi sijoittaa mah­dol­li­sim­man lähelle siihen liittyvää ää­ni­si­säl­töä – esi­mer­kik­si pai­nik­keel­la, joka linkittää suoraan asia­kir­jaan.

Teks­ti­tyk­set hel­pot­ta­vat huo­mat­ta­vas­ti kuurojen ja kuu­lo­vam­mais­ten ihmisten verk­ko­vi­deoi­den ym­mär­tä­mis­tä. Ne hyö­dyt­tä­vät myös käyttäjiä, jotka eivät halua toistaa ääntä (esi­mer­kik­si koska he eivät halua häiritä muita). Kog­ni­tii­vi­ses­ti vammaiset tai ADHD:n kaltaista sairautta sai­ras­ta­vat ihmiset kä­sit­te­le­vät vi­deo­si­säl­töä usein te­hok­kaam­min, kun he voivat mykistää taustan äänet vi­deo­soit­ti­men ase­tuk­sis­ta – samoin kuin kuu­lo­vam­mai­set käyttäjät.

Ää­ni­se­los­tus

Henkilöt, joiden näkökyky on alle 30 pro­sent­tia, katsotaan nä­kö­vam­mai­sik­si, ja henkilöt, joiden näkökyky on alle kaksi pro­sent­tia, katsotaan sokeiksi. He ha­vait­se­vat vi­su­aa­lis­ta tietoa vain osittain tai eivät lainkaan. Jotta nämä henkilöt voivat ymmärtää vi­deo­si­säl­tö­si, sinun tulee lisätä siihen yli­mää­räi­nen ääniraita. Tämä raita sisältää se­li­tyk­siä vi­su­aa­li­sis­ta ele­men­teis­tä, kuten mai­se­mis­ta ja ihmisistä, sekä lyhyitä kuvauksia näytöllä ta­pah­tu­vis­ta toimista. Sijoita nämä se­li­tyk­set al­ku­pe­räi­sen tal­len­teen puhe- ja ää­ni­tau­koi­hin, jotta ää­ni­rai­dat eivät mene pääl­lek­käin.

Help­po­lu­kui­nen kieli

Help­po­kie­li­nen kieli ilmaisee sisällön hyvin yk­sin­ker­tai­sel­la tavalla. Se auttaa kog­ni­tii­vi­sis­ta vai­keuk­sis­ta kärsiviä ihmisiä ym­mär­tä­mään mo­ni­mut­kais­ta tietoa helpommin. Help­po­kie­li­ses­sä kielessä vältetään esi­mer­kik­si kon­junk­tii­via, sy­no­nyy­me­jä ja kieltoja. Lauseet ovat lyhyitä ja si­säl­tä­vät vain yhden ajatuksen ker­ral­laan. Kog­ni­tii­vi­sis­ta vai­keuk­sis­ta kär­si­vil­lä ihmisillä on sama oikeus tietoon kuin kaikilla muillakin. Tästä syystä päi­vä­leh­det tarjoavat yhä useammin ar­tik­ke­leis­taan help­po­kie­li­siä versioita verk­ko­si­vuil­laan, mikä on hyvä esimerkki es­teet­tö­mis­tä verk­ko­si­vuis­ta. Myös julkiset laitokset käyttävät yhä useammin help­po­kie­lis­tä kieltä tie­dot­teis­saan.

Vähemmän tiukka muoto on niin sanottu help­po­lu­kui­nen kieli, joka vastaa suun­nil­leen kie­li­ta­soa A2 tai B1.

Vaihe 4: Tee verk­ko­si­vus­to yh­teen­so­pi­vak­si

Apu­vä­li­neet, kuten näy­tön­lu­ki­jat, mah­dol­lis­ta­vat verkon saa­vu­tet­ta­vuu­den monille käyt­tä­jil­le. Nämä työkalut kä­sit­te­le­vät verk­ko­si­vus­to­ja li­ne­aa­ri­ses­ti va­sem­mal­ta oikealle ja ylhäältä alas, minkä vuoksi ulkoasu ja sisältö on ero­tet­ta­va selkeästi toi­sis­taan. Muutoin sivun elementit voivat tulkita väärin.

Jotta käyttäjät voivat navigoida te­hok­kaas­ti, noudata seuraavia pe­rus­sään­tö­jä.

Ohita na­vi­goin­ti­lin­kit ja muut pi­ka­ku­vak­keet

Näy­tön­lu­ki­jat vä­lit­tä­vät teks­ti­tie­dot tekstistä puheeksi -oh­jel­mis­tol­le ja päi­vi­tet­tä­väl­le pis­te­kir­joi­tus­näy­töl­le. Tätä varten ne lukevat sivun ylhäältä alas – tämä sisältää myös toistuvat elementit, kuten na­vi­goin­ti­pal­kin, kuvakkeet tai linkit ala­si­vuil­le. Jotta lukija ei toista näitä tietoja tar­peet­to­mas­ti jo­kai­sel­la sivulla, sinun tulisi ottaa käyttöön na­vi­goin­ti­link­kien ohi­tus­lin­kit (lyhyesti: ohi­tus­lin­kit).

Käyttäjät, jotka na­vi­goi­vat vain näp­päi­mis­töl­lä, mah­dol­li­ses­ti suu­pa­li­kal­la, kohtaavat myös paljon vai­keuk­sia, jos heidän on selattava lukuisia ele­ment­te­jä. Nämä henkilöt hyötyvät sivun yläosassa olevasta mah­dol­li­sim­man näkyvästä ohi­tus­lin­kis­tä:

<a href="#content">Skip navigation</a>
<main id="content">
    <h1>Main heading</h1>
    <p>First paragraph</p>
</main>

On olemassa ohi­tus­link­ke­jä, jotka eivät näy ul­koa­sus­sa, mutta näy­tön­lu­ki­ja välittää käyt­tä­jäl­le vaih­toeh­toi­sen teks­ti­vies­tin “Ohita na­vi­goin­ti”, kun koodi näyttää tältä:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Skip navigation" width="5"></a>

On tärkeää, että ohi­tus­lin­kit näkyvät koodissa mah­dol­li­sim­man aikaisin. Sijoita ank­ku­ri­koh­de pää­si­säl­lön alkuun:

<div id="content"></div>

Käytä ohi­tus­link­ke­jä sääs­te­li­ääs­ti, sillä liian monet linkit voivat kumota niiden po­si­tii­vi­sen vai­ku­tuk­sen ja pakottaa käyttäjät klik­kaa­maan liian monta ele­ment­tiä. Tyy­lik­kääm­pi ratkaisu on käyttää ARIA-maa­merk­ke­jä ja varmistaa, että asiakirja on hyvin jä­sen­nel­ty. On myös suo­si­tel­ta­vaa käyttää HTML5-ele­ment­te­jä.

Toinen hyö­dyl­li­nen omi­nai­suus on asia­kir­jan alussa oleva si­säl­lys­luet­te­lo, jonka avulla käyttäjät voivat siirtyä tiet­tyi­hin osioihin sivun sisäisten linkkien avulla. Ny­ky­ai­kai­set näy­tön­lu­ki­jat lukevat vastaavat otsikot ääneen. Käyt­tä­mäl­lä mie­lek­käi­tä, hyvin jä­sen­nel­ty­jä otsikoita parannat luet­ta­vuut­ta sekä ha­ku­ko­neil­le että apu­tek­no­lo­gioil­le.

Tie­to­tau­lu­kot layout-tau­lu­koi­den sijaan

W3C:n verk­ko­si­vu­jen es­teet­tö­myys­oh­jei­den mukaisen es­teet­tö­myy­den saa­vut­ta­mi­sek­si on suo­si­tel­ta­vaa käyttää vain da­ta­tau­lu­koi­ta. Näy­tön­lu­ki­jat eivät kohtaa tämän muodon kanssa niin paljon ongelmia ja pystyvät esit­tä­mään tiedot mer­ki­tyk­sel­li­sel­lä tavalla muun­ta­mi­sen jälkeen. Layout-taulukot puo­les­taan antavat sivulle vi­su­aa­li­sen rakenteen, mutta vai­keut­ta­vat näy­tön­lu­ki­joi­den työtä sisällön selkeän vä­lit­tä­mi­sen kannalta.

Määritä taulukon ulkoasu käyt­tä­mäl­lä vain yk­sin­ker­tai­sia ele­ment­te­jä: TABLE, TR ja TD (taulukko, rivi ja solu). Käytä ra­ken­teel­li­sia ele­ment­te­jä solujen välisten suhteiden loo­gis­ta­mi­sek­si, jolloin näy­tön­lu­ki­ja lukee taulukon ulkoasun kuin da­ta­tau­lu­kon. Tee päin­vas­toin, jos poistat tiettyjä taulukon ele­ment­te­jä es­teet­tö­myys­puus­ta.

Käytä verk­ko­si­vu­jen es­teet­tö­myy­den pa­ran­ta­mi­sek­si esi­mer­kis­sä esitettyä koodia role="none". Tämä koskee taulukkoa ja sen alie­le­ment­te­jä. Jos tau­lu­koi­ta on sisäkkäin, molemmat elementit on mää­ri­tel­tä­vä tällä koodilla.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Example text <abbr title="for example">e.g.</abbr> about ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Es­teet­tö­mien verk­ko­si­vus­to­jen tar­kis­tus­lis­ta

Kun olet valmis ra­ken­ta­maan verk­ko­si­vus­to­si, voit tarkistaa verk­ko­si­vus­ton es­teet­tö­myy­den tar­kis­tus­lis­tan avulla, että olet ottanut huomioon kaikki tärkeät tekijät.

✓ Tie­to­ra­ken­ne on hyvin jär­jes­tet­ty ja helppo seurata.

✓ Selkeän ja help­po­ta­jui­sen kielen käyttö

✓ Kuvien vaih­toeh­toi­nen teksti

✓ Video- ja ää­nit­ransk­rip­tiot

✓ Tärkeän sisällön ko­ros­ta­mi­nen värillä

✓ Suuri kontrasti

✓ Näy­tön­lu­ki­jan tuki

Ilmaiset työkalut es­teet­tö­mien verk­ko­si­vus­to­jen luomiseen

On olemassa useita työkaluja, jotka voivat auttaa sinua ra­ken­ta­maan es­teet­tö­män verk­ko­si­vus­ton. Alla on joitakin tun­ne­tuim­pia vaih­toeh­to­ja:

• TPGi ARC Toolkit: Erittäin luo­tet­ta­va ja ihan­teel­li­nen teknisten verk­ko­si­vus­to­jen au­di­toin­tiin.
• Acces­si­bi­li­ty Checker: Tämän verk­ko­so­vel­luk­sen avulla voit testata sivustosi WCAG-vaa­ti­mus­ten­mu­kai­suu­den il­mai­sek­si.
• Si­teimpro­ve: Si­teimpro­ven Acces­si­bi­li­ty Checker tarjoaa ilmaisen verk­ko­si­vus­to­jen skan­nauk­sen, jonka tulokset toi­mi­te­taan säh­kö­pos­tit­se.

Verk­ko­si­vus­ton es­teet­tö­myys parantaa käyt­tö­ko­ke­mus­ta kaikille

Verk­ko­si­vus­to­si es­teet­tö­myy­den pa­ran­ta­mi­nen lisää sen yleistä käy­tet­tä­vyyt­tä ja parantaa mer­kit­tä­väs­ti käyt­tö­ko­ke­mus­ta. Tästä on hyötyä:

• mo­bii­li­käyt­tä­jät,
• fyy­si­ses­ti tai kog­ni­tii­vi­ses­ti vammaiset henkilöt,
• ikään­ty­neet
• kaikki, joille verk­ko­si­vu­jen se­laa­mi­nen voi olla vaikeaa.

Ra­ken­ta­mal­la verk­ko­si­vus­to­si selkeästi ja val­mis­te­le­mal­la sisällön kat­ta­vas­sa, helposti ym­mär­ret­tä­väs­sä muodossa, tuet sekä es­teet­tö­myyt­tä että ha­ku­ko­neop­ti­moin­tia. Selkeä rakenne, voimakas kontrasti, luettava teksti ja apu­tek­no­lo­gian yh­teen­so­pi­vuus vai­kut­ta­vat kaikki vie­rai­lu­jen keston pi­den­ty­mi­seen ja tyy­ty­väi­syy­den kasvuun.

Es­teet­tö­myy­den var­mis­ta­mi­nen vaatii lisätyötä, kuten pe­rus­teel­lis­ta testausta, selkeää si­säl­tö­ra­ken­net­ta, vaih­toeh­tois­ta tekstiä ja huo­lel­li­ses­ti suun­ni­tel­tu­ja vuo­ro­vai­ku­tuse­le­ment­te­jä, mutta in­ves­toin­ti on sen arvoinen. Esteetön verk­ko­si­vu­jen suun­nit­te­lu hyödyttää kaikkia käyttäjiä, vahvistaa brändin us­kot­ta­vuut­ta ja auttaa sinua ta­voit­ta­maan laajemman yleisön, mukaan lukien ne, jotka käyttävät apu­tek­no­lo­gi­aa verk­ko­si­vu­jen se­laa­mi­seen.