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.

Saavutettava.fin 15 minuuttia

Sivustomme saavutti heti julkaisunsa jälkeen yllättävänkin paljon huomiota. Meidät mainittiin muun muassa Kalevan HighTech Forumin, Digitodayn, ITviikon ja Tietoyhteiskunta.fin uutisissa puhumattakaan lukuisista blogeista. Myös suoraa positiivista palautetta on tullut huomattavan paljon melko yllättäviltäkin tahoilta. Kuten arvelimmekin, tällaiselle sivustolle on nähtävästi ollut tarvetta. Kiitos!

Saavutettava.fin lähiaikojen suunnitelmissa on tarjota runsaasti uusia artikkeleita saavutettavuudesta ja web-standardeista. Sehän se on meidän hommamme. Työn alla on paraikaa muutamia käännöksiä ja, mikä hienointa, pari nimenomaan meitä varten kirjoitettua artikkelia. Tuskin maltamme odottaa.

Esteetikotkin voivat huokaista helpotuksesta. Olemme jo suunnitteluvaiheessa varautuneet järjestämään Saavutettava.fin leiskakilpailun, missä CSS-gurut pääsevät näyttämään kyntensä ja suunnittelemaan sivustollemme tyylikkään ja houkuttelevan ulkoasun. Verrytelkää hiiriranteenne valmiiksi!