Siirry sisältöön

Yleiset ohjeet sisällöntuottajille

Kaikki, jotka tekevät verkkosivuille sisältöjä eli tekstiä, kuvia, infografiikkaa tai videoita, voivat parantaa verkkopalvelun saavutettavuutta omalta osaltaan. Esimerkiksi tekstin selkeys ja johdonmukainen otsikointi on aivan keskeistä verkkopalvelun saavutettavuuden kannalta.

Tämän sivun ohjeet:

Tiivistelmä: keskeisimmät asiat lyhyesti listattuna

Kirjoita selkeästi.

  • Mieti, ketkä ovat tekstisi lukijoita. Yritä asettua lukijan asemaan.
  • Mikä on tärkeintä? Tuo se heti tekstin alkuun.
  • Käytä mahdollisimman tavallisia ja yleisiä sanoja. Vältä vaikeita termejä.
  • Käytä yksinkertaisia lauserakenteita. Vältä lauseenvastikkeita.

Tee tekstistä helposti silmäiltävää.

  • Pidä kappaleet lyhyinä.
  • Käytä listoja.
  • Käytä väliotsikoita.

Tee otsikoista kuvaavia.

  • Käytä mieluiten lauseotsikoita ja laita tärkein asia otsikon alkuun.
  • Merkitse otsikot otsikoiksi editorissa – näin varmistat, että otsikot on myös kooditasolla oikein merkattu.
  • Käytä otsikkotasoja loogisesti. Yläotsikon alla voi olla alaotsikoita, näiden alla taas alemman tason otsikoita jne.
  • Älä hypi otsikkotasojen yli.

Tee linkeistä ymmärrettäviä.

  • Linkkitekstin pitäisi kertoa linkin kohteesta.
  • Jos linkki ohjaa tiedostoon, kerro se linkkitekstissä.
  • ”Lue lisää” on pääsääntöisesti huono linkkiteksti.

Käytä myös kuvia, infografiikkaa ja videoita tukemaan viestiä, jos se on mahdollista.

  • Kirjoita kuville tekstivastine eli alt-teksti.
  • Videoissa pitäisi olla tekstitys (tai videon sisältämä tieto pitää olla muuten myös tekstinä saatavilla).
  • Muista, että kuvien ja videoiden sisältämä tieto pitää antaa myös tekstinä (esim. kuvan tekstivastineena, tekstityksenä tai verkkosivun leipätekstissä).

Tekstin ja kielen selkeys

Tekstin selkeys on yksi tärkeimmistä sisällön saavutettavuuden tekijöistä. Julkishallinnossa tekstillä ja kielellä on erittäin merkittävä asema – hallinnon työn tuloksia ja tuotoksia ovat monenlaiset tekstit, joilla välitetään asiakkaille tietoa ja viestitään kansalaisten kanssa.

Tässä on joitakin keskeisiä ohjeita tekstin selkeyden parantamiseksi kaikille, jotka kirjoittavat verkkotekstejä.

Kiinnitä huomiota tekstisi lukijaan ja sävyyn.

  • Mieti, kenelle ja millaiselle lukijalle tekstisi on ensisijaisesti suunnattu.
  • Kirjoita teksti näkökulmasta, joka avautuu lukijalle.
  • Mieti, onko tekstin sävy sen tavoitteen kannalta oikea.
    • Esimerkiksi esittelevä teksti on neutraali, blogiteksti voi olla rohkeasti kantaaottava.

