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

Tällä luennolla käsitellään WWW-sivujen käytettävyyteen ja esteettömyyteen liittyviä asioita.

Luentotaltiointi

Huom! Ruudunlukija- ja älypuhelindemonstraatioiden aikana kuuluu vain ääni.

Ongelmia videon katselussa?

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 lukuhäiriöt
Laitteiden tai ohjelmien rajoitteet
- Tietokoneiden eri resoluutiot
- Kämmentietokoneet
- Älypuhelimet
- Tekstiselain
- Ääniselaimet (vrt. lentokenttäesimerkki luennolta 1)
- 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. [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
- Kuvapörssi ääniselaimella (vanhentunut, sivu on hieman parantunut viime keväästä) ja Kuvapörssi googlella
Kilroy Travels ja Kilroy travels googlella
VR
- VR ääniselaimella
MTV3
- MTV3 ääniselaimella (vanhentunut, sivu on hieman parantunut viime keväästä)
Foreca - säätiedot ruudunlukijalla tai ääniselaimella?
Telkku.com
TekstiTV
- TekstiTV näköisversio
- TekstiTV tekstiversio
Matkahuolto ja matkahuolto googlella - kuvat vs. teksti
Huoneistokeskus - hakulomakkeen käytettävyys
Roche - Spacer-kuvat

Mobiiliversioita edelläluetelluista sivuista

Tekstiselainversioita edelläluetelluista sivuista

vrt. esim. Appron sivut ääniselaimella

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 motorisia häiriöitä. Näistä n. 20%:lla on internet-yhteys.
  - Suomessa näkövammaisia n. 80000.
  - Suomessa v.2030 on yli 65 v. täyttäneitä yli 600000 enemmän kuin nyt.
- Käyttäjät ovat "uskollisia" toimiville sivustoille.
  - Jos sivustolla käy kuukausittain 2000000 kävijää ja 20000 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

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 (esim. Plone-siirtymä JY:ssä)
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ö - valtiovarainministeriö
USA:n esteettömyyslainsäädäntö - Section 508
eEurooppa-aloite
JHS 129 Julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteet
Esteettömyys-aloite - WAI - W3C
Mobile Best Practices
- MobileOK -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 napakasti kuvaa 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.
- Muista, että longdesc on viittaus XHTML-dokumenttiin, missä on otsikkoja, kappaleita, listoja jne. käyttäen kuvattu kuvan sisältö
object-elementin viimeinen vaihtoehto pitäisi olla tekstiä
map ja area-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ä 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).

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ää pikseinä!
- 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ä merkiten.
Skaalautuvuus auttaa myös tulostettaessa.
Muista mediatyypit! 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.
Titlen 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ä seuraava p-elementti. Sisältö kannattaa sijoittaa body-elementin alkuun jos mahdollista. Näitä tietoja käytetään yleensä hakukoneiden hakutuloksissa heti title-elementin tietojen jälkeen.

Etusivu

Ä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).
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.
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.
Lisätietoa: How Users Read on the Web - Jacob Nielsen

Lomakkeet

Lomakkeilla navigointi tapahtuu sarkaimella (tab).
- Käytä tarvittaessa tabindex-ominaisuutta.
Ryhmittele lomakkeen fieldset- ja legend-elementeillä.
Kytke label-elementti (lähes) aina sitä vastaavaan lomake-elementtiin.
Vältä reset-painiketta! Reset-painike on yleensä tarpeeton.
Ryhmittele ison select-listan vaihtoehdot optgroup-elementillä.
Käytä taulukkoa oikein taulukkomuotoisen tiedon ilmaisemiseen. Käytä rakennemerkintöjä caption, thead, tfoot ja tbody.
- Käytä scope="row" ja scope="col" th-elementeissä.
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>
  <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ä listaa tai lisäämällä niiden väliin erotinmerkki.
Suurta sivustoa varten kannattaa toteuttaa monipuolisia navigointimahdollisuuksia
- Etsi-toiminto
- Sivukartta

Linkit

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.
  - 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 jollekkin toiselle käyttäjälle.
