Esteettömän WWW-sivun rakenne

Sisällysluettelo

• Mikä on WWW-sivu?
• Helpottaako hyvä rakenne työtämme?
• Rakenteellisesti epäilyttäviä ratkaisuja
• Kannattaako rakenteen ja ulkoasun erottaminen?
• Tehtäviä

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ä.

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>

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>

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:

• Otsikko 1 - Otsikko 6 (engl. Heading 1 - Heading 6) -tyyleillä määritellään otsikot tasojen mukaisesti. Otsikko 1 on korkeimman tason otsikko eli sivun pääotsikko.
• Normaali, leipäteksti (engl. Normal / Paragraph) -tyylillä määritellään kaikki tavalliset teksikappaleet.
• Luettelomerkeillä varustettu luettelo, järjestämätön lista (engl. Bulleted List, Unordered List) -tyylillä määritellään järjestämätön lista, jonka alkioilla ei ole tiettyä järjestystä.
• Numeroitu luettelo, järjestetty lista (engl. Numbered List, Ordered List) -tyylillä määritellään järjestettu lista, jonka alkioilla on tietty järjestys.
• Muotoiltu (engl. Formatted) -tyylillä määritellään teksti, jossa halutaan säilyttää kirjoitusmuotoilut, kuten välilyönnit ja rivinvaihdot. Tyyli soveltuu erityisesti käytettäväksi erilaisten ohjelmakoodien esittämiseen. Esimerkiksi tämän artikkelin esimerkkeissä on käytetty tätä tyyliä.
• Vahvennus (engl. Strong) -tyylillä määritellään tekstin joukosta erityisesti korostettavia asioita. Selainikkunassa vahvennus näytetään oletuksena lihavoituna.
• Korostus (engl. Emphasis) -tyylillä määritellään tekstin joukosta korostettavia asioita. Selainikkunassa korostettu teksti näytetään oletuksena kursivoituna.

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.

• Taulukkotaittaminen hankaloittaa olennaisesti sivun lukemista erikoisissa selaimissa. Esimerkiksi ääniselaimilla kokonaiskuvan muodostaminen on hankalaa tai jopa mahdotonta. Sivun varsinainen sisältö ja rakenne on piilotettu taulukkoon, joten sivun muuttaminenkin on työlästä. Taulukon käyttämisen voi usein korvata muilla rakenteellisilla määrittelyillä ja CSS-tyylien avulla.
• Oletukset selainikkunan koosta haittaavat monia käyttäjiä, jotka selaavat sivua oletuksista poikkeavilla asetuksilla. Esimerkiksi mobiililaittein selaavilla käyttäjillä on suuria ongelmia saada sivun sisältöä järkevässä muodossa, jos sivun koko on kiinnitetty. Usein juuri taulukkotaitetuilla sivuilla tehdään myös oletuksia käyttäjän selainikkunan tai katselulaitteen koosta. Sivun pitäisi antaa skaalautua käyttäjän selainikkunan koon ja asetusten mukaisesti.
• Kehyksien käyttö tuottaa vaikeuksia erityisesti selaajille, joilla ei ole kehyksiä tukevaa selainohjelmaa. Tällöin kehykset pilkkovat sivun pieniin palasiin, jolloin selaaminen on hankalaa ja perustuu ikävän usein arvailuun. Myös pientä näyttöä käyttävillä on ongelmia, koska kehykset laajentavat sivua paljon sivusuunnassa, joten sivua joutuu vierittämään vaakasuunnassa. Kehyksiä voi jäljitellä CSS:n avulla tarvittaessa, mutta useimmiten sekin on tarpeetonta.
• Selainkohtaisten HTML- tai muiden laajennuksien käyttö tuottaa vaikeuksia toisen valmistajan selainta käyttävälle. Tämän vuoksi sivujen sisältö voi jäädä kokonaan joidenkin käyttäjien ulottumattomiin. Selainkohtaisia laajennuksia ei siis kannata käyttää. HTML-sivuilla kannattaa käyttää ainoastaan W3C:n suosituksen mukaisia HTML-elementtejä. Artikkeleissa Yksinkertaisen HTML-sivun rakenne ja Muita tarpeellisia HTML-rakenteita esitellään XHTML 1.0 Strict -suosituksen mukaisen HTML-sivun toteuttamista.

Kannattaako rakenteen ja ulkoasun erottaminen?

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

• Sivun tai sivuston ulkoasun muuttaminen on hidasta, koska ulkoasu on liian kiinteä osa HTML-sivua. Tällöin joudumme tekemään muutoksen kaikkiin sivuihin yksitellen.
• Sivujen sisältö voi jäädä erilaisten selainten tai päätelaitteiden käyttäjien ulottumattomiin. HTML-sivun sisään tehtävät tiukat ulkoasun määrittelyt eivät mukaudu kaikkien käyttäjän päätelaitteen asetusten mukaisesti. Tällöin esimerkiksi kirjainkoon kiinnittäminen HTML-sivuun voi aiheuttaa sen, ettei tekstistä saa selvää joillakin selaimilla.

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.