WWW-sivujen esteettömyys, netiketti ja yksityisyys
- Luentotaltiointi
- Sähköpostinetiketti
- Yksityisyys
- WWW-sivujen käytettävyys ja esteettömyys
- Yleistä käyttävyydestä ja esteettömyydestä
- Sivujen suunnittelun perusidoita
- Sivuston rakenne
- Sivuston otsikkotiedot
- Sivuston sisältö
- Sivuston ulkoasu
- Navigointi
- Linkit
- Kuvien käyttö
- Sivujen latausajat
- Selainten uudet ja hienot ominaisuudet
- Näyttöresoluution huomioiminen
- Kehyksien käyttö
- Sivuston toiminnallisuus
- Sivujen esteettömyyden varmistaminen
- Erilaisia selaimia ja niiden erikoispiirteitä
- Esteettömyyteen ja käytettävyyteen liittyvää aineistoa
Luentotaltiointi
- tyovaline0802.mp3 3.3M
- tyovaline0803.mp3 3.6M
- tyovaline0804.mp3 3.5M
- tyovaline0805.mp3 3.5M
- tyovaline0806.mp3 4.3M
- tyovaline0807.mp3 3.7M
Tämän luennon aiheita ovat WWW-sivujen käytettävyys ja esteetteettömyys, sähköpostiin liittyvä netiketti ja yksityisyys tietoverkkoja käytettäessä.
Sähköpostinetiketti
Seuraavaan on listattu lyhyesti hyvään sähköpostikäyttäytymiseen liittyviä asioita. Tarkemmin aiheesta voit lukea artikkelista Sähköpostinetiketti. Netikettejä löytyy muitakin - Suomen Internet-palveluiden tarjoajien netiketti.
Sähköpostiviesteihin pääsääntöisesti vain tekstiä
- Liitetiedostojen lähettämistä on syytä välttää
- Jos suinkin mahdollista niin kirjoita asiasi ennemmin varsinaiseen sähköpostiviestiin äläkä liitetiedostoon
- Tarkista kaikki lähettämäsi liitetiedostot virustorjuntaohjelmalla
- Tarkista kaikki saamasi liitetiedostot virustorjuntaohjelmalla
- Varmista, että vastaanottaja pystyy hyödyntämään lähettämäsi liitteen.
- Älä lähetä suuria liitetiedostoja jollet ole TÄYSIN VARMA, että ne eivät aiheuta vastaanottajalle hankaluuksia. Kaikkien sähköpostijärjestelmät eivät pysty käsittelemään suuria tiedostoja.
- Koskaan liitteitä ei saa laittaa sähköpostilistoille.
- Mieluiten unohda liitteet kokonaan ja laita tiedostosi ennemmin WWW-sivulle ja lähetä sähköpostissa pelkkä URL.
- Lisää perusteluja asiasta löytyy esimerkiksi artikkelista: "Miksi on typerää postittaa sähköpostin liitetiedostona MS Word -dokumentteja?".
- Älä lähetä HTML-muotoisia sähköpostiviestejä
- HTML-muoto vie enemmän tilaa kuin puhdas teksti
- Kaikkien sähköpostiohjelmat eivät ymmärrä HTML-muotoisia viestejä
<html><head><title></title></head><body bgcolor=#FFFFFF text=#000000>Gain 1-4 inches<br><br> Enlarge your PENIS and improve your SEX Life!<br><br> 100% All Natural Penis Enlargement Pills<br><br> please visit our web site <a href=http://www.grasphere.com/yt4>click here</a></p><font color=#ffffff>[RANDOMIZE][RANDOMIZE][RANDOMIZE]</body></html>
- HTML-dokumentissa voi kulkeutua helposti mukana viruksia
- HTML-dokumenttien lukemista voidaan seurata webbugien avulla
- HTML ei tuo mitään oleellista lisäarvoa sähköpostiviestiin
- Spammerit lähettävät usein HTML-muotoisia viestejä jonka takia sähköpostisuodattimet luokittelevat HTML-muotoisen viestin herkästi spammiksi.
Ole kohtelias sähköposteissasi
- Käytä kuvaavia otsikoita.
- ÄLÄ HUUDA vaan kirjoita pienillä kirjaimilla.
- Käytä huutomerkkiä asiallisesti.
- Opettele käyttämään ja tulkitsemaan hymiöitä.
Lainaa viestejä asiallisesti
- Vastatessasi viesteihin lainaa edellisestä viestistä vain oleellinen osa jota kommentoit.
- Älä jätä lainaukseen koko viestiä, vaan poista siitä kaikki epäolennainen.
- Lainauksen on aina tarkoitus selventää käsiteltävää asiaa.
- Liitä omat kommenttisi lainatun tekstin alapuolelle.
- Lainattu teksti merkitään >-merkeillä.
- Älä lainaa signaturea! Oikein merkityn signaturen poistaminen sähköpostiviestistä automaattisesti onnistuu joidenkin sähköpostiohjelmien asetuksista.
- Viestiä ei saa kirjoittaa signaturen alle!
Käytä oikeanlaista allekirjoitusta (signaturea) (jos edes käytät sitä!)
- Rajoita allekirjoituksen korkeus neljään (4) riviin.
- Rivinpituus maksimissaan 80 merkkiä, niin signature pysyy kunnossa myös päätelaitteilla.
- Nimi ja sähköpostiosoite ensin. Signatureen ei kannata välttämättä laittaa osoitetietojaan, mutta linkki www-sivuille on hyvä laittaa.
- Käytä oikeita erotinmerkkejä (sigdashes
--eli viiva viiva välilyönti) signaturen ja varsinaisen viestin välillä niin sähköpostiohjelmat osaavat automaattisesti poistaa signaturesi. - Lisää signature aina koko viestin loppuun, tällöin replyyn vastaaminen ei poista edellistä viestiä.
Muuta tärkeää muistettavaa
- Varmista, että ohjelmasi vastaa viesteihin oikein (Subject-rivin alussa Re: eikä esim. Vs:). Tämä on erityisen tärkeää viestien lähettämisessä nyyseihin.
- Rajoita viestisi rivinpituudeksi 65-72 merkkiin (ainakin alle 80 merkkiä).
- Älä koskaan lähetä ei-toivottua roskapostia eli SPAMMIA
- Älä koskaan levitä ketjukirjeitä (HOAX).
SPAM
SPAM on ei-toivottua roskapostia eli saman viestin lähettämistä usealle henkilölle tai useaan uutisryhmään ilman vastaanottajien ennakkosuostumusta tai hyväksyntää, viestin sisällöstä riippumatta.
- Suojautuminen spammilta hoidetaan yleensä suoraan postipalvelimen ylläpidon toimesta.
- Voidaan yrittää suojautua myös omatoimisesti sähköpostia suodattamalla.
- ATK-keskuksessa on käytössä SpamAssasin, jota käytetään arvioimaan onko viesti spammiä vai ei. Ohjelman lisäämien tietojen perustella käyttäjä voi suodattaa viestin pois.
- SPAM kuormittaa turhaan postituspalvelimia.
- Aiheuttavat kustannuksia sähköpostin lukijalle yhteysmaksuina yms.
- Spamista voi valittaa esim. spamcopin avulla.
- Spammaajien omiin lupauksiin poistaa sinut heidän listaltaan ei kannata luottaa!
- Lisätietoja voi lukea ATK-keskuksen roskaposti-sivulta ja sfnet.viestinta.roskapostit-ryhmän VUKK:sta.
Valtionhallinnon sähköpostien ja lokitietojen käsittelyohje (PDF) sanoo roskapostista:
- Roskapostilla tarkoitetaan turhia ja häiritseviä sähköpostiviestejä, joita käyttäjä ei halua; yleensä on kyse mainospostista
- Luonnolliselle henkilölle - kuten työntekijälle - osoitettu suoramarkkinointi (kaupallinen viestintä, mainosposti) on kielletty TTsL 21 §:n 1 momentin mukaan automaattisten järjestelmien - kuten sähköpostin - avulla, ellei henkilö ole antanut etukäteistä suostumusta
- Oikeushenkilö - kuten viranomainen - voi halutessaan kieltää roskapostin, mutta etukäteissuostumusta ei edellytetä
- Virkasähköpostiosoitteeseen tullut roskapostiviesti katsotaan oikeushenkilöön kohdistuvaksi, jonka työnantaja voi tarvittaessa kieltää
Samaa asiaa käsittelee myös EU:n direktiivin " henkilötietojen käsittelystä ja yksityisyyden suojasta sähköisen viestinnän alalla" 13 artikla - Ei-toivottu viestintä.
Sähköpostilistat
Sähköpostin lähettämisessä postituslistalla pätevät edellä esiteltyjen periaatteiden lisäksi myös seuraavat periaatteet:
- Tarkista vastaatko koko listalle vai henkilökohtaisesti.
- Varmista, että ohjelmasi lähettää pelkkää tekstiä.
- Älä lähetä liitetiedostoja postituslistoille. Laita tiedosto WWW:hen ja ilmoita listalla sen osoite.
- Varmista, että sähköpostiohjelmasi ei lähetä automaattisia lomailmoituksia tms. poissaoloviestejä koko listalle.
- Älä lähetä listalle liittymiseen tai poistumiseen liittyviä viestejä listalle vaan listan ylläpitäjälle.
Sähköpostin suodatus
- Suodattamisella voidaan lajitella posteja tarpeen mukaan.
- Sähköpostiohjelmista voi löytyä filttereitä postin suodattamiseen
- Suodattaminen voidaan tarvittaessa hoitaa myös erillisillä ohjelmilla.
Nyysit (Usenet)
- Opettele lukemaan FAQ (Frequently Asked Questions) -palstoja
- Nyysiohjelmat
- Varmista, että ohjelmasi lähettää nyyseihin vain tekstiä. Tämä koskee erityisesti Netscapea, Internet Exploreria ja Outlookia.
- Varmista, että ohjelmasi vastaa nyysiviesteihin oikein (Subject-rivin alussa Re: eikä esim. Vs:)
Lisätietoa
- Netiquette Guidelines
- Quoting Style in Newsgroup Postings
- How do I quote correctly in Usenet
- Nyysiopas
- Meiliopas
- Jakelulistat
- Ei-toivottu viestintä Internetissä
- Jyväskylän yliopiston tietokonejärjestelmien ja tietoliikenneverkon käytön säännöt
- Lost in Usenet
- Tekijänoikeudet
- Listaetiketti
- Seitsemän ohjetta nyysseihin kirjoittajalle eli miten vaikutat kokeneelta vaikka olisitkin aloittelija
- New Regulatory Framework for electronic communications infrastructure and associated services
- EU:n direktiivi henkilötietojen käsittelystä ja yksityisyyden suojasta sähköisen viestinnän alalla
- Netiketti
Yksityisyys
Et ole verkossa koskaan yksin. Isoveli valvoo aina!
Tieken ajo-ohjeet valtatielle:
Yksityisyys on perus- ja ihmisoikeus. Oikeus yksityisyyteen merkitsee sitä, että henkilö saa päättää, mihin hänen henkilötietojaan käytetään.
Tiesitkö että:
- Joka kerta kun soitat puhelimella niin tieto siitä kenelle soitat ja kellonaika jää operaattorin tietokantaan.
- Päälläoleva kännykkäsi paljastaa aina sijaintisi - itselleen voi nykyisin ostaa paikannuspalveluita.
- Käyttäessäsi kaupan etukorttia tallentuvat tiedot kaikista ostoksistasi kaupan tietokantaan.
- Helsingissä käytössä olevan matkakortin käyttäjistä HKL tietää kuka käytti, missä ja milloin.
- Jokainen käyttämäsi WWW-palvelin tallentaa koneesi osoitteen.
- WWW-mainostajat keräävät evästeiden avulla tietokantaa selaamistasi WWW-sivuista.
- Sinusta voidaan rakentaa lähes täydellinen profiili yhdistelemällä kaikkia näitä tietokantoja!?
Vieläkö meillä on yksityisyyttä jäljellä?
Evästeet (Keksit, Cookies)
- Eväste on pieni määrä tietoa, jonka WWW-palvelin voi pyytää selainta tallentamaan. Myöhemmin sama palvelin voi pyytää tätä tietoa selaimelta.
- Evästeen avulla ei voida vakoilla käyttäjän koneesta mitään sellaisia tietoja joita käyttäjä ei itse ole antanut.
- Evästeillä voidaan kuitenkin seurata käyttäjän liikkumista www-sivuilla. Esimerkki: http://privacy.net/track/
- Evästeillä voidaan mahdollistaa myös erilaisia käyttäjää hyödyttäviä palveluja.
- Lisätietoja: http://www.cookiecentral.com/faq/
Web Bugs
- Web bugit ovat HTML-muotoisissa sähköpostiviesteissa tai ihan tavallisissa WWW-palvelimilla sijaitsevissa WWW-sivuissa olevia kuvia joilla voidaan seurata dokumentin lukijoita.
- Usein web bugit ovat näkymättömiä kuvia (1 pikselin kokoisia)
- Web bug paljastaa milloin sähköpostiviestin vastaanottaja lukee viestin ja myös millä koneella ja selaimella.
- Mikä tahansa kuva voi toimia web bugina.
P3P
- Periaatteena on, että käyttäjälle annetaan selkokielisiä tietoja sivuston tarvitsemista tiedoista tarvittaessa.
- Mahdollistaan oman käyttäjätietojen käytön parempi hallinta sivuston käyttäjälle.
- Vaihdetaan tietosuojatietoja sivuston ja käyttäjän selaimen välillä.
- Jos ristiriitoja, niin voidaan kysyä käyttäjältä tarkennusta.
Adware / Spyware
- Adware - ohjelma, joka näytää mainoksia.
- Spyware - ohjelma, joka lähettää tietoa käyttäjästä kertomatta siitä käyttäjälle.
- Ohjelma voi olla yhtä aikaa molempia eli näyttää mainoksia ja lähettää tietoja käyttäjästä ilman lupaa.
- Monet evästeet luokitellaan spywareksi.
- Adwarea tai Spywarea voi asentua koneelle selaimen vikojen takia tai asentamalla ohjelmistoja joissa näitä tulee mukana.
- Kotikone on helppo puhdistaa Ad-awarella. tai SpyBotilla
- Tietojen lähettämisen estää tarvittaessa tehokkaasti palomuuri!
Lisätietoja yksityisyyteen liittyen
- Yksityisyys - Effi
- Privacy Analysis of our Internet Connection
- Security Audits
- Shields Up
- Georgi Guninski Security Research
- P3P
WWW-sivujen käytettävyys ja esteettömyys
Seuraavassa käsitellään WWW-sivujen käytettävyyteen ja esteettömyyteen liittyviä asioita. Tarkoituksena on käydä läpi asioita, joiden avulla sivujen käytettävyyttä ja esteettömyyttä saadaan parannettua. Tarkastelun kohteena on pääosin sisällön tuotannossa huomioitavat asiat, mutta mukaan on otettu myös suunnitteluperiaatteita yleisemminkin. Käytettävyyttä ja esteettömyyttä edistäviä asioita on koottu seuraavaan teknisen asiayhteyden mukaisiin kokonaisuuksiin.
Yleistä käyttävyydestä ja esteettömyydestä
WWW-sivujen esteettömyydellä eli saavutettavuudella (engl. Accessibility) tarkoitetaan yksinkertaisesti sitä, että WWW-sivujen sisältö on kaikkien käytettävissä. Esteettömän sivuston tekemisessä täytyy huomioidaan sekä erilaiset käyttäjät että erilaisten tekniikoiden käyttäjät. Esteettömistä WWW-sivuista hyötyvät erityisesti käyttäjäryhmät, joilla on fyysisiä rajoitteita (esim. näkövammaiset) tai teknisiä rajoitteita (esim. mobiililaitteet). WWW-sivujen tekeminen esteettömiksi auttaa kuitenkin myös muitakin käyttäjiä, koska sivujen tekemisessä otetaan huomioon käyttäjien erilaisuus.
WWW-sivujen käytettävyydellä (engl. Usability) tarkoitetaan WWW-sivujen helppokäyttöisyyttä ja ymmärrettävyyttä siihen tarkoitukseen, johon sivusto on tarkoitettu. Erona esteettömyyteen on, että käytettävälle WWW-sivustolle ei käyttäjä välttämättä edes pääse teknisten ongelmien vuoksi. Tämän vuoksi on tärkeää kiinnittää huomiota molempiin asioihin! Usein WWW-sivujen esteettömyyden edistäminen edistää samalla myös WWW-sivujen käytettävyyttä.
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 ja käytettäviksi puoltavat myös seuraavat voimakkaat kannanotot:
- USA:n esteettömyyslainsäädäntö - Section 508
- eEurooppa-aloite
- JHS 129 Julkishallinnon WWW -sivuston suunnittelun ohjeet
- Esteettömyys-aloite - WAI - W3C
Seuraavissa luvuissa esitettävät asiat perustuvat Jacob Nielsen WWW-sivujen käytettävyyteen liittyviin artikkeleihin, W3C:n Web Content Accessibility Guidelines 1.0 Verkkosisällön saavutettavuusohjeet W3C (suomenkielinen versio) sekä puhtaaseen maalaisjärkeen ongelmien ratkaisemisessa.
Sivujen suunnittelun perusidoita
Seuraavassa muutamia perusideoita, jotka kannattaa muistaa sivujen tekemisen jokaisessa vaiheessa.
- Erotetaan sivuston rakenne ja sisältö kokonaan ulkoasusta!
- Käytä rakenteen merkisemiseen jotakin olemassa olevaa kielioppia (esim. HTML Basic)
- 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.
- Sivujen ja sivuilla olevan informaation on mukauduttava käyttäjän vaatimusten mukaisesti joka suhteessa.
- Tee sivuista kevyitä!
- Älä taita sivustoa taulukoiden avulla.
- Älä pakota käyttäjää tekemään mitään.
- Älä avaa uusia ikkunoita.
- Jokaista käyttäjäryhmää varten ei kannata luoda vaihtoehtoista sivua, vaan kaikille yksi yhteinen ja saavutettava vaihtoehto.
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Jokaisen edellisistä kohdista toteuttava kurssisivusto, mutta sivusto luonnollisestikaan ole täydellinen.
- Taulukkotaitettu Poliisin sivusto, joka ei toimi tekstiselaimella kunnolla vaikka onkin osittain yritetty tehdä oikein.
- Sampo, joka ei toimi tekstiselaimilla mitenkään järkevästi.
- Osuuspankin verkkopankki pda-laitteille
Sivuston rakenne
Sivuston tai sivujen rakenne merkitsee paljon sivujen käytettävyyden kannalta. Seuraavaan on kerätty muutamia sivuston käytettävyyttä ja esteettömyyttä parantavia asioita.
- Ä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).
- Sivuston oltava pysyvässä paikassa. Jos paikka muuttuu, niin älä tee väliaikaista sivustoa.
- Kerro sivuilla missä käyttäjä on menossa.
- "Leivänmuruja" voi käyttää sivun yläreunassa.
- Monet käyttävät myös URL:ää navigoinnissa.
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Viestintätieteiden sivusto, turha kynnysmatto
- Turha kynnysmatto Oddscomp-yrityksen sivuston alussa. Sivustolta löytyy muitakin esteettömyysongelmia, kuten kehyksiä, Flashiä ja avautuvia ikkunoita.
Sivuston otsikkotiedot
- Käytä selkeää title-tekstiä, jossa kerrotaan lyhyesti sivuston tarkoitus.
- Titlen käyttö helpottaa sivun löytymistä hakukoneilla sekä sivun merkitsemistä kirjanmerkkeihin.
- Titleen kannattaa laittaa ensin sivun otsikko, jonka jälkeen mahdollisesti sivuston otsikko.
- Metadataa voi käyttää sivujen informaation lisäämisessä.
- Link elementillä voidaan kertoa muiden dokumenttien suhteesta dokumenttiin. (edellinen, seuraava jne.)
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Jyväskylän yliopiston sivustolla otsikkotiedot ovat selkeitä ja lyhyitä.
- IBM:n otsikkotiedot ovat lyhyitä ja selkeitä.
- Huonoja esimerkkejä löytää paljon selatessaan ihmisten kotisivuja :)
Sivuston sisältö
- Sisällön rakenne on oltava oikea ja johdonmukainen (esim. H2 tulee H1:n alle jne.).
- Kerro sisältöön liittyvä kieli.
- 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:
- Panosta ensimmäisen kappaleen sisältöön. Ensimmäisestä kappaleesta on käytävä ilmi mitä asiaa sivulla käsitellään.
- 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ä julkaisemasta keskeneräistä sivustoa. Älä myöskään käytä sivustolla "Under Construction"-merkintöjä.
- Tarjoa vaihtoehto myös ääni- ja kuvasisällölle.
- Sivustoon liittyvät yhteystiedot on löydyttävä helposti!
- Tarjoa käyttäjälle tieto sivun sisällön päivitysajankohdasta.
- Käytä sivuston sisällön esittämiseen sopivaa merkkikieltä kuvien sijaan (esim. MathML).
- Käytä taulukkoa oikein taulukkomuotoisen tiedon ilmaisemiseen.
- Anna yhteenveto taulukon sisällöstä.
- Lisätietoa: How Users Read on the Web - Jacob Nielsen
Sivuston ulkoasu
- 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!).
- Varo värisokeuteen liittyviä väriyhdistelmiä.
- Älä turvaudu pelkästään värien käyttöön asian esittämisessä.
- Lisätietoa väreistä: Värit käyttöliittymässä
- Älä käytä taustakuvaa!
- Kaikki ulkoasuun liittyvät arvot täytyy määrittää suhteellisina. Seuraavassa muutamia esimerkkejä:
- Fonttikoko suhteellisena (2em)
- Marginaalit suhteellisena (2%)
- Sisällön leveys (50%)
- Käytä ainoastaan kahta tai kolmea eri kirjasinta.
- Käytä päätteetöntä kirjasinta (esim. Arial tai Verdana).
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- MTV3:n ja Ylen sivustojen kirjainkokoa on hankala muuttaa. MTV3:n sivulla on myös paljon kuvia, mainoksia ja animaatiota. Lisäksi näkyviin avautuu joissakin tapauksissa ylimääräinen ikkuna.
- FREEIMAGES-sivusto, joka avaa ylimääräisen ikkunan näkyville.
- Yhtenäinen kurssisivusto, jossa toteutuvat edelliset periaatteet.
Navigointi
Toteuta navigointi seuraavien periaatteiden mukaisesti.
- Etusivulta täytyy päästä yhdellä klikkauksella sivuston 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.
- Vältä sivustolla umpikujia!
- Erota sivuston perusnavigointi selkeästi sisällöstä. (Sekaantumisvaara myös mainosbannereihin!)
- Navigointipalkissa ei saa olla linkkejä, jotka osoittava sijaintisivulleen.
- Navigointipalkin nimet oltava havainnollisia.
- Navigointipalkkiin kannattaa sijoittaa linkit, joita käyttäjät tarvitsevat! Ei siis kannata tehdä rakennetta, jossa käyttäjä on käytävä jollakin sivulla päästäkseen tekemään haluamansa toimenpiteen.
- Navigointi kannattaa sijoittaa sivun ylälaitaan tai vasempaan laitaan, koska käyttäjät etsivät sitä sieltä.
- Erota navigointilinkit toisistaan esimerkiksi tekemällä niistä listan tai lisäämällä niiden väliin erotinmerkin.
Linkit
- Älä tee "Klikkaa tästä" tai "More"-tyylisiä linkkejä, vaan linkkitekstin täytyy kertoa minne se johtaa.
- Käytä linkkitekstinä lyhyttä ja selkeää asiaa, joka ilmaisee minne linkki vie. Koko kappaleesta ei siis kannata tehdä linkkiä.
- Linkkitekstin pitäisi toimia myös asiayhteydestä irrotettuna.
- 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.
- Jos linkki johtaa "raskaaseen" dokumenttiin, niin dokumentin koko kannattaa mainita linkin yhteydessä.
- Lisätekniikoita tarvitsevalle sivulle johtavat linkit kannattaa merkitä selkeästi.
- Älä avaa linkin sisältöä toiseen ikkunaan.
- Henkilön nimestä linkki henkilön kotisivuille.
- Sähköpostiosoitteesta mailto-linkki.
- Erota linkit toisistaan esimerkiksi tekemällä niistä listan.
Kuvien käyttö
Seuraavassa muutamia kuvien käyttämisessä huomioitavia asioita.
- Älä käytä sivustolla kuvia liikaa.
- Kuviin ei kannata liittää tekstiä.
- Kuvien on liityttävä sivuston sisältöön.
- Kuvista vain tarpeellisin kohta sivulle (rajaaminen).
- Tee kuvasta sopivan kokonainen kuvankäsittelyohjelmalla.
- Tallenna kuva oikeaan formaattiin (jpg, png ja gif).
- Kuvien yhteiskoko sivulla ei saa ylittää 50 kB.
- Käytä kuvissa alt-attribuuttia, jossa kuvaillaan kuvan sisältö.
- Kuvan title-attribuutilla kerrotaan kuvan otsikkotiedot.
- Koristekuvissa alt-tekstinä voi käyttää tyhjää.
- 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.
- Taustakuvien käyttöä kannattaa välttää, koska hyvää ja informatiivistä taustakuvaa "ei ole olemassakaan".
- Kuvissa voi käyttää width- ja height-attibuutteja kuvan koon ilmoittamiseen. Atribuuteilla ei saa pienentää kuvia!
- Toinen mahdollisuus on määritellä kuvien koko CSS:ssä.
- Käytä suurista kuvista thumbnail-kuvia!
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.
Selainten uudet ja hienot ominaisuudet
- Lisätekniikoiden käytössä kannattaa olla varovainen, koska
- vanhemmat selaimet eivät tue lisätekniikkaa.
- kaikki eivät kuitenkaan voi tai halua käyttää lisätekniikoita.
- tekniikka toimii usein vain yhden selainvalmistajan selaimessa.
- Uuden tekniikan tuki leviää vasta muutaman vuoden kuluttua laajaan käyttöön, mutta silloinkaan siihen ei voi luottaa täysin.
- Varmista, että sisältö on myös saatavilla
- ilman tyylitiedoston käyttöä.
- ilman Javaa tai JavaScriptiä.
- ilman Flash-tukea. Flashillä toteutettu sivusto ei ole esteetön, mutta kehitystä asiaan on kuitenkin luvassa!
- Sivuston sisällölle täytyy siis löytyä vaihtoehto.
- Vältä käyttämästä dokumenttiformaattia (esim. PDF), jonka käyttö voi rajoittaa käyttäjiä.
- Tekniikoilla voidaan kuitenkin edistää joidenkin käyttäjien sisällön ymmärtämistä.
Näyttöresoluution huomioiminen
- Sivuston sisällön on oltava saatavilla niin suurilla kuin pienilläkin näytöillä.
- Sivua ei saa kiinnittää millekään resoluutiolle, vaan sivun täytyy skaalautua selainikkunan mukaan.
- Sivuston optimitoiminta kannattaa suunnitella 800x600 tai suuremmalle resoluutiolle.
- Sisältön on kuitenkin oltava 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ää!
- Skaalautuvuus auttaa myös tulostettaessa.
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Juhta-sivuston sivu osa, jossa ongelmia sivun leveyden skaalautumisessa.
- Kurssisivu, joka skaalautuu joka suuntaan mahdollista ja kirjasinkin muuttuu.
Kehyksien käyttö
Älä käytä kehyksiä! Älä käytä kehyksiä! Jos kuitenkin jostakin syystä käytät, niin huolehdi seuraavista asioista.
- Käytä title-attribuuttia frame-elementissä.
- Kuvaa kehysten väliset suhteet.
- Tarjoa vaihtoehto noframes osassa!
- Huolehdi sisällön päivityksestä.
- Osasta täytyy löytyä vähintäänkin linkki kehyksettömään versioon.
- Ei missään nimessä tekstiä "päivittäisit jo selaimesi"!
- 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)
Seuraavassa muutamia hyviä ja huonoja esimerkkejä:
- Taulukkotaitettu VR:n framesivusto, jonka käyttö on tekstiselaimella hankalaa.
- Kehyksiin toteutettu kurssimateriaali, joka on käytettävissä myös tekstiselaimella.
Sivuston toiminnallisuus
Jos sivusto sisältää paljon materiaalia, niin sivuilla kannattaa toteuttaa etsi-toiminto sekä muita toimintoja, joiden avulla käyttäjä voi löytää helposti etsimänsä.
Sivujen esteettömyyden varmistaminen
Seuraavaan on koottu erilaisia asioita, joiden avulla voidaan varmistaa sivuston esteettömyys. Kaikkia keinoja ei ole kaikkien käytettävissä, mutta jo neljän ensimmäisen asian varmistaminen takaa sivujen saavutettavuuden useimmille käyttäjille.
- Anna erilaisten käyttäjien testata sivustoa jo varhaisessa vaiheessa.
- Tarkasta sivu arviointityökaluilla
- Testaa sivu erilaisilla graafisilla selaimilla erilaisilla asetuksilla.
- Testaa sivu merkkipohjaisilla selaimilla tai emulaattoreilla.
- Testaa sivu vanhemmilla selaimilla.
- Testaa sivu ääniselaimella sekä muilla käytössä olevilla apuvälineohjelmilla.
- Tarkista sivun kielioppi.
Erilaisia selaimia ja niiden erikoispiirteitä
- Ääniselaimia
- Merkkipohjaisia selaimia
- Lynx-selainta voi jokainen käyttää yliopiston Unix-koneen tunnuksilla.
- Lynx
- Graafisia selaimia

Käyttäjien kommentit