Saavutettava.fi

A List Apart: To Hell with WCAG 2 (Web Content Accessibility Guidelines 2.0)

Viiden vuoden kehitystyö uuden verkkosisällön saavutettavuusohjeen (WCAG 2) osalta alkaa olla loppussuoralla. Hieno asia, kaikki ovat iloisia ja suosituksenkin pitäisi olla näin pitkän kehitystyön jälkeen vähintäänkin erinomainen.

Nykymuotoisen suositusluonnoksen kovaäänisin vastustaja, kanadalainen tietokirjailija, toimittaja ja esteettömyys-asiantuntija Joe Clark ampuu tuoreessa A List Apartin numerossa uuden suosituksen alas. Artikkelissa kyseenalaistetaan niin itse suositusluonnos kuin työryhmän toimintatavatkin.

Artikkelissa esiin nostettuja epäkohtia ovat mm.:

• suosituksen (ja oheisdokumentaation) massiivinen koko
• englanninkielisyys
• suositusluonnoksen lyhyt kommentointiaika
• määritelmät
• testattavuus
• vaikeaselkoisuus / tulkinnanvaraisuus

Joe Clarkin mukaan uusi suositus ei välttämättä ole edes parannus jo olemassa olevaan suositukseen (WCAG 1.0) verrattuna. Hän kehottaakin lukijoita kommentoimaan luonnosta ja näin vaikuttamaan sen lopulliseen muotoon. Nykymuotoisen suosituksen seuraaminen onkin artikkelin esille nostamien ongelmien takia hankalaa – käytännössä siis vain aniharva, jos kukaan pystyisi täyttämään kaikkia siinä esitettyjä saavutettavuusvaatimuksia. Voi vain toivoa, että työryhmä ei anna henkilökohtaisten erimielisyyksien vaikuttaa asiaan, ja että ainakin artikkelissa mainittuihin epäkohtiin puututtaisiin ennen kuin luonnos saa suositus-statuksen.

Artikkelin lopussa mainitaan myös WCAG Samurai -sivusto, jolla tullaan ehdottamaan korjauksia ja laajennuksia sekä olemassa olevaan että tulevaan ohjeistukseen.

Tulevan suosituksen suomenkielistä versiota ei kannattane odotella pitkään aikaan, koska sen julkaiseminen ilman käännettyä oheisdokumentaatiota ei ole järkevää.

Lisäys: WCAG 2.0-suositusluonnoksen kommentointiaikaa on jatkettu kolmella viikolla.

Jaa artikkeli

Kirjoittaja: Timo Laak

Tietokone-lehden blogissa kirjoitetaan WAP:in kuolemasta, sillä Nokian uusi S60-selain ei enää oletusselaimena avaa WAP-palveluita. Suuntauksena on siis yksi ja sama internet kaikille käyttäjille, myös mobiilikäyttäjille.

Erilaisten mobiililaitteiden yleistyminen tuottaa haasteita internetin sisällöntuottajille ja suunnittelijoille. Saavutettavien palveluiden rakentaminen kun vaatii tietynlaista osaamista, eikä se tietylle selaimelle ja resoluutiolle optimoitu sivusto välttämättä toimikaan mobiiliselaimella aivan samalla tavalla.

World Wide Web Consortiumin eli W3C:n määrittelemät mediatyypit sisältävät handheld-kategorian, joka kattaa osan mobiililaitteista, mutta esimerkiksi Sony Playstation Portable tulkitaan screen-laitteeksi, kuten mikä tahansa “tavallinen” tietokone. Sen maksimiresoluutio on vain 480×272 pikseliä. Monia sivustoja ei ole suunniteltu resoluution, selainikkunan tai fonttikoon mukaan skaalautuviksi, ja noin 750 pikselin kiinteä leveys on hyvin yleinen. Tällainen sivu ei kuitenkaan näy em. mobiililaitteen selaimella oikein, vaan osa sisällöstä jää ruudun laidan ulkopuolelle.

Myös tärkeät pikalinkit puuttuvat usein kokonaan, jolloin käyttäjän navigointi vaikeutuu, kun pienellä ruudulla täytyy selata joskus jopa useita sivuja tekstiä, jotta pääsisi edes päänavigaatioon, saati sitten muuhun sivun sisältöön käsiksi.

Kun ihmiset liikkuvat paljon ja haluavat hoitaa asioitaan myös tien päällä ja samanaikaisesti tekniikka kehittyy, voidaan ennustaa mobiililaitteiden osuuden koko ajan kasvavan. Tämä asettaa internet-palveluiden suunnittelulle lukuisia uusia haasteita, sillä yhä suurempi asiakas- ja käyttäjäjoukko ei enää kuulukaan kategoriaan “resoluutio 1024×768 ja IE 5.0+”.

Mobiilisti saavutettava

Saavutettavien mobiilisivustojen toteuttamisessa on tärkeintä ymmärtää laitteiden ominaisuudet ja rajoitteet, kuten pienet näytöt, alhaisempi käytettävissä olevien värien määrä, hidas verkkoyhteys ja erilainen näppäimistö sekä hiiren puuttuminen.

Tarjoamalla oma CSS-tiedosto handheld-laitteille voidaan välttää monia ongelmia. Samalla on mahdollista ottaa tehokkaammin huomioon mobiililaitteiden rajoittavat ominaisuudet heikentämättä muilla laitteilla sivuja selailevien kokemuksia. Riippumattomuus näyttöresoluutiosta ja suurikokoisten kuvien välttäminen ovat tärkeimpiä huomioitavia asioita, mutta myös pikalinkit sivun sisällön eri osiin ja sisällön esittäminen rakenteellisesti järkevässä muodossa, lyhyesti ja ytimekkäästi, ovat tärkeitä avainkohtia saavutettavuuden ja hyvän käyttökokemuksen turvaamisessa. Yksinkertainen on kaunista myös mobiililaitteen ruudulla.

Suunnittelijan näkökulmasta yksi suurimmista ongelmista on kattavan testaamisen vaikeus. Mobiililaitteita kun on pilvin pimein ja jokainen on erilainen, joten on mahdotonta testata työn alla olevaa sivustoa niillä kaikilla. Toimivuus tekstipohjaisella selaimella on jo suuntaa antavaa, mutta myös emulaattoreita ja erilaisia työkaluja on saatavilla mm. Nokian laitteille ja useimmista matkapuhelimista löytyvälle Openwave-selaimelle. Myös Adobe tarjoaa kehitystyökaluja. Mobiilikehittäjän “Raamattuna” toimii luonnollisesti W3C:n ohjeistus mobiililaitteille.

Kaiken tämän ohella mobiilin saavutettavuuden saralla riittää paljon tekemistä. Sisältö ei vielä riitä, vaan myös laitteiden ominaisuuksiin täytyy kiinnittää huomiota. Kuka suunnittelisi sen universaalin, erittäin käytettävän ja saavutettavan mobiililaitteen?

Jaa artikkeli

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.

Jaa artikkeli

Kirjoittaja: Timo Laak

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).

Jaa artikkeli

Kirjoittaja Pekka Nikrus on AD Satama Interactivessa.

Art Director, AD, on vastuussa siitä, että projektin lopputulos näyttää hyvältä ja tukee brändiä. Hänen vastuualueitaan ovat värit, kuvitus, merkit ja muodot, asettelu ja typografia. Hän on taiteilija, joka suunnittelee linjat ja visioi “visut” eli kaiken sen, joka tekee lopputuloksesta ulkonäöllisesti uskottavan ja haluttavan.

Samalla tavalla kuin hyvällä printtimedian AD:lla on ymmärrys, miten eri paperit toimivat, miten värit reagoivat, mitä hauskaa rasterilla voi tehdä ja miten painokone toimii, olisi nettikollegan ymmärrettävä vähintään yhtä hyvin oman mediansa erityisominaisuudet.

