Kirjoittaja: Toimitus

Ohjeet

PDF:n saavutettavuuden neljä tasoa

Kirjoittanut Toimitus . 1 kommentti

Kirjoittaja: Alastair Campbell. Käännös: Marjut Mutanen.

Artikkeli on julkaistu alunperin AlastairC -sivustolla nimellä The four levels of PDF accessibility.

Portable Document Format (PDF) -dokumenttien saavutettavuus ei ole uusi aihe; sen ovat tietyt asiantuntijat ymmärtäneet ja selittäneet varsin hyvin. Kuitenkin sen merkitys on organisaatioissa varsin tuntematon. Mutta kenties joku kiinnittää siihen huomiota, jos tehdään yhteenveto PDF-dokumenttien saavutettavuuden neljästa tasosta ja siitä, kuinka asia monissa yrityksissä hoidetaan.

Saavutettavuuden tasot

Laajasti ottaen mikä tahansa PDF kuuluu johonkin seuraavista kategorioista riippuen siitä, kuinka se on luotu:

  1. Tukemattoman graafisen työkalun luoma PDF (ei saavutettava).
  2. Tukemattoman tekstipohjaisen työkalun luoma PDF (todennäköisesti ei saavutettava).
  3. PDF, johon tagit on lisätty automaattisesti (saattaa olla saavutettava).
  4. PDF, johon tagit on lisätty ja muokattu huolella (saavutettava).

Tukemattoman graafisen työkalun luoma PDF

Tyypillinen tilanne on sellainen, jossa tehdään juliste tai mainoslehtinen, joka on luotu sellaisella julkaisutyökalulla kuin esimerkiksi Quark. Se ei upota tekstiä PDF-dokumenttiin millään käyttökelpoisella tavalla, joten kaikki teksti jää ruudunlukijoilta näkymättömiin, eivätkä sen muutkaan saavutettavuusominaisuudet toimi. Tällaisia tiedostoja ei voi pitää millään tavalla saavutettavina.

Tukemattoman tekstipohjaisen työkalun luoma PDF

Kun käytetään Acrobat Prota (versio 5 tai uudempi, mieluiten 7 tai uudempi) sitä tukevan ohjelman (esim. MS Wordin) kanssa, voidaan PDF-dokumentteihin lisätä tageja, jotka tekevät sille sellaisen rakenteen, jota ruudunlukijat ja muut saavutettavuusteknologiat (ja mobiili) käyttävät. Ellei Acrobat Pron kanssa käytetä tuettua ohjelmaa, PDF-dokumentti luodaan ilman näitä HTML:n kaltaisia tageja. Tämä johtaa harmaalle alueelle.

Jos dokumentti on yksinkertainen, on hyvin todennäköistä, että monet saavutettavuusteknologioita käyttävät ihmiset voivat kuitenkin päästä lukemaan sitä olettaen, että heillä on viimeisimmät ohjelmistot käytössään. Tästä ei ole kuitenkaan mitään takeita, joten on hyvin mahdollista, että monet eivät siihen pysty. Dokumenttia ei kuitenkaan voi pitää saavutettavana; suuri osa verkossa olevista PDF:istä kuuluu tähän kategoriaan.

PDF, johon tagit on lisätty automaattisesti

Kun Acrobat Pron kanssa käytetään tuettua ohjelmaa, kuten Wordia, ja lisätään tageja, on perusta saavutettaville PDF-dokumenteille olemassa. On kuitenkin kokonaan toinen kysymys voivatko saavutettavuusteknologiaa käyttävät ihmiset käyttää sitä; se riippuu suuresti lähdedokumentista. On asioita, jotka voivat mennä, ja yleensä menevät pieleen:

  • Dokumenttiin sisällytetyistä kuvista puuttuvat vaihtoehtoiset tekstit.
  • Wordin tyylejä ei ole käytetty, mikä tarkoittaa sitä, että Acrobatilla ei juuri ole mahdollisuuksia ymmärtää mikä dokumentin rakenteen pitäisi olla (vaikka se yrittääkin).
  • Wordin muotoilu on seonnut ja erottelee sisällön oudolla tavalla, jota ei huomaa ennen kuin lukujärjestys tarkistetaan.
  • Dokumentti sisältää taulukoita, joihin on lisättävä koodia Acrobatin käyttöliittymän kautta.

