Saavutettava.fi

Kirjoittajat Mikko Kekki ja Yoji Hirabayashi ovat perustuslain mukaan yleisesti ja yhtäläisesti äänioikeutettuja.

---

Presidenttiehdokkaiden kampanjasivuja tutkivan artikkelisarjan toisessa osassa ruoditaan Timo Soinin, Heidi Hautalan ja Henrik Laxin vaalisivustoja. Tutkimusperusteet ovat edelleen samat kuin sarjan ensimmäisessä osassa, johon kannattaa tutustua ennen tämän jutun lukemista. Sarja jatkuu edelleen kolmannessa osassa.

Lisäyksenä edellisessä osassa mainittuihin kriteereihin pitää mainita pari asiaa, joita ei arvostella. Sivuja tutkailtaessa pyritään olemaan ottamatta kantaa niiden esteettisiin tai sisällöllisiin ansioihin tai puutteisiin, jotka otetaan huomioon ainoastaan, jos ne jotenkin erityisesti vaikeuttavat sivujen sisällön saavuttamista.

Tälläkään kertaa ei puututa aivan kaikkiin ongelmiin tai puutteisiin. Lukijan urakan helpottamiseksi käsiteltävistä asioista on pitänyt tehdä raakaa karsintaa. Lisähavainnot ja vastaväitteet voi jättää tämän artikkelin kommenttiosastolle.

Timo Soini, 4, Perussuomalaiset

Kampanjasivu: www.perussuomalaiset.fi/presidenttiehdokas/timosoini/

Ensimmäiseksi on mainittava asia, jolla ei suoranaisesti ole tekemistä saavutettavuuden kanssa. Timo Soinin vaalisivusto on tehty Microsoftin Frontpage 5.0 -ohjelmalla, joka on hankala työkalu asiantuntemattomissa käsissä. Ohjelmalla saattaa saada aikaiseksi periaatteessa käypäisen näköistä jälkeä, mutta jos haluaa seurata web-standardeja ja tuottaa saavutettavia sivuja, voi tehtävä olla ylivoimainen.

Soinin sivusto koostuu kehyksistä, joiden käyttöön liittyy monia ongelmia. Suurin osa niistä on pulmia, jotka ajavat sivujen kohteen, tässä tapauksessa ehdokkaan, asiaa väärään suuntaan.

Kehykset saattavat vieroittaa hakukoneita sivuilta ja estää niitä indeksoimasta sivuja oikein. Se vähentää kävijämääriä. Kehykset hankaloittavat myös kävijöiden elämää, koska kirjanmerkkien tekeminen, tulostaminen ja linkin lähettäminen sähköpostilla ystävälle vaikeutuvat. Kaikki vierailijat eivät käytä graafisia, kehyksiä tukevia selaimia, syystä tai toisesta. Heidät jätetään tässä tapauksessa kylmästi sivujen ulkopuolelle.

HTML-validaattori löytää etusivusta 16 virhettä, joka on suhteellisen vähän. Syytä tyytyväisyyteen ei kuitenkaan ole, koska validaattori tarkistaa vain kehyssivun eikä varsinaisia sisältösivuja. Navigointisivusta löytyy 16 virhettä ja ensimmäisestä varsinaisesta sisältösivusta 10. Sisältösivun sisällä on tosin vielä yksi kehys (iframe), jonka sisällä on varsinainen sisältötekstisivu. Siltäkin löytyy vielä kaksi virhettä. CSS-validaattori löytää niin monta virhettä, että jatkamme muiden asioiden tarkastelulla.

Dokumenttityyppi on määritelty joillakin sivuilla. Dokumenttityypin määritteleminen kertoo, mitä versiota HTML:sta tai XHTML:sta sivulla käytetään. Modernit selaimet käyttävät tätä tietoa valitessaan näyttävätkö sivun yhteensopivuus- vai standarditilassa. Jälkimmäisessä tapauksessa sivu aukeaa yleensä nopeammin.

Sivujen tekijän kannalta olisi tärkeätä, että sivut näytetään standarditilassa, koska näin tekijän on helpompi ennakoida, miltä sivut näyttävät eri selaimissa. Selaimet tapaavat näet tulkita virheellistä koodia eri tavoin. Oikein kirjoitettua koodia selainten pitäisi tulkita samalla tavalla. Kiusallista kyllä, näin hyvin asiat eivät ole, mutta se on eri artikkelin aihe.

