WWW-sivujen saavutettavuus, esteettömyys ja käytettävyys
- Miksi?
- Määritelmät
- Esimerkkejä esteellisistä sivuista
- Myyttejä esteettömyydestä
- Hyötyä esteettömyydestä
- Lainsäädäntö ja suositukset
- Saavutettavan sivun suunnittelun periaatteita
- Standardienmukaisuus
- Tekstivastineet
- Sivuston ulkoasu ja taitto
- Kehyksien käyttö taitossa
- Taulukoiden käyttö taitossa
- Näyttöresoluution huomioiminen
- Käytettävän sivuston suunnittelun perusideoita
- Sivuston otsikkotiedot
- Etusivu
- Sivuston sisältö
- Lomakkeet
- Navigointi
- Linkit
- Kuvien käyttö
- Sivujen latausajat
- Erillistekniikat
- Suosituksia mobiiliympäristöön
- Sivujen esteettömyyden varmistaminen
- Esteettömyyteen ja käytettävyyteen liittyvää aineistoa
Tällä luennolla käsitellään WWW-sivujen käytettävyyteen ja saavutettavuuteen liittyviä asioita.
Miksi?
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
- Tim Berners-Lee, W3C:n johtaja ja WWW:n keksijä
WWW-sivujen suunnittelussa on huomioitava käyttäjien
- Käyttäjien omat mieltymykset ja asetukset, fyysiset ja psyykkiset rajoitteet tai vammat:
- Käyttäjän selaimen asetukset, käyttöjärjestelmän asetukset
- Heikkonäköiset ja sokeat (erilaiset ruudun suurentajat, värikontrastien säätö, ruudunlukija)
- Kuuro, kuuroutunut, heikentynyt kuulo
- Kuurosokea (pistenäyttö)
- Motoriset häiriöt (erilaiset osoitinapuvälineet, kytkinohjaus, ääniohjaus, virtuaalinäppämistö)
- Kognitiiviset, oppimis- tai lukihäiriöt
- Laitteiden tai ohjelmien rajoitteet:
- Tietokoneiden näyttöjen eri resoluutiot
- Kämmentietokoneet
- Älypuhelimet
- Tekstiselain
- Ääniselaimet
- Ruudunlukijat
- TV
- Erillisteknologiaa tukemattomat selaimet
Määritelmät
- Esteettömyys
- on tuotteen, palvelun tai tilan käytettävyys erikykyisillä ihmisillä. [ISO 16071:2002, määritelmä 3.2]
- Käsite ei rajoitu pelkästään vammaisiin käyttäjiin. Käytetty laite tai ohjelmisto voi tehdä kenestä tahansa esteellisen
- Saavutettavuus
- on esteettömyyttä laajasti ymmärrettynä.
- Usein näitä sanoja käytetään synonyymeinä, molemmat tulevat englannin kielen sanasta accessibility.
- Käytettävyys
- kuvaa missä määrin tietty käyttäjäjoukko pystyy käyttämään tuotetta tavoitteensa saavuttamiseksi tehokkaasti, tuloksellisesti ja tyytyväisesti (engl. usability). [ISO 9241-11:1998, määritelmä 3.1]
Esimerkkejä esteellisistä sivuista
Mitä mahdollisia ongelmia seuraavilla sivuilla on käytettävyyden ja esteettömyyden näkökulmasta?
- Kilroy Travels
- VR
- Telkku.com
- Foreca - säätiedot ruudunlukijalla tai ääniselaimella?
- TekstiTV
- Matkahuolto - popup-ikkuna aikatauluhakuun
- Huoneistokeskus - hakulomakkeen käytettävyys
Mobiiliversioita (selain Opera) edellä luetelluista sivuista
Tekstiselainversioita (selain Lynx) edellä luetelluista sivuista
Vrt. esim. WWW-julkaiseminen -kurssin kotisivu ruudunlukijalla, mobiiliselaimella ja tekstiselaimella.
Myyttejä esteettömyydestä
- Esteettömyys on vaikeaa.
- Muutamat esteettömyyden muodot ovat hankalia ja vaativat asiantuntemusta (esim. kuvaselostus, kuvaileva äänipalvelu).
- Perusesteettömyys vaatii kuitenkin vain muutamia lisämerkintöjä (esim.
alt, title, longdesc
) ja järkevän sivutaiton käyttöä.
- Esteettömyys on kallista.
- Isolla sivustolla ehkä, jos sivusto on alunperin suunniteltu huonosti.
- Normaalisti kyse on kuitenkin pienistä valinnoista, kirjoitanko alt-tekstiä vai en, vrt. aika, joka kuluu grafiikan luomiseen, flash-animaatioiden ja WWW-ohjelmakoodin kirjoittamiseen.
- Pieni panostus tuo sivustolle lisää käyttäjiä.
- Esteettömyydessä on kyse vain pienistä käyttäjäryhmistä.
- Kyllä ja ei. Vammaisryhmät ovat vähemmistö mutta esim. mobiilikäyttäjät eivät enää ole
- Näitä pieni ryhmiä on kuitenkin kohtuullisen paljon:
- Amerikassa esim. 7,3 milj. ihmisellä on näköhäiriöitä, 6,9 milj. kuulohäiriöitä, 6,3 milj. motorisia häiriöitä. Näistä yli 20 %:lla on Internet-yhteys.
- Suomessa näkövammaisia on n. 80 000. Joka kymmenes henkilö (puoli miljoonaa) on jollakin tavalla värisokea.
- Suomessa v. 2030 on yli 65 v. täyttäneitä yli 600 000 enemmän kuin nyt.
- Käyttäjät ovat "uskollisia" toimiville sivustoille.
- Jos sivustolla käy kuukausittain 2 000 000 kävijää ja 20 000 on vammaisia, niin onko määrä pieni?
- Verkko on tietyille vammaisryhmille helppo tapa selailla kauppojen tuotevalikoimia, jos fyysinen liikkuminen ei ole helppoa.
- Kannattaako VR:n tai matkahuollon sivujen toimia kännykällä vai ei? Mikä laite kaikilla matkustavilla ihmisillä on taskussa...
- Web on visuaalinen.
- Onhan TV ja filmitkin, mutta silti esim. sokeat seuraavat niitä.
- Tekstipohjaisena aikana ennen graafisia käyttöliittymiä oli jo käytettävissä erilaisia avustavia tekniikoita ruudunlukemiseen.
- Webin alkuperäinen ajatus on tuoda tieto kaikkien saataville helposti.
- Esteettömän sivuston ei tarvitse olla ruma, vaan erilaisille asiakaslaitteille mukautuva.
- Käyttäjät ovat kehittyneet, joten esteettömyys ei ole enää niin tärkeää.
- Jacob Nielsen 4.2.2008: User Skills Improving, But Only Slightly
- Esimerkkikohtia, jotka Nielsenin mukaan hämmentävät edelleen useimpia käyttäjiä:
- linkin avautuminen uuteen ikkunaan
- linkit, jotka eivät vaihda väriä vierailun jälkeen
- introt/kynnysmattosivut
- alasivuilta puuttuva linkki etusivulle, esim. yläpalkin logo on hyvä paikka etusivulinkille
- epästandardit vierityspalkit
Lähde: Building Accessible Websites, kappale 2 ja Tilastokeskus
Hyötyä esteettömyydestä
- Sivusto noudattaa suosituksia ja lakeja.
- Esteettömyys on tekniikka muiden joukossa.
- Vaihtoehtojen lisääminen: siinä missä esim. meillä on useita erilaisia navigointimekanismeja sivustolla, niin meillä voi olla useita tapoja katsella kuvia.
- Laajennettavuus ja ylläpito: standardien mukaiset sivustot toimivat todennäköisesti myös jatkossa ja niitä on helpompi ylläpitää kokonaisuudessaan.
- Isompi yleisö: enemmän asiakkaita melkein samalla vaivalla (mobiilikäyttäjät, vammaiset jne.).
- Toisten huomioiminen ja yhteiskuntavastuu: esteellinen sivu viestii, että sinulla ei ole asiaa meidän luokse.
- Hakukonetulokset saattavat parantua.
Lähde: Building Accessible Websites, kappale 2 ja Tilastokeskus
Lainsäädäntö ja suositukset
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 puoltavat myös seuraavat voimakkaat kannanotot:
- Verkkopalvelujen laatukriteeristö (PDF) - Valtiovarainministeriö
- USA:n esteettömyyslainsäädäntö - Section 508
- Esteettömyysaloite - WAI - W3C
- Mobile Web Best Practices 1.0
- MobileOK 1.0 -luonnos
Saavutettavan sivun suunnittelun periaatteita
Seuraavissa luvuissa on vinkkejä yleisen käytettävyyden ja esteettömyyden parantamiseksi.
Standardienmukaisuus
- Merkitse tekstit oikeilla elementeillä niiden merkityksen mukaan.
- Erota teksti, rakenne, toiminnallisuus ja ulkoasu toisistaan.
- Sisällön rakenne on oltava oikea ja johdonmukainen:
- Esim. vain yksi h1-otsikko, otsikoiden väliin tekstiä, h2 tulee h1:n alle jne.
- Otsikoita voidaan käyttää esimerkiksi navigoinnissa ruudunlukijoilla.
- Kerro sisältöön liittyvä kieli (xml:lang).
- Älä käytä epästandardeja elementtejä.
Tekstivastineet
Kaikille ei-tekstuaalisille elementeille pitää antaa tekstivastine:
img
-alt
,title
,longdesc
-ominaisuudet:- Aina
alt
-teksti, joka kuvaa napakasti mitä kuva sisältää. title
-ominaisuudella voi kuvailla hieman pidemmin kuvaa.- Spacer-kuvissa tai vastaavissa (jos niitä on nyt ihan pakko käyttää) on annettava tyhjä alt-teksti
alt=""
. - Koristekuville (logoissa, väriliu'uissa jne.) on myös annettava
alt=""
, ellei kuvalla ole jotain merkitystä.- Koristekuvat kannattaa ensisijaisesti sijoittaa CSS:ään
background-image
-ominaisuuden arvolla.
- Koristekuvat kannattaa ensisijaisesti sijoittaa CSS:ään
- Muista, että
longdesc
on viittaus XHTML-dokumenttiin, missä on otsikkoja, kappaleita, listoja jne. käyttäen kuvattu kuvan sisältö.
- Aina
object
-elementin viimeinen vaihtoehto pitäisi olla tekstiä.map
jaarea
-elementit - huomioi alt-tekstit.title
-ominaisuudella voi antaa lisäkuvailua lähes mille elementille tahansa.- Tekstivastineista ja lisäkuvailusta on hyötyä myös hakukoneille!
Sivuston ulkoasu ja taitto
- 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ä on oltava riittävä kontrasti, eivätkä taustamuodot 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% tai 2em).
- Sisällön leveys suhteellisena (50%).
- Käytä ainoastaan kahta tai kolmea eri kirjasinta.
- Käytä päätteetöntä kirjasinta (esim. Arial tai Verdana).
Kehyksien käyttö taitossa
Älä käytä kehyksiä! Jos kuitenkin jostakin syystä käytät, niin huolehdi seuraavista asioista:
- 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).
- Sivun lähdekoodin hakeminen on työlästä.
Taulukoiden käyttö taitossa
Älä taita sivustoa taulukoiden avulla, jos vain mahdollista.
- Erityisesti on vältettävä monia sisäkkäisiä taulukoita. Näissä ruudunlukijaa tai ääniselainta käyttävä voi mennä sekaisin navigoidessaan taulukkolabyrintissä.
- Taulukkotaitto aiheuttaa helposti vaakasuuntaista vieritystä mobiiliselaimissa. Taulukkotaittoa suositellaan vältettävän kokonaan mobiilikelpoisilla sivuilla.
- Useilla sivuilla käytetty taulukkotaitto, spacer-kuvat, tyylimääritysten upotus ja taustakuvien käyttö suoraan XHTML-dokumentissa tekevät sivuista raskaita ladattavaksi.
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. Tämä koskee erityisesti sisältöosan skaalautuvuutta (ns. liquid layout).
- 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ää pikseleinä!
- Tämä korostuu erityisesti mobiiliselaimissa, joissa pikselin koko voi vaihdella hyvinkin paljon nestekidenäytön mukaan.
- Paras fonttikoko on suhteellinen, esim. CSS:ssä em-yksiköillä merkaten.
- Skaalautuvuus auttaa myös tulostettaessa.
- Muista mediatyypit ja vaihtoehtoiset tyylitiedostot! CSS:llä toteutettu taitto mahdollistaa ulkoasun mukauttamisen erilaisille laitteille.
- Media Queries, Esimerkkejä
- Utilize Available Screen Space
- Optimizing a Screen for Mobile Use
Käytettävän sivuston suunnittelun perusideoita
Seuraavassa muutamia perusideoita, jotka kannattaa muistaa sivujen tekemisen jokaisessa vaiheessa.
- Jokaista käyttäjäryhmää varten ei kannata luoda vaihtoehtoista sivua, vaan kaikille yksi yhteinen ja saavutettava vaihtoehto.
- 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.
- Älä pakota käyttäjää tekemään mitään.
- Tee sivuista kevyitä!
Sivuston otsikkotiedot
- Käytä selkeää title-tekstiä, jossa kerrotaan lyhyesti sivuston tarkoitus.
- title:n käyttö helpottaa sivun löytymistä hakukoneilla sekä sivun merkitsemistä kirjanmerkkeihin.
- Metadataa voi käyttää sivujen informaation lisäämisessä.
- Muita tärkeitä kohteita ovat sivun varsinaisen sisällön ensimmäiset kappaleet,
h1
-elementti ja sitä seuraavap
-elementti. Sisältö kannattaa sijoittaabody
-elementin alkuun jos mahdollista. Näitä tietoja käytetään yleensä hakukoneiden hakutuloksissa hetititle
-elementin tietojen jälkeen.
Etusivu
- Älä käytä kynnysmattoja eli turhaa etusivua, vaan mene suoraan asiaan.
- Kotisivulta 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).
- 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.
Sivuston sisältö
- 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:
- 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.
- Pyri 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.
- Lisätietoa: How Users Read on the Web - Jacob Nielsen
Lomakkeet
- Lomakkeilla navigointi tapahtuu sarkaimella (tab).
- Käytä tarvittaessa
tabindex
-ominaisuutta.
- Käytä tarvittaessa
- Ryhmittele lomakkeen elementit
fieldset
- jalegend
-elementeillä. - Kytke
label
-elementti (lähes) aina sitä vastaavaan lomake-elementtiin. - Vältä
reset
-painiketta! Reset-painike on yleensä tarpeeton. - Ryhmittele ison
select
-listan vaihtoehdotoptgroup
-elementillä. - Käytä taulukkoa oikein taulukkomuotoisen tiedon ilmaisemiseen. Vähintäänkin isoissa taulukoissa
käytä rakennemerkintöjä caption, thead, tfoot ja
tbody.
- Käytä
scope="row"
jascope="col"
arvojath
-elementeissä.
- Käytä
- Anna yhteenveto taulukon sisällöstä (
summary
-ominaisuus).
Navigointi
Toteuta navigointi seuraavien periaatteiden mukaisesti.
- Toteuta navigoinnin ohittaminen hyppylinkillä tai sijoita sisältö dokumentin alkuun.
<body> <p>Siirry suoraan <a href="#main">sisältöön</a>.</p> <div class="navbar">...</div> <div id="main">...</div> </body>
- Erota sivuston perusnavigointi selkeästi sisällöstä.
- Navigoinnin on oltava yhtenäinen koko sivustolla.
- Navigointipalkissa ei saisi olla turhia linkkejä, jotka osoittavat sijaintisivulleen.
- Sijaintisivu voi olla kuitenkin normaalina tekstinä tai listakohtana ilmoittamassa millä sivulla ollaan.
- Vakionavigointipalkin perusmuodon ja paikan pitäisi pysyä aina samana.
- Navigointipalkin linkkien nimien on 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 usein tarpeeton.
- Erota navigointilinkit toisistaan esimerkiksi tekemällä niistä lista tai lisäämällä niiden väliin erotinmerkki.
- Suurta sivustoa varten kannattaa toteuttaa monipuolisia navigointimahdollisuuksia:
- Etsi-toiminto
- Sivukartta
Linkit
- Käytä suhteellisia tai puoliabsoluuttisia 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.
- Murupolkunavigointi voi olla kuitenkin ikävää kuunneltavaa joka sivulla ääniselailijoille, jos se on dokumentin alussa. Navigointi pitää pystyä ohittamaan esimerkiksi hyppylinkillä.
- Monet käyttävät myös URL:ää navigoinnissa. Pidä URL:t selkeinä.
- Pitkä URL-rimpsu on ongelma, jos sen haluaa antaa jollekin toiselle käyttäjälle.
- "Leivänmuruja" voi käyttää sivun yläreunassa.
- Älä tee "Klikkaa tästä" tai "More"-tyylisiä linkkejä, vaan linkkitekstin täytyy kertoa minne linkki johtaa.
- Käytä linkkitekstinä lyhyttä ja selkeää asiaa, joka ilmaisee minne linkki vie. Koko kappaleesta ei siis kannata tehdä linkkiä.
- Älä avaa linkin sisältöä uuteen ikkunaan. Uusissa selaimissa onkin pop-up-ikkunoiden esto oletuksena päällä.
- Pop-up-ikkuna rikkoo normaalin "hyperteksti-flow":n eli normaalisti pääsemme linkkiä klikkaamalla seuraavaan sivuun.
- Pop-up-ikkunoissa ei Back-näppäimen käyttölogiikka toimi.
- Jos käyttäjä haluaa avata linkin uuteen ikkunaan tai välilehteen, niin hän voi valita selaimesta toiminnon Open Link in New Window tai in New Tab.
- Linkkitekstin pitäisi toimia myös asiayhteydestä irrotettuna.
- Linkkitekstiä voidaan käyttää esim. erillisessä linkkilistassa.
- Hakukoneet saattavat käyttää linkkitekstiä omissa linkeissä, esim. linkkiteksti "tästä" ei ole hyvä, jos ei tiedetä mihin sivuyhteyteen se kuuluu.
- Linkki "etusivu" on myös kontekstisidonnainen.
- 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 tarvitseville sivuille johtavat linkit kannattaa merkitä selkeästi.
- Vakiolinkit voidaan merkitä pikanäppäimellä käyttäen accesskey-ominaisuutta.
- Henkilön nimestä linkki henkilön kotisivuille.
- Sähköpostiosoitteesta mailto-linkki.
- Älä riko skriptikielillä Back-nappulan toiminnallisuutta.
Kuvien käyttö
Seuraavassa muutamia kuvien käyttämisessä huomioitavia asioita.
- Älä käytä sivustolla kuvia liikaa.
- Kuvaan liittyvät attribuutit:
- 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 olla tarpeettoman suuri.
- 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 eli pienennettyjä kuvia, joista on linkki isompaan kuvaan.
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 esim. GPRS-käyttäjilläkin (hidas mobiiliyhteys).
- Sivun koko kannattaa yrittää puristaa alle 100 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.
Erillistekniikat
Erillistekniikoilla tarkoitetaan tässä XHTML:stä ja CSS:stä poikkeavia tekniikoita, joita käytetään verkkosivuilla.
- Videon upottaminen:
- Raskasta (tiedostojen koko, tehovaatimukset).
- Vaatii erillisen toisto-ohjelman.
- Integrointi selaimeen?
- Erilaisten vammaisten tukeminen?
- Flash:
- Raskas (tiedostojen koko, tehovaatimukset).
- Teksti ei ole automaateilla (hakukoneilla!) saatavissa.
- Flashilla on oma saavutettavuusrajapintansa. Flash-objekteista saa esteettömiä, jos niissä on hyödynnetty tätä rajapintaa. Usein kuitenkin Flash-objektit suunnitellaan vain graafisia selaimia ajatellen ja vektorianimaationa. Flash on kuitenkin pääosin visuaalinen media.
- SMIL:
- Melko esteetön! Voidaan näyttää esim. osittain.
- Ei tueta suoraan selaimissa, vaatii esim. RealPlayerin tai QuickTimen.
- MathML:
- Melko esteetön! Ainakin periaatteessa mahdollistaa matemaattisen tekstin prosessoinnin äänenä.
- Selaimien tuki paranee koko ajan. Nyt useissa graafisissa selaimissa (mm. Firefox) tuki on jo hyvällä tasolla.
- PDF:
- Raskas (tiedostojen koko, tehovaatimukset).
- Vaatii erillisen lukijan.
- Ei sovellu kaikille käyttäjille, esim. pieni näyttö tai teksti/ääniselain.
- PDF:ssä on omat saavutettavuusohjeistonsa. Jos niitä käyttää, niin lukeminen on mahdollista myös esim. ruudunlukijoille.
- Jos mahdollista niin julkaise sama tieto tavallisena WWW-sivuna. PDF on useimmiten turha.
- Word:
- Word-dokumentit toimivat kohtuullisen hyvin ainakin ruudunlukijoilla.
- Word-dokumentti on raskaampi ja hankalammin navigoitavissa kuin WWW-sivu.
- Kaikilla ei ole kuitenkaan Wordiä. :-(
-
Java-appletit ja JavaScript
- Toimivuus selain- ja järjestelmäkohtaista. Mobiiliselaimissa erityisen ongelmallisia.
- Käyttäjä voi estää käytön esim. tietoturvan takia.
- Hienoimmat WWW-sovellukset vaativat Javascriptin
Suosituksia mobiiliympäristöön
Uusissa älypuhelimissa on yleensä hyvin XHTML:ää ja CSS:ää tukevia selaimia.
Mobiilikelpoisissa sivujen tekemisessä kannattaa noudattaa Mobile Web Best Practices 1.0 -ohjeistusta. Ohjeessa on paljon yhteneväisyyksiä WCAG-suosituksen kanssa. Yhteenveto ohjeesta.
- Kirjoita erittäin tiiviisti
- Tarjoa minimaalinen valikoima ominaisuuksia
- Tee sivustosta tarvittaessa erillinen mobiiliversio
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:
- Tutki sivun rakennetta Firebug-laajennuksella.
- Luetaan järjestyksessä ylhäältä alaspäin (mennen sisälle jokaiseen elementtiin). Tuleeko varsinainen sisältö pian esille?
- Ovatko tekstit merkitty tekstin rakennetta kuvaavilla elementeillä? Esim. otsikot
h1
-,h2
- jah3
-elementeillä, listatul
,ol
jadl
-elementeillä, kappaleetp
-elementillä jne.
- Testaa sivu erilaisilla graafisilla selaimilla erilaisilla asetuksilla.
- Kuvat pois päältä, esim. Firefoxissa Tools | Options | Content | Load images automatically.
- JavaScript pois päältä, esim. Firefoxissa Tools | Options | Content | Enable JavaScript.
- Testaa ilman CSS:ää, esim. Web Developer -työkalupalkista CSS | Disable Styles | All Styles.
- Pienennä ikkunan leveyttä puoleen. Tuleeko vaakavierityspalkkia?
- Kasvata tekstin kokoa. Pysyykö sivun sommittelu kasassa?
- Testaa sivu merkkipohjaisilla selaimilla tai emulaattoreilla.
- Ota SSH-yhteys esimerkiksi jalava.cc.jyu.fi-koneelle ja kirjoita lynx http://users.jyu.fi/~omatunnus/harkkahakemisto/.
- Lynx Viewer -ohjelma toimii suoraan WWW-sivulta.
- Testaa sivu vanhemmilla selaimilla, jos mahdollista.
- Testaa sivu ääniselaimella tai ruudunlukijalla.
- 30 päivän testiversioita saa netistä, kts. erilaisia ohjelmia verkon selailuun.
- Testaa sivu mobiiliympäristössä.
- Jos et pysty testaamaan sivua oikealla kännykällä, niin yksi vaihtoehto on ladata Opera ja käyttää sen Small Screen Rendering -tilaa.
- Valitse Tools | Preferences... | Advanced | Browsing | Show Web page dimensions in title bar ja pienennä ruudun koko 240:320 pikselin kokoiseksi (tyypillinen älypuhelimien tarkkuus, normaalipuhelimessa joskus jopa pienempi).
- Valitse Small Screen Rendering -tila valinnalla View | Small Screen (Opera
10) tai View | Fit to Width (Opera 11). Varmista vielä, että
View | Style -valikosta on valittuna Author Mode.
- Huomaa, että sivu voi näyttää ihan hyvältä ilman
handheld
-medialle määrättyjä CSS-tyylejä tai vaihtoehtoista tyylitiedostoa, koska SSR-tila mukauttaa sivun mobiilikelpoiseksi. Silti vaihtoehtoinen tyylitiedosto mobiililaitteille on syytä tehdä, sillä kaikki mobiiliselaimet eivät ole yhtä adaptiivisia!
- Huomaa, että sivu voi näyttää ihan hyvältä ilman
- Tarkista sivun kielioppi. Onhan kieli merkitty
xml:lang
tailang
-ominaisuudella?
Esteettömyyteen ja käytettävyyteen liittyvää aineistoa
- Accessibility Is Not Enough
- Näkövammaisten tietotekniset apuvälineet
- Building Accessible Websites - Joe Clark
- Essi - Esteetön sisällöntuotanto
- Dive Into Accessibility
- Device Independence Principles
- Making Small Devices Look Great - Opera
- Saavutettava.fi
- Jakob Nielsen - käytettävyysartikkelit
Erilaisia ohjelmia verkon selailuun
- Ruudunlukijoita
- NVDA - NV Access
- Jaws - Freedom Scientific
- Window-Eyes - GW Micro
- SuperNova Access Suite - Dolphin
- SuperNova Screen Reader - Dolphin
- Ääniselaimia
- MozBraille Braille/ääniselain
- Merkkipohjaisia selaimia
- Lynx-selainta voi jokainen käyttää yliopiston Unix-koneen tunnuksilla.
- Lynx Viewer - Lynx nettisivulla
- Lynx
- Mobiiliselaimia
- Graafisia selaimia
Käyttäjien kommentit