Jyväskylän yliopisto: Esteettömyys

WWW-sivujen esteettömyyden tarkistusohjeita - Jyväskylän yliopisto

Esteettömyyden tarkistuslista Jyväskylän yliopiston www-kehittäjille.

Tarkistusohjeet pohjautuvat DfA-Suomen tuottamaan Saavutettavat verkkosivut - tarkistuslista sisällöntuottajille -dokumenttiin. Tätä tarkistusohjetta on ollut toteuttamassa työryhmä, johon kuuluvat Hannu Puppponen, Tarja Vänskä-Kauhanen, Henrik Martikainen, Tommi Lahtonen ja Petri Heinonen.

Alaotsikot

Tasot

Ohjeessa esitetyt tasot kuvaavat kunkin kohdan tärkeyttä. Taso 1 on tärkein ja taso 3 vähiten tärkeä. Tasot eivät perustu suoraan mihinkään standardiin vaan ne ovat tekijöiden näkemys asioiden tärkeydestä. Sivujen esteettömyyden korjaus kannattaa aloittaa tason 1 asioista.

Sivuston koodin validointi

Html-, xhtml- ja css-koodien validointi. Validi dokumentti noudattaa dokumenttityyppinsä määrityksiä. Validoimalla dokumentti varmistetaan että sen elementit ovat oikeiden elementtien sisällä, elementeillä on oikeat ja vaaditut attribuutit jne. Toisin sanoen varmistetaan dokumentin rakenteen eheys. Selaimet yrittävät korjata dokumentin virheitä vaihtelevalla menestyksellä, joten pelkkä selaimella testaus ei takaa dokumentin eheyttä. Validoinnilla varmistetaankin sivuston toimivuus myös selaimilla, joita ei pystytä testaamaan mukaan lukien tulevat selaimet. Validointi on tarkemman testaamisen perusedellytys. Taulukossa WDG-, W3C, www.nettipoliisi.com -validaattorit html- ja css-tiedostoille.

Validaattoreita
W3C xhtml http://www.htmlhelp.com/tools/validator/
WDG xhtml http://validator.w3.org/
W3C css http://jigsaw.w3.org/css-validator/
WDG css http://www.htmlhelp.com/tools/csscheck/
Sekalaisia testiohjelmia http://appro.mit.jyu.fi/haku/html.shtml
xhtml, css, yms. http://www.nettipoliisi.com

Sivuston esteettömyyden tarkistus työkaluilla

WAI-tasot automaattisilla työkaluilla, esimerkiksi Bobby. Automaattiset työkalut eivät yksinään riitä, mutta ne löytävät osan virheistä ennen kuin sivustoa aletaan tarkistaa käsin.

Yleistä

Taso 1

  • Käykö etusivulta heti ilmi, minkä yrityksen tai yhteisön sivulla ollaan?
  • Löytyvätkö yhteystiedot helposti, myös katuosoite ja puhelinnumero tai mahdolliset aukioloajat? Merkittävä osa kävijöistä etsii näitä tietoja.
  • Pääseekö käyttäjä suoraan etusivulle ilman erillistä kansisivua? Tällainen "splash"-sivu on yleensä turha, vieläpä kiusallinen. Samoin animoituja johdantoja on käytettävä harkiten.
  • Löytyvätkö eri kieliversiot heti etusivulta? Englanti, ruotsi, viittomakieli, selkokieli, blisskieli jne. Apache-palvelin mahdollistaa automaattisen kielivalinnan käyttäjän selaimen asetuksien perusteella. Lisätietoa:
  • Löytyykö sivulta tieto siitä, milloin sisältö on päivitetty?

Taso 2

  • Löytyykö etusivulta ymmärrettävä, yhden lauseen kuvaus sivuston omistajasta?
  • Tuntevatko asiakaspalvelijat (webin sisällöntuottajat) aiheensa hyvin?
  • Onko sivun osoite (URL) helppo muistaa tai päätellä?

Taso 3

  • Onko sivulla näkymätön "suoraan sisältöön" - linkki? Linkki helpottaa esimerkiksi sivua ruudunlukuohjelman avulla lukevien käyttäjien nopeaa siirtymistä ohi toistuvien palkki- ja menutietojen.

Informaatiosuunnittelu

