Saavutettavuuden tekniseen tarkistamiseen voi käyttää ilmaista WAVE Web accessibility evaluation tool -verkkopalvelua. Kirjoita verkkosivun osoite, esim. https://blog.edu.turku.fi/esimerkkikoulu/ (=Esimerkkikoulu-sivuston etusivu) Web page address -kenttään ja paina kentän päädyssä olevaa nuolta.

WAVE-palvelun osoitekenttä.

Huom! Tuloksena saamasi analyysi koskee ainoastaan valittua sivua. Toista WAVE-tarkistus ainakin sivustosi tärkeimpien sivujen (esim. etusivu, yhteystiedot ja henkilökunta) ja viimeisimpien artikkeleiden osalta. 

WAVE-palvelu analysoi verkkosivun ja näyttää saavutettavuuteen liittyvät virheet (Errors, punaisella) ja huomautukset (Alerts, keltaisella). Samalla näytetään myös muuta saavutettavuuteen liittyvää tietoa sivuston rakenteesta ja koodista. Contrast Errors -kohta kertoo sivun kohdista, joissa kontrasti esimerkiksi tekstivärin ja taustavärin välillä on liian pieni ja saattaa haitata luettavuutta. Tarkempaa tietoa huomioista saat klikkaamalla kyseisiä kohtia sivulla tai valitsemalla sivuvalikosta yksityiskohtanäkymän lippukuvakkeen takaa. Yleisesti ottaen punaiset kohteet tulisi korjata ja keltaiset ainakin tarkistaa; muut kohteet voi jättää huomiomatta.

Kuvakaappaus WAVE-palvelun käytöstä.

Mitä WAVEn huomioille tulee tehdä?

Blog.edu.turku.fi-palvelussa olevilla sivustoilla on yhteinen, keskitetysti hallinnoitu tekninen alusta. Tästä syystä sivustojen pääkäyttäjätkään eivät voi vaikuttaa kaikkiin WAVE-palvelun tekemiin huomautuksiin. Seuraavaan listaan on koottu tärkeimpiä kohtia, jotka sivustoilta voi itse korjata. Huomaa, että osan muutoksista voi tehdä vain päätoimittajan tai pääkäyttäjän oikeuksin.

Lisää puuttuvat kuvien alt-tekstit

Kaikissa kuvissa tulisi olla tekstivastine, joka antaa tietoa kuvasta niille käyttäjille, jotka eivät näe kuvaa. Esimerkiksi näkövammaisten henkilöiden ruudunlukuohjelmat tunnistavat ja lukevat tällaisen vaihtoehtoisen kuvauksen. Voit syöttää kuvaan vaihtoehtoisen tekstin muokkaamalla kuvaa sivun tai artikkelin sisällä ja kirjoittamalla kuvauksen Vaihtoehtoinen teksti -kenttään. Kuvan vaihtoehtoisen oletustekstin voi lisätä kuvaan mediakirjastossa, mutta tämä ei päivitä niitä sivuja tai artikkeleita, jossa kuva on jo käytössä.

Jos kuvassa on kyse logosta tai täytekuvasta, voi alt-tekstin merkitä tyhjäksi. Alt-tekstin loppuun on suositeltavaa laittaa piste; tämä auttaa ruudunlukuohjelmien toimintaa.

Otsikoi ja jäsennä oikein

Sivun tai artikkelin sisältö tulisi olla selkeästi ja loogisesti otsikoitu. Useimmissa teemoissa sivun nimi merkitään automaattisesti Otsikko 1 -tyylin (h1) tekstiksi, joilloin esimerkiksi ruudunlukuohjelmat tunnistavat sivun aihealueen. Otsikoi sisältötekstit käyttämällä editorin tyylivalikosta löytyviä otsikkotasoja järjestelmällisesti, esimerkiksi

Otsikko, taso 2
Kappale

--Otsikko, taso 3
--Tekstikappale
--Tekstikappale

----Otsikko, taso 4
----Tekstikappale

----Otsikko, taso 4
----Tekstikappale

--Otsikko, taso 3
--Tekstikappale

Otsikko, taso 2
Tekstikappale

Jos tekstissäsi on luetteloita tai listoja, käytä editorin järjestämätöntä listaa (”ranskalaiset viivat”) tai numeroitua listaa.

Älä korosta otsikkotyylillä

Älä käytä otsikkotyylejä korostaaksesi kappaletekstissä olevaa sisältöä. Käytä tällaisissa tilanteissa esimerkiksi lihavointia, kursivointia ja poikkeavaa tekstin väriä (riittävä kontrasti kuitenkin huomioiden).

Korjaa linkkeihin liittyvät virheet

Korjaa tyhjät linkit (=ei määritettyä osoitetta) sekä rikkinäiset linkit (=osoittavat sivulle, jota ei ole olemassa) joko poistamalla linkki tai korjaamalla sen osoite.

Korjaa kontrastivirheet

Korjaa sivujen ja artikkeleiden tekstien sisältä kontrastivirheitä muuttamalla tekstin tai taustan väriä niin, että teksti erottuu selkeästi kaikille käyttäjille. Ylä- ja alatunnisteissa tai valikoissa oleviin kontrastivirheitä et välittämättä pysty korjaamaan.

Tarkista uudelleen

Tarkista tekemiesi muutosten jälkeen sivu uudelleen WAVE-palvelulla varmistaaksesi korjausten oikeellisuuden.

Muista myös liitetiedostojen saavutettavuus

Saavutettavuuden vaatimukset koskevat myös blogissa olevia liitetiedostoja. Tarkista myös näiden osalta esimerkiksi otsikoinnin tasot ja riittävät kontrastit. Word-muotoiset tiedostot on suositeltavaa tallentaa pdf-muodossa.

Asiasisällön saavutettavuus

Osa saavutettavuutta on myös selkeä ja ymmärrettävä kieli. Varmista, että sivustosi on sisällöltään helposti luettavaa eikä esimerkiksi sisällä tarpeettomasti ”viranomaiskieltä” tai vaikeaselkoisia ilmaisuja.

Miten tarkistan sivuston saavutettavuuden?