Soinin sivuilla ei ole käytetty HTML:ia suositusten mukaisesti, joten sivuilla ei ole semanttista rakennetta. Jos sivulla on järkevä rakenne, on sen ulkoasun hallinta CSS:lla helpompaa. Se myös helpottaa sivujen käyttöä sellaisille vierailijoille, jotka eivät käytä CSS:ia sivuja selatessaan. Tällaisia ovat muun muassa tekstiselaimien käyttäjät.

Sivuilla käytetään kuvia ilman alt-attribuuttia eli tekstiä, joka näytetään, jos kuvia ei ladata. Kun kuvia ei ladata ja vaihtoehtoista tekstiä ei ole, näkyy kuvan paikalla vain merkki, että tähän kohtaan tulisi kuva, jos se ladattaisiin. Siksi edes sivun otsikkokuvaan pitäisi lisätä alt-attribuutti ja siihen järkevä kuvan selite. Ilman sitä ei satunnainen ilman kuvia surffaava näe heti, mille sivulle hän on mahtanut päätyä.

Jos haluaa etsiä jotain hyvää Soinin sivuista, niin sivujen kieli, suomi, on määritelty ainakin joillakin sivuilla, ei kuitenkaan kaikilla.

Heidi Hautala, 5, Vihreä liitto

Kampanjasivu: www.heidi2006.fi

Heidi Hautalan kampanjasivusto on jotakuinkin saavutettava. Sivujen sisältö on saavutettavissa ilman kuvia, Javascriptiä tai tyylitiedostoja.

Sivuilla on semanttinen rakenne. Otsikot on merkitty otsikoiksi, tekstikappaleet kappaleiksi, listat listoiksi ja niin edelleen. Sivun HTML on kevyttä ja melko tarkoituksenmukaista.

Sivuston ulkoasua hallitaan CSS:lla. Tämä on järkevää, koska näin saadaan HTML-sivun koko minimoitua, mikä nopeuttaa sivun latautumista. CSS-taitossa kokonaisen sivuston ulkoasu on helposti ja keskitetysti hallittavissa, koska muutoksia pitää (optimitilanteessa) tehdä vain yhteen CSS-tiedostoon.

HTML-validaattori toteaa etusivun virheettömäksi ja dokumenttityypiksi ilmoitetun HTML 4.01 Strictin toteutuneeksi. Myöskään CSS-validaattori ei löydä virheitä CSS:sta. Muutamia varoituksia validaattori tosin antaa värien käytöstä.

Moitteita voi antaa värivalinnoista. Linkkiväriksi on määritelty vaaleanvihreä ja hover-väriksi, joka näkyy, kun kursori siirretään linkin päälle, vielä hieman vaalempi vihreä. Linkkien erottaminen voi olla hankalaa monellekin käyttäjälle.

Myös leipätekstin erottaminen oletuskoossaan voi olla vaikeata heikkonäköisille. Peruskoko on jo pienehkö, mutta sivuilla käytetään siellä täällä vielä entisestään pienennettyä tekstikokoa, jonka kanssa tarkkanäköiselläkin voi olla vaikeuksia. Onneksi moderneissa selaimissa voi kasvattaa fonttikokoa helposti, eikä se tuota lisäongelmia esimerkiksi taiton toimivuudelle. Toisinaan sivuja kehitetään niin joustamattomiksi, että kirjasinkoon muuttaminen rikkoo näkymän.

Hautalasta tarjotaan informaatiota kolmella kielellä: suomeksi, ruotsiksi ja venäjäksi. 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 suomea lukee venäjäksi, kuulostaa se erikoiselta, mutta ei välttämättä ymmärrettävältä. Venäjänkielinen sivu on sijoitettu mainostoimiston sivujen alle. Syytä tähän ei tätä kirjoitettaessa keksitty.

Heidi Hautalan puheet, kirjoitukset ja tiedotteet tarjotaan sekalaisesti joko käsittelyssä olevalta kampanjasivustolta tai Hautalan omilta sivuilta. Tämä saattaa hämmentää käyttäjiä, jotka helposti eksyvät toiselle sivustolle siirryttäessä eivätkä välttämättä löydä enää takaisin.

Erikoinen ratkaisu on Heidi Hautalan blogi, joka on Livejournal-palvelussa. Blogi on naamioitu emosivuston näköiseksi, mikä saattaa hämätä vierailijoita ja vähentää mahdollisesti uskottavuutta.

Vähiten Hautalan sivustolla on panostettu lomakkeitten muotoiluun. Käyttämättä on jäänyt saavutettavuutta edistäviä elementtejä ja niiden attribuutteja. Esimerkiksi label-elementin puute korostuu valintalaatikoissa. Jos sitä käytettäisiin tehokkaasti, olisi käyttäjällä enemmän klikkauspinta-alaa ja oikeaan laatikkoon osuminen helpottuisi.

