Yleisurheilun MM-kisat verkossa

Parhaillaan käynnissä olevien yleisurheilun MM-kisojen nimikkosivusto on ongelmallinen paitsi saavutettavuuden myös web-standardien näkökulmasta. Sivusto löytyy osoitteesta http://www.helsinki2005.fi/ ja jo osoite herättää kummeksuntaa: helsinki2005.fi? Euroopan kulttuuripääkaupunki? Helsingin juhlavuosi? Helsingin tapahtumakalenteri vuodelle 2005?

Web-sivuston tekniseen toteutukseen on ilmeisesti sovellettu avajaisten aikakone-teemaa. Hetkeen ei liene törmätty uuteen, näin korkean profiilin sivustoon, jossa ei ole käytetty tyylipohjia (CSS, Cascading Style Sheets) laisinkaan. Lisäksi koko sivusto vilisee luvattoman paljon pienellä vaivalla helposti vältettävissä olevia, esteettömyyteen ja peruskäytettävyyteen liittyviä ongelmia.

Sivuston sisällönhallintajärjestelmä (ohjelmisto ei ole kirjoittajan tiedossa) tuottaa 2000-luvulle sopimatonta merkkausta eikä esteettömyyttä ole juurikaan mietitty. Tämä itsessään tuntuu omituiselta, kun muistetaan Sydneyn Olympialaisten sivuston saama tuomio [en]. Käymme tässä jutussa läpi muutaman räikeimmän epäkohdan, navigoinnin toteutuksen ja lomakkeiden merkkauksen.

Rakennetta otsikoinnilla

Sivuston hahmottamisen kannalta tärkeä rakenteen merkkaus puuttuu kokonaan. Pelkästään eriasteisten loogisten otsikkotasojen (h1h6) käyttö olisi tehnyt ihmeitä. Esimerkiksi uutisotsikko on MM-kisasivustolla merkattu näin:

<font FACE =" Verdana" SIZE =" 1" COLOR =" #666666"><b>KISASIVUILLA RUNSAASTI KÄVIJÖITÄ?</b></font>

Koska HTML on merkkauskieli, jonka elementit tarkoittavat jotain, huomataan, että ylläoleva ei tarkoita otsikkoa. Merkintä tarkoittaa, että versaalilla kirjoitettu (joka internetissä tulkitaan huutamiseksi) on pelkästään lihavoitu asian painottamiseksi ja erottamiseksi normaalista tekstistä.

Sivuston navigointi on myös monella tapaa ongelmallinen. Ensinnäkin, se sisältää kahdessa osassa toistakymmentä linkkiä, joita ei ole HTML:ssa erotettu toisistaan.

Kannattaa aina erottaa linkit selkeästi toisistaan. Yleisiä merkkejä ovat mm. |, » ja >. Paras tapa lienee kuitenkin merkitä lista linkkejä listaelementiksi (ul). Se on niin sanottu semanttinen tapa esittää listoja, joita navigointiosiot eli linkkilistat ovat. Bruce Lawsonin mukaan ruudunlukuohjelma Jaws for Windows rakastaa semanttisia listoja [en].

Toisen ongelman aiheuttaa kuvien käyttäminen tekstin korvaamiseksi. Tämä estää varsin tehokkaasti sen, että käyttäjä voisi itse vaikuttaa tekstin kokoon. Teksti kannattaa esittää tekstinä ellei pätevää syytä muulle ole. Varsinkin, jos teksti on näin pientä kuin mainitussa navigoinnissa. Nyrkkisääntönä tulisi myös muistaa, että varsinkin leipätekstin koon asettamista absoluuttiseen arvoon pitää välttää.

Sivuston alkuun olisi voinut sisällyttää myös linkin, jonka avulla voitaisiin ohittaa navigointi ja siirtyä suoraan itse sisältöön ja näin ollen välttää turhaa (kymmenien linkkien) toistoa sivuilla. Toistuvat listat ovat ongelma varsinkin puhe- tai tekstiselaimilla sivuja lukeville.

Vaikka navigointi olisikin järjestetty selkeästi ja ymmärrettävästi, jotain oleellista näyttäisi siltikin puuttuvan. Maailmanmestaruuskilpailuille tai ainakin urheilijoille tärkeä asia on hankala löytää. Miten kilpailuissa kävi? Kuka tuli kolmanneksi? Mistä löytyvät kilpailujen tulokset?

