Haridustehnoloogia ja erivajadustega inimesed/Ligipääsetav Internet

Veeb ja HTML

Käesolev teema on küllaltki tehniline ning selle juures tuleks kasuks eelnev kokkupuude veebilehtede tegemisega. Siiski on sellest teemast kasu ka neile, kes seni veel veebi teinud ei ole - juttu tuleb peamistest puuetega inimesi puudutavatest veebiprobleemidest ning neid saab vältida ka nii, et oskame enda veebi teistelt tellides vajalikke nõudmisi esitada.

Olgu siinkohal ära toodud lühike ülevaade veebi "köögipoolest" - meeldetuletuseks neile, kes sellega juba kokku puutunud, teistele aga esmaseks aimusaamiseks, millest juttu. Kogu "veebitegemiskunst" on suur ja mitmekülgne valdkond, mida muude erialade inimesed ei pea kindlasti peensusteni valdama – kuid inimene, kes tegeleb puuetega inimeste e-õppega, peab tundma mõningaid üldisi põhimõtteid. See aitab vältida olukordi, kus muidu põhjalikult ettevalmistatud e-materjal osutub mõnele õppurile kasutuskõlbmatuks.

Veebilehe "sisemust" võime näha, kui valime enda veebilehitseja peamenüüst "View" ning selle alt Firefoxi puhul "Page Source" või IE puhul "Source". Eraldi avanevas aknas näemegi veebilehe koodi sellisena, nagu lehe looja selle kirjutas. Seda koodi nimetatakse HTMLiks (ingl.k. HyperText Markup Language, "hüperteksti märgendikeel" - hüpertekstiks nimetatakse teksti, mis sisaldab viited muudele tekstiosadele nagu seda veebis näha võib). Tänapäeval on põhiliseks HTMLi variandiks uuem XHTML (versioonid 1.0 ja 1.1), kuid kasutatakse ka vanemat tava-HTMLi (versioonid 4.0 ja 4.01). Seda, millist varianti kasutatakse, on korrektselt koostatud lehe puhul näha koodi algusest esimestelt ridadelt.

HTML ei ole programmeerimiskeel, vaid märgendikeel - veebilehe kood koosneb tekstist ning selle kuvamiseks mõeldud juhistest. Põhimõtteliselt võiksime veebilehe kirjutamise loogikat kujutada vabas vormis järgnevalt (<>-märkide vahel on märkimiskäsud, muu on kuvatav tekst):

<kogu veebilehe algus>
<siit algab veebilehe päis - päisesse pannakse mitmed veebilehte iseloomustavad parameetrid, 
    nagu pealkiri, kasutatav keel, märksõnad otsimootorite  jaoks jne.>
<päise lõpp>
<siit algab lehe põhiosa, kuhu kirjutatakse kogu sisu>
<järgnev tekst on pealkiri>
   Tere tulemast minu lehele!
<pealkirja lõpp>

 See on minu veebileht, kus võib leida igasuguseid <paks kiri> huvitavaid <paksu kirja lõpp> asju.
 <siia tuleb minu pilt>

 <järgnev tekst on viide aadressile http://www.tlu.ee>Ma õpin Tallinna Ülikoolis<viite lõpp>

<lehe põhiosa lõpp>
<kogu veebilehe lõpp>

