Saavutettavaa typografiaa – Osa 2

Kirjoittaja: Timo Laak


1. Johdanto

Saavutettavaa typografiaa -artikkelisarjan ensimmäisessä osassa käytiin läpi printti- ja webbipuolen keskeisimmät erot, erilaiset fonttityypit ja tutkailtiin typografiaa saavutettavuusnäkökulmasta.

Toisessa osassa sukelletaan syvemmälle typografisen valtameren aaltoihin. Käyttääkö suurta fonttia vai pientä fonttia? Miten fontteja voi tehostaa tai miten niiden näkyvyyttä ja luettavuutta voi parantaa?

2. Iso fontti, pieni fontti

Fonttikoko selaimissa on mahdollista määritellä eri yksiköillä. Kokomääritelmät jakautuvat absoluuttisiin eli kiinteisiin ja relatiivisiin eli suhteellisiin. Kiinteä fonttikoko näyttäytyy nimensä mukaisesti aina tietynkokoisena. Suhteellinen fonttikoko taas määrittyy ympäristönsä mukaan.

Fonttikoko voidaan määritellä yksinkertaisimmin kiinteänä käyttämällä valmiita arvoja, joita ovat xx-small, x-small, small, medium, large, x-large ja xx-large. Vastaavat suhteelliset arvot ovat larger ja smaller. Suhteellisuus tarkoittaa sitä, että fontin koko määritellään suhteessa selaimen oletuskokoon tai periytymisen kautta saatuun kokoon. Useimpien selainten oletusfonttikoko on 16 pikseliä. Tällöin larger-arvon saava fontti on selaimesta riippuen 1,2 kertaa suurempi ollen näin 19,2 pikseliä. Vastaavankokoisen fontin tuottaa myös arvo font-size: 120%.[1]

Ongelmia

Fonttikoon määrittäminen ei kuitenkaan ole näin yksinkertaista. Periytyminen (inheritance) aiheuttaa ongelmia, sillä eri selaimet käsittelevät sisäkkäisiä elementtejä eri tavoin. Eri selaimissa myös oletusfontti saattaa olla eri kokoinen. Internet Explorerin 5-versiossa oletusfonttikoko on suurempi kuin 6-versiossa. Yhteensopivuustilassa (quirks mode) IE6:n näyttämä oletusfonttikoko on normaalia suurempi. IE6 asettuu yhteensopivuustilaan, mikäli ennen dokumenttityypin määrittelyä on esimerkiksi kommentteja tai jos dokumenttityyppi puuttuu kokonaan.

Mittayksiköt

Fonttikoko voidaan määritellä myös kiinteiden mittayksiköiden avulla. Kiinteitä mittayksiköitä ovat pt (piste), pc (pica), in (tuuma), cm (senttimetri) ja mm (millimetri). Kiinteistä yksiköistä on hyötyä vain, jos näyttölaitteen fyysiset ominaisuudet ovat tiedossa. Sen vuoksi niitä ei kannata käyttää ruudulta luettavan tekstin määrittelyissä.

Pikseli on osaltaan kiinteä, mutta myös suhteellinen kokoyksikkö. 12 pikselin fontti on aina 12 pikselin fontti, mutta pikselin koko määrittyy käytetyn näyttölaitteen ominaisuuksien mukaan. 1600×1200 pikselin resoluutiossa 17 tuuman näytöllä yksi pikseli on pienempi kuin 800×600 pikselin resoluutiossa vastaavan kokoisella näytöllä.

Internet Explorerin tekstinsuurennos ei vaikuta pikseleinä määritettyihin fontteihin, jolloin käyttäjä ei halutessaan voi helposti suurentaa tekstiä. Tästä syystä pikseliä ei suositella käytettäväksi fonttikokoa määriteltäessä.

Suhteellisia kokomääritelmiä ovat em, ex ja %. Em on saanut nimensä M-kirjaimesta – 1 em on keskimääräisen suuren M-kirjaimen korkeus eli versaaliaakkosten H-korkeus. Tavallisesti tämä koko on selaimessa 16 pikseliä. Vastaavasti ex on gemena-aakkosten x-korkeus. Versaalilla tarkoitetaan suuria kirjaimia ja gemenalla pieniä kirjaimia.[2]

Monet eri selaimet näyttävät samankokoisiksi määritellyt fontit hieman eri kokoisina. Typografin on oltava tietoinen näistä eroista ja tarvittaessa muokattava oma tyylisivunsa eri selaimille. On myös huolehdittava siitä, että fontit ovat tarpeeksi suuria, jotta ne säilyisivät helppolukuisina.

Luettavuus

Monet keski-ikäiset eivät pysty lukemaan painettua tekstiä tai 10-12 pikselin ruutufonttia ilman silmälaseja. Käyttäjä voi toki suurentaa fonttia, jos hän tietää kuinka se tehdään, mutta fontin suurentaminen saattaa rikkoa sivuston näkyvän rakenteen. Vastaavasti liian suuri fonttikoko voi myös olla ongelmallinen. Fontti saattaa tavallaan â??hyökätä silmilleâ? ja käyttäjä joutuu perääntymään näytöltä kauemmaksi tai pienentämään fonttia selaimesta voidakseen lukea tekstiä paremmin. Myös fontin pienennys rikkoo helposti sivuston rakenteen.

On viisasta varautua ulkoasun suunnittelussa siihen, että käyttäjä saattaa muuttaa fonttikokoa, jolloin ulkoasun ja visuaalisen ilmeen on pystyttävä joustamaan ja mukautumaan. Visuaalisen ilmeen suunnitteleminen skaalautuvaksi ja elastiseksi helpottaa sen mukautumista erilaisille päätelaitteille ja asetuksille.

3. Tehostekeinot

Tekstin ulkoasuun voidaan vaikuttaa paitsi erikokoisilla ja erilaisilla fonteilla, myös erilaisilla tyyleillä. CSS antaa melko hyvät mahdollisuudet vaikuttaa tekstin ulkoasuun.

Rivit ja välistykset

Rivikorkeus helpottaa lukemista erityisesti silloin, kun tekstirivit ovat pitkiä. Line-height määrittää tekstirivien etäisyyden toisistaan. Letter-spacing määrittää yksittäisen merkin jälkeen tulevan tyhjän tilan ennen seuraavaa merkkiä. Word-spacing puolestaan määrittää vastaavasti yksittäisen sanan jälkeen tulevan tyhjän tilan leveyden. Kerning-tukea ei nykyisissä selaimissa vielä ole, mutta CSS3-tuen myötä sellainen on tulossa. Kerningin avulla voidaan vaikuttaa tiettyjen merkkien välien leveyteen. Esimerkiksi W- ja T -kirjaimia täytyy usein käytettävästä fontista riippuen siirtää lähemmäksi seuraavaa merkkiä, jotta kirjainten väli ei muodostuisi liian avaraksi.

Whitespacella eli tyhjällä tilalla tai välistyksellä voidaan mm. erottaa tietyt sanat helposti muun tekstin seasta tai esittää nimikirjaimet selkeämmin. CSS:n letter-spacingin ja word-spacingin ohella on tarjolla myös white-space -määre, jonka avulla on mahdollista määrittää, kuinka elementin sisäisiä välilyöntejä käsitellään. Unicode-merkistössä on omat symbolinsa eri kokoisille välistyksille, jolloin mahdollisuudet tekstin muokkaamiseen laajentuvat. On kuitenkin mahdollista, että selain, joka tällaista merkistöä ei tue, näyttää tyhjää tilaa kuvastavien merkkien tilalla merkkipaikkaa osoittavan neliösymbolin.[3]

Sisennykset

