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
  • Erilaisia ohjelmia verkon selailuun

Tällä luennolla käsitellään WWW-sivujen käytettävyyteen ja esteettömyyteen 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

• 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ä mahdollisia ongelmia seuraavilla sivuilla on käytettävyyden ja esteettömyyden näkökulmasta?

• Kilroy Travels
  • Kilroy Travels ruudunlukijalla
  • Screenshot sivusta ruudunlukijan nauhoitushetkellä
• VR
  • VR ruudunlukijalla
  • Screenshot sivusta ruudunlukijan nauhoitushetkellä
• Telkku.com
  • Telkku.com ruudunlukijalla
  • Screenshot sivusta ruudunlukijan nauhoitushetkellä
• Foreca - säätiedot ruudunlukijalla tai ääniselaimella?
• TekstiTV
  • Teksti-TV näköisversio
  • Teksti-TV tekstiversio
• Matkahuolto - popup-ikkuna aikatauluhakuun
• Huoneistokeskus - hakulomakkeen käytettävyys

Mobiiliversioita (selain Opera) edellä luetelluista sivuista

Tekstiselainversioita (selain Lynx) edellä luetelluista sivuista

Vrt. esim. 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ä.
  • 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:

• Verkkopalvelujen laatukriteeristö (PDF) - Valtiovarainministeriö
• USA:n esteettömyyslainsäädäntö - Section 508
• Esteettömyysaloite - WAI - W3C
  • Verkkosisällön saavutettavuusohjeet 2.0 (WCAG 2.0 suomeksi)
  • Web Content Accessibility Guidelines 1.0
  • Web Content Accessibility Guidelines 2.0
  • Tulossa:
    • Authoring Tool Accessibility Guidelines 2.0
    • Accessibility Features of CSS
    • Accessibility Features of SVG
    • Accessibility Features of SMIL
• 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.
  • 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ä 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ä 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.
• 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.
• Ryhmittele lomakkeen elementit 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. Vähintäänkin isoissa taulukoissa käytä rakennemerkintöjä caption, thead, tfoot ja tbody.
  • Käytä scope="row" ja scope="col" arvoja 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>.</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.
• Ä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ä.
  • 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.
• 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 ja varmistaa, että mobiililaitteiden selaimet saavat otettua kyseisen tyylitiedoston myös käyttöön. 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.

1. Anna erilaisten käyttäjien testata sivustoa jo varhaisessa vaiheessa.
2. Tarkasta sivu arviointityökaluilla:
   • Validoi sekä XHTML- että CSS-dokumentti W3C:n validaattoreilla.
   • Tarkista esteettömyyden tarkastavalla ohjelmalla, esim.
     • Nettipoliisi
     • Wave
3. 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- ja h3-elementeillä, listat ul, ol ja dl-elementeillä, kappaleet p-elementillä jne.
4. 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?
5. 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.
6. Testaa sivu vanhemmilla selaimilla, jos mahdollista.
7. Testaa sivu ääniselaimella tai ruudunlukijalla.
   • 30 päivän testiversioita saa netistä, kts. erilaisia ohjelmia verkon selailuun.
8. 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!
9. 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
• 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
  • Opera Mini & Opera Mobile
  • Nokia Mobile Browser Simulator
• Graafisia selaimia
  • Firefox
  • Internet Explorer
  • Opera
  • Konqueror
  • Safari
  • Google Chrome