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.

Luentotaltiointi

www08.mp3 15M
Video 47M

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. Usability) 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:

Julkisten verkkopalveluiden laatukriteeristö - valtiovarainministeriö
USA:n esteettömyyslainsäädäntö - Section 508
eEurooppa-aloite
JHS 129 Julkishallinnon WWW -sivuston suunnittelun ohjeet
Jacob Nielsen - käytettävyysartikkelit
Esteettömyys-aloite - WAI - W3C

Esteellisiä ryhmiä

Fyysisiä rajoitteita
- Sokeat - heikkonäköiset
- Kuuro - heikentynyt kuulo
- Kuurosokea - braillekirjoitusta lukevat
- Kognitiiviset, oppimis- tai lukuhäiriöt
Tekniset
- Mobiililaitteet
- Tekstiselain
- Erillisteknologiaa tukemattomat selaimet

WCAG 2.0 ja esteettömyys

W3C:n tulevassa suosituksessa on yleisiä periaatteita miten esteettömyyttä voidaan lisätä internetympäristöissä.

Sisällön kestävyys

Sisältö on saatavilla nykyisillä ja tulevilla tekniikoilla.
- Ei missään nimessä sivustoille tekstiä "päivittäisit jo selaimesi"!
Käytä standardeja.
Lisätekniikoiden (plug-in) oltava esteettömiä tai on tarjottava esteettömiä vaihtoehtoja.
- 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.

Esteellisiä tekniikoita

Lisätekniikoilla voidaan edistää sisällön ymmärtämistä joidenkin käyttäjien näkökulmasta. Standardin ulkopuoliset tekniikat eivät kuitenkaan ole läheskään kaikkien käytettävissä (selaintyyppi, käyttöjärjestelmä, julkinen vs. oma kone). Sivuston sisällölle siis täytyy löytyä vaihtoehto. Tutkitaan edellisten luentojen tekniikoiden esteellisyyttä.

Videon upottaminen
- Raskasta (tiedostojen koko, tehovaatimukset)
- Vaatii erillisen toisto-ohjelman
- Integrointi selaimeen?
Flash
- Raskas (tiedostojen koko, tehovaatimukset)
- Teksti ei ole automaateilla saatavissa.
SMIL
- Melko esteetön! Voidaan näyttää esim. osittain.
- Ei tueta suoraan selaimissa, vaatii esim. RealPlayerin tai Quicktimen.
PDF
- Raskas (tiedostojen koko, tehovaatimukset)
- Vaatii erillisen lukijan
- Ei sovellu kaikille käyttäjille, esim. pieni näyttö tai teksti/ääniselain
ActiveX, Java-appletit ja Javascript
- Toimivuus selain- ja järjestelmäkohtaista
- Käyttäjä voi estää käytön esim. tietoturvan takia
map - huomioi alt-tekstit

Sisältö kaikkien saataville

Mahdollisimman kattavat tekstivaihtoehdot kytkettyinä muunlaiseen sisältöön tai vähintään otsikot ja tekstiselitykset.
Visuaalinen ja auditiivinen materiaali on saatava myös tekstidokumenttina
Ajasta riippuville esityksille on annettava vastaava synkroninen esitys.
- Ääniselitykset visuaalisille tapahtumille
- Tekstiotsakkeet merkittäville dialogeille, äänille ja videolle oikein ajoitettuna.
- Reaaliaikavideossa korvaava teksti tai linkki korvaavaan tekstiin.
Erota teksti, toiminnallisuus ja rakenne esitystavasta
- Rakenteen merkintä
  - Erotetaan sivuston rakenne ja sisältö kokonaan ulkoasusta!
  - Käytä rakenteen merkitsemiseen jotakin olemassa olevaa rakenteista kielioppia (esim. XHTML, MathML, SVG, SMIL)
- Sivuston toimittava ilman visuaalista ulkoasua
  - Testaa sivustoasi ilman tyylitiedostoa.
Visuaalisissa esityksissä huomioi tekstin näkyvyys
Auditiivisissa esityksissä huomioi puheen kuuluvuus

