Maanantaina, 16.11.2020

Saavutettavuus ei ole pelkästään sokeita varten РSaavutettavat verkkosivut hyödyttävät kaikkia

Lakiin astui voimaan saavutettavuusvaatimus julkishallinnoille 23.9.2020. Tämä tarkoittaa sitä, että verkkosivut etenkin valtion toiminnan ja järjestötoimintapuolella tulisivat olla saavutettavat. Mutta viimeistään nyt on aika ottaa verkkosivujen saavutettavuus tosissaan kaikkialla.

Tämä kirjoitus saattaa sisältää vanhentunutta tietoa, sillä se on julkaistu yli 2 vuotta sitten.

Lakiin astui voimaan saavutettavuusvaatimus julkishallinnoille 23.9.2020. Tämä tarkoittaa sitä, että verkkosivut etenkin valtion toiminnan ja järjestötoimintapuolella tulisivat olla saavutettavat.

Joillakin saattaa yhä sellaisia harhakäsityksiä saavutettavuudesta, että se olisi jotenkin pelkästään tekniikkaan liittyvä asia, jolla varmistetaan sivuston toimivuus apuvälineillä. On saavutettavuus toki sitäkin, mutta käsitteen skaala on paljon laajempi. Saavutettavat verkkosivut ovat toimivat kaikille, myös näkeville.

Dudella saavutettavuuteen keskitytään projektin työstövaiheessa aivan samalla tavalla kuin esimerkiksi asioiden saattamiseen älypuhelinten näytöillä toimivaan (alan termistöä käyttäen responsiiviseen) muotoon.

Duden blogissa on ollut suhteellisen vähän saavutettavuudesta, vaikka aihe on tullut entistä näkyvämmäksi alalla ja myös asiakkaiden tietoisuuteen saavutettavuusasioiden tarkentuessa lakiin. Vuoden 2017 blogauksen asioista ihmisten perusoikeudet eivät ole oleellisesti muuttuneet, mutta saavutettavuuden tärkeydestä sopii muistuttaa tasaisin väliajoin. Nyt on sen aika.

Koska saavutettavuus on laaja käsite näkyvistä väreistä ja niiden sävyeroista niin näkeville kuin värisokeillekin aina näppäimistöllä selattaviin valikkoihin asti, en lähde perkaamaan koko kriteeristöä, sillä sitä voit selata itsekin virallisesta Web Content Accessibility Guidelines (WCAG) 2.1 manuaalista englanniksi. Tarkoitus on kuitenkin kirjoittaa aiheesta lisää lähitulevaisuudessa. Saavutettavuusvaatimuksessa on lähtökohtana, että erityisesti julkishallinnon sivustot olisivat mahdollisimman saavutettavia kaikille. Tähdennän tässä kirjoituksessa muutamaa eniten kysyttyä pointtia.

Uuteen ikkunaan avautuvat linkit ja ladattavat tiedostot

V√§lill√§ meilt√§ kysyt√§√§n tulisiko linkkien avautua uuteen ikkunaan. Monet jopa suosivat t√§t√§ tapaa. L√§ht√∂kohtaisesti uuteen ikkunaan avautuvat linkit eiv√§t ole saavutettavia, koska usein unohdetaan kertoa ett√§ ne muuttavat selaimen perustoiminnallisuutta. Kyseess√§ on Internetin historiasta tuttu target=”_blank” -j√§√§nteenomainen toiminnallisuus, jolla linkit saa aukeamaan uuteen ikkunaan klikatessa. Demonstroin t√§t√§ nyt: T√§m√§ linkki avaa uuteen ikkunaan sivuston Google.fi. T√§ss√§ tapauksessa linkki on saavutettava, koska olen kuvaillut sen aukeavan uuteen ikkunaan kuvaavan tekstin avulla (G201).

Linkki on kaikista saavutettavin, kun se kertoo kohteestaan selke√§sti niin n√§keville kuin n√§k√∂rajoitteisillekin. Jos haluat linkit aukeamaan uuteen ikkunaan, pit√§isi olla sek√§ visuaalinen ett√§ ohjelmallinen tieto siit√§, ett√§ linkki aukeaa uuteen ikkunaan. Jos n√§in ei ole, apuv√§lineill√§ selaavat eiv√§t p√§√§se taakse-napilla takaisin (koska linkki on ”uusi”, historiaa ei ole), samassa ikkunassa tottuneet n√§kev√§t selaajat turhautuvat kun linkki t√§ytyy kopioida samaan ikkunaan sen sijaan ett√§ se v√§kisin pakotetaan eri ikkunaan.

