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?

7 kommenttia:

  1. Sivuston tekijästä kertoo huomattavan paljon sivun lähdekoodin alussa oleva vitsikäs tagi:

    META NAME = ”generator” CONTENT = ”notepad”

    Tuollaisen sivulle lisää vain vanha veteraani joka koodaa omalla tyylillään koska se on se ainoa oikea eikä uutta tarvitse opetella koska vanhat tavat ovat ne parhaat. Tagivitsi todennäköisesti parodioi ihmisiä jotka tekevät sivuja muuten kuin kirjoittamalla koodin kokonaan käsin ja on ihan hehheh-hauska.

    Olisi ihan mielenkiintoista tietää mikä toimisto sivut on tehnyt.

  2. Tämänkaltaisissa toteutuksissa olisikin järkevintä käyttää jotain palvelinpään tekniikkaa.

    Ihan mielenkiinnosta… Mitä tarkoitatte näillä palvelinpään tekniikoilla?

  3. PA: ”Ihan mielenkiinnosta… Mitä tarkoitatte näillä palvelinpään tekniikoilla?”

    Mitä tahansa tekniikkaa, jonka avulla lomakkeen (tässä tapauksessa select menu) toiminnallisuus toteutetaan selainriippumattomasti itse palvelimella. Lisätietoa aiheesta voi lukea vaikka Mike Daviesilta [en] ja Jukka Korpelalta [en].

  4. Kiitos linkeistä, enpä ollut tullut moista ajatelleeksi. Tosin javascriptillä tehdyn valikon operointi onnistuu kyllä näppikselläkin (ainakin Safarilla) toisin kuin Korpela väittää.

  5. Osoite kieltämättä noudattaa urheilutapahtumien harrastamaa kaavaa.

    Reaalimaailman ongelma on, että vapaita, hyviä ja kuvaavia www-osoitteita on koko ajan vähemmän. Toisaalta, onko kuvaava osoite aina paras? http://www.helsinginmaailmanmestaruuskisat2005.fi? Olisiko kaava: http://www.helsinki2005.fi/mm-kisat/ tai http://www.mm-kisat.helsinki2005.fi parempi? Jos olisi, pitäisikö ottaa huomioon muutkin kielet, jolloin olisimme aikamoisen osoitehallinnan syövereissä?

    Kompromisseja on tehtävä.

Kommentointi on suljettu.