Ä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 toiminnon Open 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ä jossei 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 tarvitsevalle sivulle 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 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.

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 Usein Flash-objektit suunnitellaan vain graafisia selaimia ajattelen 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 selaimissa hyvin, toistaiseksi vain Mozilla tukee.
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 myös mahdollista 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
- Javascript on ongelmallista sillä muutoksen paikan ilmoittamiseen ei ole vielä standardeja

Suosituksia mobiiliympäristöön

Jatkossa puhelimissa tulee olemaan yhtä useammin 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 sivusto saa aikaan, kun suunnittelee hyvän handheld-mediaa tukevan CSS:n. Esim. appro-sivuston handheld.css.

Mobiilikelpoisissa sivujen tekemisessä kannattaa noudattaa Mobile Best Practices -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ä HTML- että CSS-dokumentti W3C:n validaattoreilla.
- Tarkista esteettömyyden tarkastavalla ohjelmalla, esim.
  - Nettipoliisi
  - WebXACT
  - Wave
  - Foxability - JY:ssä kehitteillä oleva Firefox-laajennus
  - LIFT - esim. Dreamweaverissa
Tutki sivun rakennetta Firebug-laajennuksella.
- Luetaan järjestyksessä ylhäältä alaspäin (mennen sisällä jokaiseen elementtiin). Tuleeko varsinainen sisältö pian esille?
- Ovatko tekstit merkitty tekstin rakennetta kuvaavilla elementeillä? Esim. otsikot h1-, h2-, h3-elementeillä, listat ul, ol, dl-elementeillä, kappaleet p-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 Toolbarista CSS | Disable | 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.
Testaa sivu ääniselaimella tai ruudunlukijalla.
- 30 päivän testiversioita saa netistä, kts. erilaisia ohjelmia verkon selailuun
Testaa sivu mobiiliympäristössä.
- Helpoin vaihtoehto on ladata Opera ja käyttää sen Small Screen Rendering -tilaa.
- Valitse Tools | Preferences... | Advanced | Browsing | Show Web page size in title bar ja pienennä ruudun koko 240:320 pikselin kokoiseksi (tyypillinen älypuhelimien tarkkuus, normaalipuhelimessa yleensä jopa pienempi)
- Valitse Small Screen Rendering -tila valinnalla View | Small Screen
  - Huomaa, että sivu voi näyttää ihan hyvältä ilman handheld-medialle määrättyjä CSS-tyylejä, koska SSR mukauttaa sivun mobiilikelpoiseksi. Silti handheld-CSS-tyylitiedosto on syytä tehdä, sillä kaikki mobiiliselaimet eivät ole yhtä adaptiivisia!
Tarkista sivun kielioppi. Onhan kieli merkitty xml:lang tai lang-ominaisuudella?

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

Näkövammaisten tietotekniset apuvälineet
Building Accessible Websites - Joe Clark
Essikurssi
Esteettömyysopas: Näin teet Web-sivujesi sisällön kaikkien saavutettavaksi - TIEKE
Verkkosivut jokaiselle sopiviksi - lyhyempi opus
Dive Into Accessibility
Device Independence Principles
Mobile Best Practices
Making Small Devices Look Great - Opera
Saavutettava.fi
WWW-sivun saavutettavuuden automaattinen arviointi DOM-rajapintaa käyttäen - Pro gradu
Ääniselaimet - LuK-tutkielma
Jakob Nielsen - käytettävyysartikkelit

Erilaisia ohjelmia verkon selailuun

Ruudunlukijoita
- Jaws - Freedom Scientific
- Window-Eyes - GW Micro
- Supernova - Dolphin
- Hal - Dolphin
Ääniselaimia
- Home PAge Reader - IBM
- 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
- Links - tekstiselain
Mobiiliselaimia
- Opera
- Nokia Mobile Browser Simulator
Graafisia selaimia
- Firefox
- Internet Explorer (IE)
- Opera
- Konqueror
Alternative Web Browsing
Brand-X Browsers

Käyttäjien kommentit

Kuva, ääni ja video verkossa

XML ja WWW