Muste kuivuu ja paperin koko pysyy, joten printti-AD:n työ saavuttaa joskus lopullisen muotonsa. Netti-AD:n riesana taas on useita muuttujia, joita on mahdotonta kontrolloida. Näytön ja selainikkunan koko sekä käytetty tekniikka vaihtelevat ja värejä on paljon, mutta ne eivät ehkä ole sitä, mitä niiden on tarkoitettu olevan. Viestin vastaanottajalla, käyttäjällä, ei ehkä ole jotain tiettyä fonttia tai selainlaajennusta. Lista eroista on pitkä.

Yhdestä on moneksi

Ehkä tärkein ero kollegoiden välillä on kohderyhmä – he, jotka vastaanottavat viestin. Kaikella viestinnällä on vastaanottaja, mutta verkkopalveluiden vastaanottajat ovat monimuotoisempia. Siinä missä printtipuolella erityisryhmiä, esimerkiksi näkörajoitteisia, yleensä lähestytään omilla versioilla ja jopa eri medioilla (esim. äänikirjat), rakennetaan nettipalveluita sopiviksi mahdollisimman monelle käyttäjälle.

Tämä on järkevää, koska se on mahdollista. Järkevää myös siksi, että se on ylläpidon kannalta helpompaa, ja siksi, että sitä on helpompi markkinoida.

Kohderyhmä ei muutu, vaikka vastaanottaja käyttäisi palvelua läppärillä, kännykällä tai puhesyntetisaattorin avulla. Miksi siis samalle kohderyhmälle pitäisi tehdä useampi eri palvelu? Siihen ei ole syytä. Tätä on saavutettavuus. Tämä on nykyaikaa.

Look & feel: miltä se tuntuu

Tuntuman säilyttäminen mediasta toiseen on osa netti-AD:n työtä. Siinä missä palvelun pitää tukea brändiä kannettavalla tietokoneella, pitää sen tehdä sitä myös hyvin pienellä näytöllä. Tuntuman pitää olla sama myös silloin, jos viestin vastaanottaja ei näe kuvia tai käyttää omaa tyylitiedostoaan. Jos palveluiden tuntuma ja yleisilme on sama, on työ tehty oikein. Tuntuma ja brändin tukeminen ei riipu kuitenkaan pelkästään ulkonäöstä. Käytettävyys on tärkeää. Toimiiko palvelu niin kuin käyttäjä haluaa?

Vaikka netti-AD:t ovat suuria taiteilijoita ja visionäärejä, jotka luovat “kuuleja visuja ja fänsiä grafiikkaa”, olisi kuitenkin hyvä, että hekin, hyvien printtikollegoidensa tapaan, olisivat kavereita painokonehoitajan kanssa. Ei niinkään siksi, että AD:n tarvitsisi oppia käyttämään painokonetta, vaan siksi, että painokoneen hallitseva henkilö osaa paljon mediaan olennaisena osana kuuluvia asioita, jotka AD:nkin on hyvä tietää. Painokoneenhoitajia tässä mediassa ovat tietenkin koodarit. He toteuttavat käyttöliittymän, jonka ulkonäön AD on suunnitellut. Koodari on AD:n kaveri.

Näyttää hyvältä

Vaikka saavutettava sivusto ei tarkoita vuoden 1997 insinöörisivustoa, jättää moni AD asian toisten huoleksi. Eihän printti-AD:n tarvitse miettiä asiaa. Miksi siis meidän nettipuolella toimivien pitäisi? No siksi, että se on olennainen osa sitä mediaa, joka meidän on osattava. Meidän ei tarvitse miettiä kohdelakkaa, nuuttauksia ja preeglauksiakaan. Sen sijaan on hyvä miettiä sisältöä ja sisällön tärkeyttä. Sitä että tärkeät asiat erottuvat.

Ulkonäön tarkoitus ei ole voittaa palkintoja, vaan sen tarkoitus on tuoda sisältö selkeästi esiin. Hyvässä palvelussa ulkonäkö tukee sisältöä. Hyvin rakennetussa palvelussa ulkonäkö on eriytetty sisällöstä kokonaan. Tämä vaatii osaamista. Se on sitä median hallitsemista ja sen ymmärtämistä.

Suunnittele palvelun perusteet kaverisi, koodarin, kanssa. Näin pääsette molemmat yhteisymmärrykseen siitä, mikä on tavoitteesi. Jos lähdet liikkeelle puhtaasti visuaalisesta ideasta ilman, että ajattelet palvelun rakennetta, kannattaa vilauttaa tuotoksia kaverillesi heti, kun olet saanut valmiiksi jotain näytettävää.

Desiderata: kuinka se tehdään?

Jokainen sivusto on yksilö ja siksi mitään vedenpitäviä ohjeita siihen, miten AD:n pitäisi suunnitella saavutettava ulkoasu, ei ole. Olen kuitenkin tähän kerännyt joitain hyviä neuvoja ja oppeja vuosien varrelta.

Ymmärrä mitä olet tekemässä niin sivuston, asiakkaan kuin loppukäyttäjänkin kannalta. Ymmärrä myös mediasi. Mitä tyylitiedostot ja semanttinen koodaus voivat tarjota sinulle? Opi erottamaan sisältö ulkonäöstä.

“Kuuli” ulkonäkö ei ole väärin, se vain ei ole tärkein asia. Sinun tehtäväsi on tehdä käytettävä ja saavutettava palvelu, ei voittaa kilpailuja. Kilpailuiden voittaminen on toki hyväksi sinulle ja yrityksellesi, mutta tyytyväisten käyttäjien merkitystä asiakkaillesi ja heidän asiakkailleen ei kannata unohtaa.

Lyö mahdollisimman ajoissa lukkoon käytettävä perusfonttikoko ja tee siitä tarpeeksi iso ja luettava. Muista myös, että käyttäjät voivat muuttaa fonttikokoa kuten haluavat. Kestääkö sinun leiskasi sen?

Värejä valitessa pyri vähintään 70 % valöörieroon tekstin ja taustan välillä, etenkin jos teksti tai tausta ei kumpikaan ole valkoinen tai musta. Muista myös, että värillä on väliä. Ei niinkään brändiväreillä, mutta niillä väreillä, joilla sisältö esitetään. Pidä mielessä värisokeat ja ne, joiden monitorit eivät ole yhtä hyviä kuin sinun.

Mitä skaalautuvammaksi palvelu suunnitellaan, sitä aikaisemmassa vaiheessa on pääasiallinen visusuunnittelu tehtävä koodarin kanssa yhteistyönä. Näin varmistetaan myös se, että tarpeen vaatiessa taitto myös hajoaa tyylikkäästi.

Pyri siihen, että mahdollisimman paljon käyttöliittymän grafiikasta on tyylitiedostossa, ja että mahdollisuuksien mukaan tyylitiedosto luo näkyvät elementit. Ymmärrä, mitä se tarkoittaa, ja käytä sitä hyväksesi.

Tarkista palvelun ulkonäkö ilman tyylitiedostoa. Näin varmistut, että sisältö on selkeästi jäsennelty ja olennainen välittyy.

Älä suunnittele itsellesi. Testauta leiskasi henkilöillä, jotka eivät tiedä, mitä olet tekemässä. Sinä olet vain tekijä, et käyttäjä.

Kova maailma

Aina se ei ole niin helppoa. Vaikka haluaisikin toteuttaa palveluita, jotka ovat saavutettavia ja käytettäviä ja joissa pääasiana on sisältö, on todellisuus karu. Suurten ohjelmistotalojen valmiit pakettiratkaisut tekevät sotkuisella koodillaan saavutettavien palveluiden rakentamisen usein mahdottomaksi.

