biomi.org/blogi

Zoom: omia ja asiantuntijoiden mietteitä

10.08.2005 klo 19.29 • Aihe: Web

Myös biomi.org sai nyt zoom-ulkoasun, valikko on sivun yläreunassa (lukuun ottamatta blogia, jossa zoom ei vielä toimi sekä lintuosiota ja kuvagalleriaa). Zoom-ulkoasun tekeminen on yllättävän monimutkainen asia (ks. esim. viitteet), eikä yhtä ainoaa oikeaa tapaa ole. Tässä esitän omia ja muutaman asiantuntijan mietteitä aiheesta, perustuen osin viitteisiin.

(Lisäys 4.10.2005: Muutama pikkuvirhe korjattu, artikkeli julkaistiin hieman muutettuna Saavutettava.fi:ssä. Zoom toimii nyt myös blogissa.)

Pyysin kommentteja Luonnontieteellisen keskusmuseon zoom-ulkoasusta Näkövammaisten kirjasto Celiasta sekä Näkövammaisten Keskusliitosta. Minulle vastasivat ystävällisesti Markku Leino ja Katariina Kiiliäinen (Celia) sekä Virpi Jylhä (NKL).

Zoom-ulkoasun tarkoitus

Zoom-ulkoasulla voi olla useita tarkoituksia:

1. Sivun toimivuus ruudunsuurennusohjelmien kanssa
2. Sivun toimivuus hyvin suurella tekstikoolla
3. Sivun selkeys heikkonäköisten kannalta

Zoom -ulkoasun ominaisuudet

Zoom-ulkoasun perusominaisuudet:

• Yksipalstaisuus
• Sivun ja navigoinnin selkeys (yksinkertaisuus)
• Toimivuus myös käyttäjän omien asetusten kanssa (tekstin koko, värit)

Monissa zoom-toteutuksissa toimivuutta näkövammaisten kannalta on yritetty parantaa myös tekstikokoa suurentamalla ja käännetyllä väriskaalalla (vaalea teksti ja tumma tausta). Tämä ei kuitenkaan ole tarpeen kolmesta syystä:

1. Käyttäjät voivat itse säätää nämä selaimestaan (toisin kuin esim. palstajaottelun)
2. Eri tavalla näkövammaiset voivat tarvita hyvinkin erilaisen ulkoasun. Esimerkiksi joillekin normaalia suurempi teksti voi olla jopa vaikealukuisempaa. Myös värien säätäminen kaikille sopivaksi on käytännössä mahdotonta.
3. Käyttäjät ovat jo asettaneet selaimeensa itselleen soveltuvat väri- ja kokoasetukset, jos niitä tarvitsevat; muutoin he eivät pystyisi käyttämään useimpia sivustoja.

Leino ja Kiiliäinen kirjoittivat "…heikkonäköiset käyttäjät muuttavat itse selaimensa asetukset ja näin voi suunnittelussa pyrkiä Design for All -periaatteen noudattamiseen. Yksi hyvä kaikille riittää, kunhan se on suunniteltu hyvin, eikä esim. estetty vapaata fonttien yms. vaihtoa". Jylhä puolestaan kirjoitti että "’Reilusti’ heikkonäköiset henkilöt yleensä hoitavat internet-selaimen asetukset + Windows asetukset itselleen sopiviksi. … Pidän tärkeimpänä kuitenkin, että päätyylinne olisi skaalautuva ja käyttäjät voisivat itse muokata selaimen asetuksilla näkymänsä itselleen sopivaksi."

Värit

Kaikille sopivia värivaihtoehtoja ei käytännössä ole mahdollista tarjota. Leino ja Kiiliäinen kirjoittavat: "Tällainen käyttäjä [käänteisiä värejä] saattaa haluta mustan pohjan ja keltaisen tekstit, linkit sinisiä ja käytetyt punaisia." Jylhä kirjoittaa "…jos henkilö tarvitsee käänteisiä värejä, hänen on pitänyt tehdä se jo aiemmin. Muut sivut jäisivät muuten näkemättä."

Tekstin koko

Jylhä kirjoittaa: "…heikko näkö ei ole sama asia aina kuin suurennetun tekstin tarve. … Suurennan tekstin selaimen ominaisuuksilla, mikäli se on tarpeen. Samoin saatan pienentää sitä."

Ratkaisu?

biomi.org:in tyyleissä perusideana onkin säätää zoom-valikolla vain sellaisia asioita, joita käyttäjä ei voi selaimesta käsin säätää: palstojen jaottelu ja navigoinnin ulkoasu (& monimutkaisuus). Värien ja tekstin koko puolestaan jätetään käyttäjän säädettäväksi. Tämä on yritetty tehdä mahdollisimman helpoksi mm. olemalla käyttämättä taustavärejä. Myöskään leveyttä eri määritellä eikä erikoisen suuria marginaaleja käytetä.

Avainsana on skaalautuvuus, jota Jylhäkin painottaa: "Ärräpäitä syntyy silloin, kun sivusto ei skaalaudu, värit, leveydet tai fontit ovat kiinteitä. Eli tekstimassa ja tyylit on oltava erikseen, silloin sivu on mahdollisimman esteetön tältä osin."

biomi.org zoom-tyyleillä, ilman käyttäjän tekemiä värisäätöjä (Firefox) sekä käännetyllä väreillä (IE).