Henrik Lax, 6, Ruotsalainen kansanpuolue

Kampanjasivusto: www.henriklax.nu

Henrik Laxin sivustolla käytetään intro-sivua, jolta käyttäjä voi valita, millä kielellä tutustuu ehdokkaaseen. Sivulla on vain yksi kuva, johon on kuvakartalla määritelty linkit kieliversioihin. Kuvalla ei ole alt-attribuuttia eli vaihtoehtoista tekstiä. Ilman kuvia selaava näkee, jos ylipäätään näkee, vain kuvan paikan ja voi vain arvailla, mitä nyt pitäisi tehdä.

Henrik Laxin sivusto tarjotaan neljällä eri kielellä. XHTML:sta sitä ei huomaa, koska koodissa kaikkien versioiden kieleksi määritellään englanti. Tämä on ongelmallista esimerkiksi sellaisille puheselaimille, jotka yrittävät valita lukukielen HTML:n ilmoituksen mukaan. Jos ruotsia lukee englanniksi, kuulostaa se erikoiselta, mutta ei välttämättä ymmärrettävältä.

Kuvilla ei ole alt-attribuutteja, joten ilman kuvia (tai vaihtoehtoisten tekstien varassa) selaavien sivuilla vierailu hankaloituu ja pahimmillaan asia jää saavuttamatta. Näin käy esimerkiksi etusivulla, jossa suuri osa tekstisisältöä on toteutettu kuvina. Tämä toimii myös tehokkaana keinona estää käyttäjää suurentamasta kirjasimen kokoa.

Sivustolla on omintakeinen tapa kertoa Laxin tulevista radioesiintymisistä ja äänestyspäivistä. Näistä asioista kertovat tekstit on nimittäin tehty kuviksi. Kuville taas ei ole kirjoitettu alt-attribuutteja ja miksi olisikaan, koska silloinhan tekstit olisi voinut kirjoittaa suoraan sivuun teksteinä eikä kuvia olisi tarvinnut tehdä. Hämmentävää.

Yhden pahimmista ongelmista sivustolla aiheuttavat useat (suomenkielisellä etusivulla neljä) käytetyt kuvakartat. Kun vaihtoehtoista tekstiä ei tarjota, joutuu tekstiselainta käyttävä arvailemaan ja kokeilemaan, mitä kuvakarttojen takaa mahtaa löytyä.

Sivujen dokumenttityypiksi ilmoitetaan XHTML 1.0 Transitional, joka ei toteudu. XHTML-validaattori ilmoittaa 26 virheestä. CSS-validaattori antaa ainoastaan parikymmentä varoitusta, mikä on hyvä saavutus.

Sivusto on toteutettu perinteisellä, monipolvisella taulukkotaitolla. Taulukkotaitolla tehtyjen sivujen tiedostokoot ovat yleensä huomattavasti suuremmat kuin CSS-taitolla toteutettujen. Mitä suurempi tiedosto, sitä hitaampi lataus. Myös taulukkojen semanttisesta merkityksestä voitaisiin keskustella. Onko HTML:n suositusten mukaista ja kieliopillisesti oikein käyttää taulukoita sivun taittamiseen?

Sivujen otsikoita ei ole merkitty otsikoiksi vaan kaikki teksti on â?? sinänsä oikein â?? sijoitettu kappale-elementteihin, joille on määritelty luokat käyttötilanteen mukaan. Otsikot on muotoiltu otsikon näköisiksi CSS:lla. Toisin sanoen, tälläkään sivustolla ei voi puhua varsinaisesta rakenteesta.

Lax-materiaalia voi tilata lomakkeella, joka on taitettu osittain taulukolla. Lomakkeen saavutettavuutta parantavia elementtejä ja niiden attribuutteja on käytetty kitsaasti ja tyhjennä-painike on isompi kuin lähetä-nappi. Painikkeista erehtyminen tärisevällä kädellä on kovin helppoa.

Erikoista mainittavaa löytyy lomakkeesta, jonka avulla voi ilmoittautua Laxin tukijoukkoihin. Lomakkeeseen voi antaa itsestään erilaisia henkilötietoja ja valintalaatikolla ilmoittaa sukupuolensa. Käyttäjä voi valita onko mies, nainen vai molemmat. XHTML-koodissa mies-vaihtoehdolle annetaan oletusarvo: value="VALITTU".

---

Lue myös artikkelisarjan ensimmäinen ja kolmas osa.