Tällöin ei voi muuta kuin langeta polvilleen suuren teknologian eteen ja antaa periksi. Näkökulmaa työhön se ei muuta, mutta lähestymistapaa kyllä. Lopputuloksen on kuitenkin oltava mahdollisimman selkeä. Parhaansa pitää tehdä haasteista riippumatta.

Elämyksiä – mutta millä hinnalla?

Onnistuneessa verkkopalvelussa pitää markkinoinnin halujen ja käyttäjien tarpeiden lyödä kättä. Valitettavan usein asiakkaan markkinointiosasto on se, joka loppupeleissä vaikuttaa siihen millaisia verkkopalvelun käyttöliittymä ja rakenne ovat. Vaikka kuinka halutaan olla käyttäjälähtöisiä, rakenne määräytyy firman organisaatiohierarkian mukaan (joka ei aina ole ihan väärin).

Halutaan “elämyksellisyyttä”, jotain mikä nähdään äänenä, animaationa – järisyttävän upeana kokemuksena, joka saa ihmiset heti rakastumaan sivustoon ja palaamaan aina vain uudestaan ja uudestaan.

AD:n kannattaakin kysyä itseltään onko asia todella näin. Haluaako palvelun kohderyhmä sirkushuveja vai riittääkö hyvä ja tuore leipä. Haluavatko käyttäjät saada elämyksiä esimerkiksi pankkipalveluista? Flashia, vilinää ja vilskettä! Olisiko sirkuspelle pankissa elämyksellisyyttä? Jonglöörit ja tulennielijät oven eteen! Meidän pankki on elämyspankki! Tuo meidän pelleille rahasi!

Vai onko käyttäjälle paras elämys yksinkertaisesti helppokäyttöinen ja ongelmaton palvelu. Hyvä palvelu muistetaan. Se on parasta mainosta. Onnistuneena esimerkkinä voisi pitää Amazon.com-verkkokauppaa. Sen karu, mutta nimenomaan sisältöä tukeva ulkonäkö toimii hienosti niin käyttäjille kuin kaupan markkinoinnillekin.

Minä, joka tietenkin edustan käyttäjäkunnasta vain yhtä henkilöä, en tarvitse haku-, pankki- tai apteekkipalveluihin muuta kuin että pystyn tekemään siellä sen, mitä sinne tulen tekemään. En katso olevani uniikki tämän suhteen. Mitä enemmän sivulla on elämyksellisyyttä, sen heikommin se tukee saavutettavuuden periaatetta. Sisältö on tärkein ja siihen on keskityttävä. Sen kertovat käytettävyystestitkin.

AD:n työssä tämä tarkoittaa sitä, että suunnitellaan ulkonäkö sisällön ehdoin. Tehdään kokonaisuudesta puhutteleva ja selkeä, mutta erotetaan mainossisältö siitä, mitä käyttäjät tulevat etsimään. Selitetään asia maksavalle osapuolelle järkevästi ja rauhallisesti. Jotta viesti voisi saavuttaa vastaanottajan, on ymmärrettävä, mitä kieltä pitää puhua. Markkinoinnille saavutettavuus myydään esimerkiksi mahdollisuutena tavoittaa suurempi ryhmä kuluttajia, säästönä tiedonsiirtokustannuksissa tai parempana hakukonenäkyvyytenä.

End of slideshow, click to exit

Pyyhkiessäni kuolat suupielistä ja rinnuksilta kaiken tämän saarnaamisen jälkeen huomaan, etten ole keskittynyt vain saavutettavuuteen, vaan olen ottanut mukaan muutakin. Näin tässä aina käy, mutta asiat eivät mielestäni ole niin helposti erotettavissa toisistaan.

Tuli tarvitsee palaakseen kolme elementtiä: palamiskelpoista ainetta, happea ja lämpöä. Verkkopalvelu ei loista, jos jokin elementti puuttuu. Saavutettavuudesta ei ole hyötyä, jos sivusto ei ole käytettävä. Hyvästä sisällöstä ei ole iloa, jos käytettävyys on heikolla tasolla, ja niin edelleen. Ymmärrätte varmaan.

Entä miksi sekoittaa AD tähän soppaan? AD:llä on usein hyvä kokonaiskuva palvelun ulkonäöstä – tai ainakin pitäisi olla. Koska ulkonäkö tukee sisältöä, pitää AD:lla olla myös ymmärrys sisällöstä – mistäs sitä muuten tietää mitä pitää tehdä? Koska ulkonäön on myös tuettava käytettävyyttä ja saavutettavuutta, on hyvä, että netti-AD:lla on myös taju siitä, mitä on ulkonäön takana.

Kaiken muun ohella, tietenkin.

Pieni AD-suomi -sanakirja

• Kohdelakka = kiiltävä lakkapinta, joka painetaan tiettyyn osaan painopintaa.
• Nuuttaus (taiveura) = paperiin painettu ura, joka helpottaa taittamista.
• Preeglaus = korkopainanta, jossa lopputulos on joko kohokuvio tai syvennys.
• Rasteri = tapa simuloida sävyjä erikokoisin tai eri tiheyksisin pistein.
• Typografia = pinnan suunnittelu: fontit, värit, tasapaino, kokonaisuus, yksityiskohdat.
• Valööri = värin vaaleus-/tummuusaste.

Jaa artikkeli

Kirjoittaja Mikko Kekki aikoo äänestää ennakkoon.

Presidenttiehdokkaiden kampanjasivustoja tutkivan artikkelisarjan viimeisessä osassa tarkastetaan Matti Vanhasen, Arto Lahden ja Tarja Halosen presidenttikampanjaa ajavat sivustot. Pinnallista pohtimista jatketaan samoilla perusteilla kuin sarjan ensimmäisessä ja toisessa osassa, jotka kannattanee kahlata läpi ennen tämän jutun lukemista.

Näissä artikkeleissa koetetaan kiinnittää huomiota yleisiin saavutettavuusongelmiin korkeankin profiilin sivustoissa. Sellaisiksi voitaneen maan korkeimman viran hakijoiden sivut laskea. Näissä jutuissa on tarkasteltu ehdokkaiden sivustoja teknisestä näkökulmasta ja yritetty lyhyesti selvittää, mitä vaikutuksia teknisillä puutteilla on sivujen saavutettavuuteen. Sivujen varsinaiseen sisältöön ei olla puututtu. Se jätetään lukijoiden tehtäväksi.

Yleisesti ottaen voisi kuitenkin todeta, että presidenttitaisto käydään muualla kuin internetissä. Yhdenkään ehdokkaan sivuihin ei voi sanoa panostetun niin paljoa kuin olisi voinut odottaa, ainakaan saavutettavuusmielessä.

Tämän artikkelisarjan tarkoitus on ollut herättää ajatuksia webin saavutettavuudesta, kannustaa lukijoita kirjoittamaan parempia ja syvällisempiä artikkeleita aiheesta ja ennen kaikkea tekemään saavutettavia web-sivuja. Parannusehdotukset ja lisävalaisut voi kirjoittaa tämän artikkelin kommentteihin.

Matti Vanhanen, 7, Suomen Keskusta

Kampanjasivusto: www.mattivanhanen.net

Matti Vanhasen kampanjasivuston otsikkokuva on liian iso. Kuvan koko on noin 280 kilotavua. Tiedostomuotoa vaihtamalla ja kohtuullisesti pakkaamalla kuvan saisi laihdutettua kymmenesosaan. Tiedostokooltaan liian suuret kuvat hidastavat sivun latautumista. Hitailla yhteyksillä, kuten puhelinmodeemien välityksellä ja mobiililaitteilla, selaavat kyllästyvät nopeasti kuvien lataamiseen. Lisäys: kuva on korjattu.

Jos taas lataa sivun ilman kuvia, se avautuu nopeasti, mutta sivun kuvissa olevaa informaatiota ei näy. Kuville ei ole määritetty vaihtoehtoisia tekstejä alt-attribuuttien avulla.