Taso 1

  • Onko sivuston rakenne selkeä?
  • Kuvaako selainikkunan yläpalkissa näkyvä title-elementti eli sivun otsikko sivun sisältöä? Title on Googlen mielestä sivun tärkeimpiä kohtia, ja hakusanan täsmääminen sivun otsikkoon nostaa sivun sijoitusta hakutuloksissa. Se tulee myös kirjanmerkin tekstiksi.
  • Löytyykö haku-toiminto helposti? Haku-toiminto on tarpeellinen erityisesti laajoilla sivustoilla. Haun yleisin paikka on sivun oikeassa yläkulmassa.
  • Tietääkö käyttäjä missä on, mitä on jo katsonut ja mitä vielä voisi nähdä? Esim. kuljettu polku näkyy sivun ylälaidassa tai katsottujen linkkien väri muuttuu.

Taso 2

  • Onko sisältö ryhmitelty selkeästi asiakokonaisuuksiksi?
  • Erottuvatko eri tasojen taitot (lay-outit) toisistaan? Esim. suunnistus- ja sisältösivu taittojen tulisi olla erilaiset.
  • Välittyykö viesti yhdellä vilkaisulla? Ruudulta lukeminen on hidasta ja työlästä, lukijat silmäilevät sivuja. Jos sivu on pitkä (yli 500 sanaa), on sivun alkuun hyvä laittaa sisällysluettelo, joka toimii linkkinä alaotsikoihin.
  • Onko sivustolla aakkosellinen hakusanaluettelo keskeisten sisältöjen löytämistä helpottamaan?
  • Ovatko kieliversiot erillään, omilla sivuillaan? Erikielisiä sivuja ei tulisi sekoittaa, ei myöskään käyttää erikielisiä lainauksia. Linkit eri kieliversioille tulee sijaita etusivun alussa. Katso automaattinen kielivalinta.

Taso 3

  • Miten käyttäjä erottaa tärkeän ja olennaisen tiedon? Hyvä sääntö on otsikoida selkeästi ja laittaa tärkeimmät asiat alkuun.
  • Löytyykö sivukartta helposti? Sivukartta helpottaa navigointia sivustoilla.
  • Onko sivustosta tarjolla selkokielinen versio? Jos sivuston oletettuihin kohderyhmiin kuuluvat kehitysvammaiset tai esimerkiksi suomea vieraana kielenä puhuvat, pitäisi sivuista olla selkokielinen versio tai linkitys toiseen sivustoon, joka sisältää selkokielellä vastaavan tiedon.

Linkit

Taso 1

Linkit ovat hypertekstin olennainen osa, joten niiden pitää toimia ja ne pitää löytyä helposti.

  • Ovatko linkit mahdollisimman kuvaavia? Linkkitekstien tulee olla kuvaavia itsenäisenäkin. Erityisesti ääniselainten käyttäjät turvautuvat usein linkkilistaan, jossa hyvän linkkitekstin merkitys korostuu.
  • Erottuvatko linkit tarpeeksi selvästi muusta tekstistä? Linkkien tulisi olla alleviivattuja ja sinisiä. Toisaalta pelkkään väritykseen ei tule luottaa. Lisätietoa värityksestä: http://colorfilter.wickline.org/
  • Erottuvatko peräkkäiset linkit toisistaan? Linkit tulee sijoittaa sivulle riittävän väljästi. Linkkien välissä tulee olla jokin näkyvä erotinmerkki. Rivinvaihto tai välilyönti ei ole riittävä erotin.

Työkalu linkkien toimivuuden testaamiseen:

Taso 3

  • Onko sivuilla häiritsevän paljon linkkejä ulos sivustosta?

Kieliasu

Taso 1

Kieliasun ensimmäinen tarkistus voidaan tehdä esimerkiksi Wordin oikoluvulla. Se ei kuitenkaan sovellu tekniseen tekstiin.

  • Onko teksti mahdollisimman sujuvaa ja selkeää yleiskieltä?
  • Ymmärtääkö kohderyhmä tekstissä käytettyä kieltä? Tekstin tulee olla asiakaslähtöistä.
  • Onko lauserakenne kevyt ja yksinkertainen? Ovatko välimerkit paikoillaan?
  • Onko teksti jaoteltu kappaleiksi? Kertooko kukin kappale yhden asian?
  • Alkaako kukin kappale virkkeellä, joka kertoo oleellisen kappaleen sisällöstä?
  • Eteneekö teksti loogisesti?
  • Ovatko lyhenteet, erikoismerkit ja koodimerkinnät kirjoitettu auki? Normaalissa hyvässä yleiskielessä käytetyt lyhenteet (esim. EUR, € tai km) ovat hyväksyttyjä, mutta niiden liikakäyttöä tulee välttää.
  • Onko kieliasu tarkistettu ja kirjoitusvirheet poistettu? Moitteetonta kirjoitusta on helppo lukea, virheet ärsyttävät.

