Saavutettavuus

(Unfortunately, only in Finnish for the time being.)

Esimerkiksi painettavaksi tarkoitettu jäsenlehti saatetaan haluta julkaista myhös yrityksen nettisivulla (pdf). Jos yritys kuuluu saavutettavuuslainsäädännön piiriin, myös pdf:n pitää olla saavutettava.

Silloin kannattaa jo Indesignissä taitossa rakentaa taitto ihan oikeaoppisesti (tyylejä käyttäen – ja ne oikeaoppisesti nimeten, ja rakentaa sisällysluettelo ohjelman toiminnoilla) eikä käyttää mitään ylimääräisiä muotoiluja (esim. boldaus, kursivointi, anfangi, sulkeet…) jne. Jos sitä ei tee, niin niitä joutuu jälkeenpäin korjailemaan ja taistelemaan.

Myös pdf:ään on tehtävä määrityksiä ja tarkistettava, että kaikki on kunnossa.

Näihin on netissä paljon ohjeita… Myös Indesignin ohjeissa, kannattaa syventyä kunnolla!

Saavutettavuus

Mitä se tarkoittaa?
Ketä se koskee?
Miten se tehdään?
MIten alt-teksti tehdään oikeaoppisesti?
Miten se testataan?
Miten saavutettavuus rakennetaan Indesignissä? ->ja Talletetaan PDF:ään.

Saavutettavuus tarkoittaa sitä, että…

digitaaliset palvelut, verkkosivut, sovellukset ja sisällöt on suunniteltu niin, että kuka tahansa voi käyttää niitä yhdenvertaisesti riippumatta mahdollisista toimintarajoitteista tai vammoista.

Se huomioi esimerkiksi näkö-, kuulo- tai liikuntarajoitteiset sekä henkilöt, joilla on vaikeuksia hahmottaa tai ymmärtää tietoa.

Sisällön tulee olla:

  • Havaittava: Tieto esitetään tavoilla, jotka kaikki voivat havaita (esimerkiksi kuvien tekstivastineet ja videotallenteiden tekstitykset).
  • Käytettävä: Sivustoa voi käyttää esimerkiksi pelkällä näppäimistöllä ilman hiirtä.
  • Ymmärrettävä: Kieli ja käyttöliittymä ovat selkeitä ja johdonmukaisia.
  • Toimintavarma: Palvelu toimii luotettavasti erilaisten apuvälineiden, kuten ruudunlukijoiden, kanssa.

Saavutettavuus vai esteettömyys?

  • Saavutettavuus: Viittaa usein digitaaliseen maailmaan, tietoon, palveluihin ja viestintään.
  • Esteettömyys: Tarkoittaa fyysistä ympäristöä, kuten rakennuksia, luontoreittejä tai julkisia liikennevälineitä, joissa ei ole liikkumista estäviä kynnyksiä.

Suomessa digitaalisen saavutettavuuden lakisääteiset vaatimukset perustuvat lakiin digitaalisten palvelujen tarjoamisesta (eli digipalvelulakiin). Tämä laki toimeenpanee EU:n saavutettavuusdirektiivin. Lain valvovana viranomaisena toimii Liikenne- ja viestintävirasto Traficom.

Laki velvoittaa laajasti sekä julkista että osittain yksityistä sektoria. Velvoitteen piirissä ovat:

  • Julkinen sektori: Valtion virastot, kunnat ja hyvinvointialueet.
  • Julkisoikeudelliset laitokset: Esimerkiksi yliopistot ja Kela.
  • Järjestöt: Jos ne saavat yli puolet rahoituksestaan julkiselta taholta.
  • Tietyt yritykset: Finanssialan toimijat (kuten pankit ja vakuutusyhtiöt) sekä vesi-, energia- ja liikennepalvelut.
  • Verkkokaupat ja tietyt kuluttajapalvelut: EU-esteettömyysdirektiivin laajennuksen myötä kesäkuusta 2025 alkaen laki koskee myös verkkokauppoja, sähkökirjoja ja audiovisuaalisia palveluita.

Jos organisaatio kuuluu lain piiriin, sen digitaalisten palvelujen (kuten verkkosivujen tai mobiilisovellusten) on täytettävä seuraavat ehdot:

  1. Tekniset saavutettavuusvaatimukset: Sivuston on noudatettava kansainvälistä WCAG-ohjeistusta (taso AA). Tämä tarkoittaa esimerkiksi sitä, että kuvilla on tekstivastineet, sivuilla on riittävät värikontrastit ja sitä voi käyttää pelkällä näppäimistöllä.
  2. Saavutettavuusseloste: Palvelussa on oltava julkinen ja päivitetty seloste. Se kertoo, miltä osin palvelu täyttää vaatimukset ja mitä puutteita siinä mahdollisesti on.
  3. Palautekanava: Käyttäjillä täytyy olla mahdollisuus antaa palautetta saavutettavuudesta. Palautteeseen on vastattava 14 vuorokauden kuluessa.