Myös taustakuvia on käytetty ongelmallisesti. Sivunavigoinnin taustakuva on sininen mutta taustaväri vaalea harmaa. Ilman kuvia katsottaessa ei teksteistä saa selvää, koska tekstiväri on valkoinen. Samalla linkkien hover-väri, joka näkyy, kun kursori asetetaan linkin päälle, on sininen. Toisin sanoen, jos kuvat ladataan, ei linkkitekstejä näy, kun kursorin vie niiden päälle. Ilmeisesti tätä ongelmaa paikkaamaan on navigoinnissa käytetty Javascriptillä toimivaa hover-efektiä. Se ei toimi, jos Javascript ei ole käytössä.

Tästä ei sinänsä ole suurtakaan haittaa, koska molemmissa navigoinneissa on tekstejä, jotka eivät ole linkkejä ollenkaan. Tekstien olisi tarkoitus avata Javascriptillä linkkivalikkoja. Ilman Javasriptiä näkyy kuitenkin vain tekstejä, jotka ovat ikään kuin linkkejä, mutta eivät sitten olekaan, ja alalinkkejä ei näy senkään vertaa.

Vaikka Javascript ja kuvat olisivatkin käytössä, ei kumpikaan navigointi toimi oikein Safari-selaimella. Javascriptissäkin on siis tehty kehnoja valintoja. Sivulla on ilmeisesti käytetty a-elementtiä väärin, joten sivut oikuttelevat Safarilla muutenkin.

Tämänkin ehdokkaan asiaa ajetaan virheellisellä XHTML 1.0 Transitional â??koodilla. Validaattori löytää tasan 100 virhettä. Kun sivun lataa uudestaan ja sessiolisukkeet häviävät sivun linkeistä, armahtaa validaattori ja ilmoittaa vain 52 virheestä. CSS:sta ei löydy varsinaisia virheitä, mutta useita kymmeniä varoituksia annetaan.

Sivut on tehty CSS-taittona, mutta XHTML:n perusteet on unohdettu. Jokainen sivun osanen on omassa lohkossaan ja lohkot on muotuiltu CSS:lla. Sivuilla ei ole siis minkäänlaista semanttista rakennetta. Selkeä rakenne helpottaisi sisällön saavutettavuutta esimerkiksi teksti- tai puheselaimia käyttäville vierailijoille.

Vanhasen sivuilla tarjotaan vierailijoille videoita, joiden sisällöstä ei ole tarjottu tekstiselitystä eikä videoista ole tarjolla tekstitettyjä versioita. Tämä rajoittaa viestin perille menoa muun muassa näkö- ja kuulovammaisille. Teknisenä sivuhuomautuksena mainittakoon, että videot pitää ennen katsomista ladata omalle koneelle. Tarjotuilla tiedostomuodoilla olisi myös stream-versioiden tarjoaminen mahdollista.

Arto Lahti, 8, Sitoutumaton

Kampanjasivusto: www.artolahti.com

Arto Lahden kampanja luottaa perinteiseen rakenteettomaan taulukkotaittoon. Semanttisesti merkityksettömiä tilanvaraaja- eli spacer-kuvia käytetään runsaasti. Ne ovat ongelmallisia muun muassa teksti- ja puheselaimia käyttävillä. Niissä ei ole mitään sisältöä ja taiton pystyisi tekemään ilman niitä. Tilanvaraajakuvat ovat siis täysin turhia painolasteja. Tämä näkyy hyvin, kun katsoo sivua Lynx-selaimella.

HTML-validaattori löytää peräti 116 virhettä, joista suuri osa on tilanvaraajakuvista puuttuvia alt-attribuutteja. Sivujen lyhyt CSS sisältää yhden virheen ja validaattori antaa nelisenkymmentä varoitusta pääasiassa taustavärimäärityksistä.

Lahden kampanja käyttää tunnusvärinään oranssia, jolla on merkitty muun muassa otsikoita. Linkkien hover-väri on punainen, joka on kovin lähellä käytettyä oranssia. Jotkut käyttäjät saattavat hämmentyä siitä, mikä on linkki ja mikä ei.

Mainitut värit on määritelty CSS:ssa. Myös HTML:ssa on määritelty linkkien värejä. Ne ovat samat kuin leipätekstin väri. Ilman tyylitiedostoa sivua katsellessa linkit erottuvat tekstistä huonosti.

Tekstistä selvän saamista hankaloittaa, että sivujen kirjasin on määritelty absoluuttisesti pieneen kymmenen pikselin kokoon. Moderneilla selaimilla fontin kasvattaminen käyttäjän omassa näkymässä on helppoa mutta esimerkiksi usealle Internet Explorerin käyttäjälle se voi olla ylivoimaista. Saavutettavuuden kannalta järkevämpää olisi määritellä fontti suhteellisilla mittayksiköillä. Näin käyttäjällä olisi enemmän mahdollisuuksia määrätä näkymästä omien erityisvaatimustensa mukaan.

Tarja Halonen, 9, Suomen Sosialidemokraattinen Puolue

Kampanjasivusto: www.tarjahalonen.fi

Tarja Halosen kampanjasivuston kuville ei ole kirjoitettu vaihtoehtoisia tekstejä. Sivujen pääotsikkoa ei näy, jos kuvat jätetään lataamatta. Ainoastaan sivun title-elementtiin kirjoitetusta ja selaimen ylälaidassa näkyvästä ilmoituksesta voi päätellä, millä sivulla ollaan.

Etusivun oikeassa laidassa on toisen tason navigointi, joka on toteutettu listana. Listattuna on linkitettyjä kuvia, joilla ei ole alt-attribuuttia. Jälleen kerran, ilman kuvia ei listalla näy mitään.

Listat on tosiaan merkitty listoiksi. Päänavigoinnissa, joka myös on lista, on yritystä rakentaa selkeä, saavutettava ja käytettävä navigointi. Listan linkeissä käytetään vaihtuvaa taustaväriä hover-efektinä, joka näkyy, kun kursori asetetaan linkin päälle. Myös aktiivinen sivu ilmaistaan taustavärin vaihdolla.

Sen sijaan otsikoita ei ole merkitty otsikoiksi vaan CSS:lla muotoilluiksi otsikoiden näköisiksi kappaleiksi. Otsikoiksi tarkoitettuihin teksteihin kohdistetut luokat (class-attribuutit) on nimetty erikoisesti: class="h2" tarkoittaa kakkostason ja class="h3" kolmostason otsikkoa. Eikö olisi ollut helpompaa kirjoittaa suoraan otsikkoelementit h2 ja h3 otsikoiden ympärille?

Etusivun uutislistassa käytetään lohkoja erottamaan otsikot tekstistä. Käyttäjät, joiden selaimessa ei ole käytössä tyylitiedostoja, eivät erota otsikkoja leipätekstistä. Sivujen HTML:lla ei siis ole järkevää semanttista rakennetta. Tämä hankaloittaa erityisesti teksti- ja puheselaimia käyttävien vierailijoiden mahdollisuutta saavuttaa sisältö.

Halosesta tarjotaan informaatiota kolmella kielellä: suomeksi, ruotsiksi ja englanniksi. Minkään kieliversion HTML:ssa ei kieltä ole määritelty. Tämä on ongelmallista esimerkiksi sellaisille puheselaimille, jotka yrittävät valita lukukielen HTML:n ilmoituksen mukaan. Jos englantia lukee suomeksi, kuulostaa se erikoiselta, mutta ei välttämättä ymmärrettävältä.

Sivuston lomakkeissa on jäänyt käyttämättä saavutettavuutta edistäviä elementtejä ja niiden attribuutteja. Huolellisesti ja saavutettaviksi tehdyt lomakkeet olisivat hyödyllisiä paitsi käyttäjälle myös ehdokkaan kampanjan kannalta tärkeä asia. Mitä helpommin käyttäjä pystyy täyttämään lomakkeen, sitä pienempi on kynnys liittyä tukijoukkoihin.