Kisa-aikataulut

Kisojen aikataulujen selaaminen on toteutettu alasvetolaatikolla, joka vaatii toimiakseen JavaScriptia tukevan selaimen. Ratkaisu on huono. Se muun muassa estää tehokkaasti navigoinnin pelkän näppäimistön varassa. Tämänkaltaisissa toteutuksissa olisikin järkevintä käyttää jotain palvelinpään tekniikkaa. Lisäksi käyttäjää hämmennetään lomakkeiden asettelulla. Käyttö toimii siis lähinnä arvaa-ja-kokeile-menetelmällä.

Yleensäkin tällaisen toiminnon asettaminen selainpään toiminnallisuuden varaan on kyseenalaista. Olemassa on kuitenkin paremmin toimivia selainriippumattomia palvelinpään tekniikoita.

Yleensäkin lomakkeiden merkkaukseen ja asetteluun kannattaa kiinnittää huomiota ja käyttää aikaa. Hyvän merkkauksen avulla lomakkeen ulkoasua on helpompi muokata CSS:in avulla ja erilaisten esteettömyyttä edistävien attribuuttien käyttö helpottaa usein kaikkien käyttäjien selailua.

Lopuksi erikoisena yksityiskohtana mainittakoon se, että vetolaatikoiden alapuolella tarjotaan ”uutta aikataulua” PDF-muodossa. Uusi aikataulu? Mikä on muuttunut tarjolla olevaan vetolaatikolliseen versioon verrattuna? Miksi sivulta ei löydy tavallista linkkiä aikataulun tavalliseen HTML -versioon?

Modernit ruudunlukuohjelmat ja CSS-taitto

Access Matters -blogissa on julkaistu yhteenveto siitä, kuinka kolme johtavaa ruudunlukuohjelmistoa (Jaws 6.1, Window Eyes 5.0, IBM Home Page Reader 3.04) tulkitsevat CSS-aseteltuja dokumentteja. Testidokumentteina toimi neljä eri css Zen Garden-sivuston leiskaa (000, ZG 019, ZG 151 ja ZG 167).

Kaikki testatut ohjelmistot lukevat dokumentin sisällön siinä järjestyksessä kuin se lähdekoodissa on määritelty, välittämättä CSS -asettelusta. Tämä tieto helpottanee ainakin silloin, kun halutaan jo suunnitteluvaiheessa kiinnittää huomiota (uudempien) ruudunlukuohjelmistojen käyttäjiin: tärkein asia ensimmäiseksi. Graafisessa versiossa voidaan CSS:n avulla tarjota kaksi- tai kolmepalstainen asettelu.

Artikkelin lopussa löytyvästä taulukosta huomaa helposti, kuinka erilaiset FIR-tekniikat (Fahrner Image Replacement, tekniikka jossa CSS:n avulla korvataan tekstiä kuvalla) ja varsinkin CSS:ssa käytetty display: none aiheuttavat selkeitä ongelmia ohjelmistoille.

Loppuun maininta viime aikoina ulkomaisissa design-blogeissa käsitellystä, Joe Clarkin ehdottamasta, Zoom-versiosta heikkonäköisille. Idea on yksinkertainen. Tarjotaan sivustosta CSS:n avulla muokattu versio, joka muun muassa:

  • on yksipalstainen
  • käyttää oletusarvoisesti suurta fonttikokoa
  • käyttää yksinkertaistettua navigointia
  • tarjoaa täsmälleen saman sisällön kuin graafinen versio
  • toteutetaan pelkästään CSS:n avulla, eikä merkkausta muuteta.

Aiheesta lisää (englanniksi):

  1. A List Apart: Big, Stark & Chunky (Joe Clark)
  2. Joe Clark: Zoom the Web: The problem of giant fonts – @media 2005-tapahtuman muistiinpanot
  3. 456 Berea Street: Inverted zoom: designing for low vision (Roger Johansson)
  4. Juicy Studio: Zoom for Low Vision (Gez Lemon)
  5. Stopdesign: Zoom layout (Douglas Bowman)
  6. Adactio: Zooming the Web (Jeremy Keith)