Kaikista helpoin ja käyttäjällekin ystävällisin tapa on jättää uuteen ikkunaan avautuvat linkit kokonaan pois ja tästä syystä me emme ole vapaaehtoisesti käyttäneet niitä vuosikausiin. Vuonna 2017 kielsimme ponnahduslinkin käytön näköjään kokonaan blogauksessamme. Vaikka ponnahduslinkit eivät ole ultimaattinen paha, joka pilaa Internetin, koitamme välttää niitä. Ei sinänsä liity saavutettavuuteen, mutta ponnahduslinkit ovat jopa tietoturvariski.

Linkkien kuvaukset ovat yht√§lailla t√§rkeit√§ kuin esimerkiksi kuvien selitteet. On tiedett√§v√§ mit√§ linkist√§ aukeaa, jotta voi ennakoida haluaako linkkiin navigoida. Isot tiedostot kuten PDF:t on t√§rke√§√§ kuvata suoraan linkkiin. Ei esimerkiksi ”Esite” vaan ”Lataa esite toimiston esittelyst√§ (3,2mb, PDF)”. Linkiss√§ on oltava toiminto, aihe, koko ja tiedostomuoto, jotta se olisi kaikista saavutettava.

Kieliversiot

Kieliversiot tulisi olla selke√§sti merkattuna niin ohjelmallisesti kuin visuaalisestikin. Kielik√§√§nn√∂ksiss√§ maiden liput kuvana ovat aina huono juttu, k√§yt√§ mieluummin alkuper√§iskielell√§ kuvaavaa kielen nimikett√§, esimerkiksi ”Suomeksi” tai ”P√• svenska”. Lippukuvakkeet ovat huono juttu siit√§ syyst√§, ett√§ ne eiv√§t kerro tarpeeksi ja selitetekstit unohtuu. Englantia puhutaan monessa maassa, ei ainoastaan Isossa Britanniassa. Ranskaa puhutaan muuallakin kuin Ranskassa, samoin Espanjaa. Ymm√§rr√§t varmaan ongelman?

Kerran oli muuten käynyt niin, että eräs sivusto oli merkattu ohjelmallisesti suomenkieliseksi, vaikka teksti oli englanniksi. Näin ollen ruudunlukuohjelma luki tekstit rallienglannilla. Se oli varsin hulvatonta.

Jos suinkin mahdollista, kansainvälisellä sivustolla sisällön tulisi olla mahdollisimman saavutettavaa eri kohderyhmille, eli vähintään englanninkielinen versio olisi hyvä olla saatavilla. Jos koko sivustoa ei ole resurssien puitteissa mahdollista kääntää, voidaan sivustolle toteuttaa esimerkiksi yksi englanninkielinen infosivu, joka on merkattu ohjelmallisesti englanniksi. Saavutettavuuden keskeisiä perusperiaatteita ovat, että mahdollisimman moni (mielellään kaikki) otetaan huomioon. Isompi osa maailman ihmisistä osaa paremmin englantia kuin suomea, joten enkkuversion omaava sivusto on näin ollen saavutettavampi.

Zoomaus

Muunmuassa näkövammainen vaimoni käyttää selaimen zoomaustoimintoa päivittäin, mutta toiminto on välttämätön myös esimerkiksi ikäihmisille tai silmäsairaille. Pelkkää tekstisisältöä olisi hyvä pystyä suurentamaan 200% normaalista siten, että vain teksti suurenee, ilman että teksti menee toisen tekstin päälle esimerkiksi vierekkäisissä palstoissa. Tässä on verkkosivun suunnittelijalla myös iso vastuu. Voit testata tätä Firefoxilla seuraavasti:

Pelkän tekstin zoomaus on usein järkevämpää, koska kuvien ja muiden elementtien koko on usein paremmin huomioitu jo valmiiksi. Liian pientä tekstiä näkee huomattavasti useammin verkkosivuilla kuin pieniä kuvia tai pieniä kuvakkeita.

Saavutettavuusseloste

Monelle on jo tuttua huttua GDPR:n myötä, että sivustolla on oltava tietosuojaseloste. Meilläkin on sellainen, täällä näin. Nykyään on kuitenkin suositeltavaa, että sivustolla on myös saavutettavuusseloste. Julkishallinnoilla tämä on oltava. Saavutettavuusselosteeseen listataan asiat mitkä ovat sivustolla kunnossa ja mitkä pielessä, mitkä ovat toimenpiteet ja mihin voi laittaa palautetta. Meidän versio löytyy operointimanuaalistamme, tässä suora linkki.

