Esteettömän WWW-sivun rakenne

Merkitys ja tavoite

Artikkelissa hahmotetaan WWW-sivuilla käytettäviä perusrakenteita. Lisäksi opetellaan tunnistamaan rakenteellisesti arveluttavia WWW-sivuja.

Keskeiset ajatukset

WWW-sivun esteettömyys lähtee sivun sisällön ja ulkoasun erottamisesta sekä sisällön rakenteen tunnistamisesta ja merkitsemisestä.

Avainsanat

WWW-sivu, esteettömyys, rakenne, sisältö, ulkoasu ja tyyli.

Tiivistelmä

Esteettömän WWW-sivun toteuttaminen aloitetaan jo sivun tai sivuston suunnitteluvaiheessa. Ensimmäinen tehtävä on erottaa rakenne ja ulkoasu toisistaan, jonka jälkeen paneudutaan sisällön rakenteen merkitsemiseen. Sivun tekemisessä kannattaa myös vältellä esteellisiä ratkaisuja, kuten taulukkotaittoa, kehyksiä ja liian tiukkoja oletuksia sivun käyttäjistä.

Sisällysluettelo

Esteettömän WWW-sivun tekeminen on varsin yksinkertaista. Useimmiten meille on yksinkertaisempaa tehdä esteetön WWW-sivu kuin esteellinen WWW-sivu. Esteellisyys johtuu usein tarpeettomien ja monimutkaisempien tekniikoiden käytöstä. Tehdessämme esteettömiä WWW-sivuja meidän ei tarvitse osata kaikkein hienompia ja uusimpia tekniikoita, vaan voimme tehdä hyvän ja asiapitoisen perussivun. Toki erilaisten tekniikoiden käytöllä on oma hyvät puolensa, mutta niiden käyttö ei saa aiheuttaa ylimääräisiä esteitä sivujen käyttäjille. Tässä artikkelissa unohdamme hienot tekniikat ja tutustumme esteettömän perussivun rakenteeseen.

Mikä on WWW-sivu?

WWW-sivu on tavallista muotoilematonta tekstiä, joka voidaan kirjoittaa esimerkiksi jollakin tekstieditorilla (muun muassa Notepad). Muotoilemattomasta tekstistä ei pysty erottamaan siellä esiintyviä otsikoita tai muita rakenteita, kuten seuraavasta esimerkistä voi todeta. Tekstistä eivät myöskään erotu lauseista korostettavat sanat.

Otsikko
Tämä kappale on esimerkki tavallisesta muotoilemattomasta tekstistä.
Muotoilemattomasta tekstistä ei erotu lainkaan rakenteita.

Kuva 1. Muotoilemattoman tekstin
näkyminen selainikkunassa.

Pelkkä teksti ei ole kovinkaan miellyttävää luettavaa rakenteen puuttumisen vuoksi. Tekstistä on kuitenkin aina erotettavissa erilaisia rakenteellisia osia, kuten otsikoita, tekstikappaleita ja listoja. Rakenteelliset osat voidaan erottaa HTML-elementtien avulla, joita käyttämällä teemme muotoilemattomasta tekstistä HTML-sivun.

HTML-elementeillä (eli tageilla) voimme määrittää tekstikappaleille tai niiden osille rakenteellisen merkityksen. HTML-elementit eroavat muusta kirjoitetusta tekstistä siten, että ne on kirjoitettu pienempi kuin -merkin (<) ja suurempi kuin -merkin (>) väliin (<siis tänne>). WWW-sivuilla käytettävissä olevat HTML-elementit on määritelty etukäteen, joten esimerkiksi WWW-sivun pääotsikon merkitsemme <h1>-elementin (Heading 1) sisään. Vastaavalla tavalla merkitsemme tekstikappaleet <p>-elementin (Paragraph) sisään. Merkintöjä käyttämällä saamme edellisen esimerkin tekstin havainnollisempaan muotoon, koska nyt voimme erottaa selvästi otsikon ja tekstikappaleen toisistaan.

<h1>Otsikko</h1>
<p>Tekstikappale, jossa kerrotaan joitakin asioita.</p>
Otsikko ja tekstikappale on selkeästi erotettavissa toisistaan selainikkunassa.

Kuva 2. Merkityn rakenteen
näkyminen selainikkunassa.

HTML-elementti on yksinkertaisesti jokin englanninkielinen sana tai siitä tehty lyhenne, joka on sijoitettu pienempi kuin ja suurempi kuin -merkin väliin. Useimmat HTML-elementit tulevat tekstin sekaan pareittain eli niissä on sekä aloitus- että lopetuselementti. Seuraavassa esimerkissä tekstikappaleen sisältä löytyvä <strong>-aloituselementti kertoo, että sen jälkeen tuleva teksti täytyy korostaa (vahventaa). Vastaavasti lopetuselementti </strong> kertoo, että vastaavan aloituselementin vaikutus loppuu eli korostaminen täytyy lopettaa. HTML-elementin lopetuselementti on samanlainen kuin aloituselementti lukuun ottamatta kauttaviivaa (/) pienempi kuin -merkin jälkeen. Esimerkistä kannattaa myös huomata, että jotkin HTML-elementit voidaan lisätä toisten HTML-elementtien sisään.

