PC World listaa 25 karmeinta webbisaittia. Ykkösenä itseoikeutetusti MySpace.com, joka on pääsääntöisesti aivan järkyttävää kuraa. Ei tällaisia pitäisi olla enää 2000-luvulla.
Mike vihjasi, että kommentointi Opera Minillä ei toimi. Jostain syystä ko. mobiiliselain kommenttia lähettäessä lähettääkin ilmeisesti kommentin hakusanana, jolloin tulee herja, että tuloksia ei löydy. Tutkaillaan, missä vika.
Niin. Otsikossa on tämä usein kysytty perimmäinen kysymys, jonka vastaus ei ole 42. Usein hulppeat ideamme torppautuvat saavutettavuuden tieltä ja päinvastoin. Kaikkea ei voi saada, joskus on tehtävä kompromisseja, aiemmista haasteistani huolimatta.
Esteettömyyden edistäminen pohjautuu usein käsitykseen siitä, että yksilöt ovat erilaisia ja erilaisin ominaisuuksin varustettuja, jolloin itse asiassa ympäristö on se osapuoli, johon täytyy vaikuttaa, jotta yksilöt voisivat selviytyä. Tämä tarkoittaa käytännössä sitä, että esim. liikuntakyvyttömyys on yksilön ominaisuus ja huonosti suunniteltu ympäristö aiheuttaa ongelmia tällaiselle yksilölle.
Joillekin asioille ihminen ei kuitenkaan voi mitään. Esimerkiksi lumi ja loska ovat tuskaa pyörätuolia käyttäville, vaikka kulkuväylät olisikin aurattu. Täysin puhtaaksi niitä ei lumesta saa kuin kevätaurinko. Viime kädessä onkin kyse yksilön puuttuvista tai puutteellisista ominaisuuksista ympäröivään maailmaan nähden, vaikka kuinka haluttaisiin ajatella kauniisti. Rajanveto on tietysti äärimmäisen vaikeaa näkemyksestä riippumatta. Jossain menee se keskivertokansalaisen kriteerit täyttävä raja ja jossain taas menee se toinen äärimmäinen raja, jossa ympäristö ei enää voi tulla vastaan.
Myös webbisivuilla moni yksilö törmää ongelmiin. Fontti voi olla liian pientä, värit räikeitä, kontrasti liian suuri tai pieni, sivusto ei skaalaudu lainkaan tai ei edes toimi käyttäjän laitteistolla. Web-suunnittelija voi tehdä hyvinkin paljon edistääkseen saavutettavuutta, mutta jossain se raja kulkee. Kylmä tosiasia on, että äärimmäisen saavutettava ulkoasu ei välttämättä maksavalle asiakkaalle kelpaa, eikä asiakas sellaista aina katso edes tarpeelliseksi, sillä kohderyhmä ratkaisee (ja raha).
Kylmä tosiasia on myös se, että jossain vaiheessa ympäristön eli tekniikan mukautumiskyky yksilön ominaisuuksiin tai puutteisiin nähden tulee vastaan. WWW-sivuja on täysin mahdoton rakentaa saavutettaviksi kaikille yksilöille.
Käyttäjän fyysiset tai motoriset, psyykkiset tai kognitiiviset ominaisuudet eivät välttämättä ole riittävät tietokoneen tai selainohjelman käyttämiseen. Ymmärtääkö käyttäjä, mikä WWW-sivu edes on? Ääripäitä on monenlaisia.
Myös tekniikka tulee jossain vaiheessa vastaan. Tekstinsuurennos toimii useimmissa selaimissa, mutta ei ole täydellinen ratkaisu, sillä se ei suurenna kuvia tai muita sivulla sijaitsevia elementtejä ja rikkoo kiinteiksi rakennetut ulkoasut. Zoom-toiminto auttaa tähän vaivaan, mutta kyseinen toiminto löytyy vain Opera ja Internet Explorer 7 -selaimista.
Myös käyttöjärjestelmissä on sisäänrakennettuna helppokäyttötoimintoja, jotka auttavat heikkonäköisiä navigoimaan. Tällöin esim. monien sivujen tarjoamaan erillistä korkean kontrastin ja suuren fontin zoom-ulkoasua ei edes tarvita, aivan kuten sivuille ei ole tarvetta rakentaa omia navigointipainikkeita sivuhistoriassa eteen tai taakse siirtymiseksi, koska ne ovat selaimissa jo itsessään.
Kiinteä leveys muodostaa ongelmia pienillä näytöillä, mutta kiinteä leveys on myös designia ajatellen hyvin tärkeä ja suunnittelutyötä huomattavasti helpottava tekijä. Ongelmia siis riittää.
Kultaista keskitietä kun tarpoo, niin välttyy pahimmilta ylilyönneiltä, mutta pystyy myös suunnittelemaan ulkoasuja, jotka kelpaavat asiakkaillekin. HTML ja CSS eivät pysty ihmeisiin ja vaikka pystyisivätkin, Internet Explorerin vanhat versiot voivat edelleen paksusti ja ovat vuosia suunnittelijoiden riesana.
Ota huomioon ainakin nämä
- semanttisuus: käytä standardin mukaista koodia järkevästi ja viisaasti
- erota rakenne ja muotoilu toisistaan
- suunnittele rakenne järkevästi
- karsi turha sisältö pois: gprs-käyttäjät ja tekstiselainten käyttäjät eivät ole kiinnostuneita kilometrin mittaisista sivupalkeista vailla oleellista sisältöä
- ota huomioon värisokeat
- tarjoa riittävä kontrasti ja tarpeeksi suuri fontti: riittää useimmille keski-ikäisille mainiosti
- älä korvaa tekstiä kuvalla, mutta jos on aivan pakko (logot, tuotemerkit), niin muista alt-teksti tai piilota varsinainen teksti kuvan alle
- pidä sivun fyysinen koko sopivana: ei liikaa suuria kuvia tai muuta raskasta sisältöä
- ota huomioon käytettävyys
Näille et voi mitään
- vaikka vääntäisit rautalangasta, käyttäjä ei ehkä silti tajua
- et voi tietää, millainen päätelaite tai selain käyttäjällä on, etkä voi testata sivujasi kaikilla erilaisilla laitteilla ja selaimilla
- et tiedä, millainen henkilö sivujasi käyttää
- maksavaa asiakasta ei kannata purra
- tekniikka ei yksinkertaisesti ole tarpeeksi edistynyttä
Jos sivusi toimivat hyvin ja ovat helppokäyttöisiä kännykän selaimella, tekstiselaimella tai ruudunlukijalla, kontrasti riittää, fontti on sopivan kokoinen, eikä tekstisuurennoskaan hajota koko pakettia Internet Explorerin skaalalla, olet jo voiton puolella. Aina plussaa, jos sivusi toimivat uusimilla selaimilla. Tietoturvasyistä vastuu vanhojen selaimien käytöstä pitää olla käyttäjällä itsellään. Jos sitä Netscape nelosta tai IE vitosta edelleen tuetaan hyvin, sitä myös käytetään.
Yksi tärkeä pointti vielä tähän loppuun. Tee oma CSS-tiedosto tulostusta varten. Hyvin monet ihmiset eivät osaa lukea tekstiä ruudulta, vaan tulostavat sen.
Kehitys kehittyy, sanotaan. Web 2.0 on ollut nyt viime aikoina hypen kohteena. Tyypillinen ilmentymä tälle on jokin rasittava moiré -ilmiötä aiheuttava vaaka- tai vinoraidoitus taustakuvassa, “hedelmäinen” värimaisema, wet floor -efekti ja jonkin sortin nappula tai lätkä, jossa lukee BETA.
Pinnan alla tietysti on sitten JavaScriptiä ja PHP:tä ja muuta toiminnallisuutta enemmän kuin perinteisesti. Osa tietysti aivan turhaa ja tiettyihin selainversioihin sidottua.
Ja kun hypeä kerran on, niin kaikki tekee sitä.
Tehdäänpä haaste. Hypätään suoraan kolmepistenollaan tai unohdetaan koko versionumerot, kun ei ne ketään kiinnosta oikeasti ja tehdään skaalautuvia ja saavutettavia leiskoja, käytettävyyttä unohtamatta. Bloggaajat kuulolla?
Tavoitteet:
- Skaalautuvuus selainikkunan mukaan
- Skaalautuvuus fonttikoon mukaan
- Saavutettava myös mobiililaitteilla
- Saavutettava vanhemmilla selaimilla, ei välttämättä identtisellä leiskalla
- Noin yleensäkin saavutettava
- Käytettävyys kunniaan
- Persoonallisuus kunniaan
- Ei mitään kuppaisia BETA-lätkiä tai Under Construction -tietyömieskylttejä
- Joku muu, mikä
Palautetta, risuja, ruusuja, väsynyttä naurua tai hypetykseen kyllästyneiden riemunkiljahduksia kommenttiosastolle, kiitos.
Saavutettava.fi: Mobiililla nettiin.
Tänään tuli huomattua, että mm. Sammon nettipankki ei todellakaan toimi Openwave-kännykkäselaimella. Koko verkkosivujen mobiilitoimivuudestakaan ei voi sanoa kovin montaa positiivista sanaa. Ehkä joskus tulevaisuudessa sitten.
Linkitys on hypertekstidokumenttien ja internetin yksi keskeisimmistä perusominaisuuksista. Ilman linkitysmahdollisuutta tuntemamme internet olisi todennäköisesti hyvin erilainen.
On olemassa monia erilaisia linkkejä. Linkit johtavat tyypillisesti toiseen kohteeseen samalla sivustolla tai kokonaan eri sivustolle, mutta linkit voivat myös käynnistää tiedostonlatauksen tai videonkatselun tai avata uusia ikkunoita.
Tavallisin tapa erottaa linkki muun sisällön seasta on alleviivata se. Myös muunlaisia korostuksia voidaan käyttää. Tästä päästäänkin itse asiaan.
Kuinka voidaan erotella toisistaan sivuston sisäiset ja ulkoiset linkit? Miten pitäisi kohdella tekstipohjaisen selaimen käyttäjää varten tehtyjä apulinkkejä?
Tavallisesti sivun sisäisiä ja ulkoisia linkkejä ei erotella toisistaan millään tavalla. Tämä on mielestäni monilla sivuilla erittäin suuri ongelma. Wikipediassa palvelun sisäiset ja ulkoiset linkit on erotettu toisistaan pienellä sävyerolla. Sisäiset linkit ovat tummemman sinisiä kuin ulkoiset. Monille käyttäjille tämä on jo riittävä ero, toisille taas ei.
Ei ole kuitenkaan olemassa yhtä ja ainoaa oikeaa tapaa. Usein yksittäisen sivun sisäiset linkit näyttäytyvät käyttäjälle tavallisena linkkinä, mutta niitä klikkaamalla ei vaikuta tapahtuvan mitään, sillä sivu ei vierity minnekään. Tämä linkki johtaa toiseen kohtaan tässä postauksessa. Klikkaamalla linkkiä tavallisella selaimella ei sivun pituudesta riippuen välttämättä tapahdu mitään, tai sivu heilahtaa hieman alemmaksi. Matkapuhelimen ruudulla sen sijaan linkin kohde siirtyy näytön yläosaan. Edellinen testilinkki johtaa tämän lauseen alkuun.
Tämä muodostuu ongelmaksi etenkin apulinkkien kanssa, jotka saattavat turhaan hämmentää käyttäjiä, joille näillä linkeillä ei ole merkitystä. Sen sijaan matkapuhelimella tai tekstipohjaisella selaimella surffaavalle ne ovat elintärkeitä ja helpottavat navigointia suuresti.
Vanha tapa on avata ulkoiset linkit uuteen ikkunaan. Tätä kannattaa välttää, sillä käyttäjä itse kyllä parhaiten tietää haluaako avata linkin uuteen ikkunaan vai ei. Tämäkään tapa ei vielä kerro ennen klikkausta, minne linkki tarkalleen johtaa.
Sisäiset linkit voi myös Wikipedian tapaan erotella muista linkeistä erilaisella korostuksella, esim. linkkitekstin värillä tai erilaisella alleviivauksella. Tällöin jonkinlainen selite eri värien tarkoituksesta muodostuu hyvin tarpeelliseksi. Navigaatioon liittyvät apulinkit voi ja kannattaakin kätkeä niiltä käyttäjiltä, joille niistä on enemmän haittaa kuin hyötyä.
Paras ja yksinkertaisin tapa on tietysti muotoilla niin kuvaavat linkkitekstit, että käyttäjälle ei jää epäselvyyttä siitä minne linkki johtaa. Välttäkää siis klikkaa tästä -tyylisiä linkkejä ja miettikää linkkitekstit huolella, jotta käyttäjä ennen klikkausta varmasti tietää, minne linkki johtaa.