WCAG-ohjeistuksen vaatimukset jakautuvat käytännössä kahteen rooliin:
koodaukseen (tekninen toteutus) ja sisällöntuotantoon (tekstit ja media).

Lain vaatima AA-taso vaikuttaa näihin arjen työtehtäviin seuraavasti:

Kehittäjän vastuulla on varmistaa, että sivuston pohjarakenne ja toiminnallisuudet ovat esteettömiä apuvälineille.

  • Pelkkä näppäimistökäyttö: Sivuston kaikissa osissa (kuten valikoissa ja lomakkeissa) täytyy pystyä navigoimaan pelkällä näppäimistöllä (Tab- ja Enter-näppäimillä).
  • Näkyvä kohdistus (Focus): Näppäimistöllä liikkuessa aktiivisen kohdan (esim. linkin) ympärillä täytyy näkyä selkeä reunus tai korostus, jotta käyttäjä tietää, missä kohtaa sivua hän menee.
  • HTML-rakenne ja ARIA-määritteet: Koodin pitää olla loogista, ja siinä on käytettävä oikeita elementtejä (kuten <button> painikkeille ja <nav> valikoille). Ruudunlukijaohjelmien täytyy osata lukea sivua oikeassa järjärjestyksessä.
  • Lomakkeiden virheenkorjaus: Jos käyttäjä täyttää lomakkeen väärin, koodin täytyy ilmoittaa virheestä tekstimuodossa (ei pelkällä punaisella värillä) ja ohjata käyttäjä korjattavaan kenttään.

Sisällöntuottajan vastuulla on tehdä tekstistä, kuvista ja videoista helposti ymmärrettäviä ja havaittavia.

  • Kuvien tekstivastineet (Alt-tekstit): Jokaiselle tiedon kannalta oleelliselle kuvalle täytyy kirjoittaa lyhyt kuvaus siitä, mitä kuvassa on. Ruudunlukija lukee tämän tekstin näkövammaiselle käyttäjälle.
  • Videon ja äänen saavutettavuus: Tallennetuissa videoissa täytyy olla tekstitys kuulovammaisia varten. Jos videon tapahtumat eivät käy ilmi pelkästä äänestä, tarvitaan myös erillinen äänivastine eli kuvailutulkkaus.
  • Selkeä otsikkorakenne: Otsikoiden pitää olla loogisessa järjestyksessä (H1, H2, H3). Niitä ei saa tehdä pelkästään lihavoimalla tekstiä, sillä apuväitteet bongaavat sivun rakenteen nimenomaan virallisten otsikkotagien avulla.
  • Värikontrastit: Tekstin ja sen taustan välillä täytyy olla riittävä tummuuskontrasti (vähintään suhde 4,5:1), jotta heikkonäköiset tai auringonpaisteessa puhelinta käyttävät saavat tekstistä selvää.
  • Linkkien nimeäminen: Linkkitekstin täytyy kertoa, mihin linkki johtaa. Esimerkiksi teksti ”Lue lisää hakuohjeista täältä” on saavutettava, mutta pelkkä ”Klikkaa tästä” ei ole.

Hyvä alt-teksti (vaihtoehtoinen teksti) kuvaa kuvan sisällön ja tarkoituksen lyhyesti ja selkeästi. Se luetaan ääneen ruudunlukijalla, ja se näkyy sivulla, jos kuva ei lataudu.

Huom! Alt-teksti ei ole sama kuin kuvateksti!!!

Huom! Joskus selain ei näytä jonkun kuvan päällä alt-tekstiä, kun vie kursorin kuvan päälle. Tämä on jonkinlainen bugi, jolle ei kai oikein voi mitään. Oikeaoppisestihan alt-tekstin ei tarvitsisi edes näkyä, koska se on vaihtoehto sille, ettei kuvaa näe.

Nyrkkisääntö on: Miten kuvailisit kuvaa puhelimessa kaverille, joka ei näe sitä?

Neljä kultaista sääntöä

  • Ole ytimekäs: Pidä pituus noin 1–2 lauseessa (alle 150 merkkiä).
  • Älä aloita sanoilla ”Kuva jossa…”: Ruudunlukija kertoo käyttäjälle automaattisesti, että kyseessä on kuva. Mene suoraan asiaan.
  • Huomioi asiayhteys: Sama kuva voi tarvita erilaisen alt-tekstin riippuen siitä, mistä ympäröivä teksti kertoo.
  • Koristekuvat jätetään tyhjiksi: Jos kuva on pelkkä taustakuvio tai tunnelmanluoja, joka ei tuo uutta tietoa, alt-tekstiksi jätetään tyhjä määrite (alt=""). Silloin ruudunlukija hyppää sen yli.

