WWW-sivujen käytettävyys ja esteettömyys - Luento 10
- Luentotaltiointi
- 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 esteettömyyteen liittyviä asioita.
Luentotaltiointi
- www10.wmv 205M
- www10.mp3 15M
- www10_h264.avi H.264-pakkaus, 336M
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
- Fyysiset ja psyykkiset rajoitteet tai vammat:
- 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 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.
- 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ä ongelmia seuraavilla sivuilla on käytettävyyden ja esteettömyyden näkökulmasta?
- Kuvapörssi
- Kilroy Travels
- VR
- Telkku.com
- Foreca - säätiedot ruudunlukijalla tai ääniselaimella?
- TekstiTV
- Matkahuolto - popup-ikkuna aikatauluhakuun
- Huoneistokeskus - hakulomakkeen käytettävyys
- Roche - spacer-kuvat
Mobiiliversioita edellä luetelluista sivuista
Tekstiselainversioita edellä luetelluista sivuista
Vrt. esim. kurssin kotisivu ruudunlukijalla
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ä.
- Totta, kyse on vähemmistöstä.
- 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.
- 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.
- 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:
- Julkisten verkkopalveluiden 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 kappaleissa 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ä 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.
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, niin hän voi valita selaimesta toiminnon Open Link in New Window.
- 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.
- 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ä.
- Ei tueta vielä suoraan kaikissa selaimissa, toistaiseksi vain Firefox tukee kunnolla (Opera myös melko hyvin).
- 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.
- Word:
- Word-dokumentit toimivat kohtuullisen hyvin ainakin ruudunlukijoilla.
- Word-dokumentti on raskaampi ja hankalammin navigoitavissa kuin WWW-sivu.
- Kaikilla ei ole kuitenkaan Wordiä. :-(
-
ActiveX, Java-appletit ja JavaScript
- Toimivuus selain- ja järjestelmäkohtaista.
- Käyttäjä voi estää käytön esim. tietoturvan takia.
Suosituksia mobiiliympäristöön
Uusissa puhelimissa on yleensä hyvin XHTML:ää ja CSS:ää tukevia selaimia. Itseasiassa WAP2-standardin WWW-julkaisupuoli koostuu XHTML:n osajoukosta XHTML Mobile Profilesta ja CSS:n osajoukosta Mobile CSS:stä. Kohtuullisen kännykällä selailtavan sivuston saa aikaan, kun suunnittelee hyvän vaihtoehtoisen tyylitiedoston mobiilipuolelle. Esim. appro-sivuston handheld.css.
Mobiilikelpoisissa sivujen tekemisessä kannattaa noudattaa Mobile Web Best Practices 1.0 -ohjeistusta. Ohjeessa on paljon yhteneväisyyksiä WCAG-suosituksen kanssa.
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ä XHTML- että CSS-dokumentti W3C:n validaattoreilla.
- Tarkista esteettömyyden tarkastavalla ohjelmalla, esim.
- Nettipoliisi
- Wave
- Foxability - JY:ssä kehitteillä oleva Firefox-laajennus, sisältää jo WCAG 1.0 -suosituksen mukaisen sivun testauksen
- 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 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. 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. Siltihandheld
-CSS-tyylitiedosto (tai vaihtoehtoinen tyylitiedosto) 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
- 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
- WWW-sivun saavutettavuuden automaattinen arviointi DOM-rajapintaa käyttäen - pro gradu
- Jakob Nielsen - käytettävyysartikkelit
Erilaisia ohjelmia verkon selailuun
- Ruudunlukijoita
- Jaws - Freedom Scientific
- Window-Eyes - GW Micro
- SuperNova - Dolphin
- Hal - Dolphin
- Ääniselaimia
- Simply Web 2000 Home Page
- MozBraille Braille/ääniselain
- Merkkipohjaisia selaimia
- Lynx-selainta voi jokainen käyttää yliopiston Unix-koneen tunnuksilla.
- Lynx Viewer - Lynx nettisivulla
- Lynx
- Mobiiliselaimia
- Graafisia selaimia
- Alternative Web Browsing
- Brand-X Browsers
Käyttäjien kommentit