Tarja Halosen kampanjasivusto on tehty CSS-taitolla. HTML-validaattori ilmoittaa neljästä virheestä ja CSS:sta löytyy vain yksi virhe. Virheet eivät ole kynnyskysymys mutta oikeellisella koodilla kirjoitettujen sivujen toiminta on helpommin ennustettavissa kaikissa päätelaitteissa ja selaimissa.

Lue myös artikkelisarjan ensimmäinen ja toinen osa.

Jaa artikkeli

Kirjoittajat Mikko Kekki ja Yoji Hirabayashi ovat perustuslain mukaan yleisesti ja yhtäläisesti äänioikeutettuja.

Presidenttiehdokkaiden kampanjasivuja tutkivan artikkelisarjan toisessa osassa ruoditaan Timo Soinin, Heidi Hautalan ja Henrik Laxin vaalisivustoja. Tutkimusperusteet ovat edelleen samat kuin sarjan ensimmäisessä osassa, johon kannattaa tutustua ennen tämän jutun lukemista. Sarja jatkuu edelleen kolmannessa osassa.

Lisäyksenä edellisessä osassa mainittuihin kriteereihin pitää mainita pari asiaa, joita ei arvostella. Sivuja tutkailtaessa pyritään olemaan ottamatta kantaa niiden esteettisiin tai sisällöllisiin ansioihin tai puutteisiin, jotka otetaan huomioon ainoastaan, jos ne jotenkin erityisesti vaikeuttavat sivujen sisällön saavuttamista.

Tälläkään kertaa ei puututa aivan kaikkiin ongelmiin tai puutteisiin. Lukijan urakan helpottamiseksi käsiteltävistä asioista on pitänyt tehdä raakaa karsintaa. Lisähavainnot ja vastaväitteet voi jättää tämän artikkelin kommenttiosastolle.

Timo Soini, 4, Perussuomalaiset

Kampanjasivu: www.perussuomalaiset.fi/presidenttiehdokas/timosoini/

Ensimmäiseksi on mainittava asia, jolla ei suoranaisesti ole tekemistä saavutettavuuden kanssa. Timo Soinin vaalisivusto on tehty Microsoftin Frontpage 5.0 -ohjelmalla, joka on hankala työkalu asiantuntemattomissa käsissä. Ohjelmalla saattaa saada aikaiseksi periaatteessa käypäisen näköistä jälkeä, mutta jos haluaa seurata web-standardeja ja tuottaa saavutettavia sivuja, voi tehtävä olla ylivoimainen.

Soinin sivusto koostuu kehyksistä, joiden käyttöön liittyy monia ongelmia. Suurin osa niistä on pulmia, jotka ajavat sivujen kohteen, tässä tapauksessa ehdokkaan, asiaa väärään suuntaan.

Kehykset saattavat vieroittaa hakukoneita sivuilta ja estää niitä indeksoimasta sivuja oikein. Se vähentää kävijämääriä. Kehykset hankaloittavat myös kävijöiden elämää, koska kirjanmerkkien tekeminen, tulostaminen ja linkin lähettäminen sähköpostilla ystävälle vaikeutuvat. Kaikki vierailijat eivät käytä graafisia, kehyksiä tukevia selaimia, syystä tai toisesta. Heidät jätetään tässä tapauksessa kylmästi sivujen ulkopuolelle.

HTML-validaattori löytää etusivusta 16 virhettä, joka on suhteellisen vähän. Syytä tyytyväisyyteen ei kuitenkaan ole, koska validaattori tarkistaa vain kehyssivun eikä varsinaisia sisältösivuja. Navigointisivusta löytyy 16 virhettä ja ensimmäisestä varsinaisesta sisältösivusta 10. Sisältösivun sisällä on tosin vielä yksi kehys (iframe), jonka sisällä on varsinainen sisältötekstisivu. Siltäkin löytyy vielä kaksi virhettä. CSS-validaattori löytää niin monta virhettä, että jatkamme muiden asioiden tarkastelulla.

Dokumenttityyppi on määritelty joillakin sivuilla. Dokumenttityypin määritteleminen kertoo, mitä versiota HTML:sta tai XHTML:sta sivulla käytetään. Modernit selaimet käyttävät tätä tietoa valitessaan näyttävätkö sivun yhteensopivuus- vai standarditilassa. Jälkimmäisessä tapauksessa sivu aukeaa yleensä nopeammin.

Sivujen tekijän kannalta olisi tärkeätä, että sivut näytetään standarditilassa, koska näin tekijän on helpompi ennakoida, miltä sivut näyttävät eri selaimissa. Selaimet tapaavat näet tulkita virheellistä koodia eri tavoin. Oikein kirjoitettua koodia selainten pitäisi tulkita samalla tavalla. Kiusallista kyllä, näin hyvin asiat eivät ole, mutta se on eri artikkelin aihe.

Soinin sivuilla ei ole käytetty HTML:ia suositusten mukaisesti, joten sivuilla ei ole semanttista rakennetta. Jos sivulla on järkevä rakenne, on sen ulkoasun hallinta CSS:lla helpompaa. Se myös helpottaa sivujen käyttöä sellaisille vierailijoille, jotka eivät käytä CSS:ia sivuja selatessaan. Tällaisia ovat muun muassa tekstiselaimien käyttäjät.

Sivuilla käytetään kuvia ilman alt-attribuuttia eli tekstiä, joka näytetään, jos kuvia ei ladata. Kun kuvia ei ladata ja vaihtoehtoista tekstiä ei ole, näkyy kuvan paikalla vain merkki, että tähän kohtaan tulisi kuva, jos se ladattaisiin. Siksi edes sivun otsikkokuvaan pitäisi lisätä alt-attribuutti ja siihen järkevä kuvan selite. Ilman sitä ei satunnainen ilman kuvia surffaava näe heti, mille sivulle hän on mahtanut päätyä.

Jos haluaa etsiä jotain hyvää Soinin sivuista, niin sivujen kieli, suomi, on määritelty ainakin joillakin sivuilla, ei kuitenkaan kaikilla.

Heidi Hautala, 5, Vihreä liitto

Kampanjasivu: www.heidi2006.fi

Heidi Hautalan kampanjasivusto on jotakuinkin saavutettava. Sivujen sisältö on saavutettavissa ilman kuvia, Javascriptiä tai tyylitiedostoja.

Sivuilla on semanttinen rakenne. Otsikot on merkitty otsikoiksi, tekstikappaleet kappaleiksi, listat listoiksi ja niin edelleen. Sivun HTML on kevyttä ja melko tarkoituksenmukaista.

Sivuston ulkoasua hallitaan CSS:lla. Tämä on järkevää, koska näin saadaan HTML-sivun koko minimoitua, mikä nopeuttaa sivun latautumista. CSS-taitossa kokonaisen sivuston ulkoasu on helposti ja keskitetysti hallittavissa, koska muutoksia pitää (optimitilanteessa) tehdä vain yhteen CSS-tiedostoon.

HTML-validaattori toteaa etusivun virheettömäksi ja dokumenttityypiksi ilmoitetun HTML 4.01 Strictin toteutuneeksi. Myöskään CSS-validaattori ei löydä virheitä CSS:sta. Muutamia varoituksia validaattori tosin antaa värien käytöstä.

Moitteita voi antaa värivalinnoista. Linkkiväriksi on määritelty vaaleanvihreä ja hover-väriksi, joka näkyy, kun kursori siirretään linkin päälle, vielä hieman vaalempi vihreä. Linkkien erottaminen voi olla hankalaa monellekin käyttäjälle.