<p>Kappaleessa on  <strong>tärkeää tekstiä</strong>.</p>
Vahvennus erottuu tekstikappaleesta selkeästi.

Kuva 3. Vahvennuksen erottuminen
tekstikappaleesta.

Käyttäessämme graafisia HTML-editoreja (esimerkiksi FrontPage, Composer) emme välttämättä näe HTML-elementtejä. Voimme kuitenkin määritellä rakenteen erilaisten rakenteellisten tyylien avulla. Graafisista HTML-editoreista pitäisi löytyä esimerkiksi otsikkoja varten tarkoitettu tyyli. Tyylin käyttäminen lisää oikean HTML-elementin tekstin joukkoon huomaamattamme. Tämä on varsin kätevää, mutta työkalun käyttämisessä piilee pieniä vaaroja! Graafisilla HTML-editoreilla saamme helposti tehtyä ulkoasultaan näyttäviä, mutta rakenteeltaan huonoja WWW-sivuja. Monilla meistä on ikävä taipumus unohtaa sivun rakenne käyttäessämme graafista HTML-editoria, koska editorissa on paljon pelkkään ulkoasuun liittyviä työkaluja. Tämän vuoksi meidän ei kannata koskaan käyttää ohjelmien työkaluriveiltä löytyviä muotoilutyökaluja, vaan ainoastaan valmiita rakenteellisia tyylejä!

Helpottaako hyvä rakenne työtämme?

Ehdottomasti! Jo alussa kannattaa opetella ajattelemaan WWW-sivun rakennetta ulkoasun sijaan. Ikävä kyllä monet WWW-sivujen tekijät unohtavat kokonaan rakenteen ulkoasun kustannuksella ja saavat varmasti kärsiä asiasta. Tällöin esimerkiksi ulkoasun muuttaminen voi olla todella työlästä. Hyvillä rakenteen määrittelyillä saamme aikaan selkeitä ja rakenteeltaan hyviä WWW-sivuja, joista löydämme etsimänsä helposti esimerkiksi päivittäessämme sivuja. Lisäksi hyvällä rakenteen määrittelyllä mahdollistamme ulkoasun muuttamisen mahdollisimman helposti ja kootusti. Tällöin voimme esimerkiksi muuttaa kaikkia WWW-sivun (tai sivuston) toisen tason otsikoiden kirjasintyyppiä muutamassa sekunnissa. Jos rakennetta ei ole määritelty oikein, kirjasintyypin muuttamiseen voi mennä useita minuutteja jo yhdelläkin sivulla.

Erityisen tärkeää on ajatella rakennetta käyttäessämme graafisia HTML-editoreja. Meidän ei kannata kiinnittää ulkoasuun mitään huomiota sivun rakenteen ja sisällön määrittämisen yhteydessä. Graafisia HTML-editoreja käytettäessä rakenne kannattaa määritellä editoreista löytyvien rakenteellisten tyylien avulla. Tällaisia tyylejä ovat esimerkiksi:

Tyylejä käytettäessä kannattaa miettiä aina tyylin merkitystä WWW-sivun rakenteelle. Otsikoita ei siis saisi tehdä suurentamalla kirjasinta ja lihavoimalla tekstiä, vaan se pitäisi tehdä merkitsemällä otsikko oikean tasoisella tyylillä. Kun sivun rakenne on kunnossa, voimme muuttaa sivun ulkoasua nopeasti ja yhtenäisesti. Hyvällä rakenteen määrittelyllä parannetaan samalla myös sivun esteettömyyttä. Kun rakenne on kunnossa eikä sen ulkoasua ole kiinnitetty WWW-sivuun, sivua voidaan lukea esteettömästi monenlaisilla selaimilla.

Rakenteellisesti epäilyttäviä ratkaisuja

Monilla WWW-sivuilla on käytetty rakenteellisesti hyvin arveluttavia ratkaisuja. Näistä ratkaisuista aiheutuu ongelmia esimerkiksi käyttäjäryhmille, joilla on käytössään poikkeuksellinen pieni katselulaite tai selainikkunan koko. Seuraavassa on listattu pahimpia rakenteellisia ongelmia.

Kannattaako rakenteen ja ulkoasun erottaminen?

Jos emme erota HTML-sivun rakennetta ja ulkoasua toisistaan, törmäämme ennemmin tai myöhemmin ongelmiin.

