Kirjoittaja Mikko Kekki (sit.) on vasemmistokristillinen viherporvari.
Suomen presidentinvaalien ensimmäisen kierroksen äänestyspäivä on 15.1.2006. Ehdokkaat ovat saaneet ehdokasnumeronsa, joten kampanja käy jo kuumana. Tulevan kuukauden aikana voi olla hankala olla törmäämättä ehdokkaisiin tai heidän tukijoihinsa kadulla tai mediassa.
Katsastamme nyt, miten ehdokkaitten kampanjasivustot pärjäävät web-standardeissa ja saavutettavuudessa. Kantaaottamattomasti istuvan presidentin vaalilausetta lainatakseni: vaaleissa valitaan koko kansan presidenttiä, joten ehdokkaiden sivustojen pitäisi olla optimitilanteessa kenen tahansa äänestäjän saavutettavissa millä tahansa päätelaitteella.
Kahdeksan ehdokkaan sivustot tutkittiin ehdokasnumeroinnin osoittamassa järjestyksessä ja tulokset julkaistaan kolmessa osassa. Ensimmäinen juttu eli tämä lukemasi käy läpi Bjarne Kalliksen ja Sauli Niinistön sivustot. Kakkososassa tutkaillaan Timo Soinin, Heidi Hautalan ja Henrik Laxin sivuja ja kolmannessa osassa ruoditaan Matti Vanhasen, Arto Lahden ja Tarja Halosen kampanjasivustoja.
Epätieteellisessä tutkimuksessa käytettiin pikatarkistusmetodia. Se tarkoittaa, että sivujen HTML:n ja CSS:n mahdolliset virheet ja ongelmakohdat tutkittiin ja sivujen saavutettavuus arvioitiin pintapuolisesti. Jälkimmäinen tehtiin silmämääräisesti ja tutkittiin muun muassa sitä, miten sivut toimivat ilman Javascriptiä ja kuvia. Tällä tavalla yritettiin samaistua muun muassa näkövammaisten tapaan selata sivuja.
Tässä artikkelissa ei pyritä tyhjentävään saavutettavuustutkimukseen, vaan raapaistaan ainoastaan pintaa ja yritetään tuoda esiin ilmeisimpiä ongelmakohtia tai ilon aiheita luettelomaisesti sitä mukaa, kun ne on huomattu. Tutkimuksessa ei ole pyrittykään tasapuolisuuteen tai vertailuun, vaan sivuja on kahlattu yksittäistapauksina. Joistakin sivuista on enemmän sanottavaa kuin toisista, mutta nekin sanomiset on tässä kirjoituksessa yritetty selittää ja esittää esimerkkejä, miksi jokin asia on hyvä ja jokin toinen ei niin hyvä.
Saavutettavuuden monitahoisuuden vuoksi asioita voi tarkastella monella eri tapaa. Siksi tähänkin artikkeliin voi jättää kommentteja ja huomautuksia.
Bjarne Kallis, 2, Suomen Kristillisdemokraatit
Kampanjasivu: www.bjarnekallis.net
Bjarne Kalliksen sivut on tehty perinteisellä taulukkotaitolla dokumenttityypillä HTML 4 Transitional. Dokumenttityypin merkinnässä on pieni virhe, joten HTML-validaattori ei tunnista sitä. Samoin saattaa käydä joillekin selaimille, jotka asettavat näillä sivuilla itsensä yhteensopivuustilaan, joka saattaa muun muassa hidastaa sivujen latautumista.
Sivustossa käytetään niin sanottua intro-sivua, josta käyttäjä voi valita haluaako lukea ehdokkaasta suomeksi vai ruotsiksi. Kun intro-sivun avaa ilman kuvia, ei siinä näy mitään.
Sivujen kieli on unohtunut merkitä koodiin kummassakin kieliversiossa. Tämä on ongelmallista esimerkiksi sellaisille puheselaimille, jotka yrittävät valita lukukielen HTML:n ilmoituksen mukaan. Jos suomea lukee englanniksi, kuulostaa se erikoiselta.
Hyvää sivujen HTML:ssa on, että otsikoita on merkitty oikein otsikkotageilla. Alasivujen pääotsikot ilmoitettu h1:llä. Myös tekstikappaleet ovat suurimmaksi osaksi p– eli kappale-elementeissä. Jonkinlainen semanttinen rakenne alasivuilla siis on, mitä ei voi sanoa etusivusta.
Sivu, jolla on järkevä semanttinen rakenne, käyttää HTML:n elementtejä ja attribuutteja siihen, mihin ne on tarkoitettu. Otsikkoelementeillä merkitään otsikot, kappale-elementeillä tekstikappaleet, lista-elementeillä listat, taulukko-elementeillä taulukot ja niin edelleen. Tämä on tärkeää varsinkin silloin, kun selataan sivua ilman tyylitiedostoa. Näin otsikot erottuvat leipätekstistä ja listat näkyvät listoina, ei vaikkapa yhtenäisenä tekstipötkönä.
HTML-validaattori löytää suomenkielisestä etusivusta 32 virhettä, joista osa viittaa kuvista puuttuviin alt-attribuutteihin. Varsinainen etusivukin luottaa kuviin ilman alt-attribuuttia, joten ilman kuvia sivuja tarkastellessa ei voi olla varma, millä sivulla mahdetaan liikuskella. CSS-validaattori ilmoittaa kuusi virhettä ja useita kymmeniä varoituksia, joista suurin osa varoittaa, että taustaväriä ei ole ilmoitettu.
Virheellinen koodi saattaa hidastaa sivun latausta, kun selain joutuu arvailemaan, miten sivu olisi tarkoitus näyttää. Virheet saattavat aiheuttaa yllätyksiä erilaisilla laitealustoilla ja selaimilla. Yhdelle selaimelle tehty ominaisuus voi olla toiselle selaimelle virhe. Siksi on kehitetty standardi, jota seuraamalla pystyttäisiin ongelmatilanteet ennakoimaan paremmin.
Navigoinnin hover-efekti on toteutettu Javascriptillä, joten jos käyttäjän selaimessa ei ole Javascript päällä, ei tätä käytettävyyttä lisäävää efektiä näy. Aktiivinen sivu on sen sijaan osoitettu selkeästi vaihtuvalla taustavärillä.
Sivujen kirjasin on asetettu kiinteäksi 12 pikseliin. Tämä saattaa vaikeuttaa muun muassa Internet Explorerilla sivuja katsovien heikkonäköisten käyttäjien tekstin näkemistä, koska kirjasimen nopea kasvattaminen on hankalaa. Päänavigoinnin tekstit ovat kuvia, joten niiden kokoa ei voi muuttaa lainkaan.
Koko sivu on tehty 932 pikselin leveyteen. Erikoiseksi tämän tekee se, että varsinkaan alasivuilla ei sisältöä riitä edes 600 pikseliin. Silti sivun osia työnnetään pienemmältä ruudulta katsovilta piiloon.
Linkkivärinä käytetään pääasiassa haaleata sinistä, mutta joillakin alasivuilla väri onkin musta. Tällaiset linkit erottuvat varsinaisesta tekstistä alleviivauksella ja lihavoinnilla. Samaan aikaan jotkin väliotsikot on merkitty linkkivärillä, vaikka otsikoissa ei linkkejä olekaan. Epäjohdonmukainen värien käyttö hämää käyttäjää ja vaikeuttaa linkkien löytämistä. Navigointia lukuunottamatta tekstin värinä on käytetty mustaa valkoisella taustalla.
Erikoisena yksityiskohtana pitää mainita Kalliksen sivujen osoitteisto. Se on periaatteessa kunnossa ja helposti ymmärrettävä, mutta jostain syystä navigoinnin linkkien kautta alasivuille siirryttäessä osoitteiden loppuun tulee sisällönhallintaohjelmiston käyttämä id-numero, esimerkiksi nettipäiväkirjan osoite on www.bjarnekallis.net/fi/nettipaivakirja/?id=67. Osoitteet toimivat toki ilman id-numeroakin.
Sauli Niinistö, 3, Kansallinen Kokoomus
Kampanjasivu: www.niinisto.net
Sauli Niinistön vaalisivustossa tavoitellaan XHTML 1.0 Transitional-dokumenttityyppiä CSS-taitolla. Taitto kärsii niin sanotusta divitismistä, joka on yleinen ongelma sivuissa, jotka on taitettu CSS:n avulla, mutta ei ole muistettu ottaa huomioon XHTML:n peruskielioppia. Divitismin vaivaamilla sivuilla div-elementtiä käytetään liioitellusti ja väärin tilanteissa, joissa pitäisi käyttää semanttisesti järkevää merkintää.
Käsittelyssä olevalla sivulla navigoinnin merkkaus on hyvä esimerkki divitismistä. Jokainen navigoinnin linkki on omassa lohkossaan eikä listassa. Navigointi on kuitenkin lista linkkejä. Divitismin seurausta on, että tämänkin sivuston alasivuilla on semanttinen rakenne vain osittain.
Etusivu pyrkii visuaaliseen näyttävyyteen, joten se luottaa isoihin kuviin ja Flashiin. Flashia hallitaan Javascriptillä, joten ilman kuvia ja Javascriptiä katsellessa näkyy sivulla paljon tyhjää. Pitää kelata sivua tarpeeksi alas, että löytää jotain sisältöäkin.
XHTML-validaattori ilmoittaa 20 virheestä ja CSS-validaattori antaa useita kymmeniä varoituksia, muttei yhtään varsinaista virhettä. XHTML:iin on kirjoitettu runsaasti Javascriptia, jonka kommentoinnissa on käytetty väliviivarivejä. Tämä aiheuttaa sen, että jotkut validaattorit tulkitsevat väliviivarivit virheellisiksi moninkertaisiksi kommenteiksi.
Etusivun lomakkeen rakenne on yleisestä käytännöstä poikkeava. Sarkainjärjestys ei ole looginen, joten tab-näppäimellä kentästä toiseen pääseminen vaatii tarkkaavaisuutta. Jos lomake rakennetaan tällä tavalla, kannattaisi käyttää tabindex-attribuutteja, joiden avulla sarkaimella kentästä toiseen hyppiminen sujuisi loogisesti ja sujuvasti.
Lomake käyttää input-kentissä name-attribuuttia, vaikka sivulla käytetyn koodin suosituksissa vaaditaan id-attribuuttia. label-elementin for-attribuutin käyttö on nyt turhaa, koska label ei toimi halutulla tavalla. Jos id-attribuuttia olisi käytetty oikein, voisi käyttäjä merkitä valintalaatikon pelkästään labelin tekstiä klikkaamalla. Tämä olisi hyödyllistä varsinkin motorisista ongelmista kärsiville käyttäjille, koska klikkauspinta-alaa olisi enemmän ja oikeaan kohteeseen olisi helpompi osua.
Erityistä saavutettavuuden kannalta ongelmallista mainittavaa ovat videoesitykset ja vaalikiertuekalenteri, jotka on toteutettu flashilla eikä tekstivastinetta tai tekstitystä ole tarjottu. Nyt näkövammaiset eivät saa näistä sivun osasista irti mitään.
Niinistön sivujen osoitteisto on hankalaa. Toki pahempaakin on nähty mutta osoitteen http://www.niinisto.net/index.php?option=com_content&task=view&id=123&Itemid=26 kaltaiset rimpsut olisi voinut siistiä oikeilla asetuksilla jo palvelimella. Lyhyet ja ennen kaikkea helposti ymmärrettävät osoitteet olisivat jo ehdokkaan itsensä kannalta hyvät, koska sellaisiin osoitteisiin on helppo viitata.
Linkkivärinä käytetään tummaa punaista, joka ei erotu kunnolla leipätekstistä, joka on mustaa. Tekstin taustaväri on harmaa. Tämä saattaa aiheuttaa joillekin käyttäjille vaikeuksia nähdä tekstiä varsinkin, koska tekstikoko on pieni ja rivivälit ahtaat, mikä taas hankaloittaa esimerkiksi lukihäiriöisten mahdollisuutta saada tekstistä selvää.
Kirjasin on asetettu kiinteään 12 pikselin kokoon. Uudemmissa selaimissa, kuten Firefoxissa tai Safarissa, fontin kokoa on helppo suurentaa näppäimistöltä. Windowsissa painetaan yhtäaikaa control- ja + -näppäimiä ja Macissa omena- ja + -näppäimiä. Jos näin tekee Niinistön sivuilla, katoaa navigointipalkki jäljettömiin. Tämä johtunee osittain siitä, että taiton leveys on kiinteä 900 pikseliä. Näitä sivuja ei ole tarkoitettu katseltavaksi pienillä ruuduilla tai oletusta isommalla fontilla.
Erikoisuutena mainittakoon Niinistön blogissa sivun alareunan arkistonavigointi, joka on englanniksi.
