Verkkosivujen saavutettavuus — vinkkejä sisällöntuotantoon

Digi­palvelu­lain tavoit­teena on ihmis­ten yhden­ver­taisu­us dig­i­taalises­sa yhteiskun­nas­sa ja yhden­mukaiset vaa­timuk­set saavutet­tavu­udelle, tämän vuok­si verkko­sivu­jen saavutet­tavu­u­teen on hyvä kiin­nit­tää huomio­ta sisältö tuotettaessa.

Huomioimal­la nämä vinkit väl­tyt kor­jaa­mas­ta niitä myöhem­min saavutet­tavu­us audi­toin­nin jälkeen.

Otsikoin­ti
Leipätek­sti
Linkit
Kuvat

Otsikointi

Otsikot tulee aina olla hier­arkises­sa järjestyk­sessä. Otsikon kokoa voi muut­ta otsikko lohkon ase­tuk­sista, ei otsikko­ta­soa muuttamalla. 

Sivus­tol­la saa olla VAIN yksi h1 tason otsikko. Tämä usein tulee jo sivupo­h­jan mukana ja on sivun pääotsikko.

Word­Press tar­joaa automaat­tis­es­ti h2 tason otsikkoa ensim­mäisek­si. Otsikko taso muute­taan otsikko ‑lohkon työkalupalkista.

Käytä otsikoin­ti­in aina otsikko ‑lohkoa.

Esimerkki otsikkohierarkiasta

<h1>Pääotsikko</h1>

<h2>Ensimmäinen asiaotsikko</h2>

<h2>Toinen asiaotsikko</h2>

<h3>Ensimmäinen toisen alaot­sikon alaotsikko</h3>

<h3>Toinen toisen alaot­sikon alaotsikko</h3>

<h4>Toinen toisen alaot­sikon alaot­sikkon alaotsikko</h4>

<h2>Toinen asiaotsikko</h2>

Esimerkki otsikkohierarkiasta kuvana, jossa näkyy mistä otsikko taso valitaan ja otsikot

Otsikkohierarkia kuvana, jossa näkyy mistä otsikko taso valitaan ja otsikot WordPress sivueditorissa

Leipäteksti

Muu­tamia hyödyl­lisiä vinkke­jä saavutet­tavama­paan sisällöntuotantoon. 

  • Älä jätä tyhjiä lohko­ja sisältöön! Kun olet saanut sisäl­lön valmi­ik­si tarkas­ta lopuk­si ettei tek­stin seassa ole tyhjiä kap­pale lohko­ja tai mui­ta lohko­ja. Tyhjät lohkot anta­vat tarkas­tuk­ses­sa automaat­tis­es­ti saavutettavuusvirheen
  • Käytä välike ‑lohkoa tai lohkon tyyliase­tuk­sista löy­tyvää mar­ginia luo­maan väliä lohko­jen väliin.
  • Luo lyhy­itä kap­palei­ta ja käytä kuvaavia väliot­sikoi­ta. Vältä pitk­iä kappaleita! 
  • Käytä luet­teloi­ta / listoja
  • Käytä selkeää yleiskieltä, vältä kieliku­via ja sanontoja!
  • Vältä tek­stis­sä alle­vi­ivaus­ta, jot­ta sitä ei käsitä linkiksi.

Linkit

  • Vältä epämääräisiä linkke­jä ja painikkei­ta, esim. “Klikkaa tästä”
  • Pdf tiedos­ton esi­tyk­seen voi käyt­tää linkin sijaan tar­jol­la ole­via lohko­ja, kuten doku­men­tit ja media ‑lisäosan medi­atiedos­tot tai tiedos­to lohkon lataa painike.
  • Lai­ta pdf ‑tiedos­tot ja ladat­ta­vat kuvat aukea­maan uuteen välilehteen.
linkin muokkaus työkalupalkki, korostettuna muokkaa linkki painike
linkin muokkaus ponnahdusikkuna kuva, jossa ruksittuna "Avaa uudessa välilehdessä" valinta

Esimerkkejä saavutettavista linkeistä

Alla muu­tamia malle­ja joil­la linkeistä voi luo­da saavutettavampia.

Linkki tekstin lomassa

