Esteettömyyttä vaivattomasti

Kirjoittanut . Liittyy aiheisiin , , , , , , , , , .

Arkistomatskua

Otathan huomioon, että tämä on yli 9 vuotta vanha artikkeli, joten sisältö ei ole välttämättä ihan ajan tasalla. Olin artikkelin kirjoittamishetkellä 21-vuotias.

Suomessa on sokeita tai näkövammaisia kymmeniä tuhansia. Internet kuuluu kaikille, myös aistirajoitteisille, siksi on tärkeää kiinnittää huomiota esteettömyyteen. Rollemaa ei ole kaikista esteetön sivu, mutta pyrin kehittämään esteettömyystekniikoita mahdollisimman paljon eteenpäin. Aika ei vain aina tahdo riittää. Tässä merkinnässä kuitenkin kerron esteettömän websivun perusperiaatteet.

  1. Grafiikka keskittyy pitkälti tai mieluiten täysin CSS:ään. Graafiset elementit on hyvä jättää täysin pois html-koodista (tietenkin img-kuvia lukuunottamatta), sillä sokeille ne ovat yhtä tyhjän kanssa. Img-tagit, eli esimerkiksi blogitekstien välissä olevat kuvat on kuvattava alt-tageilla, jotta sokea tietää mitä kuvassa on.

    Jos altia ei ole määritetty, puheohjelma lukee nettisivua esimerkiksi seuraavasti:

    Kävimme lapsemme kanssa ulkona kävelyllä, ks. kuva: -määrittämätön kuva!-

    , sen sijaan että se lukisi:

    Kävimme lapsemme kanssa ulkona kävelyllä, ks. kuva: Kuvassa lapseni on sylissäni, minä seison sininen kokovartalohaalari lapin Ylläs-rinteellä hymyssä suin!

    Näin sokea tietää heti mistä on kyse. Itselläni usein unohtuu laittaa alt-tagit, mutta pyrin parantamaan tapani.

    Miltä sivustosi näyttää ilman tyylimäärittelyjä? Kokonaisuuden pitäisi olla selkeä. Ensimmäisenä sivuston otsikko h1:lla määritettynä, sitten mahdollinen navigointi listoitettuna, jonka jälkeen sisältö selkeästi jäsenneltynä. Minun pitäisi hieman korjailla Rollemaan jäsentelyjä, sillä esimerkiksi EEE-logon ei kuulu ”näkyvän” ensimmäisenä ilman tyylejä. Mutta näin perusperiaatteessa olen tottunut pitämään Rollemaan melko selkeänä kokonaisuutena.

  2. Media. Tekstitykset, selitteet ja infot ovat kaiken A ja O.
  3. Skripteihin vaihtoehtoja. Kaikki apuvälineet eivät tue esimerkiksi javascriptiä. Silloin on hyvä käyttää noscript-tagia, joka näyttää vaihtoehtoista sisältöä scriptin sijaan. Näin jälleen näkörajoitteiset tietävät missä mennään.
  4. Selkeä ulkoasu. Näkörajoitteisille tärkeää on, että ulkoasulla on hyvä kontrasti. Rollemaassa kontrasti on melko huono, sillä olen alusta asti pyrkinyt tekemään taiteellista ja hienoa – luettavuudesta viis. Mutta kuten jo aiemminkin sanoin, olen kehittämässä esteettömyyttä eteenpäin. Tuossa ylhäällä on jo tekstin suurennus/kirkastus-nappula, jolla tekstiä saa vähän paremmin näkymään. Tulossa on myös näkövammaisille suunnattu tyylitiedosto, joka helpottaa selaamista ja parantaa lukukokemusta huomattavasti.
  5. Järkeenkäyvät linkit. Tee linkkiselitteistä järkeviä. Pahimpia ovat linkit, joissa lukee ”klikkaa tästä” ilman title-tagia. Sokealle nämä aiheuttavat suurta hämmennystä.
  6. Koodaa mahdollisimman virheettömästi ja järkevästi. Lukuohjelma tai apuväline ymmärtää paremmin validia koodia kuin täysin virheellistä koodia ilman dokumenttityyppiä. Virheetön koodi toimii mahdollisimman hyvin joka laitteessa.

Siinäpä se näin pähkinänkuoressa. Sallikaatte myös aistirajoitteisille Internet! Tasa-arvoa ja elämän reiluutta eteenpäin.

Kuva Roni Laukkarisesta

Roni Laukkarinen

Kirjoittaja on 30-vuotias elämäntapanörtti, ammatiltaan yrittäjä itse perustamassaan digitoimistossa ja SaaS-palvelua kehittävässä startupissa, verkkosivujen tekijä, sosiaalisen median asiantuntija ja koukussa kirjoittamiseen 5-vuotiaasta. Suurin osa päivästä kuluu hevimusiikin ja koodaamisen parissa, mutta arkea piristyttää myös vaimo ja kaksi lasta. Twitter, leffat ja erikoisoluet lähellä sydäntä.

Lue Rollesta lisää

Reaktiot

Vaadittu kenttä

 

4 kommenttia

  1. Ronja

    Oikeastaan puheohjelmat eivät sekoa frameista – päinvastoin. En tiedä, mistä tuo käsitys on jäänyt ihmisille, kun olen sitä ennenkin kuullut. Minä ainakin tykkään, jos sivuilla on käytetty frameja fiksusti, silloin selailukin helpottuu, kun saatan siirtyä puhesyntikan kanssa framesta toiseen. Tabletkin toimivat, kunhan niissä ei ole liian montaa pystysaraketta. Liian monta menee jo jossain viidessä. Esimerkiksi lukujärjestykseni netissä on aika mahdotonta luettavaa – joka tunnin kohdalla kun ei ole aina tuntia ja puhesyntikka lukee jokaisen rivin vuorotellen, siis esim. joka päivän ensimmäisen tunnin ja jos niitä tunteja onkin siellä vaan kolme, pitää arvailla, minä päivänä ei ole ensimmäistä tuntia.

    Mutta totta on, ettei sivusi ole mikään sokkoystävällisin. ;) Sen käyttö kuitenkin onnistuu. Se minua itseäni vaan harmittaa, että noissa ”pikapäivityksissä” (en tiedä tähän hätään, mikä niiden nimitys oikeasti on) ei ole otsikkoa. Tai siis ne eivät ole koodattu otsikoina (h1, h2, h3 jne…), koska muuten olisi kätevä pomppia merkinnästä seuraavaan otsikoittain, mutta sitten sieltä jää noita pikku juttuja välistä.

  2. rolle

    Kiitos kommentistasi Ronja. Puutuit ainoaan kohtaan, josta en ollut varma :-) päätin poistaa kyseisen epähuomion. Aivan, mikrobloggaukset ovat ”otsikottomia”. Mutta kuten sanoin, sivustoni esteetöintiprojekti on kesken. Jossain vaiheessa tulette saamaan lähes täysin esteettömän Rollemaan.

  3. Esteettömämpi teema | Pomppulinna

    […] on päivän sana webissä ja tästä aiheesta kannattaakin lukea Rollemaan blogimerkintä “Esteettömyyttä vaivattomasti“. Yhä useammin näkee mureilla flash-animaatioilla mehustettuja sivustoja, jotka vaativat […]

  4. Internet kuuluu kaikille: Rollemaasta esteetön versio | Rollemaa.org

    […] vuosi sitten kirjoitin viimeksi esteettömyystekniikoista, ja nyt on aika päivittää tilanne ajan tasalle. Olen edelleen sitä mieltä että Internet […]