Kuvakaappaus Helsingin taiteilijaseuran sivulta, jossa näkyvissä Hyppää pääsisältöön-linkki
Saavutettavuus

Saavutettavuus pellin alla

Osa saavutettavuuteen liittyvistä asioista näkyy normaalilla selaimella sivustoa selaavalle käyttäjälle. Tällaisia ovat esimerkiksi kontrastit, sisällön selkeys ja johdonmukaisuus sekä liikkuvien elementtien hallinta. 

Saavutettavuuteen vaikuttavat myös monet koodissa olevat asiat, joita ei päällepäin huomaa. Tässä artikkelissa keskitytään näppäimistöllä tai ruudunlukijalla sivustoa käyttäviin.

Näppäimistöllä liikkuminen

Ensimmäisenä on hyvä tarkastaa, että sivustolla ylipäänsä pystyy liikkumaan sivustolla, ja että sillä pääsee kaikkiin tarvittaviin elementteihin. Näppäimistöllä pystyy selaamaan sivun linkkejä eteenpäin tabulaattoria painamalla. Valitettavan usein näkee esimerkiksi sitä, että pudotusvalikkoon ei pääse ollenkaan näppäimistöllä. Pahimmassa tapauksessa käy niin, että näppäimistöä (tai ruudunlukijaa) käyttämällä ei pääse kuin tietyn osion etusivulle, ja kaikki sen alasivut jäävät käyttäjän ulottumattomiin.

Seuraavaksi on hyvä tarkistaa, että näppäimistöllä liikkuminen ylipäänsä näkyy käyttäjälle. Kun linkki on valittu, sen ympärille pitäisi tulla reunukset. Selaimen oletusreunukset saattavat olla liian himmeät, eikä niiden kontrasti aina täytä saavutettavuusvaatimuksia. Reunukset pitäisi näkyä myös kuvakkeissa, jotka ovat linkkejä.

Ruudunkaappaus hel.fi-sivustolta
Esimerkki näppäimistökohdistimesta hel.fi-sivustolta

 

Kuvakkeiden ja alueiden nimeäminen

Sivustoilla näkee usein kuvakkeita, joiden tarkoitusperät suurin osa käyttäjistä tunnistaa ensivilkaisulta. Esimerkiksi suurennuslasikuvake tarkoittaa sisältöhakua ja nuoli ylöspäin vie sivun alkuun. Jos näitä kuvakkeita ei ole kuitenkaan koodissa nimetty oikein, ei ruudunlukijaa käyttävä voi tietää, mitä kuvakkeen klikkaamisesta tapahtuu. Epäselvissä tapauksissa myös normaalia selainta ja hiirtä käyttävä voi saada hyödyllistä tietoa, jos osoittimen kuvakkeen päälle viemällä tulee näkyviin lisätietolaatikko.

Kuvakkeiden lisäksi esimerkiksi piilotettuun hakukenttään tai valikkoon pitäisi lisätä aria-expanded -määritys. Esimerkiksi hampurilaisvalikossa tämä kertoo, onko valikkoelementti auki vai kiinni.

Osioiden ohituslinkit

Sivustojen ylälaidassa on usein päävalikko ja mahdollisesti muita linkkejä (kuten some-kanavien linkit). Näitä läpi selaillessa voi käyttäjää alkaa jo turhauttaa, milloin oikein päästään varsinaiseen asiaan. Saavutettavilla sivuilla tulisikin olla Hyppää pääsisältöön-linkki heti sivun alussa, jolloin tältä linkkien läpiselaamiselta vältytään.

Lisäksi tietyillä osioilla on hyvä olla ohituslinkki. Esimerkiksi Youtube- ja muut ulkopuoliset upotukset sisältävät paljon toiminnallisia linkkejä, jotka täytyy kaikki selata läpi, jos ennen upotusta ei ole hyppäyslinkkiä. Myös Ajankohtaista-osiot ja muut listaukset olisi hyvä päästä ohittamaan nopeasti, varsinkin jos näiden jälkeen sivulla on olennaista tietoa.