Link­ki tek­stin lomas­sa, saat linkille värin kun val­it­set kap­pale lohkolle tek­stin värin, avatuu sen jäl­keen valikkoon koh­ta jos­sa voit vali­ta linkille värin erik­seen (ks.kuva).

Wordpress kappalelohkon värio asetus valinnasta kuva

Julkkarin ohjeet sivus­tol­ta löy­dät ohjeista Word­Pressin käyttöön.

Ulkopuolinen linkki

Voit pyytää Julkkarin tiim­iltä, että laita­mme sivus­tol­lenne CSS ase­tuk­sen, jol­la voit luo­da ulkop­uolisen linkin ikonin linkin perään.

Julkkarin ohjeet sivus­tol­ta löy­dät ohjeista Word­Pressin käyttöön.

Maininta linkin aukeamisesta toiseen välilehteen

Mikäli link­ki aukeaa toiseen välile­hteen, on hyvä maini­ta se linkin yhteydessä.

Julkkarin ohjeet (link­ki avau­tuu uuteen välile­hteen) sivus­tol­ta löy­dät ohjeista Word­Pressin käyttöön.

Vaihtoehtoisia tapoja esim. pdf tiedoston linkin esittämiseen

Medi­atiedos­tot vaatii, että sivus­tolle on asetet­tu Mei­ta doku­men­tit ja media lisäosa. Tässä esimerkissä linkkinä toimii Mei­ta pysty logo, sik­si tiedos­to lohko antaa kuva ikonin.

Tiedosto ‑lohko
(latauspainikkeella)
Mei­ta logo pystyLataa
Meditiedostot ‑lohko (ikonilla)
Meditiedostot ‑lohko

Kuvat

Kaikil­la kuvil­la tulisi olla alt ‑tek­sti, eli vai­h­toe­htoinen tek­sti. Se ker­too kuvan sisäl­lön niille käyt­täjille, jot­ka eivät näe kuvaa tai joille kuva ei lataudu. Hyvin kir­joitet­tu ALT-tek­sti paran­taa myös hakukonenäkyvyyttä.

Hyvä ALT-tek­sti vas­taa kysymyk­seen:
👉 Mitä käyt­täjän pitäisi tietää tästä kuvas­ta, jos hän ei näe sitä?

Vältä kuvia, jois­sa on tek­stiä, ne eivät ole saavutet­tavia. Ruudun­luk­i­ja ei osaa lukea kuvas­sa ole­vaa tekstiä.

Alt-teksti tarvitaan

  • Kuva välit­tää sisältöä, joka on olen­nainen ymmärtämiselle
    Esim. val­oku­va tapah­tu­mas­ta, tuoteku­va, opas­grafi­ik­ka, kaavio, esimerk­ki, infografiikka.
  • Kuva toimii linkkinä
    → ALT-tek­stis­sä ker­ro­taan minne link­ki vie (“Lue lisää palveluista”, ei “Logo”).
  • Kuvas­sa on tek­stiä, joka ei esi­in­ny muual­la sivul­la
    (esim. kuvana esitet­ty numero, otsikko, kaaviotekstitys).

Alt-tekstiä ei tarvita (jätetään tyhjäksi)

Kun alt ‑tek­sti on tyhjä, ruudun­luk­i­ja ohit­taa kuvan kokon­aan, mikä on saavutet­tavu­u­den kannal­ta oikein alla ole­vis­sa tapauksissa.

  • Kuva on pelkkä koriste
    • Ei lisää merk­i­tys­tä sisältöön
      Esim. taus­taku­vat, kuvioele­men­tit, visuaaliset täytekuvat.
  • Kuva tois­taa tarkalleen vier­essä ole­van tekstin
    • Esim. graafi, jon­ka numerot on jo selitet­ty tek­stis­sä – kuva toimii vain havainnollistuksena.
  • Logo sivun yläosas­sa, mut­ta tek­sti ker­too jo sivus­ton nimen
    • Usein logo on koris­tet­ta, mut­ta jos logo on link­ki etu­sivulle, ALT-tek­stis­sä ker­ro­taan “Etu­sivu” (ei ”Yri­tys Oy Logo”).