TEEMA 2.
Tässä osiossa käsitellään, kuinka erityyppiset tiedot, kuten teksti-, kuva-, video- ja äänitiedosto formaatissa tuotetut materiaalit käsitellään saavutettavuuden kannalta mahdollisimman hyväksi.
1. Saavutettavat sisällöt ja tekstit
Tämän osion ohjeet ovat koostettu pääasiallisesti erilaisista saavutettavuusheuristiikoista, WCAG2.1, ICT4IAL ja Selkokielen oheista. Joitain lisäyksiä on tehty Dateron toiminnasta saatujen omien kokemusten mukaan. Tekstimuotoisen sisällön oheistukset on poimittu Mäkipään & Isohellan (2019) tutkimuksesta; Tekstimuotoisen verkkosisällön saavutettavuusheuristiikat. Nämä heuristiikat poimivat tekstimuotoiseen sisältöön liittyviä tekijöitä, joilla tekstistä saadaan helpommin silmäiltävää, luettavaa ja ymmärrettävää.
Tekstin muotoileminen edesauttaa tekstin silmäilyä. Hyvä silmäiltävyys antaa lukijalle mahdollisuuden hahmottaa tekstin eri elementit ja osa-alueet helpommin ja täten edesauttaa myös tekstin ymmärrystä.
Käytä ”tyylejä” (Wordissa) tekstin muotoiluun. Laita otsikot ja normaaliteksti erikseen sekä laita otsikot loogiseen järjestykseen. (Otsikko 1, ala-otsikko 1.1, jne.). Tyylejä käyttämällä otsikot ja perusteksti erottuvat toisistaan, ne on helpompi löytää, sisällysluettelon teko on helppoa sekä se helpottaa lukulaitteen toimintaa.
Tekstiä tuottaessa on hyvä käyttää mahdollisimman yksinkertaista kieltä, joka on vain suinkin sopivaa esitykseen. Tekstin selkeyttämisen tukena on hyvä käyttää selkokielen periaatteita apuna. Tekstiä aloittaessa on hyvä antaa lukijalle pieni johdanto siitä, mitä tuleva teksti pitää sisällään. Näin ollen suurempienkin tekstikokonaisuuksien silmäiltävyys paranee, sekä lukijan on helpompi vastaanottaa tulevaa informaatiota.
Tekstissä käytettävät lyhenteet on hyvä avata ainakin ensimmäisen kerran ja selittää uudet termit. Lauserakenteen kannattaa olla lyhyt ja ytimekäs. Ei mielellään yli 15-20 sanaa. Esityksissä on hyvä käyttää selkokielen periaatteita apuna.
Kokeile kuunnella tekstisi ja ohjeesi. Silloin itsekin huomaa onko teksti sujuvaa tai sisältääkö se virheitä.
Näistä, sekä muista ohjeista seuraavaksi esitellään 16 tekstimuotoisen verkkosisällön saavtettavuusheuristiikkaa, joita on hyvä käyttää esimerkiksi tarkistuslistana tuottaessa omaa tekstiä.
Tekstimuotoisen verkkosisällön saavutettavuusheuristiikat
Tekstin muotoilut (silmäiltävyys)
Vältä kursivointia, lihavointia tai väriä ainoana keinona korostaa asiaa. Muista että lukija voi myös pelkästään kuunnella tekstisi, jolloin nämä korostukset jäävät huomaamatta.
Käytä luettelomerkkejä. Luettelemalla tärkeimmät asiat luettelomerkkien avulla edistät lukijaa sisällön hahmottamisessa.
Suosi verkkosisällössä päätteettömiä fontteja kuten Verdanaa tai Arialiaa. Verdana on yksi verkkomaailmassa eniten käytetyistä fonteista ja yleisesti miellyttävin. Arial on taasen hiukan nopealukuisempi. Muita hyviä fontteja ovat esimerkiksi Tahoma, TrebuchetMS, Comic SansMS jne.
Tee tekstistä ilmavaa. Määrittele reilut rivivälit ja kappalevälit. Luettavuus helpottuu, jos riviväli on 1.5 kertainen ja kappalevälit 2. kertainen kirjasinkokoon nähden
Tasaa teksti vasemmalle ja älä pakkaa sisältöä liian tiiviiksi. Vain vasemmalle tasattu teksti helpottaa rivillä pysymistä.
Tekstin tekninen rakenne (luettavuus)
Erota linkit muusta tekstistä ja anna niille selkeät ja merkitykselliset nimikkeet. Tekstisisällöstä omaksi kohdakseen erotetut linkit helpottavat luettavuutta. Nimeä linkki toiminnan mukaan. Näin nimi kertoo mihin linkki johtaa. Ilmoita linkki myös kokonaisuudessa, jotta sen näkee myös tulostettaessa.
Käytä otsikkotasoja (H1, H2 jne.) johdonmukaisesti ja vältä kovin syviä otsikkotasoja esimerkiksi (1.1.1.) jne. Älä käytä otsikkotasoja pelkästään fontin koon suurentamiseksi, sillä ne on tarkoitettu kuvaamaan otsikkorakennetta.
Käytä verkkosisällössä kirjasinkokoa 18pt- 26pt ja dokumenteissa vähintään 12pt. Suuremmat kirjasinkoot, kuten 18pt-26pt edistävät luettavuutta näytöltä luettaessa.
Käytä vain yksinkertaisia kuvia informaation jakamisessa ja anna niille luonteva Alt-teksti. Yksinkertainen kuva on helpompi selittää Alt-tekstiin. Älä kirjoita kuvalle samaa informaatiota kuin tekstissä. Pyri tekstin luontevaan jatkuvuuteen. Näin teksti on lukulaitetta käyttäessä luettavampaa ja informaatio säilyy.
Tekstin sisältö (ymmärrettävyys)
Tarjoa tärkein informaatio ensin. Kun sivun tärkein asia on ensimmäisenä ja tekstikappaleen tärkein asia on ensimmäisenä, on sivun sisällön lukeminen helpompaa myös esimerkiksi ruudunlukuohjelmilla.
Tarjoa sisällöstä lyhyt tiivistelmä. Lyhyen tiivistelmän avulla lukija saa käsityksen sisällöstä.
Suosi lyhyitä lauseita. Lyhyet lauseet auttavat lukijaa sisällön ymmärtämisessä. Ilmaise yksi tärkeä asia yhdessä lauseessa.
Käytä kohderyhmälle sopivaa kieltä. Mieti etukäteen, kenelle suuntaat tekstisi. Valitse tekstin tyylilaji ja vaikeusaste kohderyhmäsi mukaan.
Käytä selkeää ja yksinkertaista kieltä. Käytä tuttuja, jokapäiväisiä sanoja ja vältä ilmauksia, joiden merkitystä ei voi päätellä yksittäisten sanojen merkityksen perusteella. Vältä ammattislangia.
Käytä sinä-muotoa, jos se sopii tekstin tyyliin. Puhuttele lukijaa. Näin ollen lukija tuntee, että teksti on tarkoitettu juuri hänelle.
Avaa tai selitä lyhenteet, lyhennesanat ja vaikeat sanat ensimmäisellä kerralla. Lyhenteet ja lyhennesanat (esim. Kela) on syytä kirjoittaa auki. Poikkeuksena ovat vakiintuneet lyhenteet, joita ei välttämättä edes tunnisteta aukikirjoitettuina (esimerkiksi dvd).
2. Saavutettavat kuvat
Kuvien saavutettavassa käytössä on hyvä välttää käyttämästä kuvia, jotka eivät esitä asian mukaista informaatiota, kuten maisemakuvat. Asiaan kuulumattomat kuvat saattavat johdattaa lukijaa harhaan tai häiritä keskittymistä itse asiaan. Informaatiota tehostavat tai tukevat kuvat auttavat lukijaa ymmärtämään sisällön helpommin. Esityksessä on myös syytä välttää tarpeettomia taustakuvia, joissa esiintyy useita kuvia, muotoja tai paljon eri värejä. Tämän tyyppiset taustakuvat saattavat myös häiritä tekstin lukemista. Esimerkiksi tämän sivun kissa-kuvalla ei ole mitään merkitystä tähän esityksen sisältöön liittyen, joten se saattaa olla hämmentävä tai informaatioltaan harhaanjohtava.
On myös tärkeää, ettei tekstiä julkaista kuvamuodossa tallennettuna tai vastoin myös, ettei kuvia käytetä korvaamaan tekstiä. Näistä seuraavat esimerkit:
- Otetaan kuvakaappaus (screenshot) tekstistä ja liitetään se esitysdokumenttiin. Näin toimiessa henkilöt, jotka käyttävät erityisapuvälineitä lukemiseen, eivät voi lukea kuvan tekstiä.
- Mikäli kuvaa käytetään korvaamaan tekstiä, esimerkiksi käytetään nuolia tai muita symboleita tekstin sijaan, jää myös nämä huomaamatta henkilöiltä, jotka käyttävät erityisapuvälineitä lukemiseen.
Jos käytät kuvissa hyperlinkkejä, niin älä piilota hyperlinkkejä pelkästään kuviin, vaan näytä linkit lukijalle kokonaisuudessaan. Näin linkkeihin on periaatteessa pääsy mikäli dokumentti tulostetaan paperille.
Pitää myös muistaa että, saavutettavien kuvien käyttö ei ole tarkoitettu vain henkilöille, joilla on näkövamma tai heikko näkö. Voi olla myös tilanteita, joissa koko teksti kuunnellaan lukuohjelmalla ilman että tekstiä katsotaan ollenkaan.
2.1 Kuvien vaihtoehtoinen teksti
Määritä kuvillesi vaihtoehtoinen teksti (alternative-teksti = alt-text), jolla voit kuvailla tekstillä mitä kuva esittää. Alt-tekstiä käytetään vain, jos sama asiaa ei ole kerrottu muussa tekstissä. Muista että Alt-tekstin tulisi olla luonnollinen jatkumo tekstin asiassa. Vaihtoehtoinen teksti on ainoa tapa saada välitettyä kuvan informaatio näytönlukijaa käyttäessä tai jos kuva ei jostain syystä näy.
Alt-tekstiä kirjoittaessa pyri kertomaan kuvan keskeisin informaatio mitä kuvalla tarkoitetaan. Vältä kuitenkin kuvauksia kuten ”image of…” tai ”kuva… ” jostakin. Mikäli käytät kuvaa ainoastaan koristeena, etkä halua kertoa sillä mitään, niin voit määrittää kuvan koristeeksi tai jättää Alt-tekstin tyhjäksi. Alt-tekstin voit määrittää kaikille elementeille jotka eivät ole tekstiä, kuten kuville, kaaviolle, äänille ja videoille.
2.2 Kuvien värimaailma
WCAG AA-taso suosittelee, että tekstin ja taustan välinen kontrasti olisi vähintään 4.5:1. Mitä tämä sitten tarkoittaa? WCAG mittaa kontrastin kahden eri värin välisenä valoisuutena tai kirkkautena. Kontrastin määrä voi olla jotain 1:1 ja 21:1 väliltä. Käytännössä 1:1 tarkoittaa esimerkiksi valkoista tekstiä valkoisella taustalla. 21:1 tarkoittaa esimerkiksi mustaa tekstiä valkoisella taustalla.
Verkkosivuilla värit voidaan määritellä yleensä kolmella eri tavalla. Esimerkiksi viereisen kuvan vihreä väri voidaan ilmaista seuraavilla tavoilla:
- rgb (0, 175, 80): RGB arvo kertoo punaisen (red), vihreän (green) ja sinisen (blue) värin määrän. Määrät voivat olla väliltä 0-255.
- #00B050: HEX-värikoodin numero koostuu numeroista ja kirjaimista jotka edustavat myös punainen-vihreä-sininen yhdistelmiä.
- hsl (147, 100, 69): HSL-arvo kertoo värin sävyn, kylläisyyden ja kirkkauden (hue, saturation, lightness). Jotkut kuvankäsittelyohjelmat käyttävät myös termiä hsb, eli lightness on ilmaistu termillä brightness.
Esimerkkinä vielä pari Microsoft Officen perus tekstiväriä ja niiden kontrasti suhteessa valkoiseen taustaan:
- Punainen(#FF0000) kontrasti on 4:1
- Vihreä(#00B050) kontrasti on 2.86:1
- Sininen(#0070C0) kontrasti on 5.14:1
Kontrastin tarkistuksen jälkeen edellisistä esimerkeistä vain sinisellä olisi WCAG:n mukainen riittävä kontrasti suhteessa taustaan.
Enemmän asiaa väreistä ja niiden käytöstä nettisivuilla löydät w3schools.com verkkosivuista osoitteesta https://www.w3schools.com/css/css_colors.asp
Värien kontrastin voit tarkistaa WebAIM:n color contrast checkerillä https://webaim.org/resources/contrastchecker/.
Mikäli et tiedä valitsemasi värin HEX-värikoodia tai haluat napata värin joltain nettisivulta, voit käyttää tähän esimerkiksi Google Chromen Eye Dropper laajennusta. https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka
Lähde: WebAIM
Tässä vielä muutama perusohje värien käytöstä:
- Vältä käyttämästä punaista, vihreää, keltaista ja vaalean sävyistä harmaata
- Huolehdi riittävästä kontrastista tekstin ja taustakuvan suhteessa.
- Tarkista että kuvien kontrasti riittää myös videotykille.
- Vältä hyperlinkkejä tai tekstejä, jotka on piilotettu kuvien taakse
- Salli kuvien koon muuttaminen tai skaalaaminen
3. Saavutettavat kaaviokuvat
Saavutettavien kaaviokuvien esimerkiksi pylväs-, ympyrä- ja viivakaavion tai histogrammin tekemisessä on tärkeää muistaa kaksi asiaa. Järjestä kaavion tekstit ja määräkuvaajat siten, että kaavion voi lukea myös ilman värejä. Anna kaaviokuvalle vaihtoehtoinen teksti tai avaa taulukon tiedot myös sanallisesti.
Kaavio 1. Huono asettelu – värejä ja asioita joutuu yhdistämään.
Kaavio 2. Kaavio mustavalkoisena ilman asettelua – värien sävyt ovat vaikeasti erotettavissa.
Kaavio 3. Parempi kaavio – asettelu ei vaadi asioiden yhdistämistä, eikä väreillä ole merkitystä luettavuuden kannalta.
4. Saavutettavat taulukot
Saavutettavien taulukoiden tekemisessä on tärkeää miettiä asettelua. Näytönlukijaohjelma lukee taulukon vasemmalta oikealle ja ylhäältä alas.
Taulukko 1. huonolla saavutettavuudella
| LINTU | KOIRA | KÄÄRME | |
|---|---|---|---|
| Nisäkäs | EI | ON | EI |
| Jalkojen määrä | 2 | 4 | 0 |
Näytönlukijaohjelma lukee taulukon seuraavasti:
lintu, koira, käärme, nisäkäs, ei, on, ei, jalkojen määrä, 2, 4, 0
jolloin taulukkoa on haasteellista seurata.
Taulukko 2. paremmalla saavutettavuudella
| ELÄIN | NISÄKÄS | JALKOJEN MÄÄRÄ |
|---|---|---|
| Lintu | EI | 2 |
| Koira | ON | 4 |
| Käärme | EI | 0 |
Näytönlukijaohjelma lukee taulukon seuraavasti:
eläin, nisäkäs, jalkojen määrä, lintu, ei, 2, koira, on, 4, käärme, ei, 0
Huomaa, että suuria tietomääriä sisältävien taulukoiden seuraaminen kuuntelemalla voi tietenkin olla joissain tapauksissa erittäin haastavaa, joten näissä tapauksissa on tärkeää avata taulukon keskeinen informaatio myös sanallisesti.
Katso myös kuinka kuinka lisäät vaihtoehtoisen tekstin muotoon, kaavioon tai muuhun objektiin:
5. Saavutettavat videot
Saavutettavien videoiden tekemisessä tärkeintä on tekstityksen lisääminen videoon. Näin ollen käyttäjä voi joko kuunnella ja katsoa videon tai katsoa videon lukemalla tekstityksen.
- Varmista, että videon voi myös ladata koneelle
- Anna vaihtoehtoinen teksti videotiedostolle: tarkoittaa 1-2 lauseen selitystä mikä video on kyseessä. Tarkoitus ei ole kertoa koko sisältöä.
- Anna videoillesi tekstitys. Mikäli mahdollista voit lisätä myös äänikuvauksen siitä, mitä videolla tapahtuu.
- Tekstityksen avulla videon voi katsoa myös äänettömästi
- Tekstityksen lisääminen onnistuu helposti YouTubessa tai esim. Imovie:lla
- Varmista, että tekstitys ja kuvaus on synkronoitu videon kanssa ja sisältävät täsmälleen saman informaation, kuin mitä videolla puhutaan
- Käytä yleisimpiä formaatteja kuten mp4, MOV, AVI jne. Näin ollen pyritään varmistaa, että videon voi toistaa useimmilla ohjelmilla.
- Suosi alustariippumatonta ohjelmaa ja käytä mieluummin selainpohjaista videopalvelua, kuten Youtube.
Ohjeet tekstityksen lisäämiseen Youtube videoon (0:56 min):
Ohjeet tekstityksen lisäämiseen iMovie videoon (2:02 min):
6. Saavutettavat äänitiedostot
- Anna lukijalle mahdollisuus kuunnella sama informaatio.
- Vältä video- tai äänitiedostojen automaattitoistoja.
- Kirjoita äänitiedostolle lyhyt kuvaus mitä se sisältää. Muista myös lisätä vaihtoehtoinen tekstikuvaus äänitiedostolle.
Pyri ohjaamaan äänitiedoston käyttöä siten, että ääritiedostojen toisto-ohjelma sisältäisi vähintään seuraavat ominaisuudet:
- helppo voluuminsäätö mahdollisuus
- mahdollisuus kontrolloida toistoja myös näppäimistöllä (play, kelaus, pause, stop)
- mahdollisuus lisätä audiotiedostoon kirjainmerkkejä tai muistiinpanoja, jotta lukemista voi jatkaa sujuvasti seuraavalla kerralla tai tärkeitä asioita voi merkata tiettyihin kohtiin.
Celia on valtion erikoiskirjasto, joka lainaa äänikirjoja. Voit kuunnella niitä tietokoneellasi, tabletillasi tai älypuhelimellasi.
Celia lainaa kauno- ja tietokirjallisuutta saavutettavassa muodossa kaikille niille, joille tavallisen painetun kirjan lukeminen on vaikeaa. Vuoden 2018 alusta alkaen saavat Celian materialin käyttäjät myös oppikirjat ilmaiseksi kaikilla koulutustasolla (peruskoulusta yliopistoon).
Lisätietoja Celian äänikirjoista: www.celianet.fi
7. Saavutettavat PDF-tiedostot ja tulosteet
PDF säilyttää sisällön ulkonäön samana kaikissa käyttöjärjestelmissä ja tulosteissa. PDF on helppo jakaa. Nykyään löytyy myös näytönlukijoita, jotka voivat lukea PDF tiedostoja.
Yleisiä ohjeita PDF tiedoston luontiin:
Määritä dokumentin kieli. Käytä saavutettavuus tarkistusta, joka löytyy käytettävästä ohjelmasta (Word, Adobe Acrobat Reader jne.). Käytä ohjelman uusinta versiota luodessasi PDF-tiedostoa, koska uusimmat ohjelmat sisältävät päivitetymmät saavutettavuustoiminnot. Varmista kuitenkin, että dokumenttia voi lukea myös vanhemmilla versioilla. Täytä dokumentin meta-tiedosto, jotta käyttäjät voivat löytää sen paremmin Internetistä. Anna kuitenkin vähintään dokumentille nimi ja otsikko. Tarkista rakenteiden lukemisjärjestys. Vältä horisontaalista rullausta (mieluummin pystysuunnassa) ja lisää eri elementtien alt-kuvaukset.
PDF on kätevä kun tiedosto jaetaan yleisesti mutta esimerkiksi suljetuissa ympäristöissä, kuten Office 365, missä dokumentin linkki on jaettu vain tietylle ryhmälle voidaan tiedosto jakaa word-tiedostona. Tällöin lukijalla on mahdollisuus käyttää Word Online:n lukunäkymää tai muokata tekstiä itselle sopivaksi.
PDF-dokumentit voi tarkistaa ja myös korjauttaa PAVE tarkistustyökalulla.
http://pave-pdf.org/index.en.html
Celia ohjeistaa myös PDF-dokumenttien tekemisessä. Katso lisää ohjeita sivulta: https://www.celia.fi/saavutettavuus/verkkopalvelujen-saavutettavuus/tiedostojen-saavutettavuus/saavutettavat-pdf-tiedostot/