Text-indent sisentää kappaleen ensimmäisen tekstirivin. Tätä tapaa käytetään tavallisesti painetussa tekstissä korostamaan kappalevaihtoja ja helpottamaan seuraavan kappaleen löytämistä. Myös tyhjä rivi kappaleiden välissä auttaa havaitsemaan kappaleenvaihdon, mutta sisennyksellä saadaan tekstiin pientä rosoisuutta, joka auttaa kiinnittämään katseen juuri kappaleen alkuun. Mikäli tilaa tekstille on niukalti, voi pelkkä sisennyskin olla täysin riittävä kappale-erotin.

Tekstin tasaus

Text-align eli tekstin tasaus mahdollistaa tekstin tasaamiseen oikealle, vasemmalle tai molempiin laitoihin sekä keskittämisen. Vasemmalta oikealle luettavan tekstin suositeltavin tasaus on vasen laita. Keskitystä käytetään usein mm. otsikoissa tai listoissa, mutta keskitystä tulisi välttää, sillä keskitetyn tekstin lukeminen on hankalaa. Siististi tasattu teksti on paitsi helppolukuisempi, myös esteettisempi ja visuaalisesti miellyttävämpi.

Molempien laitojen tasaus on hyvin ongelmallinen erityisesti kapeilla palstoilla tai mikäli teksti sisältää hyvin pitkiä sanoja. Ilman tavutusta sanojen välistykset muodostuvat hyvin pitkiksi, jolloin silmä karkaa helposti luettaessa seuraamaan tekstistä löytyviä aukkoja. Tavutettuna ja oikein toimiessaan molempien laitojen tasaus muodostaa liian kiinteän tekstikappaleen, jonka lukeminen saattaa olla monille hyvin hankalaa. Katse eksyy helposti väärälle riville ja viimeksi luetun kohdan uudelleenlöytäminen on vaikeaa.

Tavutus

Tavutuksen apuna voidaan käyttää ns. pehmeitä tavumerkkejä (soft hyphen), jotka niitä tukevissa selaimissa kirjoittavat tavuviivan ja jakavat sanan kahdelle riville, mikäli sana sijoittuu rivin loppuun, eikä mahdu kokonaisuudessaan yhdelle riville. Monet selaimet eivät tue tämänkaltaista tavutusta, jolloin tavutus ei joko toimi lainkaan tai pahimmassa tapauksessa kaikki tavumerkit näytetään. Lisäksi tavutuksen laatiminen pitkään tekstiin on hyvin työlästä ja hankaloittaa tekstin myöhemmin tapahtuvaa muokkausta. Tulevaisuudessa on mahdollista, että tuki tavutukselle löytyy selaimista itsestään, mutta kattavaa tukea maailman monille eri kielille saataneen odottaa vielä pitkään.[4], [5]

Kontrasti ja värit

Tekstin kontrasti ja väri vaikuttavat luettavuuteen paljolti. Liian vähäinen kontrasti heikentää luettavuutta ja liian voimakas häikäisee silmiä ja aiheuttaa ns. jälkikuvailmiön, jollainen syntyy, kun katsomme pitkään kirkasta valonlähdettä ja siirrämme sitten katseemme toiseen paikkaan. Sopiva kontrasti helpottaa lukemista eikä rasita silmiä.

Oikeilla värivalinnoilla voidaan vaikuttaa visuaaliseen ilmeeseen positiivisesti. Keskenään harmoniset värit tukevat ulkoasua ja miellyttävät silmää. Hyvin räikeät värit puolestaan suorastaan kirkuvat ja vaikeuttavat lukemista. Värivalinnoissa on huomioitava eri värisokeuden ilmenemismuodot ja vältettävä voimakkaita vastavärejä (esim. punainen-vihreä, punainen-sininen) tai liian räikeitä ja pahimmillaan jopa epileptisiä kohtauksia aiheuttavia väriyhdistelmiä (punainen-keltainen). Esimerkiksi tuotemerkeissä ja logoissa tällaiset väriyhdistelmät voivat toimia hyvinkin, mutta tekstimuotoisen informaation esittämisessä niitä kannattaa välttää.

Muut tehosteet

Text-transformin avulla voidaan muuttaa tekstin esitysmuodoksi versaali, eli suuraakkoset tai gemena, eli pienaakkoset tai määrittää jokaisen sanan alkukirjain versaaliksi. Jälkimmäistä käytetään erityisesti englanninkielisissä otsikoissa. Kun rakenne erotetaan ulkoasusta, voidaan versaali teksti muuttaa myöhemmin helposti gemenaksi ja päinvastoin CSS-tyylien avulla. Suuraakkosia käytetään tyypillisesti otsikoissa ja niillä voidaan korostaa esimerkiksi lyhenteitä.

Text-decoration mahdollistaa tekstin alleviivauksen, yliviivauksen tai päälleviivauksen sekä myös vilkkumisen. Alleviivattu teksti tulkitaan tavallisesti linkiksi, joten alleviivauksen käyttöä korostuskeinona kannattaa välttää. Font-weight määrittää kirjasimen paksuuden. Lihavointi on tavallisimpia tehostekeinoja. Font-stylen avulla fontista saadaan kursiivia (italic) tai vinoa (oblique). Font-variant muuttaa tekstin kapiteeliksi, eli versaalitekstiksi, jossa alkukirjainta lukuunottamatta versaaliaakkoset ovat gemena-aakkosten kokoisia. Text-shadow lisää tekstille varjostuksen, jolla voidaan helposti parantaa tekstin erottuvuutta etenkin otsikoissa. Tämä ominaisuus toimii tällä hetkellä vain Mac OS X:n Safarissa.

On myös muistettava, että liiallinen tehosteiden käyttö heikentää niiden vaikutusta. Jos leipätekstissä joka toinen sana on lihavoitu, lihavointi ei enää vastaa tarkoitustaan, eikä lihavoitu sisältö enää erotu muun tekstin joukosta kuten alunperin oli tarkoitus.

4. Yhteenveto

Valitse fontti käyttötarkoituksen mukaan. Comic Sans MS on tarkoitettu etupäässä hauskoihin ja epävirallisiin dokumentteihin, kuten lasten syntymäpäiväkutsuihin. Impact puolestaan on toimiva otsikoissa, muttei leipätekstissä.

Varmista, että fonttisi on tarpeeksi suuri, muttei liian suuri, jotta luettavuus säilyisi hyvänä. Varmista, että olet määritellyt fonteille vaihtoehdot ja geneerisen tyyliperheen siltä varalta, että lukijan järjestelmästä ei kaikkia fontteja löydy. Suosi suhteellisia fonttikokoja. Vältä kiinteitä kokoja, ellet tiedä lukijasi päätelaitteiden ominaisuuksia.

Varmista, että tekstin kontrasti on sopiva, eikä tarpeettomia tehostekeinoja ole käytetty. Suunnittele tehosteet ja korostukset huolella ja käytä niitä vain luettavuuden parantamiseksi ja visuaalisen ilmeen selkiyttämiseksi. Vältä tekstin korvaamista kuvalla, mutta jos muita vaihtoehtoja ei ole, älä unohda alt-tekstiä tai vaihtoehtoisen sisällön tarjoamista.

Kokeile, miltä tekstisi näyttää eri selaimissa ja käyttöjärjestelmissä pehmennyksen kera ja ilman. Kokeile myös suurentaa ja pienentää tekstiä.

Webbitypografian ja tekstimuotoisen informaation ei tarvitse olla tylsää ja tavallista. Näillä yksinkertaisilla tehostekeinolla ja saavutettavuus- ja luettavuusnäkökulman huomioinnilla voidaan saada ihmeitä aikaan. Muista, että tehosteet ovat kuin mausteita. Sopivasti käytettynä ne tuovat sivustosi sisällön hyvin esille, korostavat visuaalista ilmettä, parantavat luettavuutta ja miellyttävät näköhermoja. Liiallisesti ja huolimattomasti käytettynä ne polttavat silmiä, karkottavat potentiaaliset asiakkaat ja antavat paitsi itse sivustosta, myös sen takana olevasta tahosta ei-toivotun kuvan.

Lähteet ja viitteet

