Luento 4 - WWW-sivujen käytettävyys ja esteettömyys
Seuraavassa käsitellään WWW-sivujen käytettävyyteen ja esteettömyyteen liittyviä asioita.
Tarkoituksena on käydä läpi asioita, joiden avulla sivujen käytettävyyttä ja esteettömyyttä saadaan parannettua.
Tarkastelun kohteena on pääosin sisällön tuotannossa huomioitavat asiat, mutta mukaan on otettu myös suunnitteluperiaatteita yleisemminkin.
Käytettävyyttä ja esteettömyyttä edistäviä asioita on koottu seuraavaan teknisen asiayhteyden mukaisiin kokonaisuuksiin.
Yleistä käyttävyydestä ja esteettömyydestä
WWW-sivujen esteettömyydellä eli saavutettavuudella (engl. Accessibility) tarkoitetaan yksinkertaisesti sitä,
että WWW-sivujen sisältö on kaikkien käytettävissä.
Esteettömän sivuston tekemisessä täytyy huomioidaan sekä erilaiset käyttäjät että erilaisten tekniikoiden käyttäjät.
Esteettömistä WWW-sivuista hyötyvät erityisesti käyttäjäryhmät, joilla on fyysisiä rajoitteita (esim. näkövammaiset) tai
teknisiä rajoitteita (esim. mobiililaitteet).
WWW-sivujen tekeminen esteettömiksi auttaa kuitenkin myös muitakin käyttäjiä, koska sivujen tekemisessä otetaan huomioon käyttäjien erilaisuus.
WWW-sivujen käytettävyydellä (engl. Usabilty) tarkoitetaan
WWW-sivujen helppokäyttöisyyttä ja ymmärrettävyyttä siihen tarkoitukseen, johon sivusto on tarkoitettu.
Erona esteettömyyteen on, että käytettävälle WWW-sivustolle ei käyttäjä välttämättä edes pääse teknisten ongelmien vuoksi.
Tämän vuoksi on tärkeää kiinnittää huomiota molempiin asioihin!
Usein WWW-sivujen esteettömyyden edistäminen edistää samalla myös WWW-sivujen käytettävyyttä.
WWW-sivut kannattaa siis suunnitella Design for All (DfA) periaatteella, jossa
pyritään parantamaan sekä WWW-sivujen käytettävyyttä että saavutettavuutta kaikille käyttäjille.
WWW-sivujen tekemistä esteettömiksi ja käytettäviksi puoltavat myös seuraavat voimakkaat kannanotot:
Seuraavissa luvuissa esitettävät asiat perustuvat Jacob Nielsen WWW-sivujen
käytettävyyteen liittyviin artikkeleihin, W3C:n
Web Content Accessibility Guidelines 1.0 Verkkosisällön saavutettavuusohjeet W3C (suomenkielinen versio)
sekä puhtaaseen maalaisjärkeen ongelmien ratkaisemisessa.
Sivujen suunnittelun perusidoita
Seuraavassa muutamia perusideoita, jotka kannattaa muistaa sivujen tekemisen jokaisessa vaiheessa.
- Erotetaan sivuston rakenne ja sisältö kokonaan ulkoasusta!
- Käytä rakenteen merkisemiseen jotakin olemassa olevaa kielioppia (esim. HTML Basic)
- Käytettävän ja esteettömän sivuston ei tarvitse olla ruma!
- Sivusto tehdään käyttäjää varten, joten sivuston on oltava käyttäjälähtöinen!
- Käyttäjän laitteistosta tai ohjelmistoista ei kannata tehdä oletuksia!
- Käyttäjä voi tulla sivustolle myös pääsivun ulkopuolelta.
- Sivujen ja sivuilla olevan informaation on mukauduttava käyttäjän vaatimusten mukaisesti joka suhteessa.
- Tee sivuista kevyitä!
- Älä taita sivustoa taulukoiden avulla.
- Älä pakota käyttäjää tekemään mitään.
- Älä avaa uusia ikkunoita.
- Jokaista käyttäjäryhmää varten ei kannata luoda vaihtoehtoista sivua, vaan kaikille yksi yhteinen ja saavutettava vaihtoehto.
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Jokaisen edellisistä kohdista toteuttava kurssisivusto, mutta sivusto luonnollisestikaan ole täydellinen.
- Taulukkotaitettu VR:n sivusto, joka ei toimi tekstiselaimella kunnolla.
Sivuston rakenne
Sivuston tai sivujen rakenne merkitsee paljon sivujen käytettävyyden kannalta.
Seuraavaan on kerätty muutamia sivuston käytettävyyttä ja esteettömyyttä parantavia asioita.
- Älä käytä kynnysmattoja eli turhaa etusivua vaan mene suoraan asiaan.
- Kotisivulla eli ensimmäiseltä sivulta täytyy löytyä kuvaus sivuston tarkoituksesta ja merkityksestä sivuston käyttäjälle.
- Etusivu on tärkein sivuston sivu, joten sen rakenne on usein erilainen kuin muiden sivujen.
- Etusivulta voi siirtää kaiken turhan alisivuille (esim. About Us-tyyppiset asiat).
- Sivuston oltava pysyvässä paikassa. Jos paikka muuttuu, niin älä tee väliaikaista sivustoa.
- Kerro sivuilla missä käyttäjä on menossa.
- "Leivänmuruja" voi käyttää sivun yläreunassa.
- Monet käyttävät myös URL:ää navigoinnissa.
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Multimedian sivusto, joka ei skaalaudu ja eikä ole kovin informatiivinen.
- Turha kynnysmatto Oddscomp-yrityksen sivuston alussa.
Sivustolta löytyy muitakin esteettömyysongelmia, kuten kehyksiä, Flashiä ja avautuvia ikkunoita.
Sivuston otsikkotiedot
- Käytä selkeää title-tekstiä, jossa kerrotaan lyhyesti sivuston tarkoitus.
- Titlen käyttö helpottaa sivun löytymistä hakukoneilla sekä sivun merkitsemistä kirjanmerkkeihin.
- Metadataa voi käyttää sivujen informaation lisäämisessä.
- Link elementillä voidaan kertoa muiden dokumenttien suhteesta dokumenttiin. (edellinen, seuraava jne.)
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Jyväskylän yliopiston sivustolla otsikkotiedot ovat selkeitä ja lyhyitä.
- IBM:n otsikkotiedot ovat lyhyitä ja selkeitä.
- Huonoja esimerkkejä löytää paljon selatessaan ihmisten kotisivuja :)
Sivuston sisältö
- Sisällön rakenne on oltava oikea ja johdonmukainen (esim. H2 tulee H1:n alle jne.).
- Kerro sisältöön liittyvä kieli.
- Sisällön täytyy olla oikeaa, asiallista ja käyttäjää kiinnostavaa. Sisällön on siis liityttävä sivustoon käyttäjän näkökulmasta.
- Tervetulotoivotuksia ei kannata käyttää.
- Sisältö täytyy olla kirjoitettu WWW:tä varten seuraavasti:
- Panosta ensimmäisen kappaleen sisältöön. Ensimmäisestä kappaleesta on käytävä ilmi mitä asiaa sivulla käsitellään.
- Ilmaisun on oltava lyhyttä ja ytimekästä.
- Suosi silmäilyä helpottavia otsikoita.
- Suosi listoja ja luetteloita, mutta niiden käytössä kannattaa pitää järki mukana.
- Puri välttämään ylimääräisiä huutomerkkejä ja KAPITEELIKIRJASIMEN käyttöä.
- Käytä lyhenteitä mahdollisimman vähän.
- Kirjoita käytetyt lyhenteet auki.
- Vältä julkaisemasta keskeneräistä sivustoa. Älä myöskään käytä sivustolla "Under Construction"-merkintöjä.
- Tarjoa vaihtoehto myös ääni- ja kuvasisällölle.
- Sivustoon liittyvät yhteystiedot on löydyttävä helposti!
- Tarjoa käyttäjälle tieto sivun sisällön päivitysajankohdasta.
- Käytä sivuston sisällön esittämiseen sopivaa merkkikieltä kuvien sijaan (esim. MathML).
- Käytä taulukkoa oikein taulukkomuotoisen tiedon ilmaisemiseen.
- Anna yhteenveto taulukon sisällöstä.
- Lisätietoa: How Users Read on the Web - Jacob Nielsen
Sivuston ulkoasu
- Tee ulkoasu yhtenäiseksi.
- Erota ulkoasu sisällöstä eli toteuta ulkoasu CSS:n avulla.
- Anna käyttäjälle mahdollisuus muuttaa sivuston ulkoasu tarpeidensa mukaan.
- CSS:n jättäminen pois ei saa vähentää sivuston informaatiota.
- Sivuston värit
- Taustavärin ja tekstin värin kontrasti mahdollisimman suureksi (Musta teksti valkealla taustalla on aina hyvä vaihtoehto!).
- Varo värisokeuteen liittyviä väriyhdistelmiä.
- Älä turvaudu pelkästään värien käyttöön asian esittämisessä.
- Lisätietoa väreistä: Värit käyttöliittymässä
- Älä käytä taustakuvaa!
- Kaikki ulkoasuun liittyvät arvot täytyy määrittää suhteellisina. Seuraavassa muutamia esimerkkejä:
- Fonttikoko suhteellisena (2em)
- Marginaalit suhteellisena (2%)
- Sisällön leveys (50%)
- Käytä ainoastaan kahta tai kolmea eri kirjasinta.
- Käytä päätteetöntä kirjasinta (esim. Arial tai Verdana).
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- MTV3:n sivuston kirjainkokoa on hankala muuttaa.
Sivulla on myös paljon kuvia, mainoksia ja animaatiota. Lisäksi näkyviin avautuu joissakin tapauksissa ylimääräinen ikkuna.
- FREEIMAGES-sivusto, joka avaa ylimääräisen ikkunan näkyville.
- Yhtenäinen kurssisivusto, jossa toteutuvat edelliset periaatteet.
Navigointi
Toteuta navigointi seuraavien periaatteiden mukaisesti.
- Etusivulta täytyy päästä yhdellä klikkauksella sivuston tärkeimmille alasivuille.
- Käyttäjä voi tulla mille sivulle tahansa, joten käyttäjän täytyy päästä sivuston muihinkin osiin kätevästi.
- Vältä sivustolla umpikujia!
- Erota sivuston perusnavigointi selkeästi sisällöstä. (Sekaantumisvaara myös mainosbannereihin!)
- Navigointipalkissa ei saa olla linkkejä, jotka osoittava sijaintisivulleen.
- Navigointipalkin nimet oltava havainnollisia.
- Navigointipalkkiin kannattaa sijoittaa linkit, joita käyttäjät tarvitsevat!
Ei siis kannata tehdä rakennetta, jossa käyttäjä on käytävä jollakin sivulla päästäkseen tekemään haluamansa toimenpiteen.
- Navigointi kannattaa sijoittaa sivun ylälaitaan tai vasempaan laitaan, koska käyttäjät etsivät sitä sieltä.
- Erota navigointilinkit toisistaan esimerkiksi tekemällä niistä listan tai lisäämällä niiden väliin erotinmerkin.
Linkit
- Älä tee "Klikkaa tästä" tai "More"-tyylisiä linkkejä, vaan linkkitekstin täytyy kertoa minne se johtaa.
- Käytä linkkitekstinä lyhyttä ja selkeää asiaa, joka ilmaisee minne linkki vie. Koko kappaleesta ei siis kannata tehdä linkkiä.
- Linkkitekstin pitäisi toimia myös asiayhteydestä irrotettuna.
- Pidä linkkien väritys totuttuna:
- Vierailematon linkki on perinteisesti sininen.
- Vierailtu linkki on perinteisesti violetti tai punainen.
- Pidä linkeissä alleviivaus mukana. Poikkeuksen voi tehdä selkeästi erottuvassa navigointipalkissa.
- Jos linkki johtaa "raskaaseen" dokumenttiin, niin dokumentin koko kannattaa mainita linkin yhteydessä.
- Lisätekniikoita tarvitsevalle sivulle johtavat linkit kannattaa merkitä selkeästi.
- Älä avaa linkin sisältöä toiseen ikkunaan.
- Henkilön nimestä linkki henkilön kotisivuille.
- Sähköpostiosoitteesta mailto-linkki.
- Erota linkit toisistaan esimerkiksi tekemällä niistä listan.
Kuvien käyttö
Seuraavassa muutamia kuvien käyttämisessä huomioitavia asioita.
- Älä käytä sivustolla kuvia liikaa.
- Kuviin ei kannata liittää tekstiä.
- Kuvien on liityttävä sivuston sisältöön.
- Kuvista vain tarpeellisin kohta sivulle (rajaaminen).
- Tee kuvasta sopivan kokonainen kuvankäsittelyohjelmalla.
- Tallenna kuva oikeaan formaattiin (jpg, png ja gif).
- Kuvien yhteiskoko sivulla ei saa ylittää 50 kB.
- Käytä kuvissa alt-attribuuttia, jossa kuvaillaan kuvan sisältö.
- Kuvan title-attribuutilla kerrotaan kuvan otsikkotiedot.
- Koristekuvissa alt-tekstinä voi käyttää tyhjää.
- Jos käytät logoa, niin sijoita se sivun vasempaan ylänurkkaan.
- Vältä animaatioiden käyttöä koristeluun, koska ne kiinnittävät liikaa käyttäjän huomiota. Animaatioita kannattaa käyttää erilaisiin havainnollistuksiin.
- Taustakuvien käyttöä kannattaa välttää, koska hyvää ja informatiivistä taustakuvaa "ei ole olemassakaan".
- Kuvissa voi käyttää width- ja height-attibuutteja kuvan koon ilmoittamiseen. Atribuuteilla ei saa pienentää kuvia!
- Toinen mahdollisuus on määritellä kuvien koko CSS:ssä.
- Käytä suurista kuvista thumbnail-kuvia!
Sivujen latausajat
- Pyri pitämään sivun latausaika mahdollimman alhaisena.
- Käyttäjät ovat kärsimättömiä, joten latausajan pitäisi olla alle 15 sekuntia modeemikäyttäjilläkin.
- Sivun koko kannattaa puristaa alle 50 kB.
- Alhainen latausaika saavutetaan muun muassa seuraavilla toimilla
- Käytä kuvia säästeliäästi ja muokkaa ne oikeanlaisiksi kuvankäsittelyohjelmalla.
- Älä käytä oletuksena raskaita tekniikoita.
Selainten uudet ja hienot ominaisuudet
- Lisätekniikoiden käytössä kannattaa olla varovainen, koska
- vanhemmat selaimet eivät tue lisätekniikkaa.
- kaikki eivät kuitenkaan voi tai halua käyttää lisätekniikoita.
- tekniikka toimii usein vain yhden selainvalmistajan selaimessa.
- Uuden tekniikan tuki leviää vasta muutaman vuoden kuluttua laajaan käyttöön, mutta silloinkaan siihen ei voi luottaa täysin.
- Varmista, että sisältö on myös saatavilla
- ilman tyylitiedoston käyttöä.
- ilman Javaa tai JavaScriptiä.
- ilman Flash-tukea. Flashillä toteutettu sivusto ei ole esteetön, mutta kehitystä asiaan on kuitenkin luvassa!
- Sivuston sisällölle täytyy siis löytyä vaihtoehto.
- Vältä käyttämästä dokumenttiformaattia (esim. PDF), jonka käyttö voi rajoittaa käyttäjiä.
- Tekniikoilla voidaan kuitenkin edistää joidenkin käyttäjien sisällön ymmärtämistä.
Näyttöresoluution huomioiminen
- Sivuston sisällön on oltava saatavilla niin suurilla kuin pienilläkin näytöillä.
- Sivua ei saa kiinnittää millekään resoluutiolle, vaan sivun täytyy skaalautua selainikkunan mukaan.
- Sivuston optimitoiminta kannattaa suunnitella 800x600 tai suuremmalle resoluutiolle.
- Sisältön on kuitenkin oltava saatavilla pienemmilläkin näytöillä.
- Vaikka näyttö suurenee koko ajan, niin käyttäjät eivät välttämättä käytä koko näytön kokoista selainikkunaa.
- Myöskään kirjasinkokoa ei saa kiinnittää!
- Skaalautuvuus auttaa myös tulostettaessa.
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Juhta-sivuston sivu osa, jossa ongelmia sivun leveyden skaalautumisessa.
- Kurssisivu, joka skaalautuu joka suuntaan mahdollista ja kirjasinkin muuttuu.
Kehyksien käyttö
Älä käytä kehyksiä! Älä käytä kehyksiä! Jos kuitenkin jostakin syystä käytät, niin huolehdi seuraavista asioista.
- Käytä title-attribuuttia frame-elementissä.
- Kuvaa kehysten väliset suhteet.
- Tarjoa vaihtoehto noframes osassa!
- Huolehdi sisällön päivityksestä.
- Osasta täytyy löytyä vähintäänkin linkki kehyksettömään versioon.
- Ei missään nimessä tekstiä "päivittäisit jo selaimesi"!
- Kehyksien käytöstä aiheutuu seuraavia ongelmia
- Käyttäjä ei tiedä sijoittumistaan.
- Kehyksen sisällä olevan sivun merkitseminen kirjanmerkkeihin ei onnistu.
- Koko sivun tulostaminen on ongelmallista tai mahdotonta.
- Kehyksien sisässä olevat dokumentit ovat usein umpikujia. (hakukoneet)
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Taulukkotaitettu VR:n framesivusto, jonka käyttö on tekstiselaimella hankalaa.
- Kehyksiin toteutettu kurssimateriaali, joka on käytettävissä myös tekstiselaimella.
Sivuston toiminnallisuus
Jos sivusto sisältää paljon materiaalia, niin sivuilla kannattaa toteuttaa etsi-toiminto sekä muita toimintoja, joiden avulla käyttäjä voi löytää helposti etsimänsä.
Sivujen esteettömyyden varmistaminen
Seuraavaan on koottu erilaisia asioita, joiden avulla voidaan varmistaa sivuston esteettömyys.
Kaikkia keinoja ei ole kaikkien käytettävissä, mutta jo neljän ensimmäisen asian varmistaminen takaa sivujen saavutettavuuden useimmille käyttäjille.
- Anna erilaisten käyttäjien testata sivustoa jo varhaisessa vaiheessa.
- Tarkasta sivu arviointityökaluilla
- Validoi sekä HTML- että CSS-dokumentti W3C:n validaattoreilla.
- Tarkista esteettömyyden tarkastavalla ohjelmalla (esim. Bobby)
- Testaa sivu erilaisilla graafisilla selaimilla erilaisilla asetuksilla.
- Testaa sivu merkkipohjaisilla selaimilla tai emulaattoreilla.
- Testaa sivu vanhemmilla selaimilla.
- Testaa sivu ääniselaimella sekä muilla käytössä olevilla apuvälineohjelmilla.
- Tarkista sivun kielioppi.
Erilaisia selaimia ja niiden erikoispiirteitä
- Ääniselaimia
- Merkkipohjaisia selaimia
- Lynx-selainta voi jokainen käyttää yliopiston Unix-koneen tunnuksilla.
- Lynx
- Graafisia selaimia
Esteettömyyteen ja käytettävyyteen liittyvää aineistoa