Verkkosivujen saavutettavuus: käytännön opas selkeämpään sivustoon

Verkkosivujen saavutettavuus tarkoittaa, että erilaiset ihmiset voivat havaita sisällön, ymmärtää sen ja käyttää sivuston toimintoja. Se koskee esimerkiksi näköä, kuuloa, liikkumista ja tiedon käsittelyä. Hyöty näkyy myös tilapäisissä tilanteissa: puhelinta voi käyttää kirkkaassa auringossa tai yhdellä kädellä. Saavutettavuus kannattaa ottaa mukaan suunnitteluun alusta lähtien.

Aloita sivun rakenteesta ja kielestä

Anna jokaiselle sivulle selkeä pääotsikko ja ryhmittele sisältö kuvaavilla väliotsikoilla. Otsikon pitää kertoa osion aihe myös silloin, kun käyttäjä selaa vain otsikoita. Käytä tavallisia sanoja ja avaa tarpeelliset ammattitermit niiden ensimmäisen esiintymisen yhteydessä.

Erota rakenteellinen otsikko visuaalisesta korostuksesta. Pelkkä suuri kirjasinkoko ei tee tekstistä ohjelmallisesti otsikkoa. W3C:n kehittäjävinkit käsittelevät muun muassa otsikkorakennetta ja sivun osien tunnistamista. Verkkosivujen suunnittelun opas auttaa viemään sisällön rakenteen koko projektiin.

Varmista toiminta näppäimistöllä

Kokeile siirtymistä sivulla ilman hiirtä. Käyttäjän pitäisi päästä linkkeihin, valikoihin, painikkeisiin ja lomakkeen kenttiin loogisessa järjestyksessä. Kohdistuksen pitää näkyä, jotta käyttäjä tietää, missä hän on. Valikko tai avautuva ikkuna ei saa jättää käyttäjää tilanteeseen, josta ei pääse eteenpäin.

Käytä oikeaa elementtiä tehtävän mukaan: linkki siirtymiseen ja painike toiminnon käynnistämiseen. Jos ohjain näyttää painikkeelta mutta ei reagoi näppäimistöön, ulkoasu ei korvaa puuttuvaa toimintaa. Tarkista myös valikon sulkeminen ja paluu aiempaan kohtaan.

Tee tekstistä ja ohjaimista havaittavia

Varmista tekstin ja taustan riittävä kontrasti myös vaaleissa ja hillityissä sävyissä. Älä välitä olennaista tietoa pelkällä värillä: lomakkeen virhe tarvitsee myös ymmärrettävän kuvauksen. Tarkista, että sisältö säilyy luettavana suurennettaessa ja että kapealla näytöllä tärkeät toiminnot pysyvät käytettävissä.

Liikkuva sisältö voi vaikeuttaa keskittymistä tai aiheuttaa epämukavuutta. Harkitse animaation tarvetta ja huomioi käyttäjän vähennetyn liikkeen asetus. Käyttäjäkokemuksen opas auttaa arvioimaan, palveleeko visuaalinen ratkaisu tehtävää.

Kirjoita kuville tarkoituksenmukaiset tekstivastineet

Kerro tekstivastineessa olennainen tieto, jonka kuva välittää kyseisessä kohdassa. Tuotekuvan ja tilastokuvion tehtävät ovat erilaiset. Koristeellinen kuva ei tarvitse pitkää kuvausta, joka vain lisää kuuntelukuormaa. Jos kuvio sisältää olennaisia tuloksia, anna ne myös tekstimuodossa.

Vältä tärkeän ohjeen julkaisemista pelkkänä kuvana. Sama koskee videota: mieti, miten käyttäjä saa tiedon ilman ääntä tai kuvaa tarpeen mukaan. Sisältömuotojen suunnittelu helpottuu, kun vaihtoehdot huomioidaan ennen aineistojen tuotantoa.

Tee lomakkeesta ymmärrettävä

• Nimeä jokainen kenttä näkyvällä, kenttään liittyvällä nimilapulla.
• Kerro pakolliset tiedot ja tarpeelliset muotovaatimukset etukäteen.
• Kuvaa virhe ja sen korjaustapa lähellä kyseistä kenttää.
• Säilytä jo täytetyt tiedot mahdollisuuksien mukaan virheen jälkeen.
• Ilmoita lähetyksen onnistuminen selkeästi.

W3C:n ohje suosittelee lomakkeiden nimilappuja ja hyödyllisiä palautteita. Automaattinen tarkistus voi löytää osan ongelmista, mutta se ei yksin kerro, ymmärtääkö käyttäjä kysymyksen tai onnistuuko tehtävä.

Testaa ja ylläpidä saavutettavuutta

Yhdistä automaattisia tarkistuksia käsin tehtävään testaukseen sekä mahdollisuuksien mukaan erilaisten käyttäjien palautteeseen. Dokumentoi löydös, vaikutus ja korjaustapa. Tässä oppaassa käsitellyt käytännöt eivät yksin muodosta koko sivuston saavutettavuusarviointia; myös sisältö ja yksilölliset toiminnot pitää tarkistaa.

Liitä tarkistukset ylläpitoon, jotta uudet kuvat ja lomakkeet eivät tuo samoja ongelmia takaisin. Jos kehität nykyistä sivustoa tai suunnittelet uutta, tutustu verkkosivujen suunnittelu- ja toteutuspalveluun tai ota yhteyttä.