1: Cascading Style Sheets – Level 2 CSS2 Specification – Fonts
2: Anatomy of a Character
3: General Punctuation – Test for Unicode support in Web browsers
4: Tavutusvihje-esimerkki
5: Soft hyphen (SHY) – a hard problem?

Jim Byrne on koonnut tiiviin tietopaketin Accessible Web Typography – an introduction for web designers. HTML-versio on ilmainen.

Saavutettavaa typografiaa – Osa 1

Tässä kaksiosaisessa artikkelisarjassa perehdytään typografian ihmeelliseen maailmaan. Se, mikä näyttää paperilla hyvältä, ei välttämättä toimikaan internet-sivulla aivan yhtä hyvin. Web-suunnittelu kaikkine kommervenkkeineen on hyvin haastavaa. Erilaisia huomioitavia asioita kun on kasapäin, eikä typografia ole suinkaan sieltä merkityksettömimmästä päästä.

Millaista fonttia tulisi käyttää? Miten määritellään fonttikoko ja millaisia tehostekeinoja on käytettävissä? Typografisessa valtameressä muhii melkoinen keitos, jonka yhtenä ainesosana on myös saavutettavuus. Ei ole lainkaan yhdentekevää millaisia fontteja ja tehostekeinoja käytetään.

Ensimmäisessä osassa keskitytään webbi- ja printtitypografian keskeisiin eroihin, pohditaan saavutettavuusnäkökulmaa sekä esitellään tavallisimmat fonttityypit ja niiden käyttötarkoitukset.

typo|grafia s. 1 kirjapainotaito 2 kirjan tms. painoasu 3 kirjasinlajin, -koon, merkki- ja rivivälistyksen yms. valinta ja sen lopputulos (Uusi suomalainen sivistyssanakirja)

1. Johdanto

Termi typografia on peräisin kreikan kielen sanoista typos (muodostaa) ja graphein (kirjoittaa). Typografia on satoja vuosia vanha tekniikka ja taiteenlaji, jossa kirjasintyylien, pistekokojen, rivikorkeuksien ja -pituuksien sekä välistyksien ja värien avulla luodaan fyysisessä tai digitaalisessa muodossa olevaa kirjallista materiaalia. Typografian tarkoitus on kuvata tekstuaalisessa muodossa olevaa informaatiota helppolukuisella ja visuaalisesti esteettisellä tavalla.[1]

Johann Gutenbergin kirjapainosta ja luostarimunkkien Raamatuista on kuljettu pitkä matka nykypäivän digitaaliseen typografiaan. Digitaalinen media paitsi antaa typografialle uusia ulottuvuuksia, myös rajoittaa tyylien ja kirjasinten käyttöä. Web-suunnittelijalta vaaditaankin aivan toisenlaista typografian tuntemusta kuin hänen printtikollegaltaan.

2. Digitaalinen typografia

Painotyön resoluutio eli pistekoko tuumaa kohden (dpi – dots per inch) on jopa 2400 dpi kun taas sähköisen näyttölaitteen resoluutio on tyypillisesti vain 96 dpi.[2]

Painettu fontti on ja pysyy sellaisena kuin se painovaiheessa oli. Painettu fontti näyttää aina samalta, eikä sitä voi muuttaa. Digitaalinen fontti sen sijaan on erilainen eri näyttölaitteilla ja -asetuksilla. Digitaalisen fontin näkyminen lukijalle internet-selaimessa riippuu siitä, onko kyseistä fonttia saatavilla lukijan käyttämässä käyttöjärjestelmässä tai ohjelmistossa.

Digitaaliseen mediaan erikoistuneen typografin on tunnettava erilaiset selainohjelmat, käyttöjärjestelmät ja niiden rajoitteet. Hänen on myös tiedettävä, mitkä fontit ovat turvallisia käyttää ja miltä ne näyttävät eri päätelaitteilla. Kaiken tämän jälkeenkään typografi ei voi tietää, mitä fontteja käyttäjällä järjestelmässään on. Käyttäjä on saattanut poistaa osan turvallisista oletusfonteista. Käyttäjä saattaa myös ohittaa typografin valinnat ja käyttää omaa tyylitiedostoaan tai määrittää oman mielensä mukaisen fonttikoon.

Käyttäjä ei ehkä hyödynnä käyttöjärjestelmän anti-aliasointi-, eli fonttien pehmennysominaisuuksia. Pehmennetty fontti on miellyttävän näköinen ja helppolukuinen. Pehmentämätön fontti puolestaan on karkea ja reunoiltaan rosoinen, kuten esimerkkikuvan perusteella voidaan havaita. Hyvin pienikokoiset fontit muuttuvat pehmennettyinä helposti suttuisiksi ja vaikealukuisiksi, jolloin monet järjestelmät näyttävät tietynkokoiset fontit automaattisesti pehmentämättöminä. Windows XP:ssä ei näyttöfonttien pehmennys ole oletuksena käytössä ja moni käyttäjä saattaakin olla tästä ominaisuudesta autuaan tietämätön.

Onko typografiaan panostaminen internetissä siis turhaa? Ei suinkaan, sillä typografialla voidaan vaikuttaa ratkaisevasti visuaaliseen ilmeeseen. Monet käyttäjät eivät muuta selainohjelmansa asetuksia. He eivät ehkä tiedä, että fonttikokoa voi suurentaa tai että he voivat määrittää mieleisensä oletusfontin kaikille sivuille tai ehkä he eivät vain halua tai näe tarvetta tehdä niin. Typografiaan panostamalla voidaan vähentää tarvetta muuttaa ja muokata olemassaolevia tyylejä ja parantaa sivuston yleisilmettä sekä korostaa markkinoitavaa tuotetta tai brandia.

3. Saavutettavuusnäkökulma

Digitaalisella typografialla on yksi merkittävä etu puolellaan. Heikkonäköinen ei aina näe painettua tekstiä ilman apuvälineitä (silmälasit, suurennuslaitteet). Sokea henkilö ei pysty lukemaan painettua tekstiä lainkaan muutoin kuin muuttamalla sen digitaaliseen muotoon kuvanlukijan ja tekstintunnistusohjelman avulla.

Digitaalinen teksti on jo valmiiksi digitaalisessa muodossa, jolloin näkövammaisen on mahdollista lukea se ruudunlukijan tai pistekirjoitusnäytön avulla. Digitaalinen teksti on myös helpommin muokattavissa, kopioitavissa ja siirrettävissä toiseen ympäristöön tai päätelaitteeseen. Digitaalista tekstiä voidaan suurentaa vapaasti, kirjasin voidaan vaihtaa lukijalle mieleiseksi sekä värejä ja kontrastia muuttaa. Digitaalinen typografia näin ollen poistaa merkittäviä painetun typografian rajoitteita ja lisää informaation saavutettavuutta.

Myös digitaalisessa typografiassa on omat ongelmansa, joista tärkeimpiä ovat resoluutio, saatavilla olevat fontit sekä käyttäjän näyttölaitteen fonttiasetukset. Tekstisisällön esittäminen kuvana poistaa näitä ongelmia, mutta samalla se myös poistaa digitaalisuuden edut. Digitaalinen kuva ei ole tekstiä, vaikka kuvassa tekstiä olisikin. Kuvan suurentaminen ja muokkaaminen ei ole yhtä yksinkertaista kuin tekstin.

Näkövammainen ei välttämättä näe kuvaa, eikä siten voi lukea kuvamuodossa olevaa tekstiä. Suunnittelunäkökulmasta katsottuna kuvamuotoon asetellun tekstin muokkaaminen tai korjaaminen jälkikäteen on työlästä. Kuvatiedoston fyysinen koko on myös moninkertainen tekstitiedostoon verrattuna.