Esimerkki 1: Koira puistossa

  • ❌ Huono: alt="Kuva koirasta." (Liian yleinen, ei kerro mitään uutta.)
  • ❌ Likaa kikkailua (hakusanamättö): alt="koira koiranpentu noutaja kultainennoutaja koira puistossa koiratarvike" (Älä tee näin, tämä häiritsee käyttäjää.)
  • Hyvä: alt="Kultainennoutaja juoksee nurmikolla suussaan punainen pallo."

Esimerkki 2: Kaavio yrityksen myynnistä

  • ❌ Huono: alt="Myyntikaavio." (Käyttäjä ei saa tietää, mitä myynnille tapahtui.)
  • Hyvä: alt="Viivakaavio osoittaa, että yrityksen myynti kasvoi 20 prosenttia vuoden 2023 aikana."

Esimerkki 3: Painike, jossa on pelkkä kuvake (esim. suurennuslasi)

  • ❌ Huono: alt="Suurennuslasi." (Kertoo mitä kuvassa on, mutta ei sitä, mitä painike tekee.)
  • Hyvä: alt="Hae sivustolta." (Kertoo toiminnon tarkoituksen.)

Saavutettavuustestaus jaetaan kahteen osaan: automaattiseen testaukseen (joka löytää nopeasti kooditason virheet) ja manuaaliseen testaukseen (joka varmistaa, että sivusto on oikeasti käytettävä). Automaattiset työkalut löytävät tyypillisesti vain noin 30–50 % kaikista WCAG-virheistä, joten molempia menetelmiä tarvitaan. [1, 2, 3]

Alta löydät suosituimmat työkalut ja menetelmät molempiin tarkoituksiin.

Automaattiset testaustyökalut

Nämä työkalut skannaavat sivun koodin sekunneissa ja ilmoittavat esimerkiksi puuttuvista alt-teksteistä, vääristä otsikkorakenteista tai liian heikoista värikontrasteista:

  • WAVE (WebAIM): Helppokäyttöinen selainlaajennus (Chrome/Firefox) tai verkkoversio. Se näyttää virheet suoraan verkkosivun päällä visuaalisina kuvakkeina, mikä tekee siitä täydellisen työkalun erityisesti sisällöntuottajille.
  • Axe DevTools: Erityisesti kehittäjien suosima työkalu. Se integroituu selaimen kehittäjätyökaluihin (F12) ja tarjoaa erittäin tarkkaa tietoa siitä, missä kohtaa koodia virhe on ja miten se korjataan.
  • Google Lighthouse: Chrome-selaimesta valmiina löytyvä työkalu (löytyy Lighthouse-välilehdeltä kehittäjätyökaluissa). Se antaa sivuston saavutettavuudesta pisteytyksen 0–100 ja listaa parannusehdotukset.
  • Siteimprove Accessibility Checker: Toimiva työkalu sekä selainlaajennuksena että laajempana järjestelmänä, joka osaa ryhmitellä virheet niiden kriittisyyden mukaan.

Työkalut yksittäisiin tarkistuksiin

  • Värikontrastit: WebAIM Contrast Checker on verkkotyökalu, johon syötetään tekstin ja taustan värikoodit. Se kertoo suoraan, läpäiseekö väripari lain vaatimat kriteerit.
  • Simulaattorit: Esimerkiksi Funkify-selainlaajennus simuloi sitä, miltä sivusto näyttää tai miten se toimii, jos käyttäjällä on esimerkiksi näkövamma, vapinaa käsissä tai lukivaikeus.

