Saavutettavuus ja suomalaispuolueiden sivut

Kirjoittaja: Yoji Hirabayashi. Tämä on muokattu versio artikkelista, joka on julkaistu aiemmin Tämä on minun! blogissa 9.6.2004.

Ennenkuin jatkat lukemista, tutustu ensin artikkelissa Suomalaispuolueiden sivut syynissä raportoituihin testeihin ja niiden tuloksiin. Tässä artikkelissa käsitellään samoja sivustoja esteettömyyden kannalta.


Sisältö

Sivustot jotka testattiin

Alunperin tarkoituksenani oli testata kaikki sivut WCAG:n (Web Content Accessibility Guidelines) määrittelemien (minimi)suositusten pohjalta, Taso 1, ja tarkistaa sivustojen perussaavutettavuus. Se olisi kuitenkin vaatinut päivien työn, joten tarjoilen yksinkertaistetun version. Artikkelin pyrkimyksenä onkin vain valistaa ja ohjata esimerkein välttämään erilaiset esteet tiellä kohti saavutettavampaa web-julkaisua.

Puolueet kertovat olevansa jokaisen kansalaisen asialla. Tämä käsittääkseni tarkoittaa myös mm. näkövammaisia, joita pelkästään Näkövammarekisterin vuosikirjan 2002 mukaan oli sen julkaisuhetkellä Suomessa vähintään 80 000. Näkövammaisten lisäksi muita esteellisiä käyttäjäryhmiä ovat henkilöt, joilla on liikunnallisia ja motorisia ongelmia, kognitiivisia haittoja tai kuulovamma. Esteetön web-suunnittelu parantaa usein kaikkien käyttäjäryhmien vierailukokemusta, ei vain erilaisista rajoitteista kärsivien.

ALTittomat kuvat ja kuvalinkit

Ensimmäisenä tarkistin käytettyjen kuvien ja grafiikan merkkauksen. Masentavaa. Yksikään testatuista puoluesivustoista ei läpäissyt W3C:n saavutettavuus-minimisuosituksia (taso 1). Yleisin puute oli kuvista puuttuva alt-attribuutti, (informatiivinen) teksti, joka näytetään mikäli kuvia ei syystä tai toisesta ladata. Pahimmillaan informatiivisessa kuvassa vaihtoehtoisena tekstinä käytetään geneeristä ”kuva”-sanaa, se puuttui tai oli tyhjä.

Keskusta.fi ja puutteelliset alt-tekstit Ohessa kuva Keskustapuolueen etusivusta merkkipohjaisella links-selaimella katsottuna, jossa ongelma esittäytyy ikävällä tavalla. Kyseessä on sivun navigoinnissa käytetty kuva, josta puuttuu vaihtoehtoinen teksti. Tätä esiintyi jokaisella testatulla sivulla, puolueesta riippumatta.

Koristeelliset kuvat (vailla informaatio-arvoa) tulisikin esittää CSS:n avulla (mikäli mahdollista), jolloin niistä ei aiheudu ylimääräistä haittaakaan.

Rakenne

Toinen silmiinpistävä puute pinnan alla oli lähes täydellinen rakenteen puute. Tämä vaikeuttaa usein erityisesti sivuston sisällön kartoittamista ja haettavan tiedon saantia. Yksinkertaisin tapa korjata asia on luoda dokumentit rakenteellisiksi. Otsikot myös merkataan otsikoiksi (käytössä kuusi tasoa h1…h6), kappaleet kappaleiksi (p), listat listoina (ul, ol) ja taulukkomuotoinen data luonnollisesti taulukoihin (ja merkkaamalla se hyvin). Roger Johansson on kirjoittanut yksityiskohtaisen artikkelin aiheesta [en]. Eriasteisia tekstin korostuksia varten käytössä on myös em(phasis) ja strong.

Looginen merkkaus ja rakenteellisuus yleensä takaavat sen, että sivustoa on miellyttävä käyttää myös vanhemmilla ja erikoisemmilla selaimilla. CSS:n avulla voidaan toteuttaa myös visuaalisesti näyttäviä web-sivuja.