Saavutettavuuden varmistamiseksi kuvien käyttöä tekstin sijaan tulee ehdottomasti välttää. Aina tämä ei välttämättä ole mahdollista. Monet liike- ja tuotemerkit, sekä yritysten logot ovat tietyntyylistä tekstiä, jota on toistaiseksi mahdoton esittää internet-sivulla tekstimuodossa. Hyvä esimerkki tästä on Coca-Cola Companyn tunnettu koristeellinen tekstilogo. Mikäli teksti korvataan kuvalla, on varmistuttava, että kuvan informaatio on myös näkövammaisen tai heikkonäköisen saavutettavissa. Alt-tekstin tai vaihtoehtoisen tekstimuotoisen informaation tarjoaminen on siis erittäin suositeltavaa. Toinen mahdollinen ratkaisu on hyödyntää esimerkiksi sIFR-tekniikkaa, jossa tekstiä voidaan esittää JavaScriptin ja Flashin avulla ja silti säilyttää saavutettavuus.

4. Millainen fontti?

Ei ole lainkaan yhdentekevää millaista kirjasintyyppiä eli fonttia käytetään tekstuaalisen sisällön ilmaisemiseksi. Eri fontit on suunniteltu erilaisia tarkoituksia varten. Fontit voivat olla koristeellisia, juhlallisia, jämäköitä ja virallisia, mutta myös hauskoja ja epävirallisia, taiteellisia, moderneja tai futuristisia. Fontit ja grafiikka muodostavat yhdessä dokumentin visuaalisen ilmeen, oli kyse sitten painetusta tai sähköisestä informaatiovälineestä.

Fonttityypit jaetaan geneerisiin päätyyleihin ominaisuuksiensa mukaan. Päätteellinen (serif) fontti on hyvin yleinen sanomalehdissä ja painetussa tekstissä (Esimerkki Georgiasta). Päätteellisten fonttien pienet koukerot ja väkäset auttavat katsetta soljumaan kirjaimesta seuraavaan ja helpottavat lukemista. Päätteellisiä fontteja käytetään myös paljon internet-sivuilla, vaikka niillä onkin taipumus muuttua sumeaksi ja suttuiseksi liian pienikokoisena näytöllä esitettyinä.

Päätteetön (sans-serif) fontti on suoraviivainen ja tasainen, eikä siinä ole serif-fonttien tapaan käytetty paksunnoksia tai koukeroita (esimerkkikuva Verdanasta). Päätteetön fontti on usein välistykseltään avara ja näytöllä tarkka ja helppolukuinen. Nykyisten näyttöjen alhainen resoluutio tekee suoraviivaisesta ja yksinkertaisesta fontista selkeämmän ja helppolukuisemman.

Muita fonttityyppejä ovat mm. tasalevyinen monospace, jota käytetään erityisesti ohjelmakoodin esittämiseen tekstieditoreissa sekä hyvin koristeellinen ja taiteellinen fantasia ja vino kirjasin eli kursiivi. Internet-sivuilla käytetään tavallisimmin päätteellisiä ja päätteettömiä fontteja.

Muutamat ns. ydinfontit (core fonts) määritellään turvallisiksi perusfonteiksi, joita on turvallista käyttää internet-sivuilla. Nämä fontit löytyvät useimmista järjestelmistä ja on hyvin todennäköistä, että käyttäjällä on ne järjestelmässään, jolloin internet-sivu näkyy käyttäjälle typografin suunnitelmien mukaisena.

Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS ja Verdana ovat Microsoftin ydinfontteja ja ne löytyvät pääsääntöisesti lähes kaikista nykyaikaisista Windows-sekä Macintosh-järjestelmistä.[3]

Eri ohjelmistojen, kuten Internet Explorerin ja Microsoft Officen mukana toimitetaan lisäksi runsaasti muita fontteja, jotka tavallisesti löytyvät monista järjestelmistä. Koska CSS-tyylimäärittelyillä on mahdollista määrittää vaihtoehtoisia fontteja, on ydinfonttien ulkopuolisiakin fontteja melko turvallista käyttää. On vain muistettava tarjota tarpeeksi vaihtoehtoja, sekä määrittää viimeiseksi vaihtoehdoksi geneerinen fonttiperhe (serif, sans-serif jne.), jolloin järjestelmä näyttää oikean tyyppisen oletusfontin, mikäli typografin määrittelemiä fontteja ei järjestelmästä löydy.

Lopuksi

Saavutettavuusnäkökulman huomioiminen on hyvin keskeinen tekijä internet-sivuja suunniteltaessa. Sivun sisällön välittyminen lukijalle on hyvin olennaista koko sivun olemassaolon perusteena. Jos potentiaalinen lukija ei pääse sisältöön käsiksi, menettää koko sivu tarkoituksensa. Nykyteknologian levitessä yhä useampiin koteihin yhä erilaisemmat ihmiset tulevat käyttämään internetin palveluita. Monet keski-ikäiset eivät esimerkiksi pysty lukemaan ilman silmälaseja samaa tekstiä kuin heidän lapsensa.

Sarjan toisessa osassa keskitytään fonttien näkyvyyteen ja tehostekeinoihin, joilla luettavuutta voi parantaa.

Lähteet ja viitteet

1: http://en.wikipedia.org/wiki/Typography
2: http://www.sitepoint.com/article/anatomy-web-fonts
3: http://www.upsdell.com/BrowserNews/res_fonts.htm#a01

ClearType Tuner on työkalu, jolla Windows XP:n näyttöfonttien pehmennysominaisuuksia voi muokata (toimii Internet Explorerilla).

Zoom: toteutus käytännössä

Kirjoittaja: Mikko Heikkinen/biomi.org


Zoom-ulkoasun tekeminen on yllättävän monimutkainen asia, eikä yhtä ainoaa oikeaa tapaa ole. Tässä esitän omia ja muutaman asiantuntijan mietteitä aiheesta, perustuen osin aiemmin julkaistuun tietoon (viitteet).

Pyysin kommentteja Luonnontieteellisen keskusmuseon testikäytössä olleesta zoom-ulkoasusta Näkövammaisten kirjasto Celiasta sekä Näkövammaisten Keskusliitosta. Minulle vastasivat ystävällisesti Markku Leino ja Katariina Kiiliäinen (Celia) sekä Virpi Jylhä (NKL).

Zoom-ulkoasun tarkoitus

Zoom-ulkoasulla voi olla useita tarkoituksia:

  1. Sivun toimivuus ruudunsuurennusohjelmien kanssa
  2. Sivun toimivuus hyvin suurella tekstikoolla
  3. Sivun selkeys heikkonäköisten kannalta

Zoom -ulkoasun ominaisuudet

Zoom-ulkoasun perusominaisuudet:

  • Yksipalstaisuus
  • Sivun ja navigoinnin selkeys (yksinkertaisuus)
  • Toimivuus myös käyttäjän omien asetusten kanssa (tekstin koko, värit)

Leino ja Kiiliäinen kirjoittivat: â?¦heikkonäköiset käyttäjät muuttavat itse selaimensa asetukset ja näin voi suunnittelussa pyrkiä Design for All -periaatteen noudattamiseen. Yksi hyvä kaikille riittää, kunhan se on suunniteltu hyvin, eikä esim. estetty vapaata fonttien yms. vaihtoa. Jylhä puolestaan kirjoitti, että â??Reilustiâ?? heikkonäköiset henkilöt yleensä hoitavat internet-selaimen asetukset + Windows asetukset itselleen sopiviksi. â?¦ Pidän tärkeimpänä kuitenkin, että päätyylinne olisi skaalautuva ja käyttäjät voisivat itse muokata selaimen asetuksilla näkymänsä itselleen sopivaksi.

Värit

Monissa zoom-toteutuksissa toimivuutta näkövammaisten kannalta on yritetty parantaa myös tekstikokoa suurentamalla ja käännetyllä väriskaalalla (vaalea teksti ja tumma tausta). Tämä ei kuitenkaan ole tarpeen kolmesta syystä:

  1. Käyttäjät voivat itse säätää nämä selaimestaan (toisin kuin esim. palstajaottelun)
  2. Eri tavalla näkövammaiset voivat tarvita hyvinkin erilaisen ulkoasun. Esimerkiksi joillekin normaalia suurempi teksti voi olla jopa vaikealukuisempaa. Myös värien säätäminen kaikille sopivaksi on käytännössä mahdotonta.
  3. Käyttäjät ovat jo asettaneet selaimeensa itselleen soveltuvat väri- ja kokoasetukset, jos niitä tarvitsevat; muutoin he eivät pystyisi käyttämään useimpia sivustoja.