Myös leipätekstin erottaminen oletuskoossaan voi olla vaikeata heikkonäköisille. Peruskoko on jo pienehkö, mutta sivuilla käytetään siellä täällä vielä entisestään pienennettyä tekstikokoa, jonka kanssa tarkkanäköiselläkin voi olla vaikeuksia. Onneksi moderneissa selaimissa voi kasvattaa fonttikokoa helposti, eikä se tuota lisäongelmia esimerkiksi taiton toimivuudelle. Toisinaan sivuja kehitetään niin joustamattomiksi, että kirjasinkoon muuttaminen rikkoo näkymän.

Hautalasta tarjotaan informaatiota kolmella kielellä: suomeksi, ruotsiksi ja venäjäksi. Minkään kieliversion HTML:ssa ei kieltä ole määritelty. Tämä on ongelmallista esimerkiksi sellaisille puheselaimille, jotka yrittävät valita lukukielen HTML:n ilmoituksen mukaan. Jos suomea lukee venäjäksi, kuulostaa se erikoiselta, mutta ei välttämättä ymmärrettävältä. Venäjänkielinen sivu on sijoitettu mainostoimiston sivujen alle. Syytä tähän ei tätä kirjoitettaessa keksitty.

Heidi Hautalan puheet, kirjoitukset ja tiedotteet tarjotaan sekalaisesti joko käsittelyssä olevalta kampanjasivustolta tai Hautalan omilta sivuilta. Tämä saattaa hämmentää käyttäjiä, jotka helposti eksyvät toiselle sivustolle siirryttäessä eivätkä välttämättä löydä enää takaisin.

Erikoinen ratkaisu on Heidi Hautalan blogi, joka on Livejournal-palvelussa. Blogi on naamioitu emosivuston näköiseksi, mikä saattaa hämätä vierailijoita ja vähentää mahdollisesti uskottavuutta.

Vähiten Hautalan sivustolla on panostettu lomakkeitten muotoiluun. Käyttämättä on jäänyt saavutettavuutta edistäviä elementtejä ja niiden attribuutteja. Esimerkiksi label-elementin puute korostuu valintalaatikoissa. Jos sitä käytettäisiin tehokkaasti, olisi käyttäjällä enemmän klikkauspinta-alaa ja oikeaan laatikkoon osuminen helpottuisi.

Henrik Lax, 6, Ruotsalainen kansanpuolue

Kampanjasivusto: www.henriklax.nu

Henrik Laxin sivustolla käytetään intro-sivua, jolta käyttäjä voi valita, millä kielellä tutustuu ehdokkaaseen. Sivulla on vain yksi kuva, johon on kuvakartalla määritelty linkit kieliversioihin. Kuvalla ei ole alt-attribuuttia eli vaihtoehtoista tekstiä. Ilman kuvia selaava näkee, jos ylipäätään näkee, vain kuvan paikan ja voi vain arvailla, mitä nyt pitäisi tehdä.

Henrik Laxin sivusto tarjotaan neljällä eri kielellä. XHTML:sta sitä ei huomaa, koska koodissa kaikkien versioiden kieleksi määritellään englanti. Tämä on ongelmallista esimerkiksi sellaisille puheselaimille, jotka yrittävät valita lukukielen HTML:n ilmoituksen mukaan. Jos ruotsia lukee englanniksi, kuulostaa se erikoiselta, mutta ei välttämättä ymmärrettävältä.

Kuvilla ei ole alt-attribuutteja, joten ilman kuvia (tai vaihtoehtoisten tekstien varassa) selaavien sivuilla vierailu hankaloituu ja pahimmillaan asia jää saavuttamatta. Näin käy esimerkiksi etusivulla, jossa suuri osa tekstisisältöä on toteutettu kuvina. Tämä toimii myös tehokkaana keinona estää käyttäjää suurentamasta kirjasimen kokoa.

Sivustolla on omintakeinen tapa kertoa Laxin tulevista radioesiintymisistä ja äänestyspäivistä. Näistä asioista kertovat tekstit on nimittäin tehty kuviksi. Kuville taas ei ole kirjoitettu alt-attribuutteja ja miksi olisikaan, koska silloinhan tekstit olisi voinut kirjoittaa suoraan sivuun teksteinä eikä kuvia olisi tarvinnut tehdä. Hämmentävää.

Yhden pahimmista ongelmista sivustolla aiheuttavat useat (suomenkielisellä etusivulla neljä) käytetyt kuvakartat. Kun vaihtoehtoista tekstiä ei tarjota, joutuu tekstiselainta käyttävä arvailemaan ja kokeilemaan, mitä kuvakarttojen takaa mahtaa löytyä.

Sivujen dokumenttityypiksi ilmoitetaan XHTML 1.0 Transitional, joka ei toteudu. XHTML-validaattori ilmoittaa 26 virheestä. CSS-validaattori antaa ainoastaan parikymmentä varoitusta, mikä on hyvä saavutus.

Sivusto on toteutettu perinteisellä, monipolvisella taulukkotaitolla. Taulukkotaitolla tehtyjen sivujen tiedostokoot ovat yleensä huomattavasti suuremmat kuin CSS-taitolla toteutettujen. Mitä suurempi tiedosto, sitä hitaampi lataus. Myös taulukkojen semanttisesta merkityksestä voitaisiin keskustella. Onko HTML:n suositusten mukaista ja kieliopillisesti oikein käyttää taulukoita sivun taittamiseen?

Sivujen otsikoita ei ole merkitty otsikoiksi vaan kaikki teksti on â?? sinänsä oikein â?? sijoitettu kappale-elementteihin, joille on määritelty luokat käyttötilanteen mukaan. Otsikot on muotoiltu otsikon näköisiksi CSS:lla. Toisin sanoen, tälläkään sivustolla ei voi puhua varsinaisesta rakenteesta.

Lax-materiaalia voi tilata lomakkeella, joka on taitettu osittain taulukolla. Lomakkeen saavutettavuutta parantavia elementtejä ja niiden attribuutteja on käytetty kitsaasti ja tyhjennä-painike on isompi kuin lähetä-nappi. Painikkeista erehtyminen tärisevällä kädellä on kovin helppoa.

Erikoista mainittavaa löytyy lomakkeesta, jonka avulla voi ilmoittautua Laxin tukijoukkoihin. Lomakkeeseen voi antaa itsestään erilaisia henkilötietoja ja valintalaatikolla ilmoittaa sukupuolensa. Käyttäjä voi valita onko mies, nainen vai molemmat. XHTML-koodissa mies-vaihtoehdolle annetaan oletusarvo: value="VALITTU".

Lue myös artikkelisarjan ensimmäinen ja kolmas osa.

Jaa artikkeli

Kirjoittaja Mikko Kekki (sit.) on vasemmistokristillinen viherporvari.

Suomen presidentinvaalien ensimmäisen kierroksen äänestyspäivä on 15.1.2006. Ehdokkaat ovat saaneet ehdokasnumeronsa, joten kampanja käy jo kuumana. Tulevan kuukauden aikana voi olla hankala olla törmäämättä ehdokkaisiin tai heidän tukijoihinsa kadulla tai mediassa.

Katsastamme nyt, miten ehdokkaitten kampanjasivustot pärjäävät web-standardeissa ja saavutettavuudessa. Kantaaottamattomasti istuvan presidentin vaalilausetta lainatakseni: vaaleissa valitaan koko kansan presidenttiä, joten ehdokkaiden sivustojen pitäisi olla optimitilanteessa kenen tahansa äänestäjän saavutettavissa millä tahansa päätelaitteella.

Kahdeksan ehdokkaan sivustot tutkittiin ehdokasnumeroinnin osoittamassa järjestyksessä ja tulokset julkaistaan kolmessa osassa. Ensimmäinen juttu eli tämä lukemasi käy läpi Bjarne Kalliksen ja Sauli Niinistön sivustot. Kakkososassa tutkaillaan Timo Soinin, Heidi Hautalan ja Henrik Laxin sivuja ja kolmannessa osassa ruoditaan Matti Vanhasen, Arto Lahden ja Tarja Halosen kampanjasivustoja.

