Saavutettavat verkkosivut on viiden blogitekstin sarja, jossa käsittelemme saavutettavien sivujen vaatimuksia, suunnittelua ja toteuttamista. Lue kaikki blogitekstit täältä!
Saavutettavien verkkosivujen suunnittelu ja toteutus
Sivuston saavutettavuudesta on hyötyä kaikille sivuston käyttäjille. Erityisesti saavutettavuudesta hyötyvät ne, joilla on yleisesti haasteita sivustojen käytössä, kuten esimerkiksi vanhempi väestö, oppimis- tai hahmottamisvaikeuksista kärsivät sekä näkövammaiset.
Medialuotsilla verkkosivuista tehdään lähtökohtaisestikin selkeitä ja sivujen käytettävyys otetaan huomioon kaikissa projekteissamme. Uusien saavutettavuuskriteereiden mukaisissa sivustoissa taas näihin asioihin kiinnitetään erityistä huomiota ja varmistetaan, että sivut täyttävät tarvittavat vaatimukset.
Saavutettavuuden toteutus lähtee jo sivuston suunnitteluvaiheesta. Voimme pohtia saavutettavuusasioita asiakkaan kanssa yhdessä, mutta asiakas voi myös huoletta luottaa parhaimmat saavutettavuusratkaisut meidän päätettäväksemme.
Mitä sivuston tekemisessä pitää ottaa huomioon saavutettavuuden kannalta?
-
Ulkoasu ja rakenne
- Sivut rakennetaan sellaisiksi, että kaikki sivun eri osat erottuvat selkeästi ja toiminnallisuudet on rakennettu loogisesti (esimerkiksi linkit ovat aina samanlaisia ja eroavat muista sivun elementeistä). Pääsisältö erottuu selvästi ja tärkein asia sijoitetaan heti sivun alkuun. Mikäli sivustosta tulee laaja, sivustolle tulee lisätä hakutoiminto. Jokaiselle sivulle lisätään myös linkki etusivulle. Sivuston käyttäjän tulee myös voida tietää koko ajan, missä kohtaa navigaatiorakennetta hän on.
- Tekstin koko ja fontti määritellään tapauskohtaisesti. Ei ole olemassa yhtä ainoaa hyvää kokoa tai kirjasintyyppiä. Mitä pienempää tekstiä sivustolla halutaan käyttää, sitä suuremmaksi tehdään tummuuskontrasti tekstin ja taustan välille.
- Myös muiden eri toimintojen tummuuskontrasti tehdään riittäväksi taustaan nähden. Värit eivät toisaalta ole myöskään ainoa keino erotella sisältöä. Sivustolla voidaan käyttää myös alleviivausta, lihavointia ja kursivointia, mutta näitä keinoja on syytä käyttää harkiten, jotta lukeminen ei vaikeudu.
-
Sisältö
- Saavutettavien sisältöjen periaatteisiin kuuluu, että teksti on selkeää. Tärkeimmät asiat voidaan kirjoittaa selkokielellä, mutta yleisesti hyvä ja ymmärrettävä yleiskieli riittää. Tekstikappaleiden tulisi olla melko lyhyitä ja niitä voidaan myös jaotella esimerkiksi kuvien käytöllä ja tekstin sijoittelulla.
- Sisällön kirjoittamisessa asiakasta auttavat ammattitaitoiset copywriterimme.
- Mediasisällöt tehdään lähtökohtaisesti sellaisiksi, että ne eivät käynnisty automaattisesti ja yli kolmen sekunnin mittaisissa videoissa on mahdollisuus keskeyttää toisto myös pelkällä näppäimistöllä. Vaihtuvien ja välkkyvien kuvien käyttöä yleisesti pyritään välttämään ja jos niitä halutaan käyttää, tehdään kuvien vaihtuminen riittävän hitaaksi sekä palaaminen edelliseen kuvaan mahdolliseksi.
-
Koodi ja ruudunlukuohjelmat
- Yksi tärkeimmistä asioista saavutettavilla sivustoilla ruudunlukuohjelmien kannalta on otsikoiden rakenne ja otsikkotyylien käyttö. Otsikkorakennetta voidaan ajatella ikään kuin sivun sisällysluettelona.
- Linkit, painikkeet ja alasvetovalikot tehdään perinteisillä tavoilla, joita käytetään yleisesti muilla sivustoilla. Tällöin html-koodissa olevat määritykset eri elementeille ovat ruudunlukuohjelmien tunnistettavissa. Sivustolla käytetään samanlaisia interaktiivisia elementtejä joka sivulla.
- Sivustolla käytettävien lomakkeiden saavutettavuus huomioidaan siten, että ruudunlukuohjelmat pystyvät auttamaan lomakkeen täyttämisessä ja myös näkyvä ohjeistus on riittävä.
- Kuville ja graafisille elementeille määritellään aina tekstivaste, jotta ruudunlukuohjelmat pystyvät kertomaan näkövammaiselle, mikä elementti on kyseessä. Myös esimerkiksi ladattavien tiedostojen nimi, koko ja tyyppi avataan ruudunlukuohjelmille tunnistettavaksi. Periaatteena on, että kaikki olennaisesti sivuston käyttöön liittyvä, mikä pystytään päättelemään näkemällä, tulisi olla avattuna tekstiksi koodin sisään.
- Teksti ilmaantuu näkövammaiselle käyttäjälle html-koodin mukaisessa järjestyksessä. Mikäli sivuston elementtejä järjestetään css-tyylimäärittelyillä, otetaan huomioon, että sisällön järjestys pysyy loogisena myös html-koodin puolella.
- Sivujen alkuun lisätään linkki, joka vie suoraan sivun pääsisältöön. Tämä helpottaa esimerkiksi käyttäjiä, jotka selaavat sivuja näppäimistön avulla. Koodin alkuun määritellään myös sivustolla käytettävä kieli, jonka perusteella ruudunlukuohjelmat voivat vaihtaa kielen oikeaksi ja selainten käännöstyökalut saadaan toimimaan oikein.
-
Saavutettavuuden tarkistaminen ja saavutettavuusseloste
- Sivustot tarkistetaan sivuston valmistumisen jälkeen ja mahdolliset puutteet korjataan rakenteeseen, ulkoasuun ja koodiin. Tarkistamiseen hyödynnetään siihen kehitettyjä ohjelmia. Tämän lisäksi sivustot tarkistetaan manuaalisesti WCAG 2.1 ohjeistukseen pohjautuvan tarkistuslistan mukaisesti.
- Asiakkaalle kirjoitetaan tarkistamisen jälkeen saavutettavuusseloste, joka lisätään sivustolle esimerkiksi alapalkkiin rekisteriselosteen lähelle. Selosteesta käy ilmi mikä sivusto on kyseessä, kuinka hyvin se vastaa saavutettavuusvaatimuksiin, onko sivustolla mahdollisesti vielä korjattavia asioita ja keneen käyttäjä voi olla yhteydessä, mikäli havaitsee puutteen saavutettavuudessa.
Saavutettavuutta tulee ylläpitää jatkuvasti
Verkkopalveluiden saavutettavuustyö on jatkuva prosessi, jossa pyritään kehittämään palvelua käytettävämmäksi omalla kehitystyöllä sekä loppukäyttäjien palautteiden perusteella. Kaiken ei tarvitse olla kerralla valmista, vaan sivuston muuttuessa myös saavutettavuutta voidaan kehittää jatkuvasti paremmaksi.
Vastaamme mielellämme asiasta nousseisiin kysymyksiin tarkemmin.
Mikäli saavutettavien sivujen teko on yrityksessänne tai yhdistyksessänne ajankohtainen, ota yhteyttä ja pyydä tarjousta!
LUE MYÖS:
Saavutettavat verkkosivut, osa 1: Miksi saavutettavuus on tärkeää?
Saavutettavat verkkosivut, osa 3: Mitä asiakkaan tulee ottaa huomioon saavutettavaa sivustoa suunniteltaessa?
Saavutettavat verkkosivut, osa 4: Kotisivujen saavutettavuus graafisen suunnittelun näkökulmasta
Saavutettavat verkkosivut, osa 5: Hyvä yleiskieli ja selkokieli – copywriterin terveiset