Kaikille sopivia värivaihtoehtoja ei käytännössä ole mahdollista tarjota. Leino ja Kiiliäinen kirjoittavat: Tällainen käyttäjä [käänteisiä värejä tarvitseva] saattaa haluta mustan pohjan ja keltaisen tekstit, linkit sinisiä ja käytetyt punaisia. Jylhä kirjoittaa: â?¦jos henkilö tarvitsee käänteisiä värejä, hänen on pitänyt tehdä se jo aiemmin. Muut sivut jäisivät muuten näkemättä.

Tekstin koko

Jylhä kirjoittaa: â?¦heikko näkö ei ole sama asia aina kuin suurennetun tekstin tarve. â?¦ Suurennan tekstin selaimen ominaisuuksilla, mikäli se on tarpeen. Samoin saatan pienentää sitä.

Ratkaisu?

Oman sivustoni zoom-tyyleissä perusideana onkin säätää zoom-valikolla vain sellaisia asioita, joita käyttäjä ei voi selaimesta käsin säätää: palstojen jaottelu ja navigoinnin ulkoasu (ja monimutkaisuus). Värien ja tekstin koko puolestaan jätetään käyttäjän säädettäväksi. Tämä on yritetty tehdä mahdollisimman helpoksi mm. olemalla käyttämättä taustavärejä. Myöskään leveyttä ei määritellä eikä erikoisen suuria marginaaleja käytetä.

Avainsana on skaalautuvuus, jota Jylhäkin painottaa: Ärräpäitä syntyy silloin, kun sivusto ei skaalaudu, värit, leveydet tai fontit ovat kiinteitä. Eli tekstimassa ja tyylit on oltava erikseen, silloin sivu on mahdollisimman esteetön tältä osin.

Biomi.org zoom-tyyleillä, ilman käyttäjän tekemiä värisäätöjä (Firefox) sekä käännetyllä väreillä (IE)

Zoom-ulkoasu kannattaakin määritellä mahdollisimman yksinkertaiseksi, tällöin sen mukauttaminen selaimesta käsin on helpointa. CSS-taitolla toteutetuilla sivustoilla tämä on usein hyvin lähellä tyylien poistamista, erityisesti jos navigointi on jo valmiiksi toteutettu yksinkertaisesti. Jos sivusto on tehty esteettömyysohjeiden mukaisesti toimimaan myös ilman tyylejä, on tämä entistä helpompaa. Pieni säätö voi olla paikallaan eri osioiden (esim. navigointi, pääsisältö, lisätiedot) erottamisessa toisistaan.

Se, että käyttäjät tekevät väri- ja tekstisäädöt itse, ei kuitenkaan tarkoita, että ne olisivat zoom-ulkoasussa täysin turhia. Jylhä kirjoittaa erilaisista värivaihtoehdoista: Eri tyylit ovat varmasti ihan ok ja auttanevat henkilöitä, jotka ovat kenties vasta näkövammautuneet (heikkonäköisiksi) tai ovat niin hyvin näkeviä, etteivät ole joutuneet opettelemaan apuvälinekäyttöä, vaan pärjäilevät itsenäisesti.

Värit rakenteen selkeyttämisessä?

Värejä voi käyttää sivun rakenteen selkeyttämisessä, ja sitä kautta käytettävyyden parantamisessa. Tämä pätee myös näkövammaisten kohdalla, mikä tulee ilmi myös Screen Magnification and the Web -videolla. Esimerkiksi eri taustaväreillä voi erotella erityyppisiä linkkejä.

Tällainen värien käyttö ei kuitenkaan sovi hyvin yhteen tässä esitetyn, taustavärittömän zoom-ulkoasun kanssa. Toinen tapa on käyttää tyhjää tilaa rakenteen selkiyttämisessä. Myös viivoista, ikoneista yms. tehosteista voi olla apua osien erottelussa.

Valikon sijoittaminen

Ulkoasuvalikon sijoittaminen on hankalaa. Kun koko tekniikka on uusi, ei mitään vakiintunutta tapaa ole olemassa.

Itselläni ei ole kokemusta ruudunsuurennusohjelmien käytöstä, mutta em. Screen Magnification and the Web -videota katselemalla asiasta saa karkean kuvan. Tämän perusteella tuntuisi, että sivun yläreuna lienee paras sijoituspaikka. Tämä kohta sivusta sisältää useimmiten muutenkin tärkeää tietoa, eikä jää ylenkatsotuksi.

Valikko täytyy kuitenkin suunnitella huolella, jottei se jää otsikon ja navigoinnin varjoon. Valikon teksti kannattaa muotoilla siten, että siitä ilmenee kyseessä olevan pelkkä ulkoasun vaihto eikä erillinen, mahdollisesti harvemmin päivitettävä tai suppeampi versio.

Muita yksityiskohtia

Päätteettömien fonttien (esim. Arial) sanotaan usein olevan selkeämpiä ja toimivampia tietokonenäytöillä. Myös NKL suosittaa Arialin käyttöä. Pieninäyttöisissä laitteissa niiden merkitys voi korostua.

Jos päätyy säätämään sivun värejä, kannattaa niiden valinnassa olla tarkkana. Esimerkiksi tässä kuvassa olevien linkkien ja taustan välinen kontrasti ei ole Leinon ja Kiiliäisen mukaan riittävä:

vaaleansinisiä ja vaaleanpunaisia linkkejä tummanharmaalla taustalla: kontrasti ei ole riittävä

Zoom-ulkoasusta voi olla hyötyä myös pieninäyttöisten laitteiden (kämmenmikrot, kännykät) käyttäjille. Ongelmana voi kuitenkin olla näiden laitteiden heikko tuki vaihtoehtoisille tyylitiedostoille tai muille tyylinvaihdossa käytettäville tekniikoille (esim. Javascript, evästeet).

Yhteenveto

Vaikka useimmat näkövammaiset käyttävätkin selaimen ominaisuuksia säätääkseen ulkoasun itselleen sopiviksi, ei zoom-ulkoasu ole turha. Se tarjoaa lisämahdollisuuksia palstoituksen säätämiseen, mahdollistaa selaimesta riippumattoman ulkoasun säätämisen (esim. aloittelijoille) ja myös helpottaa selaimen kautta tehtävää ulkoasun säätämistä.

Zoom-ulkoasut ovat kuitenkin vielä nuori asia ja paras toteutustapa on löytämättä. Zoom-ulkoasujen yleisyys vaikuttaa niiden toteutustapaan: jos niiden käyttö yleistyy, syntynee vakiintuneita käytäntöjä ja kokemusta eri menetelmien paremmuudesta. Siihen asti mahdollisimman monimuotoiset toteutukset ja niiden testaaminen käytännössä lienevät vain hyvästä.

Viitteet ja lisää aiheesta

Hyödynnettävä vai e-sisällytetty? — Saavutettavuuden käsitteistö

Kirjoittaja: Marjut Mutanen.


Sisältö

Johdanto

Jo Saavutettava.fi-sivustoa perustettaessa käytiin kevyttä kädenvääntöä siitä, mikä sille pitäisi antaa nimeksi. Preferenssit kallistuivat hiukan enemmän esteettömyyteen, mutta kiitos ääkkösten, se vaihtoehto oli suljettava loppupeleissä pois. Siksi valitsimme olevamme saavutettavuuden asialla, vaikka käytännössä mikään aihealueeseen liittyvä ei ole vierasta. Saavutettava ja esteetön, ne ovat hyviä tavoitteita molemmat.

