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 tekstivastineet

Sisällöltään tärkeisiin kuviin tulee kirjoittaa tekstivastine (=vaihtoehtoinen teksti, alt-teksti), joka kertoo kuvan sisältämän tiedon tekstimuodossa. Esimerkiksi näkövammaisten henkilöiden käyttämät ruudunlukuohjelmat tunnistavat ja lukevat kuvien tekstivastineet.

Jos kuva ei ole oleellista sivun sisällölle (esimerkiksi kuvituskuva tai logo), alt-tekstin voi merkitä tyhjäksi. Tekstivastineen loppuun on suositeltavaa laittaa piste, koska tämä auttaa ruudunlukuohjelmien toimintaa.

Tekstivastineen voi WordPressissä syöttää suoraan artikkelia tai sivua muokattaessa. Tiedon voi lisätä kuvaan myös mediakirjastossa, mutta tämä ei päivitä niitä sivuja tai artikkeleita, jossa kuva on jo käytössä.

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
Tekstikappale

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

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

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

--Otsikko, taso 3
--Tekstikappale

Otsikko, taso 2
Tekstikappale

--Otsikko, taso 3
--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).

Tarkista muotoilu

Tekstin korostuksessa voit harkiten käyttää lihavointia ja kursivointia. Älä kuitenkaan välitä korostuksella tietoa, jota ei voi havaita
näkemättä korostusta.

Tasaa teksti mieluiten vasemmalle ja jätä oikea reuna muuttuvaksi.

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, kuvien tekstivastineet ja riittävät kontrastit.

Ohje Word-tiedoston julkaisuun saavutettavassa muodossa (Word 2016):

  • Varmista, että otsikkotekstit ovat merkitty otsikoiksi käyttämällä Wordin tyylejä
  • Lisää sisällöllisesti merkitseviin kuviin vaihtoehtoinen teksti
  • Varmista, että dokumentissa on kaikkialla riittävät kontrastierot (älä esim. jätä keltaista tekstiä valkoiselle taustalle)
  • Julkaise tiedosto pdf-muodossa käyttämällä Vie => Luo PDF-tiedosto -toimintoa (ei tallennustoimintoa!)

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?