Jos suoritetaan saavutettavuustarkistus (osa Acrobat Prota) mille tahansa dokumentille, jota ei ole manuaalisesti muutettu, on tiedossa ongelmia, sillä automaattinen tarkistus ei huomaa kaikkia edellä mainituista kohdista. Tageja sisältävällä dokumentti saattaa olla saavutettava. Yksinkertaiset dokumentit (ei palstoja, taulukoita tai kuvia) luultavasti ovatkin saavutettavia, mutta vähänkään perusominaisuuksia enemmän sisältävät tiedostot tarvitsevat manuaalista muuttelua päästäkseen samaan lopputulokseen.

PDF, johon tagit on lisätty ja muokattu huolella

Jos käytössä on ollut oikea ohjelma, ja PDF:ää muokataan jälkeenpäin Acrobat Prossa, on mahdollista

  • tarkistaa, että rakenne on oikein, ja korjata sitä.
  • tarkistaa, että lukujärjestys on oikea, ja korjata sitä.
  • määritellä kieli (esim. englanti).
  • lisätä alt-tekstejä.
  • merkata taulukot oikein.
  • poistaa tekstiä sisältämättömät kohdat.

Ja yleisesti ottaen siivota dokumenttia. Tässä vaiheessa voi jo olla varma siitä, että dokumentti on saavutettava.

Kokemusteni mukaan: jos sinulla on 40-sivuinen Word-dokumentti, jossa on käytetty Wordin tyylejä oikein, ja joka sisältää yhden ison taulukon ja 10 kuvaa, kannattaa prosessiin varata 3 tuntia. Jos lähdedokumenttia ei ole tehty Wordilla, tai sen otsikoinneissa ei ole käytetty tyylejä, ajan saa tuplata.

Ja entäpä jos joku muuttaa Word-dokumenttia? Kaikki on tehtävä uudestaan, sillä PDF on lopullinen asiakirjamuoto.

Seuraamuksia organisaatioille

Monet organisaatiot laittavat paljon PDF-dokumentteja verkkoon, ja tietyt sisällöt voivat olla saatavilla vain näissä dokumenteissa. Tämä on saavutettavuuskysymys, ja vieläpä aika suuri (laillinen/moraalinen/tekninen) sellainen.

Mitä tehdä?

Puntaroitavana on useita tekijöitä, joista suurimmat ovat:

  • Vaikeudet, joita ihmisillä voi PDF-dokumenttien käsittelyssä olla, etenkin saavutettavuuteen liittyen.
  • Kuinka suotavaa on laittaa verkkoon pitkiä dokumentteja verkkosivuina.

Saavutettavuuden suhteen ratkaisevaa on se, että kaikki ihmiset eivät voi helposti saavuttaa PDF-dokumentteja. Se ei kuitenkaan tarkoita sitä, että suotavin tapa olisi lisätä verkkoon erittäin pitkiä HTML-sivuja. Kun dokumentti on pitkä, eikä sellaisena sovellu verkosta luettavaksi, tuntuu PDF:n käyttö sopivimmalta vaihtoehdolta.

Olettaen, että tyypillisessä tapauksessa PDF liitetään uutiseen, neuvoston kokoukseen, yhtiökokoustiedotteeseen tai vastaavaan, voidaan saavutettavuus ja yhteensopivuus varmistaa seuraavalla tavalla:

  1. Liitä yhteenveto HTML-sivulle (joka itsessään on sopiva verkosta lukemiseen).
  2. Tee itse PDF:stä saavutettava (ts. käytä sopivaa lähdeohjelmaa, kuten Wordia, ja luo tageja sisältävä PDF-dokumentti).
  3. Anna käyttäjille mahdollisuus pyytää dokumenttia muussa muodossa, kuten esim. Word tai RTF (Rich Text Format).

Jos ylläolevia neuvoja noudatetaan, tekee organisaatio riittävästi varmistaakseen sen, että kaikilla on pääsy heidän sisältöihinsä. PDF:t eivät ole luontaisesti epäsaavutettavia, mutta niistä on kuitenkin tullut saavutettavia vasta viime versioissa; tällä hetkellä ne eivät ole helposti saavutettavissa. Aikaa myöten (kun ihmisillä on ajanmukaisempia ohjelmia) kohta 3 saattaa käydä tarpeettomaksi.

Tämän pitäisi luonnollisesti vaikuttaa käytäntöihin. Olisi epärealistista olettaa yritysten muuttavan tuhansia historiallisia dokumentteja saavutettaviksi PDF:iksi. Kuitenkin, kuten ylläolevassa suosituksessa, mahdollisuus pyytää dokumenttia eri muodossa tekee siitä käytännössä saatavan ilman kohtuutonta työmäärää.