Näeme, et veebilehe puhul kasutatakse põhimõtteliselt samalaadset süsteemi, kui näiteks tekstitöötluses (MS Wordis või mujal) – näiteks paksu kirja jaoks tuleb märkida ära soovitava tekstiosa algus ja lõpp. HTMLi kirjutades aga tuleb see märkimine teha eraldi märgendite lisamisega otse teksti sisse. On olemas ka veebiredaktoreid, kus märgendeid saab lisada hiire abil (nagu näiteks Wordis), kuid algajal on üldiselt kasulik õppida esmalt tundma HTMLi tema loomulikul kujul ning alles seejärel siirduda abivahendite kasutamisele - vastasel juhul on suur tõenäosus eksida just nendesamade põhimõtete vastu, mille tutvustamisega käesolev kursus tegeleb (näiteks levinud veebiredaktori MS FrontPage'i abil on äärmiselt lihtne teha visuaalselt ilusaid, kuid ebastandardseid ja puuetega inimestele ligipääsmatuid veebilehti!).

Ülesanne edasijõudnumatele ning suurematele huvilistele: ava veebilehitsejas Tallinna Ülikooli veebileht http://www.tlu.ee , ava eraldi aknas lehe kood (View => Page Source/Source) ja püüa eespooltoodud skeemi järgi tuvastada, millised reaalsed HTML märgendid vastavad millistele korraldustele.

Viime nüüd eespooltoodud veebilehe üle korrektsesse HTMLi. Kasutame esmalt lihtsamat ja vanemat HTML 4.0-i ja seejärel tänapäevast standardit XHTMLi. Viimane on mõningate erinõuete tõttu alguses keerulisem – eeskätt seetõttu, et lehe algusse tuleb lisada üsna pikk päiseosa.

 HTML 4.0:
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 <title>Albert Allika isiklik koduleht</title>
 <meta name="Content-Type" content="text/html; charset=iso-8859-1">
 <meta name="description" content="Albert Allika esimene isiklik veebileht">
 <meta name=“keywords“ content=“Albert Allikas, koduleht, Tallinna Ülikool“>
 <body>
   <h1>Tere tulemast minu lehele!</h1>
   <p>See on minu veebileht, kus võib leida igasuguseid <strong> huvitavaid </strong> asju.</p>
   <p><img src=“minupilt.jpg“ alt=“Alberti foto“></p>
   <p><a href=“http://www.tlu.ee“>Ma õpin Tallinna Ülikoolis</a></p>
 </body>
 </html>

XHTML 1.0:

 <?xml version="1.0" encoding="iso-8859-1"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xml:lang="et" lang="et" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Albert Allika isiklik koduleht</title>
 <meta name="description" content="Albert Allika esimene isiklik veebileht">
 <meta name=“keywords“ content=“Albert Allikas, koduleht, Tallinna Ülikool“>
 <body>
   <h1>Tere tulemast minu lehele!</h1>
   <p>See on minu veebileht, kus võib leida igasuguseid <strong> huvitavaid </strong> asju.</p>
   <p><img src=“minupilt.jpg“ alt=“Alberti foto“></p>
   <p><a href=“http://www.tlu.ee“>Ma õpin Tallinna Ülikoolis</a></p>
 </body>
 </html>

Mõned põhilised asjad, mida meelde jätta:

HTML-märgendid kirjutatakse < > -märkide vahele.
Märgendeid kasutatakse paarikaupa, lõpumärgend erineb algusmärgendist /-märgi poolest (näiteks paksu kirja puhul ... ).
Märgendid kirjutatakse väiketähtedega (varasem HTML lubas ka suurtähti, XHTML enam mitte).
Vanem HTML lubas ka üksikmärgendeid, uuemas XHTMLis peavad kõik olema paarilised. Kuna aga mõned märgendid on alguse saanud loogiliselt üksikutena (näiteks pildimärgend <img>, siis võib neid kasutada lühikujulistena, lisades märgendi lõppu tühiku ja /-märgi (vt. eespool XHTML-näites pildimärgendi <img> kasutamist).
lehekülg algab ja lõpeb <html>-märgendiga ning koosneb päisest (<head>) ning kehast (<body>).
lisaks märgendi põhiosale sisaldavad paljud märgendid lisaosi ehk parameetreid – näiteks viidatavat aadressi sisaldav href-parameeter viitemärgendis <a> ning pildifaili nime määrav src-parameeter pildimärgendis <img>.

Veel mõned põhitõed:

Veebilehefail on tehnilises mõttes puhas tekstifail (ASCII-fail). Seetõttu ei sobi veebitegemiseks hästi Word ega muud tekstiredaktorid, mis tavalise salvestuse korral lisavad tekstile erinevat lisainfot. Kõige lihtsamaks ja lollikindlamaks töövahendiks HTMLi õppimisel on Notepad või mõni muu sarnane lihtne tekstitöötlusvahend.
Veebilehefaili laiendiks (failitunnuseks) on kasutatavast veebiserverist sõltuvalt kas .htm (Microsofti veebiserverites) või .html (enamikus muudes). Seega tuleb olla tähelepanelik, et kasutaksime näiteks Notepadiga kirjutades õiget laiendit.
Veebilehe tegemiseks on kaks põhilist strateegiat - kas loome lehe otse serveris või kirjutame lehe(d) omaenda arvutis valmis ja viime need seejärel (FTP või mõne muu failiedastusvahendi abil) serverisse. Üsna tüüpiline algajate eksitus on teha muudatusi omaenda arvutis asuvas failis (jättes selle serverisse viimata) ning seejärel imestada, miks serveris asuv koopia ikka endist pilti näitab... Kumba teed kasutada, sõltub konkreetsest olukorrast ja tehnilistest võimalustest.
Lihtsama HTMLi õppimiseks ei ole vaja veebiserverit, piisab korrektse .htm või .html -faili loomisest omaenda arvutis ning siis selle avamisest veebilehitsejas (kohaliku failina).

Siintoodu oli väga üldine ja lühike ülevaade HTML-ist ja veebiloomise põhimõtetest. Soovitav oleks tutvuda nendega veidi lähemalt mõnest veebis leiduvast õppematerjalist (näiteks siinkirjutaja koostatud VeebiABC aadressil http://www.kakupesa.net/kakk/veebiABC).

Standardid – milleks need?

Veebi loomise ajal oli infoesitamise lihtsus üks olulisi kaalutlusi ning veebitegemine võib vahel tõepoolest lihtne olla. Paraku tundub tihti, et veebitegu on kohati petlikult lihtne ja veebitegijad ei ole oma ülesannete kõrgusel - ning esimeste seeläbi kannatajate seas on paraku just puuetega inimesed.

Veebistandardid ehk kindlaksmääratud reeglid veebi kohta said alguse üsna varakult. HTMLi spetsifikatsioonid ehk reeglite kogumikud on olemas kõigi peamiste versioonide kohta. Standardi mõte on tagada, et kõik lugemissüsteemid saaksid veebi pandud infost ühtmoodi aru – olgu siis tegu erinevate operatsioonisüsteemide, veebilehitsejate või lugemisseadmetega (tänapäeval on ju veebilehitsejad pea kõigi paremate mobiiltelefonide koosseisus, lisaks on olemas mitmeid teisi erilahendusi).

„Luik, haug ja vähk“ ehk olukord, kus igaüks oma veebi isemoodi tegi, sai tegelikult veebis alguse juba üsna ammu. Ehkki HTMLi eellaseks on suur ja standardiseeritud dokumendisüsteem SGML, said veebi laiema leviku järel seal ülekaalu "praktikud", kes standarditest isegi kuulnud polnud ja kelle juhtmõtteks oli "peaasi, et see-ja-see veebilehitseja õieti näitab!". Korrektsele veebitegemisele mõjus üsna hävitavalt ka omaaegne brauserisõda ehk võitlus Netscape'i ja Internet Exploreri vahel (kumbki üritas konkurendi ees edumaad saada "uute ja huvitavate märgendite" väljamõtlemisega, mis aga vaid nende veebilehitsejaga töötasid), eriti aga selle tulemus – Internet Exploreri pikk ainuvõim, mis muutis Microsofti poolt ärasolgitud HTMLi ("paremaks tehtud" HTML, mida kutsutakse ka MS-HTMLiks ja mis on kõike muud kui standardne) sisuliselt heakskiidetud veebitegemise viisiks.

Lisaks sellele on IE "kasutajasõbralikkuse" sildi all loodud ignoreerima paljusid veebitegija vigu ning näitama ka vigase koodiga veebilehti. Mozilla ja eriti Firefoxi esiletõus viimastel aastatel on "praktikute" tööviisi vähemalt niipaljugi parandanud, et oma veebi proovitakse lisaks IE-le vaadata ka nendega Standarditest ei tea aga paljud endiselt mitte midagi.

Nagu juba eespool öeldud - üks esimesi kasutajagruppe, kes ebastandardsete lahenduste tõttu kannatab, on nägemispuudega (eriti raske puudega ehk pimedad) inimesed, kes kasutavad veebile ligipääsuks ekraanilugemissüsteeme. Vigaselt tehtud veeb aga jääb sageli pimedale lugejale kättesaamatuks. Kuid võib-olla aitabki just ligipääsunõuete üha rangem järgimine sel viisil parandada ka kogu veebi kvaliteeti - "praktikud" on ehk viimaks sunnitud oma senist ebastandardsust muutma, et mitte seadustega pahuksisse minna.

Kõik eespoolöeldu kehtib täiel määral ka e-õppes. Õnneks ei tähenda veebistandardite range järgimise vajadus tingimata e-õpetaja enda veebiprofiks saamise vajadust – kuid ta peab olema suuteline standardsuse vajadust oma abilistele ("patsiga poistele", kes veebi eest hoolitsevad) selgeks tegema ning selle täitmist jälgima.

W3C ja validaatorid

Veebi autoriteetseimaks instantsiks on Rahvusvaheline Veebikonsortsium ehk W3C (World Wide Web Consortium; http://www.w3.org), kelle haldusalaks on kõik veebi puutuv – HTML-keele areng, uute tehnoloogiliste võimaluste lisamine, ligipääs puuetega inimestele jpm. Iga HTML-i (ja ka muude tehnoloogiate nagu XML, CSS jt) versiooni jaoks on olemas ühtne standard, mis sätestab selle kirjutamise korra - iga korralik veebitegija peaks valima endale sobiva järgitava standardi (enamikul juhtudel on W3C-l välja pakutud soovituslik standard - kirjutamise ajal oli HTMLi puhul selleks XHTML 1.1 -, mida võiks võimaluse korral teistele eelistada) ja siis sellest ka kinni pidama.

Lihtsaimaks viisiks oma lehekülje standardsust kontrollida on kasutada validaatoreid. Need on kas veebipõhised (eriline veebileht, kuhu tuleb sisestada kontrollitava lehe aadress) või ka iseseisvate programmidena arvutisse installitavad. Ehk autoriteetseim on W3C enda validaator aadressil http://validator.w3.org, mida võikski esmase töövahendina e-õpetajale soovitada.

Lisaks üldisele standardite järgimisele tuleks aga muuta oma veebilehed loetavaks ka neile inimestele, kes mingil põhjusel tavalisi arvuteid kasutada ei saa. Kõige rohkem puudutab see nägemispuudega inimesi, kes kasutavad veebi lehitsemiseks kas ekraanilugejat (teisendab ekraaniteksti kuuldavaks kõneks) või punktkirjamonitori (ekraanitekst teisendatakse kombitavaks dünaamiliseks punktkirjaks). Lisaks rangele standardsusnõudele esitab selline veebikasutus lehele mõningaid lisanõudeid, mida võib veebist leida ka W3C Ligipääsuinitsiatiivi ehk WAI (Web Accessibility Initiative) lehelt http://www.w3.org/WAI , eriti sealne erinõudeid arvestav validaator WAVE: http://wave.webaim.org/

Põhiasjad, mille vastu eksitakse

Tuleme nüüd peale standarditega tutvumist veel korra tagasi tehniliste detailide juurde.Vaatleme kõigepealt suuremaid vigu, mis viivad meie töö vastuollu veebistandarditega. Esmalt muidugi unustatakse tihti ära veebilehepäis. Ehkki põhimõtteliselt võiks ka tänapäeval teha veebi vanu standardeid (HTML 4.0 või isegi 3.2) järgides, tuleb ka nendel kasutatav standardiversioon selgelt päises ära näidata. Samas on märksa mõistlikum järgida värskeimat ametlikku veebistandardit ehk siis kirjutada oma veebilehed XHTMLis.

Kui vanasti (kuni versioonini HTML 4.01) võis veebilehte alustada lihtsalt <html>-märgendist, siis tänapäevasel XHTML-lehel PEAB sel olema kogu pikk XHTMLi päis (vt. 1. alapeatükki). Soovitav (ehkki mitte rangelt nõutav) on ka meta-väljade täitmine, mis annab lehe kohta lisainfot ning aitab otsimootoritel seda paremini lahterdada.

Edasi teevad algajad tihti selle vea, et kirjutavad osad või kõik märgendid suurtähtedega. Kui vana HTMLi aegadel oli see isegi soovitav (märgendid paistsid muu teksti seast paremini välja), siis tänane XHTML on rangelt väiketäheline. Vahel unustavad vanema HTMLiga harjunud veebisepad ära ka selle, et XHTMLi märgendid on rangelt paarilised. Kohtades, kus paarismärgend on sisuliselt mõttetu (näiteks <img>), tuleb kasutada lühikuju (<img />). Veel üks äärmiselt levinud viga, mida pikka aega tehti, kuid mida nüüdsed validaatorid kohe märkavad, on alt-osade ärajätmine graafikamärgenditest. Alternatiivtekst peaks olema mitte ainult olemas, vaid peaks ka andma piisava selgituse pildi kohta. Lisaks oleks suurte graafiliste elementide juures ilus kasutada ka longdesc-osa. Tabelid peavad kindlasti olema varustatud pealkirjaga (caption) ning ehkki nende kasutamine lehe paigutuse määramiseks on tänini mõnevõrra levinud, on sellises tegevuses üksjagu riski luua ebastandardne veebileht. Seepärast tuleks lehe välimuse määramiseks pigem kasutada CSSi (stiililehti).

Puuetega inimeste erinõuded

Veebileht võib olla standarditele vastav, kuid siiski puuetega inimestele ebamugav kasutada – selle vastu on töötatud välja (peamiselt USAs) mitmeid täiendavaid soovitusi. Eeskätt puudutavad need nägemispuudega inimesi, kuid mõned aitavad ka liikumis- ja koordinatsioonipuuete korral paremini veebis toime tulla. Põhiline info nende nõuete kohta on kirjas Rahvusvahelise Veebikonsortsiumi (W3C) Veebi Ligipääsetavuse Algatuse veebilehel http://www.w3.org/WAI/ . Paraku on materjal ingliskeelne, seepärast refereerime sealt olulisemaid punkte.

Leht peab valideeruma standardseks HTMLiks. Kui leht ei vasta isegi tavanõuetele, ei saa erivajaduste rahuldamisest juttugi olla.
Lehe struktuur peab olema mõistlik, kõik põhikomponendid (päis, keha jne) paigas. Veebileht, mis sarnaneb ühe omaaegses Alla Pugatšova laulus kirjeldatud peletisega ("pea küljes jalg, jala küljes sarv"...) ei ole mitte üksi raskesti ligipääsetav, vaid näeb üsna suure tõenäosusega ka kehv välja. Korralik veebileht ei kasuta veidraid "peedist pesumasinatrummel"-lahendusi, vaid on paigas struktuuriga (näiteks käib selle punkti alla pealkirjade kasutamine järjest, mitte hüpates h1 pealt kohe h4 peale) ning hoiab lehe sisu ja vormi teineteisest lahus (seda annab CSSi ehk stiililehtede kasutamine – ruumipuudusel CSSi siinkohas ei käsitleta, kuid selle kohta võib vaadata eespool viidatud VeebiABC-st).
Ei tohi eeldada, et kasutajal on käepärast täpselt sama riistvara kui veebitegijal. Eeldades 1600x1200 lahutusvõimega 21-tollist kuvarit on üpris mõttetu.
Värvigamma peaks olema piisavalt kontrastne. Ka see sõltub üksjagu riistvarast – kui mõne suure tippmonitori peal on kombinatsioonid "roheline sinisel" või "sinine lillal" isegi üpris loetavad, on vähegi kehvema varustuse korral tulemuseks kompositsioon "kümme väikest neegrit pimedas toas".
Kogu graafiline materjal peaks olema varustatud alternatiivtekstiga (alt="kirjeldus"). See on üks kõige sagedamini rikutavaid nõudeid.
Viidete tekstid peavad olema arusaadavad ning olema mingi tähendusega ka neid ümbritsevast tekstist eraldi lugedes. "Klõpsa siia" ei ole eriti mõistlik („kuhu?“).
Heli- ja videoklipid tuleb varustada alternatiivteabega – video puhul lühikirjelduse ning heli puhul kas lühikirjelduse (mida see heli peab edasi andma) või tekstikujul transkriptiga (konkreetse kõnelõigu puhul).
Skriptid ja multimeediajubinad tuleb varustada alternatiivtekstidega. Üldse tasub näiteks raskekaalulise Flashis tehtud veebilehe puhul luua täiesti alternatiivne leht, kus graafika kas puudub või seda on minimaalselt. Lisaks puuetega kasutajatele ütlevad "aitäh" ka mobiilikasutajad ja lihtsalt kiirustavad veebilugejad.
Raamide puhul tuleb kasutada noframe-osa.
Tabelid peavad olema reaalse sisuga ning loetavad ridahaaval, s.t. tabelimärgendite kasutamine lihtsalt leheküljeelementide paikalükkamiseks ei ole ilus. Nagu juba eespool öeldud, peab tabelitel olema pealkiri (caption).

Kui tahta lõpuni kindel olla, võib alati paluda oma veebilehte testida erinevate puuetega inimestel endil - kuna nad teavad, et see on nende endi huvides, ollakse kindlasti nõus aitama.

[Haridustehnoloogia_ja_erivajadustega_inimesed|Tagasi kursuse esilehele]]