Automaatio ei ymmärrä logiikkaa. Siksi jokainen sivusto pitää testata myös käsin seuraavilla tavoilla: [

  1. Näppäimistötesti (Tärkein!): Irrota kätesi hiirestä. Yritä käyttää sivustoa pelkästään Tab-näppäimellä (liikkuminen eteenpäin), Shift + Tab -yhdistelmällä (liikkuminen taaksepäin) ja Enter-näppäimellä (linkkien ja painikkeiden klikkaaminen). Pystykö tekemään kaiken tarvittavan? Näetkö selkeästi, minkä elementin kohdalla olet menossa? [1]
  2. Ruudunlukijatesti: Käynnistä laitteesi ilmainen ruudunlukija ja sulje silmäsi. Kuuletko kaiken olennaisen tiedon? Suosittuja ruudunlukijoita ovat NVDA (ilmainen ohjelma Windowsille), VoiceOver (sisäänrakennettu Macilla ja iPhonella) sekä TalkBack (Android).
  3. Sivun suurentaminen: Suurenna sivun tekstiä selaimen asetuksista 200 prosenttiin (Ctrl ja +). Pysyykö teksti luettavana, vai menevätkö elementit päällekkäin tai piiloon?

Saavutettavan PDF-tiedoston luominen Adobe InDesignilla perustuu siihen, että ohjelmassa rakennetaan tiedostolle oikea looginen rakenne. Kun tämä rakenne viedään oikeilla asetuksilla PDF-muotoon, ruudunlukijat osaavat lukea asiakirjan oikeassa järjestyksessä.

Tässä on viisivaiheinen käytännön opas saavutettavan PDF:n tekemiseen InDesignissa:

1. Merkitse tekstityylit (Paragraph Styles) oikein

Ruudunlukijat tunnistavat otsikkotasot koodimerkintöjen (tagien) avulla. Älä muuta otsikon kokoa käsin, vaan käytä aina kappaletyylejä.

  • Avaa kappaletyylin asetukset (tuplaklikkaa tyyliä).
  • Valitse vasemmalta Export Tagging (Vientimerkinnät).
  • Valitse PDF-kohdasta oikea tagi:
    • Pääotsikko (H1) → H1
    • Alaootsikko (H2) → H2
    • Leipäteksti → P (Paragraph)

2. Määritä lukujärjestys Artikkelit-paneelilla (Articles)

InDesignissa pelkkä tekstilaatikoiden visuaalinen sijainti ei kerro ruudunlukijalle, missä järjestyksessä teksti pitäisi lukea. Järjestys määritellään Articles-paneelilla.

  • Avaa paneeli: Window → Articles.
  • Maalaa tai valitse sivulta tekstilaatikot ja vedä (drag & drop) ne paneeliin siinä järjestyksessä, jossa ne kuuluu lukea.
  • Varmista, että paneelin hampurilaisvalikosta on päällä asetus Use Table of Contents for Reading Order (tai Use for Reading Order in Tagged PDF).

3. Lisää alt-tekstit kuville

Jokaiselle tiedon kannalta oleelliselle kuvalle täytyy antaa vaihtoehtoinen teksti.

  • Klikkaa kuvaa ja valitse ylävalikosta Object → Object Export Options.
  • Mene Alt Text -välilehdelle.
  • Valitse Alt Text Source -valikosta Custom ja kirjoita kuvaus tekstikenttään.
  • Koristekuvat: Jos kuva on vain koriste, mene Tagged PDF -välilehdelle ja valitse Apply Tag -kohdasta Artifact. Tällöin ruudunlukija hyppää sen yli.

4. Ankkuroi kuvat tekstin sekaan

Jotta alt-teksti luetaan oikeassa kohdassa tarinaa, kuva täytyy ankkuroida tekstilaatikon sisään.

  • Klikkaa kuvaelementin yläreunassa olevaa pientä sinistä neliötä.
  • Vedä se hiirellä tekstin sekaan siihen kohtaan (esim. kappaleen loppuun), johon kuva loogisesti kuuluu. Neliö muuttuu ankkurin kuvakkeeksi.

5. PDF-vienti (Export) oikeilla asetuksilla

Kun dokumentti on valmis, se täytyy viedä ulos niin, että tehty rakenne säilyy.

  • Valitse File → Export ja muodoksi Adobe PDF (Interactive) tai Adobe PDF (Print).
  • Jos valitset Print (Tulostus) -vaihtoehdon, varmista nämä kohdat General-välilehdellä:
    • Create Tagged PDF (Luo merkitty PDF) – Tämä on tärkein!
    • Optimize for Fast Web View
    • Export Layers -kohdassa: Visible & Printable Layers
  • Mene Advanced (Lisäasetukset) -välilehdelle:
    • Kirjoita dokumentille selkeä Title (Otsikko), sillä se näkyy selaimen välilehdellä.
    • Valitse dokumentin Language (Kieli, esim. Finnish), jotta ruudunlukija osaa käyttää oikeaa puhesynteesiä jaääntämystä.

Viennin jälkeen valmis PDF kannattaa aina vielä tarkistaa esimerkiksi Adobe Acrobat Pro -ohjelman Accessibility Check (Saavutettavuuden tarkistus) -työkalulla.

Huom! Tekstin muotoiluissa ei pitäisi käyttää boldauksia, kursivointeja, anfangeja, sulkumerkkejä ym. mitään ”turhia” muotoiluja, jotta tekstinlukulaitteet eivät niihin töksähtele.