Vaan jos valinta jo näiden kahden termin välillä on vaikea, se ei siitä helpotu, kun aihetta lähestyy vierailla kielillä. Luokaamme siis katsaus siihen, millä kaikilla nimillä tätä lasta kutsutaan, ja mitä nimet tarkoittavat.

Taustat ja tarkoitukset

Antti Raike kertoo väitöskirjassaan1, että alun perin esteettömyys (barrier-free) tarkoitti sen varmistamista, että julkisiin tiloihin ja rakennuksiin on helppo päästä pyörätuolilla. Sittemmin käsite on laajentunut tarkoittamaan rakennusten esteettömyyden ohella myös kaikkien kansalaisten sujuvaa osallistumista työntekoon, harrastuksiin, kulttuuriin ja opiskeluun.

Saavutettavuus on Raiken mielestä esteettömyyttä laajempi käsite, joka kuvaa sitä, kuinka helposti informaation, järjestelmän, laitteen, ohjelman tai palvelun voi saada käyttöönsä. Web-kontekstiin tuotuna saavutettavuus voi tarkoittaa myös eri selain- ja laiteyhdistelmien huomioon ottamista WWW-suunnittelussa.

Kuusi vuotta sitten Arlainstituutissa, erityisopetuksen alueella toimivassa ammatillisessa koulutus- ja kehittämiskeskuksessa, järjestettiin www-palveluiden ja nettikaupan tavoitettavuutta käsittelevä keskustelufoorumi osana Näkövammaiset tulevaisuuden työympäristössä -ennakointiprojektia. Foorumin yhteydessä käytiin keskustelua siitä, millä sanalla asiasta tulisi suomeksi puhua: olisiko oikea termi esteettömyys, saavutettavuus vai esimerkiksi tavoitettavuus.

Kannatusta sai saavutettavuus, jonka ajateltiin parhaiten suomen kielellä kuvaavan asiaa ja assosioivan sen eri puolia. Aikaisemmin samaan asiaan oli viitattu sanoilla käytettävyys ja hyödynnettävyys, jotka siis webin yhteydessä ehdotettiin korvattavaksi sanalla saavutettavuus.2 Näiden kahden esimerkin perusteella voisi vetää sellaisen johtopäätöksen, että kun puhutaan webistä, voitaisiin terminä käyttää saavutettavuutta. Arlainstituutin kannanotosta ei ole kuitenkaan tullut vakiintunutta käytäntöä.

Hei, kuka puhuu

Oikea termi vaihtelee myös asiasta puhuvan instanssin mukaan. Suomessa näitä näkyviä alan toimijoita ei tosin ole kovin monta: Arlainstituutin lisäksi on oikeastaan vain Tietoyhteiskunnan kehittämiskeskus Tieke esteettömyysoppaineen sekä Stakesin alaisena toimiva Suomen Design for All -verkosto.

Tieken esteettömyysopas ei turhia kursaile, vaan pitää esteettömyyttä ja saavutettavuutta synonyymeinä toisilleen jopa niin, että oppaan mukaan esteettömyys on saavutettavuutta kaikille. Oppaassa tuodaan kuitenkin esille se terminologiaan liittyvä mielikuvaseikka, joka on muissakin lähteissä mainittu: esteettömyydestä sanana tulee mieleen konkreettinen esteiden poistaminen. Toisin sanoen, portaat, kynnykset ja kapeat ovet voivat olla liikkumisen esteitä pyörätuolia käyttäville. Toisaalta myös web-sivuston esteettömyyttä voi verrata rakennuksen esteettömyyteen. Kumpikin tapa käy, ei ole yhtä ainoaa oikeaa.

Suomen Design for All -verkoston käyttämä design for all (!) on saavutettavuusmaailman outolintu, mutta termillä katetaan myös paljon muita aihepiiriin liittyviä konteksteja kuin web ja se, onko jokin palvelu yksiselitteisesti kaikille saavutettava vai ei.

Design for All (DfA) ottaa saavutettavuuden ohella mukaan myös jopa sosiaalisesti kestävän kehityksen näkökulman ja käytettävyyden, mitä voidaan pitää hyvinkin perusteltuna ratkaisuna; onhan käytettävyyden ja saavutettavuuden monissa yhteyksissä jopa ymmärretty tarkoittavan samaa asiaa. Käsite on eurooppalaista alkuperää, mutta suomen kieleen se on juurtunut aika huonosti, eikä sille ole sopivaa käännöstä. Suomalaisessa toimintaympäristössä design for all kääntyykin tällä hetkellä usein esteettömyydeksi tai saavutettavuudeksi, joskus puhutaan myös suunnittelusta kaikille.

Webin suhteen DfA ei ota kantaa suuntaan eikä toiseen. Verkoston sivuilla käsitettä on purettu monisanaisesti auki, mutta lyhyesti sanottuna määritelmä kuuluu näin: design for all tarkoittaa sellaisia suunnitteluun liittyviä strategioita ja keinoja, joilla edistetään ympäristöjen, tuotteiden ja palveluiden käytettävyyttä, saavutettavuutta ja esteettömyyttä kaikille käyttäjille.

Valtionhallinnon taholta suosituksia oikeaksi käsitteeksi ei ole, sillä esimerkiksi kotoinen tietoyhteiskuntaohjelmamme käyttää kaikkia termejä sulassa sovussa.

Rajojen ulkopuolella

Jos Suomessa saavutettavuuteen viitataan pääasiallisesti kolmella eri termillä, on maamme rajojen ulkopuolella käytössä vielä ainakin toinen mokoma lisää. Accessibility on varmaan suomalaisillekin tutuin, ja kääntyy luontevimmin joko saavutettavuudeksi tai esteettömyydeksi (accessible = helppopääsyinen, käytettävissä, saatavilla oleva jne.). Amerikan mantereella syleillään koko maailmaa universal design -termin voimin, joka laajentaa esteettömän (barrier-free) suunnittelun käsittämään myös tuotteen ja palvelut. Universal design sisältää seitsemän tutulta kuulostavaa suunnitteluperiaatetta, joita voidaan hyödyntää suunnittelutyössä, arvioinnissa ja koulutuksessa.3

EU:n sisällä käytetään termiä e-inclusion, e-sisällyttäminen, jolla viitataan kaikkien mahdollisuuteen päästä osallisiksi tietoyhteiskunnan eri osa-alueista. Inclusive design on eurooppalaisempi universal design -käsitteen vastine, eli suunnittelumenetelmä, joka puolestaan mahdollistaa e-sisällyttämisen: suunnitteluprosessin kaikissa vaiheissa pyritään siihen, että suunnitellut tuotteet, palvelut ja ympäristöt ovat kaikkien saavutettavissa. Luonnollisesti lähteistä riippuen kummatkin nähdään design for all -määritelmän synonyyminä.

Mitä jää käteen?

Meillä on esteettömyys, saavutettavuus, design for all, accessibility, universal design, inclusive design ja e-inclusion. Standardeja noudattavien ja saavutettavien verkkosivujen tekeminen voi olla pilkuntarkkaa hommaa, mutta tärkeistä asioista puhuttaessa ei auta takertua semantiikkaan. Jos tavoite tuotteiden, palveluiden ja ympäristöjen saattamisesta kaikkien ulottuville edellyttääkin käytännön toteutuksessa tavallista enemmän ajatustyötä ja vaivannäköä, niin terminologian tasolla ei tarpeettomia rajoja aseteta: kaikki käyvät.

Lähteet ja muu materiaali

Web-sivustojen kehittäminen kognitiivisista ongelmista ja oppimisvaikeuksista kärsiville

Kirjoittajat: Roger Hudson, Russ Weakley ja Peter Firminger. Käännös: Yoji Hirabayashi ja Marjut Mutanen.

Artikkeli on julkaistu alunperin Juicy Studio -sivustolla nimellä Developing sites for users with Cognitive disabilities and learning difficulties.


Yhteenveto