Kuitenkin yritysten on vaikeaa muuttaa prosesseja ja ryhtyä tekemään tästä lähtien saavutettavia PDF:iä. Edellytyksenä on merkittäviä muutoksia siihen, kuinka sisältöä tuotetaan: Wordien tyylit on otettava käyttöön ja lisättävä kuville vaihtoehtoiset tekstit. Vasta sitten tietoa saavutettavien PDF-dokumenttien luomiseksi voidaan hyödyntää.

Vieraskynä

Konsultin johdolla saavutettavuuteen

Kirjoittanut Toimitus .

Kirjoittaja Tino Rossi toimii Steerco Oy:ssä graafisen suunnittelun ja käytettävyyden konsulttitehtävissä. Hän tekee työkseen käyttöliittymäsuunnittelua, grafiikkaa ja käytettävyys- ja saavutettavuusarvioita.

Jälleen on edessä yksi käytettävyyden asiantuntija-arvio. Heuristiset listat odottavat pöydänkulmalla ja raporttipohjakin on valmiina. Näitähän on tehty – käytettävyyden tutkimisen perusteet ovat tilaajallekin tuttuja, ja raporttia esiteltäessä neuvotellaan tilaajan kanssa vain siitä, millä ehdoin tekstivärin ja taustavärin kontrastia voi pitää riittävänä, tai miten tilaajalle rakas brändielementti on luettavuutta riskeeraava vesileimakuva tekstin taustalla.

Tilaajan käytettävyysvaatimuksissa kuitenkin kummittelee esteettömyys ja saavutettavuus. Julkishallinnon tilaaja on tehnyt kotiläksynsä ja osaa suorastaan nimetä standardit, joita pitäisi noudattaa: suunnittelu- ja saavutettavuuskriteereinä JHS 129 ja WAI:n A-taso. Ja kuitenkin itse luulen, ettei tilaaja kyllä tiedä, mitä näillä standardeilla vaatii. Pistänkö sitten raporttiin korjattavaksi ongelmakohdaksi sen, jos sisä- ja ulkolinkit eivät ole erilaisia, tai jos sivulla olevan ranskankielisen sutkauksen lang-attribuuttia ei ole merkattu? Ja kun näitä käytettävyys- tai esteettömyysriskejä asiakkaalle esittelen, miten vakavina ne esitän? Ovathan ne kuitenkin tilaajan osoittaman standardin vastaisia…

Saavutettavuuden nuorallatanssia

Arviointiraportin kirjoittaneen asiantuntijan mielipiteistä, intohimoista, ortodoksisuudesta ja henkilökohtaisesta näkemyksestä on paljolti kiinni se, millaisia korjauksia tai toimintaperiaatteita tilaaja vaatii tekniseltä toimittajaltaan tai palvelun ylläpitäjiltä. Saavutettavuustavoitteet pitäisi varmaankin sijoittaa realistisesti johonkin kohtaa sellaista janaa, jonka toisessa päässä on antiikkista ruudunlukuohjelmaa kuunteleva sokea ihminen ja toisessa päässä haukankatseinen lyhytjännitteinen nuori huippumikronsa kanssa. Asiaan sisältyy melkein aina kompromisseja ja tahtotilaa jostain sellaisesta ihanteesta, joka ei vielä ole toteutuskelpoinen.

Asiantuntijan tehtävänä on esittää huomioitaan ja arvioita näiden vakavuudesta, vaikka kaikki osapuolet saattavat ounastella, että korjaustoimenpiteisiin ei kuitenkaan ryhdytä. Sillä tosin voi lohduttautua, että ajatus voi jäädä muhimaan asiakkaan mieleen ja tulla otetuksi huomioon jossain seuraavassa isossa palveluremontissa.

Yhteisesti jaetussa tahtotilassa on vielä näkyvimpänä ja kuuluvimpana osapuolena se ”keskivertokäyttäjä”, jonka palaute kantautuu tilaajalle kaikkein keskeisimpänä. Todennäköisesti verkkopalvelun ylläpitäjät eivät koskaan saa tietoonsa sitä, jos tekstiselaimen käyttäjät eivät onnistu lähettämään lomaketta, mutta heille voi sataa kiukkuisia valituksia siitä, että tekstikoko on lukukelvottoman pientä. Ja näissä yhteydenotoissa on kysymys siitä, että loppukäyttäjän selaimesta on huomaamatta säädetty tekstikoko minimiin, ja hänellä ei ole aavistustakaan siitä, miten sitä voisi itse suurentaa tai että siihen voi ylipäätään itse vaikuttaa. Tällaisessa tapauksessa verkkopalvelusta vastaavat valitsevat rutinan lopettamiseksi ilman muuta kiinteästi määritellyn pistekoon tekstille, vaikka kuinka hyvin tietäisivät suhteellisen tekstikoon edut ja standardinmukaisuuden. Päätös jää tietysti tilaajalle, mutta kuinka sitten palveluntarjoajia ja käyttäjiä valistetaan? Ja milloin siihen esteettömämpään tulevaisuuteen päästään?