Myös allekirjoittanut tarjoaa harjoituksen vuoksi vaihtoehtoista Zoom -versiota blogistaan.

Saavutettava.fi:n toimituksesta kvartetti

Saavutettava.fi:n toimituskunta laajentui triosta kvartetiksi, kun remmiin liittyi uunituore kasvatustieteiden maisteri Timo Laak. Maantieteellinen kattavuus lisääntyi sekin. Onhan meillä nyt edustus paitsi pääkaupunkiseudulla ja Pirkanmaalla myös Keski-Suomen sydämessä Jyväskylässä. Timon erikoisaluetta on saavutettavuus ja verkko-oppiminen, ja silmissä siintää väitöskirja. Tästä eivät saavutettavuusasiat voi kuin parantua! Tervetuloa joukkoon kummaan, Timo!

Saavutettavuus ja verkko-opetus

Saavutettava.fi:ssä on seurattu mielihyvällä saavutettavuustrendin kehittymistä myös kotimaisissa blogeissa samalla kun saavutettavuusasiat keräävät palstatilaa pikkuhiljaa niin sanotun virallisen median sivuilta. JHS-suositus: Julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteet saa enemmän huomiota. Ennustamme, että lähiaikoina alkaa Suomessakin keskustelu julkishallinnon verkkoviestinnän saattamisesta jonkinlaisen saavutettavuuslain piiriin, kuten on tapahtumassa joissakin Euroopan yhteisön maissa.

Ehkä tarkkailemme maailmaa väritettyjen lasien läpi mutta kuitenkin jopa Saavutettava.fi:n kävijätilastot kertovat asian olevan kuuma peruna. Meitä on linkitetty niin monista blogeista ja muilta saavutettavuutta etäisestikin hipaisevilta sivustoilta, että veisi oman juttunsa luetella kaikki. Kiitämme luottamuksesta.

Saavutettavuusasioilla on sijansa myös koulutuksen puolella. Siitä ei suinkaan ole vähäisimpänä osoituksena meilläkin linkitetty DfA-datanomikoulutus Keski-Savon Oppimiskeskuksessa. Olemme aina kiinnostuneita saavutettavuus-koulutuksista, joten jos olet järjestämässä aiheesta kurssia tai itse osallistumassa sellaiselle, kerro kurssista meille. Lupaamme vähintään linkittää kurssisivustoonne tai vastaavaan.

Erityismaininnan ansaitsee KM Timo Laakin toimittama Saavutettavuus & verkko-opetus -sivusto, joka on tarkoitettu pieneksi yleistietopaketiksi niille, jotka ovat kiinnostuneita saavutettavuudesta ja verkko-opetuksesta. Ystävällisesti Timo on antanut sivustonsa nyt Saavutettava.fi:n hoiviin.

Verkko-opetus antaa opiskelumahdollisuuksia sellaisille, joille tavalliseen luokkahuoneopetukseen osallistuminen ei syystä tai toisesta ole mahdollista. Saavutettava verkko-opetus avaa ovet vielä useammille ja on monessa kohdassa jopa normaalia opetusta parempi vaihtoehto.

Huonot osoitteet ja linkittämisen merkitys

Kirjoittaja: Aleksi Moisio.


World Wide Webin isä, Tim Berners-Lee, kirjoitti vuonna 1997 linkittämiseen liittyvistä myyteistä ja väärinkäsityksistä. Liki kymmenen vuotta sitten Internetin linkkeihin perustuva verkkomainen rakenne herätti hämmennystä. Osa surffaajista ja sivujen ylläpitäjistä koki, että ilman lupaa tehtävä linkittäminen loukkasi tekijänoikeuksia.

Tämä oli kuitenkin Berners-Leen mukaan valitettava väärinymmärrys. Linkit pelkästään viittaavat, eivätkä itsessään kerro mitään esimerkiksi linkittäjän omistussuhteesta linkitetyn sivun sisältöön tai linkittäjän kannatuksesta linkitetyllä sivuilla esitettyihin ideoihin.