Epätieteellisessä tutkimuksessa käytettiin pikatarkistusmetodia. Se tarkoittaa, että sivujen HTML:n ja CSS:n mahdolliset virheet ja ongelmakohdat tutkittiin ja sivujen saavutettavuus arvioitiin pintapuolisesti. Jälkimmäinen tehtiin silmämääräisesti ja tutkittiin muun muassa sitä, miten sivut toimivat ilman Javascriptiä ja kuvia. Tällä tavalla yritettiin samaistua muun muassa näkövammaisten tapaan selata sivuja.

Tässä artikkelissa ei pyritä tyhjentävään saavutettavuustutkimukseen, vaan raapaistaan ainoastaan pintaa ja yritetään tuoda esiin ilmeisimpiä ongelmakohtia tai ilon aiheita luettelomaisesti sitä mukaa, kun ne on huomattu. Tutkimuksessa ei ole pyrittykään tasapuolisuuteen tai vertailuun, vaan sivuja on kahlattu yksittäistapauksina. Joistakin sivuista on enemmän sanottavaa kuin toisista, mutta nekin sanomiset on tässä kirjoituksessa yritetty selittää ja esittää esimerkkejä, miksi jokin asia on hyvä ja jokin toinen ei niin hyvä.

Saavutettavuuden monitahoisuuden vuoksi asioita voi tarkastella monella eri tapaa. Siksi tähänkin artikkeliin voi jättää kommentteja ja huomautuksia.

Bjarne Kallis, 2, Suomen Kristillisdemokraatit

Kampanjasivu: www.bjarnekallis.net

Bjarne Kalliksen sivut on tehty perinteisellä taulukkotaitolla dokumenttityypillä HTML 4 Transitional. Dokumenttityypin merkinnässä on pieni virhe, joten HTML-validaattori ei tunnista sitä. Samoin saattaa käydä joillekin selaimille, jotka asettavat näillä sivuilla itsensä yhteensopivuustilaan, joka saattaa muun muassa hidastaa sivujen latautumista.

Sivustossa käytetään niin sanottua intro-sivua, josta käyttäjä voi valita haluaako lukea ehdokkaasta suomeksi vai ruotsiksi. Kun intro-sivun avaa ilman kuvia, ei siinä näy mitään.

Sivujen kieli on unohtunut merkitä koodiin kummassakin kieliversiossa. Tämä on ongelmallista esimerkiksi sellaisille puheselaimille, jotka yrittävät valita lukukielen HTML:n ilmoituksen mukaan. Jos suomea lukee englanniksi, kuulostaa se erikoiselta.

Hyvää sivujen HTML:ssa on, että otsikoita on merkitty oikein otsikkotageilla. Alasivujen pääotsikot ilmoitettu h1:llä. Myös tekstikappaleet ovat suurimmaksi osaksi p- eli kappale-elementeissä. Jonkinlainen semanttinen rakenne alasivuilla siis on, mitä ei voi sanoa etusivusta.

Sivu, jolla on järkevä semanttinen rakenne, käyttää HTML:n elementtejä ja attribuutteja siihen, mihin ne on tarkoitettu. Otsikkoelementeillä merkitään otsikot, kappale-elementeillä tekstikappaleet, lista-elementeillä listat, taulukko-elementeillä taulukot ja niin edelleen. Tämä on tärkeää varsinkin silloin, kun selataan sivua ilman tyylitiedostoa. Näin otsikot erottuvat leipätekstistä ja listat näkyvät listoina, ei vaikkapa yhtenäisenä tekstipötkönä.

HTML-validaattori löytää suomenkielisestä etusivusta 32 virhettä, joista osa viittaa kuvista puuttuviin alt-attribuutteihin. Varsinainen etusivukin luottaa kuviin ilman alt-attribuuttia, joten ilman kuvia sivuja tarkastellessa ei voi olla varma, millä sivulla mahdetaan liikuskella. CSS-validaattori ilmoittaa kuusi virhettä ja useita kymmeniä varoituksia, joista suurin osa varoittaa, että taustaväriä ei ole ilmoitettu.

Virheellinen koodi saattaa hidastaa sivun latausta, kun selain joutuu arvailemaan, miten sivu olisi tarkoitus näyttää. Virheet saattavat aiheuttaa yllätyksiä erilaisilla laitealustoilla ja selaimilla. Yhdelle selaimelle tehty ominaisuus voi olla toiselle selaimelle virhe. Siksi on kehitetty standardi, jota seuraamalla pystyttäisiin ongelmatilanteet ennakoimaan paremmin.

Navigoinnin hover-efekti on toteutettu Javascriptillä, joten jos käyttäjän selaimessa ei ole Javascript päällä, ei tätä käytettävyyttä lisäävää efektiä näy. Aktiivinen sivu on sen sijaan osoitettu selkeästi vaihtuvalla taustavärillä.

Sivujen kirjasin on asetettu kiinteäksi 12 pikseliin. Tämä saattaa vaikeuttaa muun muassa Internet Explorerilla sivuja katsovien heikkonäköisten käyttäjien tekstin näkemistä, koska kirjasimen nopea kasvattaminen on hankalaa. Päänavigoinnin tekstit ovat kuvia, joten niiden kokoa ei voi muuttaa lainkaan.

Koko sivu on tehty 932 pikselin leveyteen. Erikoiseksi tämän tekee se, että varsinkaan alasivuilla ei sisältöä riitä edes 600 pikseliin. Silti sivun osia työnnetään pienemmältä ruudulta katsovilta piiloon.

Linkkivärinä käytetään pääasiassa haaleata sinistä, mutta joillakin alasivuilla väri onkin musta. Tällaiset linkit erottuvat varsinaisesta tekstistä alleviivauksella ja lihavoinnilla. Samaan aikaan jotkin väliotsikot on merkitty linkkivärillä, vaikka otsikoissa ei linkkejä olekaan. Epäjohdonmukainen värien käyttö hämää käyttäjää ja vaikeuttaa linkkien löytämistä. Navigointia lukuunottamatta tekstin värinä on käytetty mustaa valkoisella taustalla.

Erikoisena yksityiskohtana pitää mainita Kalliksen sivujen osoitteisto. Se on periaatteessa kunnossa ja helposti ymmärrettävä, mutta jostain syystä navigoinnin linkkien kautta alasivuille siirryttäessä osoitteiden loppuun tulee sisällönhallintaohjelmiston käyttämä id-numero, esimerkiksi nettipäiväkirjan osoite on www.bjarnekallis.net/fi/nettipaivakirja/?id=67. Osoitteet toimivat toki ilman id-numeroakin.

Sauli Niinistö, 3, Kansallinen Kokoomus

Kampanjasivu: www.niinisto.net

Sauli Niinistön vaalisivustossa tavoitellaan XHTML 1.0 Transitional-dokumenttityyppiä CSS-taitolla. Taitto kärsii niin sanotusta divitismistä, joka on yleinen ongelma sivuissa, jotka on taitettu CSS:n avulla, mutta ei ole muistettu ottaa huomioon XHTML:n peruskielioppia. Divitismin vaivaamilla sivuilla div-elementtiä käytetään liioitellusti ja väärin tilanteissa, joissa pitäisi käyttää semanttisesti järkevää merkintää.

Käsittelyssä olevalla sivulla navigoinnin merkkaus on hyvä esimerkki divitismistä. Jokainen navigoinnin linkki on omassa lohkossaan eikä listassa. Navigointi on kuitenkin lista linkkejä. Divitismin seurausta on, että tämänkin sivuston alasivuilla on semanttinen rakenne vain osittain.