Sivusto kaikkien käytettävissä

Kaikki toiminnallisuus myös näppäimistöltä
Tapahtumankäsittely ei saa olla laiteriippuvaista.
Sisällön saanti pääosin ajasta riippumattomaksi.
Aikariippuviin elementteihin kontrolli.
Välkkyviä sisältöjä on voitava välttää.
Isoissa tai toistuvissa teksteissä pitää päästä etenemään helposti ja nopeasti.
Käyttäjän tekemät virheet on pystyttävä helposti perumaan.

Sisällön on oltava ymmärrettävä

Teksti on automaatein tulkittavissa (kieli, määreet, tekstin osaset)
Informatiivisuus otsikoissa
Selkeys ja yksikertaisuus teksteissä (kielioppi, rakenteen järkevyys)
Toistuvat osiot toistuvat samoissa paikoissa.
Komponentin pitää saada valita ennen aktivointia.
Samanlaisten elementtien toiminnallisuuden täytyy olla samanlaista.
Merkittäviä tilanteen tai ympäristön muutoksia pitää välttää tai niistä on ilmoitettava.

Käytettävän sivuston suunnittelun perusideoita

Seuraavassa muutamia perusideoita, jotka kannattaa muistaa sivujen tekemisen jokaisessa vaiheessa.

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.
Tee sivuista kevyitä!
Älä taita sivustoa taulukoiden tai kehyksien 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.

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.
- Käytä suhteellisia viittauksia niin sivusto on siirrettävissä ilman muutoksia.
Kerro missä mennään eli millä sivulla käyttäjä on menossa suhteessa sivuston sivuhierarkiaan.
- "Leivänmuruja" voi käyttää sivun yläreunassa.
- Monet käyttävät myös URL:ää navigoinnissa. Pidä URL:t selkeinä.

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.)

<link title="Oletustyyli" rel="StyleSheet" href="/appro2003.css" type="text/css" media="all" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rev="Made" href="http://www.iki.fi/hazor/" title="Tommi Lahtonen" />
<link rel="Copyright" href="/copyright.html" title="Copyright Notice" />
<link rel="Prev" href="../luento1/" title="Edellinen" />
<link rel="Next" href="../luento3/" title="Seuraava" />
<link rel="Start" href="../../" title="Tietoverkot työvälineenä" />
<link rel="Contents" href="../" title="Sisällys" />
<link rel="Parent" href="../" title="Edellinen taso" />
<link rel="First" href="../luento1/" title="Ensimmäinen" />
<link rel="Last" href="../luento10/" title="Viimeinen" />
<link rel="Search" href="/haku/" title="Haku" />

Sivuston sisältö

Sisällön rakenne on oltava oikea ja johdonmukainen (esim. vain yksi h1-otsikko, otsikoiden väliin tekstiä, h2 tulee h1:n alle jne.).
Kerro sisältöön liittyvä kieli (xml:lang)
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ä keskeneräisen sivuston julkaisemista. Älä myöskään käytä sivustolla "Under Construction"-merkintöjä.
Sivustoon liittyvät (tekijän) yhteystiedot on löydyttävä helposti!
Tarjoa käyttäjälle tieto sivun sisällön päivitysajankohdasta.
Käytä taulukkoa oikein taulukkomuotoisen tiedon ilmaisemiseen. Käytä rakennemerkintöjä caption, thead, tfoot ja tbody.
Anna yhteenveto taulukon sisällöstä (summary).
Lisätietoa: How Users Read on the Web - Jacob Nielsen

Sivuston ulkoasu

Käyttäjää kiinnostaa ensisijaisesti sivuston sisältö.
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!). Taustakuvan ja tekstin välillä oltava riittävä kontrasti eivätkä tausta muodot saa häiritä tekstin lukemista.
- 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ä
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).

Navigointi

Toteuta navigointi seuraavien periaatteiden mukaisesti.

Etusivulta täytyy päästä suoraan 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 osoittavat sijaintisivulleen.
Navigointipalkin nimet oltava havainnollisia.
Navigointipalkkiin kannattaa sijoittaa linkit, joita käyttäjät tarvitsevat!
Navigointi kannattaa sijoittaa sivun ylälaitaan tai vasempaan laitaan, koska käyttäjät etsivät sitä sieltä. Oikealle sijoittuva navigointi tosin häiritsee lukemistä vähemmän. Alalaitaan sijoittuva navigointi on tarpeeton.
Erota navigointilinkit toisistaan esimerkiksi tekemällä niistä listan tai lisäämällä niiden väliin erotinmerkin.
Lomakkeilla navigointi accesskey ja tabindex-ominaisuuksilla. label-elementti jokaiselle lomake-elementille ja korostus pikanäppäimelle.
Pikanäppäimiä voi määritellä myös linkeille. Esimerkiksi navigoinnin ohittamiselle voi lisätä pikanäppäimen piilottamalla linkin näkyvistä.
- Skipping over navigation
- Defining keyboard shortcuts
Suurta sivustoa varten kannattaa toteuttaa monipuolisia navigointimahdollisuuksia
- Etsi-toiminto
- Sivukartta

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.
Merkitse erikoisemmat dokumentit
- 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.
Kuvaan liittyvät tekstin aina alt, longdesc ja title-attribuutteihin.
- alt-attribuuttilla kuvaillaan kuvan sisältö.
- longdesc-attribuutilla pidempi selitys.
- Kuvan title-attribuutilla kerrotaan kuvan otsikkotiedot (kuvateksti).
Kuvien on liityttävä sivuston sisältöön.
Kuvankäsittelyohjelmassa tehdään kuvalle pienennykset, rajaukset, värien vähennykset ja formaatin vaihto ennen sivulle sijoittamista.
Kuvien yhteiskoko sivulla ei saa ylittää 50 kB.
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.
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.

Näyttöresoluution huomioiminen

Sivuston sisällön on oltava saatavilla niin suurilla kuin pienilläkin näytöillä. Älä oleta resoluutiosta mitään!
Sivua ei saa kiinnittää millekään resoluutiolle, vaan sivun täytyy skaalautua selainikkunan mukaan.
Käytä selainikkunan tarjoamaa tilaa kokonaisuudessaan, älä rajoita tekstiä pienelle alueelle (vaakasuunnassa tiivis teksti voi tosin olla luettavampi, mutta käyttäjä voi tehdä tämän...)
Sisällön täytyy olla 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.
Muista mediatyypit!

Kehyksien käyttö

Ä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.
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)

Esimerkkejä esteellisistä sivuista

Mitä ongelmia seuraavilla sivuilla on käytettävyyden ja esteettömyyden näkökulmasta?

Sivujen esteettömyyden varmistaminen

Seuraavaan on koottu erilaisia asioita, joiden avulla voidaan varmistaa sivuston esteettömyys. Kaikkia keinoja ei ole välttämättä käytettävissä, mutta jo muutamillakin tarkistuksilla saadaan sivustosta huomattavasti esteettömämpi.

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)
Tutki sivun rakennetta DOM Inspectorilla.
Testaa sivu erilaisilla graafisilla selaimilla erilaisilla asetuksilla.
Testaa sivu merkkipohjaisilla selaimilla tai emulaattoreilla.
Testaa sivu vanhemmilla selaimilla.
Testaa sivu ääniselaimella.
Testaa sivu mobiiliympäristössä.
Tarkista sivun kielioppi.

Erilaisia selaimia ja niiden erikoispiirteitä

Ääniselaimia
- Home PAge Reader - IBM
- Simply Web 2000 Home Page
- Ääniselaimet - LuK-tutkielma
Merkkipohjaisia selaimia
- Lynx-selainta voi jokainen käyttää yliopiston Unix-koneen tunnuksilla.
- Lynx
Mobiiliselaimia
- Opera
- Nokia Mobile Browser Simulator
Graafisia selaimia
- Internet Explorer (IE)
- Opera
- Mozilla
- Netscape

Esteettömyyteen ja käytettävyyteen liittyvää aineistoa

Käyttäjien kommentit

Kuva ja ääni verkossa

XML ja WWW