Perusasiat saavutettavista verkkosivustoista

Monella ihmisellä on erilaisia rajoitteita, jotka hankaloittavat digitaalisten palveluiden käyttöä. Tällaisia rajoitteita ovat esimerkiksi kuulo- ja näkövammat, erilaiset kongitiiviset, fyysiset ja neurologiset vammat ja sairaudet kuten epilepsia ja MS-tauti. Pelkästään Suomessa on satojatuhansia ihmisiä, joihin vaikuttaa jokin edellä mainittu. Digitaalisten palveluiden suunnittelussa on tärkeää ottaa huomioon myös nämä ihmiset, joilla näitä rajoitteita on.

Tarkalleen ottaen myös lainsäätäjä vaatii, että nämä ihmiset otetaan huomioon.

Euroopan unionin jo vuonna 2016 voimaan tullut saavutettavuusdirektiivi velvoittaa, että kaikkien julkisten verkkosivustojen täytyy olla saavutettavia ja täyttää vähintään WCAG 2.1 AA-tason vaatimukset. Asiaa koskeva lainsäädäntö saatettiin Suomessa voimaan vuonna 2019.

Tätä lainsäädäntöä tulee edelleen täydentämään esteettömyysdirektiivi, jonka lainsäädäntö tulisi saattaa sovellettavaksi kansalliseen lainsäädäntöön vuonna 2025.

Jälkimmäinen direktiivi velvoittaa, että julkisten sivustojen lisäksi tärkeimpien yksityisten palveluiden kuten pankkien verkkosivustojen täytyy olla saavutettavia WCAG 2.1 AA-tason vaatimuksilla. Vaikka direktiivit eivät velvoitakaan kaikkien verkkopalveluiden olevan WCAG 2.1 AA-ohjeiston mukaisia, mielestäni silti saavutettavuuden peruspilarit pitää löytyä jokaiselta verkkosivustolta.

Tämä mainittu WCAG on verkkosivujen saavutettavuuden kehittämisen avuksi kehitetty standardi (WCAG Web Content Accessibility Guidelines). WCAG-ohjeisto toimii verkkosivuston kehittäjän ja sisällöntuottajan tukena saavutettavuuden kehittämisessä. Saavutettavuus verkkosivuilla ei siis ole itsestäänselvyys, vaan se pitää ottaa huomioon jo verkkosivuston suunnittelu- ja kehitysvaiheessa.

Mitä pitää ottaa huomioon, jotta verkkosivusto olisi saavutettava?

Seuraavissa kappaleissa on kerrottu tärkeimpiä A ja AA-vaatimusten kriteereitä.

Visuaalinen saavutettavuus ja erottuvuus

Tekstien, otsikoiden ja eri elementtien kuten esimerkiksi lomakekenttien on erotuttava selkeästi taustastaan. WCAG AA-tason mukaan tekstin kontrastisuhteen täytyy olla vähintään 4,5:1 ja suurien tekstien ja muiden käytettävyyteen vaikuttavien elementtien kontrastisuhteen täytyy olla vähintään 3:1. Kontrastisuhteella vaikutetaan siihen, että teksti ja muut elementit ovat luettavissa suurimmalla osalla käyttäjiä.

Linkkityylien tulee erottua muusta sisällöstä. Sisällön seassa olevat linkit täytyy erottaa selkeästi muusta sisällöstä esimerkiksi alleviivauksella ja värillä.

Näppäimistö- ja hiirikohdistimen tulee erottua, jotta käyttäjä saa palautetta siitä mikä kohta sivusta on aktiivinen. Kun käyttäjä selaa sivua näppäimistöllä, tulee nappien, linkkien ja lomakekenttien näyttää sitä mukaan aktiiviselta, kun käyttäjä on niiden kohdalla. Kohdistimen aktiiviseen tyyliin ei riitä ainoastaan värien käyttö.

Tekstin on oltava tarpeeksi selkeää niin fonttikoon, rivivälien kuin fonttien tyypin kannalta. Teksti ei saa hajota ja vuotaa yli sivustosta silloinkaan, kun verkkosivua zoomataan 200% asti.

Myös epileptikot on huomioitava: animaatiot eivät saa välähtää kolmea kertaa enempää.

Verkkosivun täytyy myös toimia responsiivisesti. Verkkosivuston täytyy pysyä ehjänä kaikilla laitteilla ja kaikilla eri kokoisilla näytöillä niin, että sivustoon ei tule sivuttaista scrollausta ja niin, että sivuston sisältö ei vuoda yli sivustosta.