Zoom-ulkoasu kannattaakin määritellä mahdollisimman yksinkertaiseksi, tällöin sen mukauttaminen selaimesta käsin on helpointa. CSS-taitolla toteutetuilla sivustoilla tämä on usein hyvin lähellä tyylien poistamista, erityisesti jos navigointi on jo valmiiksi toteutettu yksinkertaisesti. Ja jos sivusto on tehty esteettömyysohjeiden mukaisesti toimimaan myös ilman tyylejä, on tämä entistä helpompaa. Pieni säätö voi olla paikallaan eri osioiden (esim. navigointi, pääsisältö, lisätiedot) erottamisessa toisistaan.

Se, että käyttäjät tekevät väri- ja tekstisäädöt itse, ei kuitenkaan tarkoita, että zoom-ulkoasun värisäädöt olisivat turhia. Jylhä kirjoittaa erilaisista värivaihtoehdoista: "Eri tyylit ovat varmasti ihan ok ja auttanevat henkilöitä, jotka ovat kenties vasta näkövammautuneet (heikkonäköisiksi) tai ovat niin hyvin näkeviä, etteivät ole joutuneet opettelemaan apuvälinekäyttöä vaan pärjäilevät itsenäisesti."

Värit rakenteen selkeyttämisessä?

Värejä voi käyttää sivun rakenteen selkiyttämisessä, ja sitä kautta käytettävyyden parantamisessa. Tämä pätee myös näkövammaisten kohdalla, mikä tulee ilmi myös Screen Magnification and the Web -videolla. Esimerkiksi eri taustaväreillä voi erotella erityyppisiä linkkejä.

Tällainen värien käyttö ei kuitenkaan sovi hyvin yhteen tässä esitetyn, taustavärittömän zoom-ulkoasun kanssa. Toinen tapa on käyttää tyhjää tilaa rakenteen selkiyttämisessä. Myös viivoista, ikoneista yms. tehosteista voi olla apua osien erottelussa.

Valikon sijoittaminen

Ulkoasuvalikon sijoittaminen on hankalaa. Kun koko tekniikka on uusi, ei mitään vakiintunutta tapaa ole olemassa.

Itselläni ei ole kokemusta ruudunsuurennusohjelmien käytöstä, mutta em. Screen Magnification and the Web -videota katselemalla asiasta saa karkean kuvan. Tämän perusteella tuntuisi että sivun yläreuna lienee paras sijoituspaikka. Tämä kohta sivusta sisältää useimmiten muutenkin tärkeää tietoa, eikä jää ylenkatsotuksi.

Valikko täytyy kuitenkin suunnitella huolella, jottei se jää otsikon ja navigoinnin varjoon. Muistaakseni Jakob Nielsenin mukaan varsinaisen otsikkoalueen yläpuolella olevat asiat jäävät usein huomiotta: ne mielletään helposti mainoksiksi.

Valikon teksti kannattaa muotoilla siten, että siitä ilmenee kyseessä olevan pelkkä ulkoasun vaihto, eikä erillinen, mahdollisesti harvemmin päivitettävä tai suppeampi versio.

Muita yksityiskohtia

Fontin valinta on yksi kinkkinen asia. Päätteettömien fonttien (esim. Arial) sanotaan olevan selkeämpiä ja toimivampia tietokonenäytöllä. Pieninäyttöisissä laitteissa niiden merkitys voi korostua. Kuitenkin näkövammaisille asia voi olla toisin ja päätteellinen fontti (esim. Times New Roman) parempi.

Jos päätyy säätämään sivun värejä, kannattaa niiden valinnassa olla tarkkana. Esimerkiksi tässä kuvassa olevien linkkien ja taustan välinen kontrasti ei ole Leinon ja Kiiliäisen mukaan riittävä:

Zoom-ulkoasusta voi olla hyötyä myös pieninäyttöisten laitteiden (kämmenmikrot, kännykät) käyttäjille. Ongelmana voi kuitenkin olla näiden laitteiden heikko tuki vaihtoehtoisille tyylitiedostoille tai muille tyylinvaihdossa käytettäville tekniikoille (esim. Javascript, evästeet).

 

Zoom-ulkoasut ovat vielä nuori asia ja paras toteutustapa on vielä löytämättä. Lisäksi zoom-ulkoasujen yleisyys vaikuttaa asiaan: jos niiden käyttö yleistyy (kuten tekstikoko-valikoille tuntuu tapahtuvan), syntynee vakiintuneita käytäntöjä ja kokemusta eri menetelmien paremmuudesta. Siihen asti mahdollisimman monimuotoiset toteutukset ja niiden testaaminen käytännössä lienevät vain hyvästä.

Viitteet

• Big, Stark & Chunky – Joe Clark
• Zoom the Web: The problem of giant fonts – Joe Clark
• Zoom – yksinkertainen idea, vaikea toteutus – Yoji Hirabayashi
• Zoom-haaste – Yoji Hirabayashi
• Konehuoneen tenkkapoo – pni
• Inverted zoom: designing for low vision – Roger Johansson
• Zoom for Low Vision– Juicy Studio
• Zoom layout – Douglas Bowman
• Zooming the Web – Jeremy Keith

Kommentit

Tätä viestiä ei voi enää kommentoida.

• (Urheilu)kuvia Helsingistä
• Linkitys etusivulle ja bottien erottaminen ihmisistä