Web-sisällön esteettömyyttä pohdittaessa keskitytään usein vain näkövammaisiin. Kognitiivisista häiriöitä ja oppimisvaikeuksista kärsivät jäävät yleensä vähemmälle huomiolle.

Tämä Roger Hudsonin, Russ Weakleyn ja Peter Firmingerin artikkeli paneutuu ongelmiin, joihin käyttäjä saattaa törmätä webissä. Artikkeli tarjoaa hyödyllisiä ja käytännöllisiä ehdotuksia siihen, kuinka sivustoja voidaan kehittää saavutettaviksi myös kognitiivisista vammoista ja oppimisvaikeuksista kärsiville.

Sisältö

Johdanto

Kognitiivisista vammoista ja oppimishäiriöistä kärsivät ovat yhteiskunnan suurin esteellinen käyttäjäryhmä. Silti tämä käyttäjäryhmä usein unohdetaan web-sivuston esteettömyyttä suunniteltaessa.

Kognitiiviset vammat ja oppimisvaikeudet tuntuvat kattavan niin monia erilaisia tiloja, että web-suunnittelijoiden on usein vaikeaa tunnistaa niistä kärsivien henkilöiden tai ryhmien erityistarpeita.

Useat erilaiset rajoitteet voivat vaikuttaa henkilön kykyyn päästä sivustolle ja käyttää sieltä löytyvää informaatiota. Esimerkkejä:

  • Kognitiiviset heikkoudet, joihin sisältyvät mm. muistin havaintokyvyn, ongelmien ratkomisen, käsitteellistämisen ja tarkkaavaisuuden heikkeneminen. Nämä voivat johtua monista eri asioista kuten esimerkiksi henkisestä jälkeenjääneisyydestä, autismista, aivovauriosta, Parkinsonin taudista, Alzheimerin taudista tai korkeasta iästä.
  • Oppimisvaikeudet voivat myös vaikuttaa muistiin, havaintokykyyn, ongelmienratkaisukykyyn ja käsitteellistämiskykyyn monin tavoin. Oppimisvaikeuksiin sisältyvät mm. sellaiset lukemisvaikeudet kuten lukihäiriö, laskennalliset, päättelykyvyn ja organisointikyvyn puutteet ja sanattoman oppimisen ongelmat. Nämä yhdistetään joskus myös tarkkaavaisuus- ja ylivilkkaushäiriöön, ADHD:hen (Attention Deficit Disorder and Hyperactivity).

Web-kehittäjälle ongelmia aiheuttaa lisäksi se, että yksittäisten käyttäjien tarpeet vaihtelevat suuresti. Onkin tavallista, että henkilöllä joka kärsii kognitiivisista vaikeuksista yhdellä osa-alueella, jokin toinen osa-alue on vahva. Esimerkiksi henkilöllä, joka on erinomainen lukemaan, voi olla huomattavia vaikeuksia ymmärtää kuinka dokumentti on organisoitu tai hän häiriintyy helposti sivulla vilkkuvasta pienestä animoidusta kuvasta.

Pystyykö web sitten vastaamaan kaikkien ryhmien erilaisiin tarpeisiin? Todennäköisesti kyllä, mutta erilaisilla sivustoilla.

Web voi tuottaa huomattavaa mielihyvää ja auttaa henkilöitä, jotka kärsivät erilaisista, joskus melko suuristakin, kognitiivisista häiriöistä. Nyt jo suljettu Peepo Project -sivusto tarjosi laajalti resursseja ja ideoita siihen, kuinka vaikeasti oppimishäiriöisten selailua ja itsenäistä webin käyttöä voidaan helpottaa.

Tämä artikkeli keskittyy pääasiallisesti siihen, miten webiä voidaan parantaa sellaisen henkilön kannalta, joka kykenee itsenäisesti selailemaan sivustoja ja niiden tekstisisältöä. Erityisesti artikkelissa annetaan yksinkertaisia neuvoja, joiden avulla voidaan parantaa sivustojen saavutettavuutta silloin, kun henkilöllä on vaikeuksia lukea ja ymmärtää tekstisisältöä.

Artikkelissa An Accessibility Frontier: Cognitive disabilities and learning difficulties [en] käsitellään aihetta yksityiskohtaisemmin.

1. Sisällön kanssa työskenteleminen

1.1 Selkeä ja helppo sisältö

Hyvin kirjoitettu sisältö tekee sen saavuttamisesta helpompaa kaikille, myös niille henkilöille, jotka kärsivät kognitiivisista häiriöistä ja oppimisvaikeuksista.

  • Pidä huolta siitä, että informaatio on hyvin jäsennetty.
  • Pidä sisältö lyhyenä ja yksinkertaisena.
  • Tarjoile informaatio pieninä annoksina, yksi idea per kappale.
  • Tarjoa lisäinformaatio asiasta mieluummin listamuodossa kuin pitkänä kappaleena tekstiä.
  • Käytä mielekästä otsikointia ja väliotsikointia.
  • Vältä kirjoitus- ja kielioppivirheitä.
  • Tarjoa teknisille termeille ja lyhenteille selitykset.

1.2 Optimaalinen rivin pituus

Monille käyttäjille pitkien tekstirivien lukeminen on vaikeaa. Lukemisvaikeuksista kärsiville henkilöille pitkien rivien lukeminen saattaa muodostaa jopa ylitsepääsemättömän esteen. Näyttöjen resoluutioiden kasvaminen mahdollistaa myös suurempien kirjainmäärien mahduttamisen riville, vaikka mielekäs fonttikoko vaihtelee lukijasta riippuen. Tästä johtuen parasta rivin pituutta on mahdotonta määritellä, mutta nyrkkisääntönä voidaan pitää sitä, ettei rivin pituus ylitä 70-80 merkkiä. Tekstille tulisi myös määritellä reunukset vasemmalle ja oikealle.

1.3 Tekstin tasaus molempiin reunoihin

Tekstin tasaaminen molempiin reunoihin vaikeuttaa lukemista käyttäjille, joilla on lukemisvaikeuksia. Epäsuhtainen sanojen väli kumpaankin reunaan tasatussa tekstissä saattaa aiheuttaa ns. rivers of white -ongelman (ts. tekstikappaleiden sisälle näyttää muodostuvan valkoisia uomia), jolloin lukeminen vaikeutuu ja joissain tapauksissa jopa estää sen. Yksinkertaisin ratkaisu ongelmaan on välttää tasausta molempiin reunoihin.

1.4 Käänteinen pyramidimalli

Yksinkertainen keino tehdä sisällöstä saavutettavampaa on käyttää käänteistä pyramidimallia. Aloita asian ja tulosten yhteenvedolla tai lyhyellä esittelyllä ja tarjoa sen jälkeen aihetta tukevaa informaatiota ja taustatietoja. Tällöin lukija voi helposti, koko sivua läpikäymättä, päättää haluaako tutustua kirjoitukseen tarkemmin.

2. Sisällön näyttäminen ja piilottaminen

Joillekin käyttäjille, etenkin kognitiivisista häiriöistä ja oppimisvaikeuksista kärsiville, suuri määrä tekstiä saattaa toimia esteenä sisällön saavuttamiselle. Tämän potentiaalisen ongelman vaikutusta voidaan vähentää antamalla käyttäjälle mahdollisuus vaikuttaa sivulla olevan informaation määrään. On olemassa monia keinoja antaa käyttäjälle mahdollisuus valita joko yksityiskohtainen tai yksinkertainen versio sisällöstä.

2.1 Pitkä ja lyhyt sisältö

Tämä metodi antaa käyttäjälle mahdollisuuden valita sivustolta joko lyhyt tai pitkä versio sisällöstä. Käyttäjä, joka valitsee lyhyen version voi selailla koko sivustoa käyttäen vain lyhytversioita sivuista. Tarvittaessa käyttäjä voi valita vaihtoehtoisen pidemmän version.

