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 sivuilla 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 %:lla kävijöistä on erilaisia vaikeuksia sivujen ymmärtämisen kanssa. Tämä on jo paljon potentiaalisia asiakkaita, jotka tippuvat pelistä pois jos eivät pääse sisältöön käsiksi.
Tämän artikkelin keskeiset asiat huomioon ottamalla voidaan parantaa nettisivujen saavutettavuutta.
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 käyttää 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ä selaimelle 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 semanttisten HTML-elementtien käyttöä.
Otsikot
Otsikot ovat tärkeässä roolissa kun sivua silmäillään nopeasti 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, joissa 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öillä pitää olla vastineet tekstimuodossa. Tekstivastineet ovat hyödyllisiä 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ödyllinen hakukoneiden kannalta. Tekstitetystä videosta hyötyvät pohjimmiltaan kaikki, esimerkiksi vanhemmat, jotka eivät 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än selkeästi. Kuvan päälle tekstin alle voidaan asettaa liukuväri, joka parantaa tekstin erottuvuutta.
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, rivivälit ja rivin pituus tulee olla balanssissa. Suositeltava rivin maksimipituus on 50-60 merkkiä. Mitä pidempi 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.