Saavutettavat nettisivut
Saavutettavuudella netissä tarkoitetaan sitä, että verkkosivujen sisältö pyritään tuomaan mahdollisimman laajan käyttäjäkunnan ulottuville, ottamalla huomioon käyttäjien erilaiset vammat, rajoitteet ja haastavat tilanteet.
Käyttäjän heikentynyt näkökyky haittaa nettisivujen sisällön havainnointia, huono kuulo vaikeuttaa videoiden tai podcastien kuuntelemista, motoriset rajoitteet vaikeuttavat sivujen navigointia ja erilaiset kognitiiviset haasteet hidastavat sisällön ymmärtämistä.
On myös paljon väliaikaisia rajoitteita, jotka koskevat meitä kaikkia. Kirkas auringonpaiste häiritsee tekstin lukemista, väsymys ja kiire vaikeuttavat pitkän tekstin ymmärtämistä tai hidas nettiyhteys estää raskaan sisällön latautumista.
Pelkästään taloudellisessa mielessä saavutettavuuden huomioiminen on järkevää. Arviolta 20 % kävijöistä on erilaisia vaikeuksia sivujen sisällön kanssa. Tämä on jo paljon potentiaalisia asiakkaita, jotka tippuvat pelistä pois jos eivät pääse sisältöön käsiksi.
Tähän artikkeliin on koottuna muutamia keskeisiä asioita, jotka huomioon ottamalla voidaan parantaa nettisivujen saavutettavuutta. Lista ei ole kaiken kattava, mutta alkuun sillä päästään jo hyvin.
Näppäimistöllä navigointi
Nettisivuja tulee pystyä käyttämään pelkästään näppäimistön avulla. Hiiren ja kosketuksen käyttäminen on haastavaa erityisesti ihmisille joilla on motorisia rajoitteita. Näppäimistöllä navigointi on myös tehokäyttäjien suosima tapa navigoida sivuja.
Semanttiset HTML-elementit tukevat näppäinkomentoja automaattisesti. Tab-näppäintä painamalla käyttäjä voi liikkua elementistä toiseen. Focus-tila näyttää mikä elementti vastaanottaa käskyjä näppäimistöltä. Focus-tilan korostaminen selkeästi on tärkeää.
Jos semanttisia HTML-elementtejä ei voida käyttää, tulee tabindex-attribuuttia käyttäen varmistaa, että elementti on käytettävissä näppäimistöllä. Piilotetut interaktiiviset elementit tulee määritellä siten, että niitä ei pysty valitsemaan vahingossa.
Semanttinen HTML
Semanttinen HTML tarkoittaa sitä, että käytetään oikeita HTML-elementtejä oikeissa paikoissa. Semanttinen HTML-elementti välittää tiedon sen sisällöstä selaimella ja näytönlukijalle, samoin hakukone osaa poimia oikeat tiedot hakutuloksiin.
Esimerkiksi <h1> tarkoittaa otsikkoa ja <p>-tunniste kappaletta. <div>-elementtiä ei saisi käyttää painikkeena, vaan sitä varten tarkoitettua <button>-elementtiä. On myös hyvä käyttää linkkejä ja nappeja oikeissa paikoissa. Linkkejä käytetään yleensä navigointiin, painikkeita jonkin toiminnon tekemiseen.
Semanttiset elementit sisältävät niille valmiiksi rakennettuja ominaisuuksia, jotka joudutaan rakentamaan manuaalisesti, jos elementtiä käytetään eri tarkoitukseen. Tämäkin siis puoltaa semanttisen HTML-elementtien käyttöä.
Otsikot
Otsikot ovat tärkeässä roolissa kun sivua skannataan visuaalisesti tai luetaan näytönlukijalla. Kuvaavien ja selkeiden otsikoiden käyttö on oleellista, koska näytönlukijoilla hypitään monesti otsikosta toiseen. Yleisin perusvirhe on tehdä otsikko lihavoimalla.
HTML-kielessä sivujen otsikoilla on hierakia. H1-tägi tarkoittaa pääotsikkoa ja sitä käytetään vain kerran sivua kohti. Ensimmäinen alaotsikko on H2. Jos tälle tarvitaan alaotsikkoa, on sen taso H3. Väliotsikoita kannattaa käyttää riittävästi ja välttää liian pitkiä tekstikappaleita.
HTML5-elementit, kuten main, nav ja aside toimivat myös alueina, joita voidaan hyppiä nopeasti näytönlukijoilla. Sivujen järjestys HTML-koodissa tulisi olla sama kuin sisällön esitystapa sivuilla.
Tekstivastineet
Jotta sivujen selaaminen onnistuu näytönlukijoilla, ei-tekstisisällöllä pitää olla vastineet tekstimuodossa. Tekstivastineet ovat varsin hydyllisiä kaikille käyttäjille ja parantavat myös hakukonenäkyvyyttä.
Valokuvat
Valokuvilla tulee olla tekstivastine, joka annetaan alt-attribuutilla. Jos kuva ei lataudu tai se latautuu erityisen hitaasti, alt-teksti näkyy kuvan paikalla. Jos kuvan sisältö on oleellista ja sitä ei ole avattu muussa sisällössä, on kuvauksen oltava mahdollisimman tarkka. Jos taas kuva on koristeellinen, ei alt-teksti ole niin tärkeä.
Linkit ja painikkeet
Painikkeilla ja linkeillä tulee olla lyhyet ja kuvaavat nimet. Painikkeissa teksti kertoo, mitä nappia painamalla tapahtuu. Jos painikkeessa käytetään vain ikonia, on hyvä lisätä aria-label-attribuutti jossa painikkeen toiminta kuvataan.
Linkeissä tulee selvitä, minne sitä painamalla päädytään. "Paina tästä" tai "Lue lisää" ei ole hyvä linkin teksti. Jos linkki vie tiedostoon, tekstistä tulee selvitä mitä tiedosto sisältää, tiedostomuoto ja sen koko. Jos valokuvaa käytetään linkkinä, tulee alt-kentässä kertoa linkin kohde.
Media
Videoihin tulisi lisätä tekstitys. Samoin äänitiedostot, kuten podcastit tulisi julkaista tekstimuodossa. Tekstitys on työläs prosessi, mutta on erittäin hyödyllistä hakukoneiden kannalta. Tekstitetystä videosta hyötyvät pohjimmiltaan kaikki, ne ovat hyödyksi esimerkiksi vanhemmalle, joka ei halua herättää nukkuvaa lasta.
Värit ja kontrasti
Tekstin ja sen taustan värin kontrasti tulee olla riittävän suuri. Vaalea teksti vaalealla taustalla, tai tumma teksti tummalla taustalla ei erotu riittävän hyvin. Riittävän kontrastin voi testata helposti monilla työkaluilla, kuten a11y:n Color Contrast-testerillä.
Tekstin näyttäminen kuvan päällä on yleinen tapa etenkin etusivun hero-kuvassa. Tällaisissa tapauksissa on huolehdittava, että teksti erottuu riittävä selkeästi. Kuvan päälle tekstin alle voidaan asettaa liukuväri, joka parantaa tekstin erottuvuuttaa.
Pelkän värin avulla ei kannata välittää käyttäjälle tärkeää tietoa. Lomakkeessa ei riitä, että ilmoitetaan virhe pelkästään värin muutoksella. Värisokealle tieto ei välttämättä välity. Virhe kannattaa kertoa myös tekstillä tai korostaa viivalla.
Sisällön rytmitys
Nettisivuja ei lueta kuten fyysistä kirjaa. Pitkät tekstikappaleet kannattaa jakaa lyhyempiin ja helpommin luettaviin osiin. Väliotsikoita kannattaa käyttää runsaasti ja sekaan on hyvä nostaa sisältöä tukevia kuvia, grafiikkaa tai videoita. Nämä rytmittävät sisältöä ja tekevät siitä miellyttävämmän lukea.
Tekstin koko, rivin välit ja rivin pituus tulee olla balanssissa. Suositeltava rivin maksimipituus on 50-60 merkkiä. Mitä pitempi rivi, sitä suurempi riviväli. Samoin kappaleiden, otsikoiden ja muun sisällön välinen tila tulee olla riittävä ja sopusoinnussa kokonaisuuteen nähden.
Tekstin määrittelyssä ja muuallakin ulkoasun rakenteessa kannattaa käyttää suhteellisia yksiköitä. Jos käyttäjä haluaa suurentaa tekstiä, säilyy rakenne eheänä ja tasapainossa.
Lisää vinkkejä saavutettavuuden parantamiseen voi lukea web.dev -sivustolta, jossa sivujen saavutettavuutta voi testata Lighthouse testityökalulla. Toinen hyvä tietolähde on The A11Y Project -sivusto.