Tätä tapaa käytettiin Guardianship Tribunal -sivustolla. Sivuston käyttäjätestaukseen otti osaa laaja joukko käyttäjiä, joista osa kärsi kognitiivisista ja oppimisvaikeuksista. Useimmat pitivät mahdollisuutta valita lyhyt tai pitkä versio sisällöstä hyödylliseksi. Esimerkiksi henkilö, joka kärsi lukihäiriöistä, pystyi valitsemaan helpommin luettavan ja ymmärrettävän lyhytversion. Sosiaalityöntekijät ja lääkärit käyttivät myös lyhytversiota oletusarvoisesti, koska sen avulla he pystyivät hakemaan nopeasti etsimänsä ja tarvitsemansa tiedon.

2.2 Listamerkkien laajentaminen

Edellä mainitun kaltaisessa menetelmässä käytetään yksinkertaisia lauseita tai otsikoita sisällön yleiskuvan luomiseen. Lauseista muodostetaan lista, jonka kohdat toimivat avaimina lisätietoon. Kun käyttäjää valitsee yhden kohdan listalta, siihen liittyvä laajempi tieto esitetään ko. kohdan alla.

2.3 Näytä-piilota-listamerkit

Tässäkin menetelmässä muodostetaan yksinkertaisten lauseiden tai otsikoiden lista. Laajennettua sisältöä ei kuitenkaan näytetä heti jokaisen listamerkin alla, vaan koko listan alla. Tämä vaihtoehto on parempi silloin, kun käsitellään pidempiä tekstikappaleita.

2.4 Kalvosarjojen käyttö

Informaation tarjoaminen webissä käyttäjille, jotka kärsivät vakavammista kognitiivisista häiriöistä, vaatii erilaisen lähestymistavan. Eräs keino tarjota tietoa on esittää se heille kalvosarjana, jossa jokaisessa kalvossa käsitellään yksi asia tai kiinnostuksen kohde. Tämä mahdollistaa tiedon tarjoamisen selkeinä, helposti saavutettavina paloina, jotka käyttäjä voi käydä läpi itse valitsemaansa tahtiin.

3. Luettavuuden ja klikattavuuden parantaminen CSS:n avulla

Eräs CSS:n (Cascading Style Sheets) suurimmista eduista on se, että sen avulla voidaan muokata sisällön esitysasua puuttumatta itse rakenteeseen. Tässä muutama CSS:n avulla toteutettu keino parantaa sisällön saavutettavuutta:

3.1 Suurennettu rivin korkeus

Jotkut käyttäjät kokevat suurennetun rivin korkeuden parantavan kappaleen luettavuutta.

3.2 Kappaleen loppuun enemmän marginaalia

Yleensä jokaisen kappaleen perässä on tyhjä rivi. Sen suurentaminen puoleentoista tai kahteen riviin saattaa parantaa kappaleen luettavuutta.

3.3 Hover-efekti linkeissä

Joillain henkilöillä saattaa olla vaikeuksia erottaa linkkejä tavallisesta tekstistä. Linkeille voidaan asettaa hover-toiminto, joka muuttaa linkkitekstin väriä kun hiiri viedään sen päälle.

3.4 Linkkien alleviivaus border-bottom-ominaisuudella

Normaali linkkitekstin alleviivaus saattaa joskus vaikeuttaa tekstin lukemista, etenkin kun kyseessä ovat sellaiset kirjaimet, joissa on alapidennys (esim. j, p, q, g). Alleviivauksen etäisyyttä tekstiin voidaan kontrolloida korvaamalla normaali alleviivaus border-bottom-ominaisuudella.

3.5 Suurennettu aktiivinen alue linkeissä

Joillain henkilöillä, erityisesti niillä, joilla on motorisia rajoitteita, saattaa olla vaikeuksia linkkien klikkaamisessa. CSS:n avulla aktiivista aluetta voidaan suurentaa.

3.6 Hover-ominaisuuden käyttö kappaleissa, lista-elementeissä ja taulukon soluissa

Joillain lukuvaikeuksista kärsivillä henkilöillä on vaikeuksia hahmottaa missä kohdassa sivua he ovat. Hover-ominaisuuden käyttö kappaleissa, lista-elementeissä ja taulukon soluissa antaa käyttäjälle mahdollisuuden käyttää hiirtä paikan merkitsemiseen.

Valitettavasti Internet Explorer ei tue kyseistä hover-ominaisuutta kappaleissa, lista-elementeissä tai taulukkoriveissä. Mikäli tätä menetelmää halutaan kuitenkin käyttää, sitä voidaan emuloida Internet Explorerissa JavaScriptin avulla (käyttämällä Dean Edwardsin IE7:aa [en]).

3.7 Alleviivatut kappaleet

Eräs menetelmä lukemisvaikeuksien helpottamiseksi on aktiivisten kappaleiden tekstin alleviivaaminen. Ideana on tarjota eräänlainen virtuaalinen viivain, joka näkyy jokaisen tekstirivin alla ja helpottaa siten käyttäjän katseen kohdentamista kulloinkin kyseessä olevalle riville.

Eräs tämän tekniikan mahdollisista ongelmista on, että jotkut käyttäjät saattavat sekoittaa alleviivatun kappaleen ja linkit keskenään. Käyttämällä CSS:ia voi tarjota erilaisia alleviivaustyylejä, kuten esimerkiksi punaista pisteviivaa, jolloin tämänkaltaisen sekoittamisen riski vähenee.

3.8 Käänteiset värit

Joidenkin henkilöiden on helpompi lukea tekstiä, kun värit vaihdetaan käänteisiksi niin, että teksti on vaaleaa tummalla pohjalla.

3.9 Taustavärin kirkkaus

Joillekin käyttäjille ongelmia aiheuttaa liian kirkas taustaväri, joka vaikeuttaa lukemista. Tämä voidaan korjata käyttämällä luonnonvalkoista tai vaalean harmaata taustaväriä, joka vähentää kirkkautta.

4. Sisällön ja esitysasun kontrollointi

Monia artikkelissa käsiteltyjä ideoita voidaan käyttää pelkästään tarjoamalla käyttäjälle mahdollisuus valita sisällöstä sopivin esitystapa.

Kun CSS yhdistetään joko JavaScriptiin tai serveripäässä tapahtuvaan skriptaukseen, voi suunnittelija sisällyttää joitain ehdotettuja parannuksia (esimerkiksi linkkien alleviivaus ja laajennettu linkkialue) oletusarvoiseen esitystapaan ja tarjota käyttäjälle mahdollisuutta vaikuttaa myös muihin elementteihin:

  • Sisältö: pitkä tai lyhyt versio.
  • Fontin koko: mahdollisuus suurentaa tai pienentää tekstin kokoa.
  • Luettavuus: vaikuttaa kappaleiden väliseen tilaan ja/tai tarjoaa hover-ominaisuuden kappaleille.
  • Värit: erilaiset väriyhdistelmät, mukaan lukien käänteiset värit ja taustavärin kirkkaus.
  • Rivin pituus: kapea tai leveä asettelu.
  • Rivin korkeus: vaihtoehtoja rivin korkeuden määrittelyyn niin leipätekstille kuin linkeillekin.

Päätelmät

Artikkelin esimerkkejä ei ole tarkoitettu lopullisiksi vastauksiksi ongelmiin, joita mainituista ongelmista kärsivät saattavat verkossa kohdata. Esimerkit ovatkin lähinnä ehdotuksia, joita web-kehittäjä, joka on kiinnostunut saattamaan sisältöä mahdollisimman laajan yleisön saavutettavaksi, voi kokeilla. Joitain tekniikoista on testattu käytännössä, mutta toiset ovat vain yksinkertaisia ideoita, jotka perustuvat teoriaan ja aavistukseen.

Lisäluettavaa

Muut käännösversiot

Ruotsi
Ruotsinkielisestä käännöksestä vastaa Johan Sundsrom.
Italia
Italiankielisestä versiosta vastaa Livio Mondini.