Etusivu pyrkii visuaaliseen näyttävyyteen, joten se luottaa isoihin kuviin ja Flashiin. Flashia hallitaan Javascriptillä, joten ilman kuvia ja Javascriptiä katsellessa näkyy sivulla paljon tyhjää. Pitää kelata sivua tarpeeksi alas, että löytää jotain sisältöäkin.

XHTML-validaattori ilmoittaa 20 virheestä ja CSS-validaattori antaa useita kymmeniä varoituksia, muttei yhtään varsinaista virhettä. XHTML:iin on kirjoitettu runsaasti Javascriptia, jonka kommentoinnissa on käytetty väliviivarivejä. Tämä aiheuttaa sen, että jotkut validaattorit tulkitsevat väliviivarivit virheellisiksi moninkertaisiksi kommenteiksi.

Etusivun lomakkeen rakenne on yleisestä käytännöstä poikkeava. Sarkainjärjestys ei ole looginen, joten tab-näppäimellä kentästä toiseen pääseminen vaatii tarkkaavaisuutta. Jos lomake rakennetaan tällä tavalla, kannattaisi käyttää tabindex-attribuutteja, joiden avulla sarkaimella kentästä toiseen hyppiminen sujuisi loogisesti ja sujuvasti.

Lomake käyttää input-kentissä name-attribuuttia, vaikka sivulla käytetyn koodin suosituksissa vaaditaan id-attribuuttia. label-elementin for-attribuutin käyttö on nyt turhaa, koska label ei toimi halutulla tavalla. Jos id-attribuuttia olisi käytetty oikein, voisi käyttäjä merkitä valintalaatikon pelkästään labelin tekstiä klikkaamalla. Tämä olisi hyödyllistä varsinkin motorisista ongelmista kärsiville käyttäjille, koska klikkauspinta-alaa olisi enemmän ja oikeaan kohteeseen olisi helpompi osua.

Erityistä saavutettavuuden kannalta ongelmallista mainittavaa ovat videoesitykset ja vaalikiertuekalenteri, jotka on toteutettu flashilla eikä tekstivastinetta tai tekstitystä ole tarjottu. Nyt näkövammaiset eivät saa näistä sivun osasista irti mitään.

Niinistön sivujen osoitteisto on hankalaa. Toki pahempaakin on nähty mutta osoitteen http://www.niinisto.net/index.php?option=com_content&task=view&id=123&Itemid=26 kaltaiset rimpsut olisi voinut siistiä oikeilla asetuksilla jo palvelimella. Lyhyet ja ennen kaikkea helposti ymmärrettävät osoitteet olisivat jo ehdokkaan itsensä kannalta hyvät, koska sellaisiin osoitteisiin on helppo viitata.

Linkkivärinä käytetään tummaa punaista, joka ei erotu kunnolla leipätekstistä, joka on mustaa. Tekstin taustaväri on harmaa. Tämä saattaa aiheuttaa joillekin käyttäjille vaikeuksia nähdä tekstiä varsinkin, koska tekstikoko on pieni ja rivivälit ahtaat, mikä taas hankaloittaa esimerkiksi lukihäiriöisten mahdollisuutta saada tekstistä selvää.

Kirjasin on asetettu kiinteään 12 pikselin kokoon. Uudemmissa selaimissa, kuten Firefoxissa tai Safarissa, fontin kokoa on helppo suurentaa näppäimistöltä. Windowsissa painetaan yhtäaikaa control- ja + -näppäimiä ja Macissa omena- ja + -näppäimiä. Jos näin tekee Niinistön sivuilla, katoaa navigointipalkki jäljettömiin. Tämä johtunee osittain siitä, että taiton leveys on kiinteä 900 pikseliä. Näitä sivuja ei ole tarkoitettu katseltavaksi pienillä ruuduilla tai oletusta isommalla fontilla.

Erikoisuutena mainittakoon Niinistön blogissa sivun alareunan arkistonavigointi, joka on englanniksi.

Lue myös artikkelisarjan toinen ja kolmas.

Jaa artikkeli

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.

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ä:

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

• Big, Stark & Chunky â?? Joe Clark
• Zoom the Web: The problem of giant fonts â?? Joe Clark
• Zoom â?? yksinkertainen idea, vaikea toteutus â?? Yoji Hirabayashi
• Zoom-haaste â?? Yoji Hirabayashi
• Konehuoneen tenkkapoo â?? pni
• Zoom: omia ja asiantuntijoiden mietteitä â?? Mikko Heikkinen
• Inverted zoom: designing for low vision â?? Roger Johansson
• Zoom for Low Visionâ?? Juicy Studio
• Zoom layout â?? Douglas Bowman
• Zooming the Web â?? Jeremy Keith

Jaa artikkeli

Uutisissa on viime aikoina päivitelty suomalaisen tietoyhteiskuntakehityksen romahtamista ja Suomen sijoituksen tipahtamista asiaa mittaavissa tutkimuksissa. Koulutuksen taso on laskenut, kun määrärahoja on leikattu ja opetusta karsittu, eikä suuntaus ole ainakaan nousujohteinen. Tässä kontekstissa on vaikeaa kuvitella kuinka Suomi saataisiin nousukiitoon – matkapuhelinjätit kun eivät yksin riitä vauhtia takaamaan. Sisällöntuottajina voimme olla kärkipäässä, mutta entä toteuttajina?

Naapurimaassamme Ruotsissa on hoksattu satsata tulevaisuuteen. Ruotsalaisissa lukioissa on parhaillaan käynnissä suuri opetussuunnitelman uudistaminen, jonka toimeenpanijana on skolverket, kouluvirasto, joka on sikäläinen opetushallitusta vastaava elin. Web Standards Projectin sivuilla uutisoitiin, että samaisen kouluviraston aloitteesta on tarkoitus ottaa lukio-opetuksen osaksi web-standardit ja saavutettavuus vuoteen 2007 mennessä. Ruotsissa jo lukiossa on tarjolla opetusta niille oppilaille, joita kiinnostaa ura verkkopalveluiden parissa – tällöin saavutettavan ja standardinmukaisen suunnittelun opettaminen on looginen ensiaskel. Mikäli kouluvirasto ottaa aiotut muutokset osaksi opetussuunnitelmaa, on sillä mahdollisuus nousta johtavaan asemaan verkkosuunnitteluopetuksessa. Kouluvirasto itse on näyttänyt esimerkkiä taannoisessa kotisivu-uudistuksessaan, jolloin mm. taulukot jätettiin viraston sivuilta kokonaan pois.

Suomalaisten lukioiden opetussuunnitelmauudistus saatiin juuri valmiiksi ja on parhaillaan toimeenpanovaiheessa, mutta meikäläisittäin verkkoon liittyvät kehittämiskohteet ovat olleet enemmänkin virtuaaliopetuksen ja sisällöntuotannon puolella. Ainoa saavutettavuuteen liittyvä asia kotimaan korkeimman opetusviranomaisen taholta on viimekeväinen esteettömän koulutusoppaan julkaisu. Meillä ollaankin keskitytty puhumaan verkon mahdollisuuksien hyödyntämisestä, muttei juurikaan itse (teknisestä) tekemisestä.

WaSP:illa on monien muiden projektinsa ohella käynnissä Education Task Force -kampanja, jossa yhteistyössä eri koulutusinstituutioiden kanssa lisätään ja kehitetään standardi- ja saavutettavuustietoutta opettajien, hallinnon ja verkkovastaavien kanssa. Toisin sanoen: tarjolla on kansainvälinen asiantuntijaorganisaatio, kädestäpitelijä, joka auttaa ottamaan sen ensimmäisen askeleen. Tässä kohdassa suomalainen tietoyhteiskunta voisi ottaa oppia ruotsalaisen kansankodin ennakkoluulottomuudesta, sillä jostain on aloitettava.

Jaa artikkeli