Julkaisujärjestelmä ei ole saavutettavuuden ystävä

Saavutettavuuden esteistä suurimpia eivät enää pitkään aikaan ole olleet high tech -nörtit tai visuaalisuuden ehdoin ajattelevat graafiset suunnittelijat. Päinvastoin, nämä ovat kääntäneet osaamisensa esteettömyyden tavoitteluun, ja uudeksi yhteiseksi viholliseksi on noussut sisällönhallintajärjestelmien huima kehittyneisyys.

Monikanavajulkaiseminen ja massiiviset, käyttäjäystävälliset julkaisujärjestelmät tuottavat helposti sellaisia lopputuloksia, joiden yksittäisiin esteettömyysongelmiin ei ole mahdollista puuttua. Sivuston omistajallakin voi olla vilpitön halu saavutettavuuteen, mutta on turha kuvitella, että oto-tiedottaja pystyisi tuottamaan julkaisujärjestelmällä taulukon otsikkosolulle sarakeryhmämäärittelyjä tai tägejä akronyymien tarkentamiseen. Mitä näppärämmin copy-paste sujuu, sitä esteellisempää lähdekoodista näkyy syntyvän. Järjestelmän valmistajakin saattaa olla samaa mieltä, mutta neuvoo odottamaan seuraavaa versiota ongelmien ratkaisemiseksi.

Meidän sivujamme eivät sokeat käytä

Kaikki esteettömyyden eteen tehty työ tähtää vain yhteen asiaan: käyttökokemuksen helpottamiseen. Mutta keitä nuo sivustolle tulvivat ihmiset oikein ovat? Ja ketä heistä palvellaan innokkaimmin? Sopivan saavutettavuuden tason määrittely vaatii tietoa sivustolle saapuvista käyttäjistä ja heidän laitteistostaan. Asiakkaalla on useimmiten hyvä kuva keskiarvoasiakkaastaan, mutta olennaisesti vähemmän tietoa erilaista pienryhmistä, jotka myös löytävät tiensä palveluun.

Vastauksia marginaalissa surffaavien määrästä voi koettaa onkia erilaisista kävijätilastoista. Dataa on useimmiten tallennettu kunnioitettavia määriä, mutta aina kerättyä tietoa ei ole kuitenkaan hyödynnetty tehokkaimmalla mahdollisella tavalla. Palvelua suunnitteleva taho ei aina kommunikoi tietoa keräävien ihmisten kanssa. Yleinen hämmennys valtaa usein tilaajan, kun käy selville että prosenttiluvut eri selaimista, käyttöjärjestelmistä ja resoluutioista ovat tosiaan saatavissa, kunhan sellaista tietoa vain osaa pyytää. Lukujen valossa on kenties helpompi päättää, millaiselle käyttäjälle kumarretaan ja millaiselle pyllistetään.

Ammattimainen pomminpurkaja

Tilanne ei ole mitenkään lohduton. Vaikka verkko on vieläkin saavutettavuuspommeja tulvillaan, sivut ovat parantuneet viime vuosina. Kaukana ollaan vielä yleisestä saavutettavuusperiaatteesta, mutta ainakin asiasta puhutaan, ja yhä useammin esteettömyyttä osataan vaatia. Ammattilaiset osaavat jo tehdä asiat oikein, jos heitä siihen patistetaan. Onneksi kukaan ei enää kehtaa möläyttää sellaisia sammakoita kuin jo kadonneen uusmediafirman myyntimies: ”Jos ne ei osaa ladata uusinta selainta, niin ei niitä kyllä asiakkaiksi kaivatakaan”.

Ohjeet, Saavutettavuus

Saavutettavuus: aloita tästä

Kirjoittanut Toimitus .

Aina aika ajoin saamme lukijoilta tai satunnaisilta vierailijoilta kysymyksiä siitä, mistä saavutettavuusasoihin perehtymisen voisi aloittaa. Erityisen usein kysellään kirjojen perään, niin internet-aikakautta kuin elämmekin. Kuten kaikki tietävät, verkko on on pullollaan monenlaista materiaalia, mutta jos aihealue ei ole vielä tuttu, on lähdekritiikkiä vaikea harjoittaa. Siksi jonkun perehtyneemmän tahon vinkit voivat olla paikoillaan. Siispä kokosimme aiheesta kiinnostuneille kompaktin aloituspaketin, jonka läpikäymisen jälkeen tietää jo enemmän kuin useimmat vastaantulijoista.