Ulkoasu ja visuaalisuus

Taso 1

  • Onko sivusto ulkoasultaan selkeä ja rauhallinen? Ulkoasu ei saa haitata sisältöön tutustumista. Tekstin on erotuttava tausta ja värien käytön tulee olla hillittyä.
  • Toimivatko sivut ilman värejä? Värisokeat ja mustavalkonäytön käyttäjät eivät välttämättä erota värejä toisistaan. Lukemisen kannalta on selkeintä lukea mustaa tekstiä vaalealla taustalla. Taustakuvan päälle sijoitettu teksti on usein erittäin vaikea hahmottaa. Apuväline värien testaukseen: http://colorfilter.wickline.org/
  • Jos sivusto sisältää animaatioita, ovatko ne tarpeellisia? Animaatiot kaappaavat helposti liikaa huomioita ja vievät harhapoluille. Niitä tuleekin käyttää vain jos ne ovat välttämättömiä.
  • Onko sivujen visuaalinen suunnittelu johdonmukaista? Peruselementtien tulee sijaita eri sivuilla samalla kohtaa. Elementtien sijoittelussa kannattaa ottaa mallia suosituista sivuista ja seurata yleistä käytäntöä. Näin käyttäjä löytää asiat helpommin. Esimerkiksi haku-kenttä sijaitsee useimmiten sivun oikeassa yläkulmassa.

Taso 2

  • Soveltuuko ulkoasu kohderyhmälle?

Tekstin asettelu

Taso 1

  • Voiko sivun käyttäjä valita haluamansa tekstikoon selaimesta ja sopivimman palstan leveyden selainikkunan kokoa säätämällä? Sivuston ja tekstin koon muuttamisen mahdollisuus sallii sivuston lukemisen mahdollisimman monella päätelaitteella. Se myös mahdollistaa usean sivun lukemisen rinnakkain normaalissa graafisessakin ympäristössä.
  • Onko teksti kursivoitua? Kursivoitu teksti on vaikealukuista huonon resoluution vuoksi ja sitä tuleekin käyttää vain säästeliäästi tehostekeinona.
  • Onko leipäteksti kirjoitettu pienillä kirjaimilla? Suuraakkosilla kirjoitettu teksti on hidaslukuista ja se koetaan usein huutamisena.

Taso 2

  • Jos tekstiä ei ole koko sivun leveydeltä, onko palsta sopivan levyinen? Yli 100 merkkiä leveää palstaa on vaikea lukea ja tavutuksen puute saa alle 50 merkin levyisen palstan huojumaan liikaa.
  • Onko tekstisisällöt tasattu vasemmalle? Vasen tasaus on lukukelpoisinta, sillä siistiä tasapalstaa on vaikea saada aikaan selainten rajallisten tasaus- ja harvennusominaisuuksien vuoksi.
  • Onko rivivälitys sopiva? Liian tiheä rivivälitys vaikeuttaa lukemista. Sopiva välitys riippuu kirjasimen koosta.
  • Onko leipätekstiksi valittu päätteetön fonttityyppi? Huonoresoluutioisena päätteet sotkevat kirjasinten muodot.

Kuvat

Taso 1

  • Onko kuville ja muulle sisällölle, joka ei ole tekstiä, annettu samansisältöinen tekstivaihtoehto? alt-tagi kuvaa kuvan sisällön merkityksen käyttäjälle, joka ei näe kuvaa. Title taas antaa lisäinformaatiota alt-tekstille tai kuvalle. alt- ja title-tagien tulisi olla lyhyitä (alle 50 merkkiä), pitkät kuvaukset tulisi kirjoittaa kuvatekstinä. Koristekuvissa joilla ei ole sisällöllistä merkitystä käytetään alt="".
  • Onko kaikilla kuva- tai graafisilla linkeillä alt-tekstit? Web Developer Toolbar Mozilla-selaimille auttaa puuttuvien elementtien etsimisessä. http://chrispederick.com/work/firefox/webdeveloper/

Taso 2

  • Onko yli 500 pikseliä leveistä kuvista tarjolla pienennetty versio, joka toimii linkkinä isoon kuvaan?
  • Ovatko käytetyt kuvatiedostot sopivan kokoisia ts. latautuuko sivu riittävän nopeasti? Suositeltava web-sivun koko on maksimissaan 50 kt.

Suuret taulukot vaativat prosessointiaikaa ja isot sivut latautuvat hitaasti (yhteyden nopeudesta riippuen).