Berners-Leen mukaan linkittäminen kuuluu sananvapauden perusominaisuuksiin. Linkittämistä voi verrata mahdollisuuteen puhua julkisuuden piiriin kuuluvista asioista. Sananvapauden nimiin vannovassa yhteiskunnassa täytyy olla mahdollista viitata esimerkiksi hallitusohjelmaan keskusteltaessa politiikasta keskellä toria.

Myös Internetissä täytyy olla mahdollista viitata julkishallinnon sekä yksityisen sektorin julkisiin dokumentteihin. Tämä on usein helpommin sanottu kuin tehty.

Kaikki mikä on konkreettista liukenee ilmaan

Torilla keskusteltaessa on helppo tuudittautua siihen, että tosimaailman dokumentit eivät häviä savuna ilmaan. Esittämättä kyynistä huomiota lupausten toteutumisesta: minkälainen mekkala syntyisikään, jos kaikki kopiot hallitusohjelmasta häviäisivät kesken vaalikauden?

Verkon ulkopuolella voi aina luottaa siihen, että julkiset dokumentit säilyvät ainakin jossain muodossa. Internetin ihmemaassa on kuitenkin mahdollista, että osa dokumenteista katoaa bittiavaruuteen jälkiä jättämättä.

Hyvästä esimerkistä käyvät uutistoimistojen sivustot, joilla pyörivät tauotta uusimmat tapahtumat maailmalta. Vanhat uutiset painuvat pinon alimmaiseksi ja tuoreet uutiset nousevat etusivulla ensimmäiseksi. Yleensä etusivulla näkyy vain osa uutisesta, kenties ingressi. Varsinaiseen artikkeliin pääsee käsiksi linkin välityksellä. Mutta mitä tapahtuu, kun uutinen on jo niin vanha, ettei se mahdu etusivulle ensinkään?

Hyvin toteutetuilla sivustoilla tätä vääjäämätöntä ongelmaa varten on rakennettu arkistoja, joista vanhemmat uutiset löytyvät. Parhaimmilla sivustoilla on lisäksi mahdollisuus etsiä oikeaa uutista esimerkiksi tekijän, otsikon, aiheen, julkaisupäivämäärän ja muiden metatietojen avulla.

Valitettavan usein verkkotoimittajat, webmasterit ja tavalliset surffaajat törmäävät kuitenkin sivuihin, jotka häviävät mystisesti, jälkiä jättämättä. Pahimmassa tapauksessa ”hyödyttömät” sivut poistetaan kokonaan verkosta. Hiukan paremmassa tapauksessa pelkästään sivulle johtava linkki poistetaan. Tällöin sivu joko hukkuu ja unohtuu ajan kuluessa tai sitten jokin ulkopuolinen taho pelastaa sivun linkittämällä sen omille sivuilleen.

23, 6, 707 ja muita merkityksettömiä numeroita

Historiaan häviävien sivujen ohella harmaita hiuksia aiheuttavat www-osoitteet, jotka koostuvat lähinnä sisällönhallintasovelluksen arpomasta koodinumerosta. Tällaiset generoidut osoitteet ovat usein aivan liian pitkiä, jotta ne mahtuisivat katkeamatta esimerkiksi 72 merkin rivejä käyttävän sähköpostiohjelman ruudulle. Hämmentävien pituuksiensa vuoksi tällaisia osoitteita on myös mahdotonta painaa esimerkiksi kirjoihin.

Siinäkin tapauksessa, että moinen osoite löytää tiensä kirjan sivuille, on osoitteesta täysin mahdotonta päätellä mitään vihjeitä sivun sisällöstä — vai mitä sanotte seuraavasta kaunokaisesta: http://www.amazon.com/gp/help/seller/at-a-glance.html/ref=olp\_offerlisting\_10/ 103-3739537-0091006?%5Fencoding=UTF8&asin=1859844634&marketplaceSeller =1&seller= ADHR7VPS9GZEY — aika vonkale, vai mitä?

Sisällönhallintasovelluksen valinnassa ja säätämisessä tehdyt huonot päätökset kertautuvat ikävällä tavalla. Linkittämisen vaikeutuessa sananvapauden toteutuminen verkossa vaarantuu ja julkisen tiedon avoin saatavuus vaikeutuu kohtuuttomalla tavalla.

Kuka tietämättömyyttään, kuka typeryyttään