Eräs yleistymään päin oleva tapa (loogisen rakenteen omaavissa dokumenteissa) on ns. skip navi-linkki dokumentin alussa, jonka avulla voidaan hypätä suoraan siihen tärkeimpään eli sisältöön. Tämä helpottaa myös pienillä päätelaitteilla (mm. PDA ja matkapuhelimet) sivustolla vierailevan selaajan elämää.

Liberaalien sivuilta löytyi yritystä, mutta yritys on jäänyt vain yritykseksi. Kehysvetoisia sivustoja en edes tarkistanut, koska kehykset itsessään ovat niin ongelmallisia.

Kytke CSS pois käytöstä ja suuntaa selain Kristillisdemokraattien sivuille.

Kehykset

Kehysten käyttö on vähenemässä, mutta sitä ei vertailua tehdessä uskoisi. Esimerkiksi Suomen Kansan Sinivalkoiset ja Suomen Kristillisdemokraatit turvautuvat niiden käyttöön sivustollaan. Yksi kuva kertoo enemmän kuin tuhat sanaa, joten annan kuvan puhua puolestani [aukeaa uuteen ikkunaan]:

Suomen Kristillisdemokraattien sivuilla on huonosti nimetyt kehykset

Myös Suomen Kommunistinen Puolue, ja Perussuomalaiset käyttävät kehyksiä ja vastaavia ongelmia esiintyy myös niillä. Missä noframes ja hyvin nimetyt kehykset?

Jukka Korpelan Miksi kehykset sopivat Webiin huonosti.

Paremmat taulukot

Taulukot. Taulukot, taulukot, taulukot. Niitähän riitti. Koska niiden käytöstä web-taitossa kiistellään ainakin seuraavat 5 vuotta, ehdotankin vain yksinkertaisempaa ja paremmin saavutettavaa tapaa:

  • Merkkaa datataulukko hyvin käyttämällä asianmukaisia tageja ja attribuutteja (summary, caption, th, scope jne). Jos taulukkoa käytetään pelkästään asetteluun, älä käytä esteettömyyttä parantavia ominaisuuksia.
  • Tutustu Roger Johanssonin erinomaiseen ja kattavaan oppaaseen taulukoista Bring on the Tables [en].
  • Pidä taulukko kevyenä välttämällä sisäkkäisiä taulukoita (niille ei pitäisi olla tarvetta).
  • Tuota taulukon sisältö lineaarisesti: Creating Accessible Tables: Content Linearization [en].
  • Siirrä esitysasun määritykset CSS-tiedostoon.

Absoluuttiset fonttikoot

Useilla sivuilla oli kirjasimen koko asetettu absoluuttisina mittayksikköinä. Tämä aiheuttaa ongelmia varsinkin heikkonäköisille henkilöille, jotka ovat riippuvaisia Microsoftin Internet Explorer-selaimesta. Kyseisiä mittayksiköitä käytettäessä se ei anna käyttäjän suurentaa kirjainkokoa. 11px:n (jopa 10px:n) arial-fontti on liian pieni leipätekstin lukemiseen.

Pyri välttämään leipätekstissä ja muussa tärkeässä tekstissä absoluuttisia mittayksiköitä. Käytä sen sijaan suhteellisia mittoja (esim em ja prosentit).

Mitä jäi käteen?

Ilkeämpi henkilö saattaisi jopa väittää, että puolueet ovat unohtaneet ryhmän äänestäjiänsä, valikoivat heidät vaikeuttamalla ja jopa estämällä sivuille pääsyn ja tiedonhaun muilta kuin etukäteen valitsemaltaan käyttäjäryhmältä. Koska me emme täällä ole ilkeitä, tyydymme vain valistamaan ja hellästi ohjaamaan kohti vähemmän esteettömiä sivuja.

Lopuksi, vaikka vastuu saavutettavuudesta kuuluu yhtälailla palvelun tilaajalle kuin palvelun toteuttajalle, olen henkilökohtaisesti sitä mieltä, että palvelun toteuttajan tulee pitää huoli siitä, että yksinkertaiset perusasiat ovat kunnossa. Ilman lisähintaa.

Lähteet

Kirjoituksen apuna on käytetty mm. seuraavia lähteitä ja resursseja: