WWW-sivujen käytettävyys ja esteettömyys

• Luentotaltiointi
• Esimerkkejä esteellisistä sivuista
• Yleistä käyttävyydestä ja esteettömyydestä
• Esteellisiä ryhmiä
• WCAG 2.0 ja esteettömyys
  • Sisällön kestävyys
  • Sisältö kaikkien saataville
  • Sivusto kaikkien käytettävissä
  • Sisällön on oltava ymmärrettävä
• Käytettävän sivuston suunnittelun perusideoita
  • Sivuston rakenne
  • Sivuston otsikkotiedot
  • Sivuston sisältö
  • Sivuston ulkoasu
  • Navigointi
  • Linkit
  • Kuvien käyttö
  • Sivujen latausajat
  • Näyttöresoluution huomioiminen
  • Kehyksien käyttö
• Sivujen esteettömyyden varmistaminen
  • Erilaisia selaimia ja niiden erikoispiirteitä
• Esteettömyyteen ja käytettävyyteen liittyvää aineistoa

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.

Esimerkkejä esteellisistä sivuista

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

• Kuvapörssi
  • Kuvapörssi ääniselaimella vrt. Appron sivut ääniselaimella
• Kilroy Travels
• VR
  • VR ääniselaimella
• MTV3
  • MTV3 ääniselaimella
• Telkku.com
• TekstiTV näköisversio
• TekstiTV tekstiversio
• Matkahuolto

Mobiiliversioita edelläluetelluista sivuista

Tekstiselainversioita edelläluetelluista sivuista

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

WWW-sivujen käytettävyydellä (engl. Usability) tarkoitetaan WWW-sivujen helppokäyttöisyyttä ja ymmärrettävyyttä siihen tarkoitukseen, johon sivusto on tarkoitettu.

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
  • Verkkosisällön saavutettavuusohjeet
  • Web Content Accessibility Guidelines 1.0
  • Web Content Accessibility Guidelines 2.0 -luonnos
  • Authoring Tool Accessibility Guidelines 2.0 -luonnos
  • Accessibility Features of CSS
  • Accessibility Features of SVG
  • Accessibility Features of SMIL

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 (hakukoneilla!) 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ä. Testaa sivusto Colorblind Web Page Filter -ohjelmalla
  • Ä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 suhteellisena (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)

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.

1. Anna erilaisten käyttäjien testata sivustoa jo varhaisessa vaiheessa.
2. Tarkasta sivu arviointityökaluilla
   • Validoi sekä HTML- että CSS-dokumentti W3C:n validaattoreilla.
   • Tarkista esteettömyyden tarkastavalla ohjelmalla (esim. Bobby)
3. Tutki sivun rakennetta DOM Inspectorilla.
4. Testaa sivu erilaisilla graafisilla selaimilla erilaisilla asetuksilla.
5. Testaa sivu merkkipohjaisilla selaimilla tai emulaattoreilla.
6. Testaa sivu vanhemmilla selaimilla.
7. Testaa sivu ääniselaimella.
8. Testaa sivu mobiiliympäristössä.
9. Tarkista sivun kielioppi.

Erilaisia selaimia ja niiden erikoispiirteitä

• Ääniselaimia
  • Home PAge Reader - IBM
  • Simply Web 2000 Home Page
  • Ääniselaimet - LuK-tutkielma
  • MozBraille Braille/Ääniselain
• 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
• Alternative Web Browsing
• Brand-X Browsers

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

• JHS 129 Julkishallinnon WWW-sivuston suunnittelun ohjeet
• Esteettömyysopas: Näin teet Web-sivujesi sisällön kaikkien saavutettavaksi - TIEKE
• Verkkosivut jokaiselle sopiviksi - lyhyempi opus
• Dive Into Accessibility
• Device Independence Principles