Käytä selkeää ja helposti ymmärrettävää kieltä.

  • Suosi lyhyitä lauseita ja virkkeitä.
  • Suosi suoraa sanajärjestystä (tekijä – verbi – (tekemisen kohde).
  • Vältä lauseenvastikkeita ja monimutkaisia ilmauksia.
    • Esimerkiksi: ”Sinun täytyy kirjautua sisään verkkopalveluun, jotta voit lainata kirjan.”
      mieluummin kuin ”Lainataksesi kirjan sinun täytyy kirjautua sisään palveluun”
  • Käytä yleisiä, kaikille tuttuja sanoja.
  • Vältä erikoistermien käyttöä. Selitä vaikeat erikoissanat.
  • Kirjoita lyhenteet auki.
  • Käytä mieluiten lauseotsikkoa, kun se on mahdollista.
    • Esimerkiksi: ”Tekstin selkeyttä voi parantaa helposti” on lauseotsikko, mutta ”Tekstin selkeys” ei ole lauseotsikko.
  • Suosi verbi-ilmauksia ja vältä ”substantiivitautia”.
    • Verbit helpottavat ymmärtämistä.
    • Esim. ”Lautakunta päättää asiasta.”
      Ei näin: ”Päätös asian osalta tehdään lautakunnassa.”
    • Esim: ”Koska sopiva vertailuryhmä puuttuu, hankkeen edullisuutta ei pystytä selvittämään luotettavasti.”
      Ei näin: ”Sopivan vertailuryhmän puuttuminen estää hankkeen edullisuuden luotettavan selvittämisen.”
    • Lisää substantiivitaudista ja sen välttämisestä Kotuksen blogissa: Substantiivitaudin oireita
  • Tarkista tekstin oikeinkirjoitus.
  • Tarkista tekstin sujuvuus lukemalla se ääneen.

Tervetuloa myös Facebook-ryhmään ”Kirjoita selkeästi – ryhmä työelämän viestijöille”, jossa on keskustelua, vinkkejä ja linkkejä selkeästä kirjoittamisesta.

Lisää tietoa selkeästä kirjoittamisesta löydät myös esimerkiksi Kotuksen virkakieliohjeista ja Celian blogikirjoituksesta Selkeä kieli on perusoikeus.

Kotus on avannut valtion eOppiva-sivustolle hyvän virkakielen verkkokurssin. Kurssi on ainakin aluksi vain valtion työntekijöiden käytössä.

Tekstisisällön visuaalinen muotoilu

Tekstin muotoilu oikein on erittäin tärkeää siksi, että verkkosivu näyttäisi yhdenmukaiselta ja suunnitelman mukaiselta eri selaimissa ja päätelaitteissa. Muotoilu varmistaa myös sen, että sivuston sisällön rakenne on selkeä myös avustaville teknologioille. Esimerkiksi näkövammaiset ruudunlukuohjelmien käyttäjät voivat selailla sivun sisältöä otsikoiden avulla. Otsikoiden looginen käyttö parantaa ,myös sivun näkyvyyttä hakukoneiden kannalta.

Muotoile teksti julkaisualustalla.

  • Jos tuot verkkosivulle tekstiä muualta, esim. Word-dokumentista, tee muotoilut, kuten listat, otsikoiden merkitseminen ja lihavoinnit vasta julkaisualustan sisällön editorissa. Liitä teksti julkaisualustan sisällön editoriin pelkkä teksti -muodossa.
  • Esimerkiksi Wordista voi siirtyä sivun lähdekoodiin pitkiä jaksoja metatietoja, jotka voivat sotkea sivun toimivuutta ja häiritä sivun käyttöä avustavilla teknologioilla.

Tee otsikoinnit aina tyylien avulla.

  • Älä tee otsikoita esimerkiksi lihavoimalla tekstiä.
  • Otsikkotyylin ja otsikkotason valinnan tapa riippuu julkaisualustasta.
  • Otsikkotyylien määritykset eli se, miltä otsikko julkaistulla sivulla näyttää, ovat erillisessä tyylitiedostossa (CSS), jota esim. verkkograafikko tai sivuston tekninen pääkäyttäjä voi muokata.
  • Myös tekstin väri, koko ja fontti sekä linkkien väri määritellään aina CSS-tyylitiedoston kautta. Jos näissä on mielestäsi korjattavaa, ota yhteys sivuston pääkäyttäjään.
  • Voit lihavoida ja kursivoida tekstiä tarpeen mukaan. Käytä kuitenkin näitä tehokeinoja maltillisesti. Muista, että kursiivia on hankalampi lukea kuin tavallista tekstiä.

Käytä muotoilukeinoja tekstin selkeyttämiseen.

  • Käytä tarvittaessa väliotsikoita ja merkitse ne otsikoiksi kappaletyylien avulla. Muista otsikkotasojen hierarkia: yläotsikon alla on samaan aihekokonaisuuteen kuuluvia alaotsikoita.
  • Jäsentele tekstiä luetteloiksi. Luettelot tekevät verkkotekstistä helposti silmäiltävää.
  • Selkeintä on tasata teksti vasempaan reunaan ja jättää oikea reuna liehuksi. Voi olla, että tämä muotoilumääritys täytyy tehdä CSS-tyylitiedostoon.

Sisällön jaottelu

Rajaa tiedon ja sisällön määrää ja jäsennä sitä.

  • Sijoita lukijan kannalta olennaisin tieto tekstin alkuun.
  • Rajaa sivun tietomäärä olennaiseen ja karsi kaikki ylimääräinen tieto.
  • Älä sijoita samaa tietoa useaan paikkaan, mutta pidä huolta siitä, että ohjaat lukijaa oikeaan kohtaan.
  • Mieti, tarvitseeko sisältöä jakaa alasivuiksi tai tarvitaanko sivun alkuun sivun sisäinen sisällysluettelo.

Ohjaa lukijaa liikkumaan sivustolla.

  • Pidä navigaatiorakenne niin selkeänä, että lukijan on helppo löytää tarvitsemansa tieto ja liikkua sivuilla.
  • Varmista, että sivun pääotsikko vastaa navigaation linkkitekstiä. Näin käyttäjä hahmottaa, mihin hän on siirtynyt navigaatiolinkistä.
  • Jaottele tekstiä otsikoiden alle.
  • Jos sivulla on paljon tekstiä ja otsikoita, tee sivun alkuun sivun sisäinen sisällysluettelo.
  • Jos jaat sisällön usealle alasivulle, huolehdi siitä, että jokaisella alasivulla on samantyylinen rakenne.

Kuvien käyttö

Käytä kuvia viestin välittäjänä.

  • Käytä tekstin lisäksi kuvia, infografiikkaa ja videoita havainnollistamaan asiaa.
  • Käytä monipuolisesti visualisointikeinoja, mutta varmista, että niiden sisältämä informaatio on saatavissa myös tekstinä. Vältä tiedon liian tiivistä kuvallista ilmaisua.

Selosta kuvat ja muu grafiikka näkövammaisille käyttäjille.

  • Kirjoita kuville vaihtoehtoinen kuvaus, ns. alt-teksti (alternative text). Se ei yleensä näy mitenkään sivulla, mutta näkövammainen ruudunlukuohjelman käyttäjä saa sen avulla tietoonsa kuvan sisällön ja informaation. Hyvä alt-teksti kuvailee lyhyesti mutta täsmällisesti kuvan sisällön. Kuvien alt-tekstitys on tärkeää myös hakukoneoptimoinnin näkökulmasta. Kuvausta ei tarvitse aloittaa sanoilla ”Kuvassa on…”, sillä ruudunlukuohjelma kertoo ennen alt-tekstiä, että kyseessä on kuva.
  • Infografiikka on hyvä ja tehokas keino visualisoida tietoa. Saavutettavuuden näkökulmasta haasteena on infograafien sisältämä suuri tietomäärä. Aloita kuvausteksti sanalla infograafi ja kuvaile lyhyesti infograafin aihetta ja keskeistä sisältöä. Kerro myös, että infograafin sisältö avataan tarkemmin verkkosivun tekstissä.

Esimerkki infograafin vaihtoehtoisesta tekstistä. Kuvakaappaus WordPress-editorista.
Kuvassa on esimerkki sivun infograafista ja sen alt-tekstistä. Infograafin vaihtoehtoinen teksti kokonaisuudessaan: ”infograafi, jossa on kuvattu Celian palvelujen potentiaalisten käyttäjien määrä (250 000 suomalaista) ja keskeisimmät syyt käyttää kirjoja (lukivaikeus, aistivammat, kognitiiviset ongelmat, heikentynyt näkö). Grafiikassa on myös kuvattu Celian palvelu lyhyesti: äänikirjojen määrä (40 000), jakelutavat (verkko, mobiili ja CD-levyt) sekä se, että palveluun liitytään kirjastossa.”

Infograafi on julkaistu Celian blogikirjoituksessa Anteeksi, onko teillä hetki aikaa puhua saavutettavuudesta?

Linkit

Käytä selkeitä linkkejä.

  • Nimeä linkit siten, että lukija ymmärtää, mihin hän on siirtymässä.
    • Esimerkiksi näin: Osasta kirjastoja on mahdollista saada Celian äänikirjoja myös cd-levyillä. Lue lisää cd-levyjen lainaamisesta.
    • Pelkkä ”Lue lisää” tai ”Lisätietoja tästä” ovat yleisesti ottaen huonoja linkkitekstejä.
  • Varmista, että linkki erottuu muusta tekstistä myös visuaalisesti.
    • Linkkien ulkoasu on yleensä sivuston päätoimittajan, graafikon tai teknisen pääkäyttäjän vastuulla. Jos linkkien ulkoasussa on korjattavaa, ota siis yhteyttä sivuston ulkoasun vastuutahoon organisaatiossasi.
  • Ilmaise selvästi, jos linkin kautta siirrytään pois sivustolta.
  • Jos linkität esimerkiksi pdf- tai word-tiedostoon, ilmaise linkkitekstissä myös tiedostomuoto.
    • Älä tee linkkitekstiä pelkästä tiedostomuodon päätteestä.

Tässä esimerkissä kummankaan listan linkkitekstit eivät ole saavutettavuuden kannalta hyviä:
Esimerkki huonoista linkkien nimistä. Sivulla on useita peräkkäisiä linkkejä, joiden teksti on pdf tai joissa ei ole tiedostomuotoa.

Ylemmän listan linkkitekstinä on pelkkä tiedostomuoto, joka ei kerro ruudunlukijan käyttäjälle lainkaan, minkä niminen tiedosto linkin kautta aukeaa. Ruudunlukijan käyttäjä kuulee vain ”linkki pdf”, eikä pysty erottamaan, minkä vuoden dokumentista on kyse, jos hän selaa linkkilistaa. Alemman listan linkkitekstistä taas ei käy ilmi, että linkkiä klikkaamalla käyttäjä siirtyy lukemaan pdf- tai rtf-muotoista tiedostoa.

Esimerkin linkkilistat tulisi laatia näin:
Esimerkki linkkinimistä, jotka eroavat toisistaan ja joista ilmenee tiedostomuoto
Näin myös ruudunlukijan käyttäjälle on selvää, mihin linkkiä klikkaamalla päätyy. Alemman listan linkit olisivat tosin kaikille käyttäjille selkeämpiä, jos lyhenne TTS olisi avattu toiminta- ja taloussuunnitelmaksi.