Sivuston värit ja kontrastit

Saavutettavuusasioista visuaalisessa suunnittelussa saisi kokonaan oman kirjoituksensa, mutta avaan tähän tärkeintä asiaa kuitenkin, joka tulee meidän työssä usein esille. Sivuston ja brändin värit tulisivat olla helposti erottuvat. Väritasoihin ja kontrasteihin on monta työkalua, joista suosimme WebAIMin Conrast Checkeriä.

Näkörajoitteisilla on omat työkalunsa kontrastin säätämiseen, mutta helpottaa huomattavasti jos sivustolla ei ole haaleaa tekstiä valkoisella taustalla liikaa. Tekstin pitää olla erottuvaa ja luettavaa kaikille. Napeissa ja indikaattoreissa punaisen ja vihreän sävyt eivät saisi olla keskenään liian samanlaisia, sillä värisokeudesta kärsivät eivät silloin erota mistä on kyse, eli pelkkä väri ei saisi olla ainoa indikaattori ja siitäkin huolimatta selkeitä värieroja pitäisi hyödyntää järkevästi.

Megamenut ja sliderit pannaan

Monimutkaiset valikot ja kuvakarusellit ovat ylikäytettyjä, suhteellisen huonoja elementtejä verkkosivuilla. Jos mahdollista, näytetään kaikki mieluiten kerralla. On nurinkurista lähteä kehittämään saavutettavuutta, jos valitaan jo lähtökohtaisesti vääränlaisia elementtejä. Monimutkaisistakin toiminnoista saa saavutettavia, mutta aina pitää muistaa että mitä saavutettavampi, sen parempi. Kaikista saavutettavin on suoraviivaisin vaihtoehto.

Muuta? Tässäkö kaikki?

T√§ss√§ oli vain pintaraapaisu joistakin usein kysytyist√§ asioista, mutta oikeasti vain j√§√§vuoren huippu. Saavutettavuus sis√§lt√§√§ valtavasti asioita, jotka auttavat ihan jokaista nettisivun selaajaa. Usein koodarilla ei n√§it√§ tule mieleen ja my√∂nnett√§k√∂√∂n ett√§ meilt√§kin saattaa asioita kiireess√§ unohtua. Onneksi saavutettavuutta voi parantaa my√∂s j√§lkik√§teen aivan samalla tavalla kuin muitakin sivuston osa-alueita. On ymm√§rrett√§v√§, ett√§ mik√§√§n sivusto ei ole koskaan ”t√§ydellinen” tai ”valmis”. Visuaalisesti hyv√§lt√§ n√§ytt√§v√§ ja teknisesti hyvin koodattu sivusto voi olla saavutettavuudeltaan aivan retuper√§ll√§. Netiss√§ ty√∂t√§ riitt√§√§.

Saavutettavuusauditointi

Auditointi on järjestelmällinen selvitys siitä, vastaavatko nykyinen sivusto odotuksia, toiveita ja nykyisiä standardeja. Saavutettavuusauditoinnissa katsotaan siis onko sivusto riittävän saavutettava. Me Dudella teemme saavutettavuusauditointeja pienille ja keskisuurille sivustoille. Auditoinnin sisältöä on avattu lisää handbookissamme. Jos sivustosi saavutettavuuden tila kiinnostaa, ole ihmeessä yhteyksissä!

Lue myös nämä

Nopeasti latautuvat verkkosivut ovat tätä päivää РLatausnopeuden optimointi käytännössä

Mitä asioita pitää ottaa huomioon, että WordPress-sivuista saa nopeasti latautuvat? Katso seitsemän vinkkiämme!

Ovatko hyvät verkkosivut myynnin tae? Näin luet tarjousta ja ostat hyvät verkkosivut

Tarjous verkkosivuista sisältää usein teknistä jargonia, joka on kuitenkin välttämätöntä ominaisuuksien listaamisen ja vakuuttavuuden kannalta. Kuinka lukea tarjousta, onko alustalla väliä ja saako verkkosivuilla lisää myyntiä aikaan?

Ei pakoteta niitä linkkejä uuteen välilehteen

Uuteen välilehteen tai ikkunaan avautuvat linkit eivät ole saavutettavia. Sisällöntuottajalla on iso vastuu, joka vaikuttaa sivustokävijän saavutettavuuteen.