Verkon k\u00e4ytt\u00e4jill\u00e4 on monenlaisia n\u00e4k\u00f6\u00f6n liittyvi\u00e4 rajoitteita. He pystyv\u00e4t k\u00e4ytt\u00e4m\u00e4\u00e4n verkkoa niist\u00e4 huolimatta, jos verkkosivustolla on otettu saavutettavuus huomioon.<\/p>\n
Esimerkiksi kuvia tai videoita ei voida esitt\u00e4\u00e4 kaikille n\u00e4k\u00f6rajoitteisille k\u00e4ytt\u00e4jille sellaisenaan. T\u00e4llaisille sis\u00e4ll\u00f6ille luodaan vaihtoehtoinen esitystapa.<\/p>\n
N\u00e4k\u00f6rajoitteisia varten kuville kirjoitetaan tekstivastineet, joissa kerrotaan, mit\u00e4 kuvissa n\u00e4kyy. N\u00e4in t\u00e4ysin sokeakin henkil\u00f6 saa tiet\u00e4\u00e4, mit\u00e4 kuvissa on.<\/p>\n
N\u00e4k\u00f6rajoitteiden huomioiminen saavutettavia verkkosivuja suunniteltaessa hy\u00f6dytt\u00e4\u00e4 monia k\u00e4ytt\u00e4ji\u00e4. Suomessa on arvioitu olevan noin 80 000 n\u00e4k\u00f6vammaista, joista 10 000 on sokeita.<\/p>\n
My\u00f6s v\u00e4risokeus on sellainen n\u00e4k\u00f6\u00f6n liittyv\u00e4 rajoite, joka tulisi ottaa huomioon verkkosivujen suunnittelussa ja toteutuksessa. Arvioiden mukaan Suomessa noin viisi prosenttia v\u00e4est\u00f6st\u00e4 on v\u00e4risokeita. Yleisin v\u00e4risokeuden muoto on puna-vihersokeus.<\/p>\n
L\u00e4hes kaikilla on jossain vaiheessa el\u00e4m\u00e4\u00e4ns\u00e4 n\u00e4k\u00f6\u00f6n liittyvi\u00e4 rajoitteita. T\u00e4m\u00e4 voi johtua n\u00e4k\u00f6vammasta, n\u00e4\u00f6n heikentymisest\u00e4, p\u00e4\u00e4telaitteesta tai ymp\u00e4rist\u00f6n aiheuttamista olosuhteista.<\/p>\n
Esimerkiksi mobiililaitteen pienelt\u00e4 n\u00e4yt\u00f6lt\u00e4 voi olla hankala havaita n\u00e4yt\u00f6ll\u00e4 n\u00e4kyvi\u00e4 asioita kirkkaassa auringonpaisteessa.<\/p>\n
N\u00e4k\u00f6vammaisilla k\u00e4ytt\u00e4jill\u00e4 on erilaisia avustavia keinoja p\u00e4\u00e4telaitteiden k\u00e4yt\u00f6n helpottamiseksi. He voivat k\u00e4ytt\u00e4\u00e4 avustavia teknologioita verkon selaamiseen tai muuttaa verkkosivujen visuaalista ilmett\u00e4 esimerkiksi suurentamalla teksti\u00e4.<\/p>\n
T\u00e4ysin tai l\u00e4hes sokeat k\u00e4ytt\u00e4j\u00e4t k\u00e4ytt\u00e4v\u00e4t verkon selailuun ruudunlukuohjelmaa, joka lukee verkkosivujen sis\u00e4ll\u00f6n k\u00e4ytt\u00e4j\u00e4lle \u00e4\u00e4neen.<\/p>\n
Moni vaikeasti heikkon\u00e4k\u00f6inen k\u00e4ytt\u00e4\u00e4 ruudunsuurennosohjelmaa, joka suurentaa n\u00e4yt\u00f6n sis\u00e4ll\u00f6n ja tekee siit\u00e4 helpommin havaittavan.<\/p>\n
Monet k\u00e4ytt\u00e4j\u00e4t saattavat suurentaa tekstin kokoa verkkoselaimesta k\u00e4sin tai parantaa tekstin ja taustan v\u00e4list\u00e4 tummuuskontrastia.<\/p>\n
Joidenkin on helpompi lukea teksti\u00e4, kun he muuttavat n\u00e4yt\u00f6n v\u00e4rit k\u00e4\u00e4nteisiksi niin, ett\u00e4 teksti on vaaleaa ja tausta on tumma.<\/p>\n
\n\u201dK\u00e4yt\u00e4n tietokonetta ja verkkosivuja ruudunlukuohjelman avulla niin, ett\u00e4 ruudunlukuohjelma lukee n\u00e4yt\u00f6ll\u00e4 olevan tekstisis\u00e4ll\u00f6n \u00e4\u00e4neen. K\u00e4yt\u00e4n samanaikaisesti pisten\u00e4ytt\u00f6\u00e4, johon tulee pistekirjoituksella sit\u00e4 samaa teksti\u00e4, jonka ohjelma lukee \u00e4\u00e4neen. En tee hiirell\u00e4 mit\u00e4\u00e4n, vaan kaikki asiat teen n\u00e4pp\u00e4imist\u00f6ll\u00e4.<\/p>\n
En k\u00e4yt\u00e4 mielell\u00e4ni verkkosivuja, jotka on huonosti tehty. V\u00e4hiten mielell\u00e4ni k\u00e4yt\u00e4n sivuja, joiden linkeiss\u00e4 tai painikkeissa on kuva, joka kertoo, mit\u00e4 niist\u00e4 tapahtuu, mutta ei teksti\u00e4. Se linkki voi olla minulle vaikka muotoa kuva.jpg. Silloin on tosi hankala tiet\u00e4\u00e4, mit\u00e4 siit\u00e4 tapahtuu.<\/p>\n
Lis\u00e4ksi ep\u00e4miellytt\u00e4vi\u00e4 ovat sellaiset sivut, joissa on tosi paljon sis\u00e4lt\u00f6\u00e4, mutta niiss\u00e4 ei ole k\u00e4ytetty otsikkotasoja.\u201d<\/p>\n
Ronja Oja, sovellussuunnittelija, sokea<\/em><\/p>\n<\/blockquote>\n
Miten n\u00e4k\u00f6\u00f6n liittyv\u00e4t rajoitteet tulisi ottaa huomioon verkkosivujen suunnittelussa ja toteutuksessa?<\/h2>\n
Verkkosivustojen suunnittelussa ja toteutuksessa on syyt\u00e4 ottaa huomioon k\u00e4ytt\u00e4j\u00e4t, jotka selaavat verkkoa k\u00e4ytt\u00e4en avustavia teknologioita ja muuttavat verkkosivun visuaalista ilmett\u00e4 tehden siit\u00e4 itselleen sopivamman.<\/p>\n
Saavutettavuuden parantamiseksi on t\u00e4rke\u00e4\u00e4 huomioida seuraavat n\u00e4k\u00f6rajoitteisiin liittyv\u00e4t asiat:<\/p>\n
\n
- K\u00e4yt\u00e4 selke\u00e4\u00e4 ja riitt\u00e4v\u00e4n suurta fonttia. Tyypillisesti p\u00e4\u00e4tteett\u00f6m\u00e4t (sans-serif-tyyliset) fontit ovat helpoimmin luettavia.<\/li>\n
- Varmista, ett\u00e4 tekstin ja taustan v\u00e4linen tummuuskontrasti on riitt\u00e4v\u00e4. \u00c4l\u00e4 esimerkiksi k\u00e4yt\u00e4 harmaata teksti\u00e4 harmaalla pohjalla.<\/li>\n
- K\u00e4yt\u00e4 selke\u00e4\u00e4 ja ymm\u00e4rrett\u00e4v\u00e4\u00e4 kielt\u00e4. Pid\u00e4 tekstirakenne yksinkertaisena. \u00c4l\u00e4 kirjoita pitki\u00e4 virkkeit\u00e4 ja kappaleita.<\/li>\n
- Julkaise kaikki sis\u00e4lt\u00f6 verkkosivuilla HTML-muodossa. \u00c4l\u00e4 julkaise sis\u00e4lt\u00f6j\u00e4 ainoastaan ladattavina tiedostoina.<\/li>\n
- K\u00e4yt\u00e4 tekstin muotoilujen ja v\u00e4rien yhdistelmi\u00e4 v\u00e4litt\u00e4m\u00e4\u00e4n merkityst\u00e4 (esimerkiksi linkkiteksti). \u00c4l\u00e4 k\u00e4yt\u00e4 esimerkiksi pelkk\u00e4\u00e4 v\u00e4ri\u00e4 v\u00e4litt\u00e4m\u00e4\u00e4n merkityst\u00e4.<\/li>\n
- Lis\u00e4\u00e4 kuviin ja videoihin tekstivastine tai jokin muu vaihtoehtoinen esitystapa. \u00c4l\u00e4 k\u00e4yt\u00e4 pelkki\u00e4 kuvia ja videoita v\u00e4litt\u00e4m\u00e4\u00e4n tietoa, ellei kuvissa ole tekstivastineita tai videoissa kuvailutulkkausta.<\/li>\n
- K\u00e4yt\u00e4 oikeaoppista HTML-kielt\u00e4, josta ilmenee elementtien semanttinen merkitys (esimerkiksi muotoiluja <H1>, <button>, <nav>, <main> jne.). \u00c4l\u00e4 siis muotoile esimerkiksi otsikkoja vain muuttamalla tekstin kokoa.<\/li>\n
- Varmista, ett\u00e4 sivun rakenne on selke\u00e4 ja looginen. Sis\u00e4ll\u00f6n j\u00e4rjestys HTML-l\u00e4hdekoodissa tulee olla sama kuin visuaalinen esitystapa.<\/li>\n
- Varmista, ett\u00e4 sivustoa on mahdollista k\u00e4ytt\u00e4\u00e4 pelk\u00e4ll\u00e4 n\u00e4pp\u00e4imist\u00f6ll\u00e4 ilman hiirt\u00e4. Kaikkia sivuston toimintoja pit\u00e4\u00e4 voida k\u00e4ytt\u00e4\u00e4 vain n\u00e4pp\u00e4imist\u00f6ll\u00e4.<\/li>\n
- Nime\u00e4 linkit ja otsikot selke\u00e4sti ja ymm\u00e4rrett\u00e4v\u00e4sti. Varmista, ett\u00e4 linkin nimest\u00e4 k\u00e4y ilmi, minne se johtaa. V\u00e4lt\u00e4 \u201dPaina t\u00e4st\u00e4\u201d- tai \u201dLue lis\u00e4\u00e4\u201d -tyylisi\u00e4 linkkej\u00e4.<\/li>\n<\/ul>\n\n","protected":false},"excerpt":{"rendered":"
Verkon k\u00e4ytt\u00e4jill\u00e4 on monenlaisia n\u00e4k\u00f6\u00f6n liittyvi\u00e4 rajoitteita. He pystyv\u00e4t k\u00e4ytt\u00e4m\u00e4\u00e4n verkkoa niist\u00e4 huolimatta, jos verkkosivustolla on otettu saavutettavuus huomioon. Esimerkiksi kuvia tai videoita ei voida esitt\u00e4\u00e4 kaikille n\u00e4k\u00f6rajoitteisille k\u00e4ytt\u00e4jille sellaisenaan. T\u00e4llaisille sis\u00e4ll\u00f6ille luodaan vaihtoehtoinen esitystapa. N\u00e4k\u00f6rajoitteisia […]Lue lis\u00e4\u00e4…<\/span><\/p>\n","protected":false},"author":10,"featured_media":0,"parent":81,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/83\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/81"}],"wp:attachment":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/media?parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}