Taso 3

  • Onko kuvien käyttötapa johdonmukainen läpi sivuston? Jos käyttäjä tottuu faktakuviin, niin alasivulla symbolisena käytetty kuva ei selity.

Soveltuvuus, tekninen saavutettavuus

Taso 1

  • Toimiiko sivu eri selaimilla? IE ja Mozilla tärkeimmät graafiset selaimet, lisäksi Opera Windows puolella. Linux- ja Macintosh-ympäristöjen selaimilla olisi myös hyvä testata, jos vain mahdollista.
  • Lisäksi tulisi testata sivut tekstiselaimilla. Lynxin toimivuus on tärkeintä, sillä se on yleisin ja monet ruudunlukuohjelmat yms. käyttävät tätä apuna. Links, Elinks, W3M ovat kehittyneempiä tekstiselaimia, mutta jos Lynx toimii, ei näillä pitäisi olla ongelmia. Ainakin nämä selaimet löytyvät ATK-keskuksen palvelimilta.
  • Toimiiko sivu ilman tyylitiedostoja? Esimerkiksi HTML-dokumentin on oltava luettavissa senkin jälkeen, kun siihen liittyvät tyylitiedostot on jätetty pois.
  • Toimiiko sivu ilman Javascriptiä? Esimerkiksi lomakkeen kenttien tarkastuksessa Javascript on hyödyllinen, mutta tarkistaminen tulisi tehdä myös muulla keinoin.
  • Onko sivuilla jotain, mikä ei toimi? Esim. toimivatko kaikki linkit? Työkalu linkkien toimivuuden testaukseen:
  • Pystyykö käyttäjä vaikuttamaan kirjasimen kokoon? Pysyykö sivu kasassa silloinkin, kun kirjasinkoko muutetaan hyvin suureksi?
  • Onko kehyksille tarjottu toimiva nonframes-vaihtoehto? Mieti, ovatko kehykset välttämättömät.
  • Onko palstoitetuille sivuille annettu palstoittamaton vaihtoehto (tekstiversio)? Mieti, onko palstoittaminen välttämätöntä.
  • Käynnistyvätkö ääni- ja kuvatiedostot linkkiä seuraamalla? Itsestään avautuvat audiovisuaaliset esitykset häiritsevät keskittymistä. Erityisesti puhesyntetisaattorin käyttäjille ne ovat kiusallisia.

Taso 2

  • Mukautuuko toteutus erilaisten kohderyhmien tarpeisiin? Esim. vanhukset, heikkonäköiset, punavihersokeat ja lapset.
  • Onko taulukoille tarjottu tekstivaihtoehto? Toimivatko taulukot myös puhesyntetisaattorin lukemina?
  • Tulostuuko sivu oikein? Eri selaimet tulostavat sivut eri tavalla.

Taso 3

  • Toimiiko sivu vanhoilla selaimilla? Erityisesti Netscape 4.7 ongelmallinen.
  • Toimiiko sivu mobiiliselaimilla? Operan mobiiliversio on yleisin mobiiliselain. Koska kännykällä testaaminen on kallista ja hankalaa, testauksen voi suorittaa myös graafisilla selaimilla:
Mobiilitestaus selaimilla
Opera Vaihto-F11 (Jos handheld-tyyli on olemassa, käytetään sitä. Muuten Opera käyttää omaa Small Screen Rendering - tekniikkaa.)
Mozilla http://appro.mit.jyu.fi/tools/handheld/ tai em. Web Developer Extension
  • Toimiiko sivu myös ääniselaimilla? Toimivuus Lynxillä on perusedellytys ääniselainten toimivuudelle.

Vuorovaikutussuunnittelu

Taso 1

  • Onko käyttäjällä mahdollisuus osallista verkkosivuston kehittämiseen antamalla palautetta? Palautteen lähettämisen tulisi olla mahdollisimman helppoa. Valmis palautelomake ei vaadi sähköpostiohjelman asettamista ja toimii kaikilla.
  • Antaako systeemi vastaanottokuittauksen esimerkiksi lomakkeiden lähettämisen jälkeen?

6.5.2005 Henrik Martikainen

Jaa |
kuuluu seuraaviin kategorioihin: , ,
Pikalinkit
Yhteystiedot

Esteetön yliopisto

Opintohallintopäällikkö Tuula Maijanen
puhelin 0500 546 003
tuula.maijanen(at)jyu.fi

Rakennettu ympäristö

Tilapalvelupäällikkö Timo Piispanen
puhelin 040 805 4998
timo.e.piispanen(at)jyu.fi