Kirjat

Kokonaisia kirjoja löytyy jonkin verran, ja osa niistäkin löytyy ilmaiseksi verkosta. Joe Clarkin Building Accessible Websites -kirjan verkkoversio lienee tunnetuin, ja monien mielestä myös paras. Toinen vastaava on Accessible Web Sites, josta on olemassa myös (hankalahko) verkkoversio. Kolmas, ja vain verkkoversiona ilmestynyt kirja on Mark Pilgrimin Dive Into Accessibility. Myös Jeffrey Zeldman sivuaa aihetta ”oranssissa kirjassaan”.

Viime vuonna ilmestynyt Sarah Hortonin Access by Design on mainio, oivaltava ja selkeä perusteos saavutettavuudesta. Verkosta sitä ei löydy, mutta suomalaisista kirjakaupoista kyllä.

Tässä yhteydessä on mainittava myös Trenton Mossin Webcreble Handbook, jonka houkuttelevuutta pienentää huomattavasti sen kohtuuton hinta sisältöön nähden.

Tämän syksyn uutuus on mm.Web Accessibility: Web Standards and Regulatory Compliance, jota saattaa saada satunnaisesti hyvinvarustelluista suomalaisistakin kirjakaupoista ainakin tilaamalla. Ennakkomaistiaisena verkossa on saatavana kirjan ensimmäinen kappale, Understanding Web Accessibility. Edullisemmalta vaihtoehdolta vaikuttaa 60 hot to touch Accessible Web Design tips, jonka verkosta ladattava versio kustantaa vain reilut 13 dollaria, eikä se painettunakaan ole juuri sen kalliimpi. Odotamme pääsevämme näihin kirjoihin ennen pitkää käsiksi.

Verkossa

Yleisesti ottaen hyviä resursseja löytyy myös verkosta melko paljon. Mm. WebAIM, Accessify.com, Juicy Studio, WSG (Web Standards Group), Web Usability ja The Web Standards Project ovat hyviä paikkoja aloittaa materiaalin metsästys.

Suomenkielistä materiaalia kaipaavalle tilanne on kinkkisempi. Tieken sivuilta löytyy kuitenkin Esteettömyysopas, jossa on paljon myös teknistä ohjeistusta, vaikkakaan sen lukemiseksi ei tarvitse olla HTML-nero. Essi – esteetön sisällöntuotanto on verkkokurssi, joka ohjaa tekemään esteettömiä verkkoaineistoja. Sisältö on jaoteltu näppärästi kohderyhmän mukaan niin, että sekä kirjoittaja että tekninen toteuttaja löytävät helposti kannaltaan relevantit asiat. Sitten on vielä JHS 129 Julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteet -suositus, jonka tarkoituksena on opastaa viranomaisia verkkopalveluiden suunnittelussa, toteutuksessa ja hankinnassa. Käytännössä tämä on ainoa valtionhallinnon taholta saatu ohjeistus aiheeseen, ja sopii hyvin luettavaksi myös muillekin kuin verkkopalveluita suunnitteleville viranomaisille. Siinä otetaan kantaa myös muuhunkin saavutettavuuteen, ja sellaisena se sopii hyvin mille tahansa verkkosivuprojektia suunnittelevalle taholle.

Tulossa?

Kotimaisista saavutettavuusresursseista on huutava pula; esimerkiksi suomenkielisiä kirjoja ei ole tietojemme mukaan yhtään, eikä näitä verkkosivujakaan tungokseksi saakka ole tehty. Jos siis joku taho ryhtyisi suomenkielistä teosta tekemään, tai jo tehdyistä kääntämään, sille voisi kuvitella olevan hyvät ja kaiken aikaa kasvavat markkinat.

Lisäksi: jos tiedossasi on muita hyviä vinkkejä aiheesta kiinnostuneelle, niin kerro se kommenteissa! Päivitämme tätä merkintää tarpeen mukaan.

Vieraskynä

Taiteilijat saavutettavuuden asialla

Kirjoittanut Toimitus . 2 kommenttia

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.
Saavutettava.fi testaa

Presidenttiehdokkaiden kampanjasivut – osa 3

Kirjoittanut Toimitus . 4 kommenttia

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.

Matti Vanhasen kampanjasivusto SafarillaVaikka 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 kampanjasivusto Lynxillä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 kampanjasivusto ilman kuviaTarja 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.