Erilaisten organisaatioiden sivuille linkittämistä vaikeutetaan epäilemättä myös tietoisesti. Kun sivut toteutetaan esimerkiksi sopivasti muotoillun Flash-sovelluksen tai PDF-dokumenttien avulla, pystytään ulkopuolelta tapahtuva linkittäminen kohdistamaan tehokkaasti vain sivuston juuritiedostoon.

Tällaista toimintaa ohjaa vanhentunut, salaileva ja kontrolloimiseen pyrkivä käsitys tiedottamisesta. Kaikki keinot kontrolloida julkisuuskuvaa hyödynnetään viimeiseen linkkiin saakka. Tässä mielessä Flash- ja PDF-dokumentit antavat tiedoston tekijälle enemmän valtaa suhteessa dokumentin kopioimiseen, tulostamiseen ja täsmälliseen linkittämiseen kuin standardien mukainen HTML.

Historian saatossa on ollut ja tulee olemaan tarpeita rajoittaa tiedon saatavuutta. Tuskinpa kukaan haluaa esimerkiksi luottokorttinsa tunnusluvun leviävän vapaasti verkossa.

Linkittämisen tahaton ja tahallinen estäminen koskee kuitenkin jotain sellaista, joka alun perin verkkoon luettavaksi laitettuna on luonteeltaan julkista. Se, että Ajoneuvohallintokeskus AKE vaikeuttaa linkittämistä käyttämällä sivustollaan (huonolla tavalla) kehyksiä, ei ole välttämättä harkittua tiedon salaamista. Valitettavasti sivuilla tehdyt ratkaisut eivät ainakaan edistä julkisuuslaissa mainittua julkishallinnon velvoitetta edistää kansalaisten tiedonsaantia.

Kuin kirja ilman kansilehtiä

Ikään kuin tässä ei olisi kylliksi: huonot www-osoitteet nakertavat myös länsimaalaisen tieteen kivijalkaa — lähdeviittauskäytäntöä. Aivan liian usein törmää akateemisen vertaisarvioinnin läpikäyneeseen kirjallisuuteen, jossa viitataan surullisen epämääräisesti verkkolähteisiin.

Tutkimuksen läpinäkyvyyden ja uskottavuuden kannalta on täysin kestämätöntä, etteivät edes arvostetut tiedenaiset ja -miehet voi (tai osaa) viitata täsmällisesti verkkolähteisiin, koska lähdemateriaali on hukutettu hauskan Flash-palikan syövereihin.

Vikaa löytyy tosin myös tiedemaailman parista. Tutkimuksen läpinäkyvyyttä peräänkuuluttavien professoreiden ja tutkijoiden on syytä vilkaista peiliin ja hävetä näkemäänsä, mikäli he ovat vielä 21. vuosisadalla valmiita katsomaan sormien läpi väitöskirjojen www.yritys.com-tyyppisiä viittauskäytäntöjä.

Kohti parempaa tulevaisuutta

Huonoihin ratkaisuihin johtavat päätökset tehdään siis yleensä tiedostamatta tai tietoisesti jo sivuston suunnitteluvaiheessa. Mikäli edellä mainitut ongelmat halutaan välttää, tulisi jo sivuston suunnitteluvaiheessa ottaa huomioon tulevat linkittämistarpeet.

Toimivalla sivustolla:

  • osoitteiden nimet kertovat edes jotain sivujen sisällöstä, esimerkiksi http://www.yritys.com/tiedostot/tilinpaatokset/tilinpaatos2005.html
  • käytetään weblogien myötä yleistyneitä permalinkkejä [en], joilla estetään sivujen katoaminen
  • usein uudistuvien sivujen, kuten esimerkiksi uutissivun yksittäiset uutiset arkistoidaan järkevällä tavalla
  • jokaisen sivun mukana tallennetaan metadataa [en], joka mahdollistaa fiksujen tietokantahakujen tekemisen
  • käytetään linkittämisen estäviä tekniikoita (Flash, PDF jne.) vain erittäin tarkasti harkituissa kohdissa

Sananvapaus, julkisen tiedon avoin leviäminen ja lähdeviittauskäytäntö eivät ole vielä menetettyjä tapauksia — ne vain vaativat hieman enemmän huolellisuutta www-sivujen suunnittelussa. Linkittäkää toisianne.