Näihin ongelmiin on olemassa hyvin yksinkertainen ratkaisu. Määrittelemme WWW-sivun rakenteen kunnolla ja pidämme ulkoasun kokonaan erillään sivujen rakenteesta! Tällöin WWW-sivun tekemisen alkuvaiheessa kuvaamme HTML-elementeillä (tai tyyleillä) ainoastaan WWW-sivun rakenteen. Tällöin emme kiinnittää huomiota ollenkaan WWW-sivun ulkoasuun. Ulkoasun määritykset teemme tämän jälkeen erilliseen CSS-tyylitiedostoon, jonka avulla voimme muuttaa kerralla esimerkiksi kaikkien HTML-sivun tekstikappaleiden kirjasimen tyypin toiseksi. Käyttämällä samaa tyylitiedostoa useammille sivuille mahdollistamme kokonaisen artikkelikokoelman (sivuston) ulkoasun muuttamisen keskitetysti ja nopeasti.

Eriyttämällä WWW-sivun rakenteen ja ulkoasun sekä määrittelemällä WWW-sivun rakenteen olemme jo pitkällä esteettömien WWW-sivujen tekemisessä. Jos jo alkumetreillä teemme epäilyttäviä rakenteellisia ratkaisuja, niin myöhemmässä vaiheessa tehtävät toimenpiteet eivät välttämättä enää auta. Asiakirjan korjaaminen esteettömäksi myöhemmässä vaiheessa vie aikaamme ja resurssejamme. On tärkeää lähteä alusta alkaen tekemään esteetöntä WWW-sivua.

Tehtäviä

  1. Tutki seuraavien sivujen rakennetta sivun lähdekoodin perusteella. Useimmissa selaimissa lähdekoodin saa näkyville hiiren oikean painikkeen alta löytyvällä View (Page) Source -komennnolla. Jos koneessasi on Mozilla-selain, sivuja kannattaa tutkia DOM Inspectorin avulla. DOM Inspectorilla saadaan helposti näkyville sivun rakenne puumaisena esityksenä ilman häiritseviä sisältöjä. DOM Inspector löytyy Mozillasta valikkokomennolla Tools | Web Development | DOM Inspector. Mozillan asentamista kannattaa muutenkin harkita, koska sillä on hyvä testata uusien sivujen toimivuutta erityisesti sivun ulkoasua määritettäessä.
    • Jyväskylän avoimen yliopiston informaatioteknologian oppiaineiden etusivulta (http://appro.mit.jyu.fi/) on kohtuullisen helposti nähtävillä sivun rakenne. Sivu toimii hyvänä esimerkkinä CSS:n avulla ilman taulukoita toteutetusta sivusta. Millaisena pidät sivun esteettömyyttä?
    • W3C:n (http://www.w3.org/) WWW-sivusto on myös toteutettu ilman taulukoita, joten se toimii hyvänä esimerkkinä taulukottomasta CSS:n avulla toteutetusta sivusta. Millaisena pidät sivun esteettömyyttä?
    • Tutki tämän sivun rakennetta ja paikallista rakenteesta oikean reunan polkumäärityksiä varten tehty lohko. Sivun lähdekoodi on hieman sekava, mutta sivusta löytyy kuitenkin helposti selkeästi otsikot, tekstikappaleet ja listat. Sivun rakenne on jaettu useaan erilaiseen lohkoon, joiden avulla on mahdollistettu navigoinnin ja sisällön sijoittelu sivulla. Millaisena pidät sivun esteettömyyttä?
    • VR:n sivut (http://www.vr.fi/) rakentuvat kehyksistä (engl. frames). Voit tutkia koko sivun lähdekoodia tai avata kehyksiä hiiren oikean avulla uusiin ikkunoihin ja tutkia niiden lähdekoodia. Sivulla on käytetty kehyksiä, rakennetta ei juuri löydy ja lisäksi sivu on taulukkotaittettu. Vastaavantyyppisin estein toteutettuja sivuja löytyy ikävä kyllä todella paljon!
  2. Edellisten sivujen esteettömyysongelmia pääset helposti tutkimaan esimerkiksi Lynx-tekstiselaimen avulla. Jos sinulla ei ole käytössäsi Lynx-selainta, niin voit käyttää LynxVieweriä esimerkiksi seuraavasta osoitteesta: http://www.delorie.com/web/lynxview.html.
Petri Heinonen (peheinon@mit.jyu.fi)
Avoin yliopisto, Jyväskylän yliopisto

fixed p finska - 20.10.2003 09:23

Esimerkiksi mobiililaitteilla selaavilla kyttjill on suuria ongelmia saada sivun sislt jrkevss muodossa, jos sivun koko on ukiinnitetty/u. tuossa kohdassa on ilmeisesti englanniksi sana fixed. Mietin vain, ett olisko se suomeksi ennemmin umrtty/u. Tss kontekstissa kun se tuntuu paremmalta. eip mulla muuta.

- Juhani Heiskanen (juhani.heiskanen@oyk.pkky.fi) -

Muita artikkeleita aiheesta:
Seuraa polkua:
Edellinen: MindManager tyvlineen
Seuraava: Esteettmn WWW-sivun toteuttaminen