Sivuston rakenne ja hallittavuus

Sivustoa pitää pystyä selaamaan pelkkää näppäimistöä käyttäen, ja sen kaikkien toimintojen kuten navigaation, nappien ja lomakkeiden on toimittava myös pelkästään näppäimistöllä. Sivustolla näppäinkohdistin ei myöskään saa jäädä jumiin esimerkiksi popup-ikkunaan niin, että käyttäjä ei voi enää pelkkää näppäimistöä käyttämällä sulkea sitä.

Navigaation on oltava selkeä ja ehjä. Sivustolla tulisi olla myös linkkejä, joilla voi hypätä sisällön tai navigaation yli, ja nopeuttaa näppäimistökäyttäjän sivulla liikkumista.

Sivuston kieli on ohjelmallisesti kerrottava HTML Lang-attribuutilla selaimelle jotta ruudunlukija osaa käyttää oikeaa kieltä sivustolla.

Sivutolla on tärkeää käyttää oikeita semanttisia HTML-elementtejä. Näillä tarkoitetaan sitä, että tietyissä kohdissa sivustolla käytetään juuri siihen tarkoitettua HTML-elementtiä. Esimerkiksi varmistetaan se että, kaikki klikattavat ja toiminnallisuuden sisältämät elementit, jotka eivät ole linkkejä, ovat <button>-elementtejä. Tällä tavoin varmistetaan se, että myös näppäinkäyttäjät voivat käyttää näitä toimintoja. Tällä varmistetaan myös se, että ruudunlukija osaa kertoa mikä elementti on kyseessä.

Verkkosivuston kuvilla täytyy olla tekstivastine. Tämä tulisi tehdä HTML:n alt-attribuutilla, joka toimii kuvan tekstivastineena näkövammaiselle. Tätä vastinetta käytetään erittäin usein väärin, ja sillä pitäisi kertoa mitä kuvassa on, ei niinkään sitä, kenen ottama kuva on.

Myöskin kaikkien videoiden, äänien ja musiikin pitää olla hallittavissa ja pysäytettävissä sekä hiirellä, että näppäimistöllä.

Lomakkeiden täytyy olla saavutettavissa. Lomakkeiden nimilapun <label> tulee olla näkyvissä ja niiden tulee olla liitettynä oikeaan kenttään. Lomakkeen tulisi myös ilmoittaa käyttäjälle virheistä selkeästi, käyttäen myös muuta ilmoitusta virheestä kuin esimerkiksi punaista väriä virheellisessä kentässä.

Jotta sivusto saadaan toimimaan hyvin myös ruudunlukijoiden kanssa, sillä tulisi käyttää WAI-ARIA-attribuutteja saavutettavuuden parantamiseen. Esimerkiksi: jos sivulla on painike, jolla avataan valikko, näkövammainen käyttäjä ei tiedä onko navigaatio auki vai kiinni. WAI-ARIA:n attribuuteilla voidaan kertoa ruudunlukijalle, että valikko on nyt auki tai kiinni.

Saavutettava sisältö

Sisällön rakenteella on vähintään yhtä tärkeä rooli kuin teknologialla. Usein saavutettavuus kaatuukin sisältöön, vaikka teknologia olisikin muistettu katsoa kuntoon.

Onneksi sisällön rakentaminen saavutettavaksi on helppoa, ja siinä auttavat samat asiat, jotka parantavat sivuston hakukonenäkyvyyttä muutoinkin. Otsikoinneissa tulisi käyttää aina oikeaa otsikkotasoa, H1 -> H2 -> H3… . Otsikoiden tulisi olla selkeitä ja sisältöä kuvaavia jne.

Myös linkkien tekstien tulee olla kuvaavia. Esimerkiksi ”lue lisää”, ei ole kuvaava linkin teksti mutta ”Lue lisää blogeja” on jo heti kuvaavampi. Ruudunlukijaa käyttävä käyttäjä kun ei voi tietää, mistä asiasta ollaan lukemassa lisää.

Saavutettavuuden testaaminen

Lopuksi: kuten kaikissa kehitystöissä, myös saavutettavuuden kannalta testaaminen on kaiken A ja O. Sivuston saavutettavuus tulisi testata aina eri laitteilla, ainakin puhelimella ja tietokoneella. Olen itse käyttänyt saavutettavuuden testaamiseen NVDA-ruudunlukijaa ja Applen VoiceOver-ruudunlukijaa.

Saavutettavuus ei lopulta ole vaikeaa, mutta ylimääräistä huomiota se vaatii.