Presidenttiehdokkaiden kampanjasivut – osa 3

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.

4 comments:

  1. Ilmeisesti kritiikki on mennyt perille, ja mattivanhanen.netin otsikkokuva on nyt 32-kiloinen JPEG 🙂

  2. Hyvä. Näin käy, kun kirjoittaessa pohtii liikaa ja lykkää tekstin julkaisua. Tilanteet vaihtuvat nopeasti, mikä on internetin etu. Virheet voi korjata ja mikään ei ole ikuista.

  3. Mielenkiintoinen juttusarja kaikenkaikkiaan. Huomasinpa oppivani taas vähän lisää näitä lukiessani. Ei sitä tule itselläkään aina kaikkea huomioitua, mutta sattuu sitä samaa näköjään isommissakin piireissä. 🙂

    Kun kerran ensimmäistä kommenttiani tänne kirjoitan, niin täytyy tässä samalla kehua koko sivustoa. On hyvä pitää melua web-sivujen saavutettavuudesta ja käytettävyydestä. Kovin vähän niihin silti panostetaan.

  4. Kiitos palautteestasi! Hyvä, jos sivuista on ollut sinulle hyötyä. Kerrohan jos kaipaat lisää tietoa jostain erityisestä aiheesta, niin katsotaan mitä voimme tehdä.

Kommentointi on suljettu.