Tajutavus

Teavet ja kasutajaliidese komponente peab esitama kasutajatele viisil, mida nad suudavad tajuda.

Puuetega inimesed hangivad veebist informatsiooni tavalisest veebikasutajast erinevalt. Kasutatakse näiteks pimekirja ning tehnilisi abivahendeid (ekraani lugemise tarkvara, tekstipõhiseid veebisirvijaid jne). Tajutavuse põhimõtte eesmärk on rõhutada, et kogu veebilehe sisu peab olema ka erinevate abivahenditega kättesaadav (näiteks silmadega lugemise asemel veebiteksti kuulamine).

Suunised

1.1 Tekstilised alternatiivid

Tagada tekstiline alternatiiv mittetekstilisele sisule, et seda saaks kasutajate vajadustest lähtuvalt muuta, näiteks suureks kirjafondiks, punktkirjaks, kõneks, sümboliteks või lihtsustatud keeleks.

Veebilehe tajutavuse parandamiseks tuleb lisada mittetekstilisele sisule (pilt, video, animatsioon vms) tekstiline kirjeldus, mida puudega inimesed saaksid alternatiivse infoallikana kasutada.

Suunisega seotud taseme A ja AA edukriteeriumid:

1.1.1 Mittetekstiline sisu »

WCAG 2.0 tase A Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija, kurt/vaegkuulja Täitmise eest vastutav roll Toimetaja, arendaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.4.5 AA, 1.4.9 AAA, 3.2.4 AA
Miks on oluline edukriteeriumit järgida?
 

Puuetega inimeste veebisirvimise seadmed ei pruugi olla võimelised aru saama millist informatsiooni mittetekstiline sisu (näiteks pilt, heli- või videofail) edasi annab. Selleks, et pimedad, vaegnägijad või lihtsalt inimesed, kes on oma veebilehitsejad seadistanud pilte mitte laadima veebilehel oleva informatsiooni kätte saaksid tuleb leida alternatiivseid viise mittetekstilise sisu neile edasi andmiseks.

Praktilised juhised edukriteeriumi täitmiseks
 

Puuetega inimestele mittetekstilise sisu edasi andmiseks tuleb:

  • Tuvastada, milline on mittetekstiline sisu, mis annab edasi informatsiooni
  • Lisada tuvastatud mittetekstilisele sisule kirjeldus (vt Näide 1)
  • Lisatav kirjeldus koostada selliselt, et see annaks edasi ainult olulist informatsiooni ja oleks seda tehes nii lühike kui võimalik

Kirjeldused tuleb lisada:

  • Kõikidele olulist informatsiooni edasi andvatele piltidele (vt Näide 2)
  • Veebilehte integreeritud sisu edasi andvale meediale nagu audio ja video
  • Olulistele ikoonidele ja nuppudele (näiteks nupp „Otsi”, mis asub otsingu vormil, „RSS voog”, „Trüki” või „Jaga” mõnes sotsiaalmeedia kanalis)
  • Inimkasutaja ja arvutikasutaja (roboti) eristamise robotilõksu (CAPTCHA) moodulile andmaks puuetega inimestele edasi informatsiooni, et tegemist on robotilõksuga
  • Vormi lahtritele, kuhu kasutaja saab sisu sisestada (vt Näide 3)

Kirjeldust ei tule lisada järgnevatel juhtudel:

  • Mittetekstiline sisu on dekoratiivne (näiteks taustapilt või pildike uudise juures, mis ei anna lisainformatsiooni) ning kasutaja võib seda sisust arusaamise seisukohast ignoreerida. Sellisel puhul võib kasutada tühja kirjeldust (alt=””). Tühi kirjeldus annab puudega kasutajale kindluse, et pildil pole kirjelduse parameeter ekslikult ära ununenud, vaid see on teadlikult tühjaks jäetud.
  • Inimkasutaja ja arvutikasutaja (roboti) eristamiseks (CAPTCHA) kasutatavale tekstile. Kui palutakse näiteks kasutajal sisestada andmed pildilt, mis on teadlikult halvasti masinloetavaks tehtud, ei pea pildi sisu olema tekstiliselt kirjeldatud, muidu kaotab robotilõks oma algse mõtte.

Nõude täitmata jätmine võib kõrvalmõjuna halvendada ka veebilehe leitavust otsingumootorites.

Illustreerivad näited

Näide 1: Kirjeldused

Hea pildi kirjeldus: „Peaminister kohtus Omaani kaubandus- ja tööstusministriga”

Halb pildi kirjeldus: „Pilt peaministrist”


Hea video kirjeldus: „Video peaministri pressikonverentsist Omaani kaubandus- ja tööstusministriga.”

Halb video kirjeldus: „Pressikonverents”

Näide 2: Meedia kirjeldamine HTML märgendikeeles ja sisuhalduses

Sisuhalduse tarkvara kasutamise puhul on reeglina võimalik alternatiivne kirjeldus lisada pildi seadistustes. Alljärgnevalt on välja toodud näide Joomla 3.x.x veebilehtede sisuhaldustarkvaras pildile alternatiivse kirjelduse lisamise kasutajaliidesest.

Pildile alternatiivse kirjelduse lisamine

Õigesti kirjeldatud sisu edasi andva pildi või meediafaili HTML märgendikeeles on järgmised atribuudid:

  • Faili lähteallikas (näiteks img src=””)
  • Alternatiivne kirjeldus (alt=””)

Lähteallikas kirjeldab pildifaili asukohta ja alternatiivne kirjeldus on pildi puuetega inimestele paremaks kirjeldamiseks. Kui alt tekst on olemas, loeb ekraanilugeja ainult alt teksti. Kui see puudub, loetakse pildifaili asukoht ette.

<img scr=”peaminister_oman.jpg” alt=„Peaminister kohtus Omaani kaubandus- ja tööstusministriga” >

Õigesti kirjeldatud dekoratiivse või olulist sisu mitte edasi andva pildi või meediafaili HTML märgendikeeles on alternatiivse kirjelduse atribuut (alt=””) lisatud, kuid tühjaks jäetud.

<img scr=”taustapilt.jpg” alt=„” />
Näide 3: Vormid

Vormides, kus kasutaja saab sisestada andmeid, näiteks oma nime, tuleb vormi lahtritele lisada HTML parameeter lahtri nimetusega (label for=””). Lahtri nimetus ja lahtri unikaalne identifikaator (id=””) peaksid HTML märgendikeeles kattuma.

Vormi lahtrile nimetuse lisamine
<label for="nimi">Nimi *</label>
<input id="nimi" type="text" name="textfield">

Unikaalsete identifikaatorite ja vormi lahtrite nimetuste kasutamine vähendab kahe sama nimetusega lahtri loomise riski. See on vajalik, kuna ekraanilugejad ei toeta samal veebilehel erinevaid ühe ja sama identifikaatoriga seotud lahtrite nimetusi ega pruugi neid kasutajale kahe erineva lahtrina kirjeldada. Lisaks võimaldab parameetri nimetuse (label for="") kasutamine lahtri nimetusel hiirevajutuse tegemisel suunata ekraanifookuse vormi väljale, mis võib olla kasulik motoorikahäirega inimeste veebi sirvimise hõlbustamiseks.

Sulge edukriteeriumi kirjeldus »

Tagada alternatiivid ajas muutuvatele meediumitele.

Ajas muutuvate meediumite all mõeldakse WCAG 2.0 kontekstis tegelikult igasugust helilist ja videopõhist sisu. Terminit „ajas muutuv” kasutavad WCAG 2.0 loojad, kuna informatsioon on kättesaadav piiratud aja jooksul (aeg, mis kulub salvestise ettekandmiseks). Sarnaselt mittetekstilisele sisule tuleb ka ajas muutuvatele meediumitele lisada alternatiivne kirjeldus, et puudega inimesed saaksid seda alternatiivse infoallikana kasutada.

Suunisega seotud taseme A ja AA edukriteeriumid:

1.2.1 Ainult heliline ja ainult videopõhine sisuesitus (eelsalvestatud sisu puhul) »

WCAG 2.0 tase A Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija, kurt/vaegkuulja Täitmise eest vastutav roll Toimetaja, arendaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.2.2 A, 1.2.3 A, 1.2.5 AA, 1.2.7 AAA, 1.2.8 AAA
Miks on oluline edukriteeriumit järgida?
 

Puuetega inimestel võib olenevalt puude liigist tekkida raskusi ainult heliliste või videopõhiste salvestistest arusaamisega (näiteks taskuhääling podcast, helifail, videofail või animatsioon). Seetõttu tuleks sellise sisu puhul mõelda alternatiivsetele võimalustele sisu edasiandmiseks. Üks peamine võimalus on selgitava teksti või transkriptsiooni ehk sisukirjelduse lisamine.

Praktilised juhised edukriteeriumi täitmiseks
 

Helifailile tuleb lisada kogu sisu edasi andev tekstiline transkriptsiooni. Video või animatsiooni puhul tuleb lisada kogu sisu edasi andev tekstiline transkriptsioon (vt Näide 1) või helikirjeldus, mis lisaks dialoogile kirjeldaks kogu helifaili või videoga edasi antavat olulist sisu (vt Näide 2).

Transkriptsiooni ei pea lisama:

  • Reaalajas esitatavale sisule
  • Kui heli- või videopõhisele sisule on juba olemas alternatiiv (näiteks helifaili juures on sama informatsiooni edasi andev tekst või siis video juures on samaväärset sisu edasi andev helikirjeldus)
  • Mitteolulise informatsiooni kohta (näiteks raadiosaate salvestuse transkriptsioon ei pea kirjeldama juhuslike eetrisse sattunud taustahääli nagu alarmauto sireenide heli)
Illustreerivad näited
Näide 1: Tekstiline meediafaili sisu kirjeldamine

Hea videofaili kirjeldus: „Kohtumise lõppedes Eesti peaminister ja Omani kaubandus- ja tööstusministerile tõusid, naeratasid ja surusid teineteise kätt väljendamaks valmisolekut edaspidiseks koostööks.”

Halb videofaili kirjeldus: „Kohtumine lõppes”

Hea helifaili kirjeldus: „Taskuhäälingu juhatas sisse kuldnoka laul, millega saatejuht soovis juhtida kuulajate tähelepanu nii kevade algusele, kui vajadusele varsti kella edasi keerata.”

Halb helifaili kirjeldus: „Saatejuht: „Eeltooduga soovisin juhtida kuulajate tähelepanu nii kevade algusele, kui vajadusele varsti kella edasi keerata”.

NB! eestikeelsele helifailile on teatud piirangutega võimalik tasuta teha tekstilist transkriptsiooni.

Näide 2: Heliline meedia sisu kirjeldamine

Otseselt pimedatele suunatud eestikeelse helikirjeldusega videofaile ei ole internetist avalikult saada. Näide helikirjeldusega videost inglise keeles.

Eesti keeles illustreerib hästi video sisu helilist kirjeldamist tavaline spordireportaaž, näiteks video 2011 peetud käsipalli EM valikmäng Eesti ja Makedoonia vahel, mis on leitav ERR arhiivist.

Sulge edukriteeriumi kirjeldus »

1.2.2 Tiitrid (eelsalvestatud sisu puhul) »

WCAG 2.0 tase A Testimise meetod Käsitsi
Sihtgrupp Kurt/vaegkuulja, inimesed, kes ei saa mingil põhjusel heli kuulata Täitmise eest vastutav roll Toimetaja
Olulisus Eesti kontekstis
 
Oluline, rakendada, kui võimalik
Seotud edukriteeriumid 1.2.1 A, 1.2.4 AA, 1.2.5 AA
Miks on oluline edukriteeriumit järgida?
 

Kurdid või vaegkuuljad ei pruugi eelsalvestatud videofailidest saada kätte heli kujul edastatud informatsiooni. Et informatsioon kurdi või vaegkuuljani jõuaks tuleb videofailile lisada tiitrid (vt Näide 1), mis helilist informatsiooni teksti kujul edasi annaks.

Tiitrid aitavad lisaks puuetega inimestele ka teisi kasutajaid. Näiteks inimesi, kelle jaoks eesti keel ei ole emakeel või inimesi, kes ei saa heli valjult kuulata.

Praktilised juhised edukriteeriumi täitmiseks
 

Tiitrite lisamiseks tuleb kasutada meedia formaati, millel on olemas videofailide mängija, mis toetab subtiitrite sisselülitamist ja kuvamist. Lihtsaim viis selleks on laadida videod mõnda veebikeskkonda, mis võimaldaks kas automaatselt või käsitsi videofailidele transkriptsioonide ja subtiitrite lisamist. Oma veebilehel videote näitamiseks saab enamasti kasutada linkimist vastavale keskkonnale ja failile.

Automaatne teksti tuvastamine toimib videote laadimiseks mõeldud keskkondades paraku valdavalt inglise keele baasil ning enamasti kirja- ja grammatikavigadega. See tähendab, et eestikeelse sisu puhul tuleb video omanikul kvaliteetse tulemuse saavutamiseks tiitrid suure tõenäosusega endal sisestada või automaatselt tuvastatud tiitrid ise parandada.

Juhul, kui tellite või filmite video ise, soovitame juba filmimisele eelnevalt koostada digitaalsel kujul videofaili sisu kirjeldav stsenaarium, mis kajastaks nii dialoogi, kui ka videos toimuva tegevuse kirjeldust. Stsenaariumit saab hiljem väga edukalt kasutada tiitrite sisestamisel.

Selleks, et tavakasutajaid videofaili kasutamisel nende jaoks tarbetute tiitritega mitte koormata, peaksid tiitrid olema vaikimisi välja lülitatud. Kasutajal peaks olema võimalus need ise sisse lülitada (vt Näide 2).

Juhul, kui videofailil puudub helivoog, tuleb videofaili kirjeldusse lisada vastav info, näiteks „Ilma helita video”.

Illustreerivad näited
Näide 1: Tiitritega videod

Mitmed videofailide haldamise keskkonnad internetis pakuvad võimalust lisada videofailidele subtiitreid. Üks selline keskkond on Youtube, mida Eesti veebilehtedel väga palju kasutatakse. Youtube võimaldab tuvastada videofaili helivoost automaatselt ingliskeelset kõnet, lisada tuvastatud tekst tiitritena, lisada käsitsi tiitreid teistes keeltes peale inglise keele, laadida olemasolevat digitaalset tekstifaili üles ning kasutada sealolevat informatsiooni tiitritena.

Üks näide Youtube ingliskeelsest videost, millele on lisatud nii eestikeelsed kui ingliskeelsed tiitrid.

Näide Youtube videole subtiitrite lisamise õppevideost (inglise keeles).

Näide 2: Tiitrite sisse ja välja lülitamine Youtubes

Näide on siia lisatud, kuna paljudele toimetajatele ja arendahjatele on see Youtube keskkonna võimalus teadmata. Youtube ei ole ainus videote edastamise keskkond ning selle näite eesmärk on tekitada ettekujutus, kuidas alternatiivse lahenduse korral subtiitrite sisse ja välja lülitamise kasutajaliides toimib. Juhul kui Youtube videole on lisatud subtiitrid, saab neid sisse lülitada ja subtiitrite keelt valida vajutades video alumises servas asuval ümbriku kujulisel ikoonil.

Näide tiitrite sisse- ja väljalülitamisest Youtubes

Sulge edukriteeriumi kirjeldus »

1.2.3 Helikirjeldus või alternatiivmeedium (eelsalvestatud sisu puhul) »

WCAG 2.0 tase A Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija Täitmise eest vastutav roll Toimetaja
Olulisus Eesti kontekstis
 
Oluline, rakendada, kui võimalik
Seotud edukriteeriumid 1.2.5 AA, 1.2.7 AAA, 1.2.8 AAA
Miks on oluline edukriteeriumit järgida?
 

Videofaili sisu ei pruugi pimedatele ja vaegnägijatele ainult videofaili helivoo põhjal arusaadav olla. Et informatsioon pimeda või vaegnägijani jõuaks, tuleb videofaili juurde lisada tekstiline kirjeldus või helikirjeldus, mis videos toimuvat edasi annaks.

Praktilised juhised edukriteeriumi täitmiseks
 

Videofailile tuleb lisada, kas:

  • video sisu kirjeldav transkriptsioon teksti kujul või
  • link alternatiivsele versioonile videofailist, kus video algupärane helivoog on asendatud helikirjeldusega (vt Näide 1).

Transkriptsiooni pole vaja lisada, juhul kui video dubleerib juba veebilehel heli või tekstina esitatud sisu või video algupärane helivoog kirjeldab videos toimuvat piisava põhjalikkusega (näiteks video, kus tehakse näost näkku intervjuud või keegi peab kõnet).

Juhul, kui filmite video ise ja soovite selle ka puuetega inimestele arusaadavaks teha, on soovitatav juba originaalis koostada helivoog viisil, mis sisaldaks lisaks dialoogile ka kirjeldust videos toimuvast.

Kui on teada, et A tasemest ei piisa ja soovitakse saavutada AA taset (vt edukriteerium 1.2.5), tuleb kohe arvesse võtta, et sel juhul transkriptsioonist ei piisa. Kasutada tohib ainult alternatiivsele videofailile viitamist, kus helivoog on asendatud helikirjeldusega või helivoole on lisatud helikirjeldus.

Illustreeriv näide
Näide 1: Video teksti ja helikirjeldusega

Otseselt pimedatele suunatud heli- ja tekstikirjeldusega videofaile ei ole juhendi koostamise hetkel eesti keeles internetist avalikult saada. Ingliskeelne näide videost Youtube keskkonnas tiitritena esitatud tekstikirjeldusega ning helikirjeldusega versioon samast videost.

Sulge edukriteeriumi kirjeldus »

1.2.4 Tiitrid (reaalajas edastatava sisu puhul) »

WCAG 2.0 tase AA Testimise meetod Käsitsi
Sihtgrupp Kurt/vaegkuulja Täitmise eest vastutav roll Toimetaja, arendaja
Olulisus Eesti kontekstis
 
Oluline, rakendada, kui võimalik
Seotud edukriteeriumid 1.2.2 A
Miks on oluline edukriteeriumit järgida?
 

Puuetega inimestele tuleb luua võimalus ka reaalajas edastatavast sisust arusaamiseks. Selleks, et võimaldada kurtidel ja vaegkuuljatel reaalajas edastatava video helivoogu mõista, on vajalik sellele lisada tiitrid. Nõude puhul on tegemist edukriteeriumi 1.2.2 seotud kõrgema taseme (AA) nõudega, mis tähendab, et AA taseme saavutamiseks tuleb tiitrid lisada nii eelsalvestatud kui reaalajas edastatavale videole.

Praktilised juhised edukriteeriumi täitmiseks
 

Tiitrite lisamiseks reaalajas videotele tuleb kasutada seda võimaldavaid tehnilisi sisuhalduslahendusi (nt AJAX) ning palgata professionaalne reaalajas subtiitrite sisestaja (vt Näide 1).

Tiitreid ei tule lisada, kui video heliline sisu on veebilehel tekstina kättesaadav (näiteks videos esitatav tekst on varem teada ja tekstina võimalik esitamisega samal ajal kättesaadavaks teha).

Illustreeriv näide
Näide 1: Reaalajas tiitrid

Juhendi koostamise hetkel polnud eesti keeles reaalajas edastatavat kurtidele/vaegkuuljatele suunatud tiitritega videosisu avalikult kättesaadav. Tiitrite reaalajas lisamist illustreerib hästi ka tavakasutajatele suunatud ajalehe spordireportaaž. Alljärgnevalt üks näide Postimehes.ee AJAX sisuhalduse lahendusest, kus reaalajas kirjutatakse toimuvale spordisündmuse kohta tiitreid.

Näide reaalajas tiitrites ajalehe spordireportaažina

Sulge edukriteeriumi kirjeldus »

1.2.5 Helikirjeldus eelsalvestatud sisu puhul »

WCAG 2.0 tase AA Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija Täitmise eest vastutav roll Toimetaja
Olulisus Eesti kontekstis
 
Oluline, rakendada, kui võimalik
Seotud edukriteeriumid 1.2.1 A, 1.2.2 A, 1.2.3 A, 1.2.7 AAA, 1.2.8 AAA
Miks on oluline edukriteeriumit järgida?
 

Pimedad või vaegnägijad ei pruugi saada videofailide helivoost kätte kogu edastatavat informatsiooni. Tegemist on edukriteeriumil 1.2.3 põhineva kõrgema (AA) taseme edukriteeriumiga, mis välistab madalamal (A) tasemel lubatud tekstilise transkriptsiooni kasutamise ning nõuab rangelt helikirjelduse kasutamist. Helikirjelduse kuulamine on pimedale või vaegnägijale mugavam kui tekstilise transkriptsiooni või tiitrite lugemine.

Praktilised juhised edukriteeriumi täitmiseks
 

Video juurde tuleb panna helikirjeldus, mis võib olla, kas eraldi helifail või link videofaili alternatiivsele versioonile (vt Näide 1), kus video algupärane helivoog on asendatud sisseloetud helikirjeldusega.

Helikirjeldust ei tule lisada, kui video algupärane helivoog kirjeldab videos edasi antavat informatsiooni piisava põhjalikkusega (näiteks video, kus tehakse näost näkku intervjuud või keegi peab kõnet).

Illustreeriv näide
Näide 1: Youtube videofail lingiga

Allpool on ekraanitõmmis Youtube video-failist, mille peale on lisatud link sama video teisele, helikirjeldusega versioonile.

Ekraanitõmmis Youtube video failist, mille peale on lisatud link helikirjeldusega versioonile samast videost

Sulge edukriteeriumi kirjeldus »

Luua sisu, mida saab teavet või struktuursust kaotamata eri viisidel (nt lihtsama küljenduse abil) esitada

Puuetega inimesed kasutavad veebilehtede loetavamaks muutmiseks tehnilisi abivahendeid, mis muudavad lehe struktuuri ja küljendust. Veebiarendajad peaksid selle võimalusega arvestama ning sisu esitama viisil, mis tagab veebilehe struktuuri ja küljenduse muutmise korral selle loetavuse.

Suunisega seotud taseme A ja AA edukriteeriumid:

1.3.1 Teave ja seosed »

WCAG 2.0 tase A Testimise meetod Automaatselt
Sihtgrupp Pime/vaegnägija Täitmise eest vastutav roll Toimetaja, arendaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.3.2 A, 2.4.3 A, 2.4.6 AA, 2.4.10 AAA, 
Miks on oluline edukriteeriumit järgida?
 

Sisust arusaamise juures aitab tavakasutajat lisaks tekstile ka veebilehe struktuur ja küljendus. Näiteks saab tavakasutaja aru, et eristuv suur tekst lehe alguses on tõenäoliselt pealkiri, natuke väiksem eristuv tekst alapealkiri ning muu ühetaoline tekst on ilmselt sisu. Lisaks kujundusele on olulised ka sümbolid (näiteks jutumärgid) ning teksti esiletõstmine (näiteks rasvane või allajoonitud tekst).

Puuetega inimesed aga ei pruugi olla võimelised neid tavakasutaja jaoks nii elementaarseid märke lugema. Nemad saavad lähtuda ainult HTML märgendikeeles, mida nende kasutatavad abivahendid suudavad eristada/tõlgendada. Näiteks võivad puuetega inimestele segadust tekitada vormid, kus kohustuslikult täidetavad väljad on tähistatud ainult tärni sümboliga ja muud selgitavat informatsiooni pole lisatud.

Praktilised juhised edukriteeriumi täitmiseks

Kasutada teksti eristamiseks korrektset HTML semantikat. Sealhulgas:

  • Jagada sisu pealkirjadega osadeks 
  • Lisada pealkirjadele kirjeldused, mis näitavad nende olulisust ja teineteisele järgnevust (<h1>-<h6>)
  • Märgistada korrektselt taanded (<ol>, <ul> ja <dl>)
  • Kasutada tabeli spetsiifilist semantikat (<table>, <caption>, <scope>, <summary>, <id> ja <headers> parameetreid)
  • Kasutada vormide spetsiifilist semantikat (<label>, <title>, <fieldsets>, <legends> parameetreid)

Lisaks HTML semantikale tuleb veebivormidele lisada vajadusel selgitavad kirjeldused. Näiteks enne vormi antakse informatsiooni, et kõik vormi kohustulikud väljad on märgistatud * sümboliga ja kuuluvad täitmisele. Teine võimalus informatsiooni edastamiseks vormides on kasutada vormi kohustuslike väljade märgistamiseks ikooni, millele on lisatud alternatiivne kirjeldus välja täitmise kohustuslikkuse kohta (vt Alternatiivse kirjelduse kohta täpsemat infot edukriteeriumi 1.1.1 juures).

HTML semantika korrektsus on automaatselt testitav ning seda on võimalik teha W3C kodulehelkui sisestada testitava veebilehe aadress.

Illustreeriv näide
Näide 1: HTML elementide korrektne kasutamine

Tänapäevase sisuhalduskeskkonnaga veebilehe toimetaja ei pea üldjuhul vahetult kirjeldama HTML-keele konstruktsioone. Selle asemel on oluline kontrollida, et kasutataks sisuhalduskeskkonna pakutavaid võimalusi eesmärgipäraselt.

Näiteks tuleb pealkirjade tähistamiseks sisuhalduskeskkonnas valida õige pealkirja stiil, mitte muuta teksti suuremaks ja rõhutada seda värvi või paksendusega. Stiili kasutamisel on väga oluline järjestada pealkirju sisu tähtsusest lähtuvalt tehes seda veebilehel ühetaoliselt. Alloleval pildil on näidatud pealkirja stiili valimine laialtlevinud Wordpress sisuhalduskeskkonnas, kus teksti redigeerimisaknas valitakse rippmenüüst sobiv pealkirja stiil. Veebilehel ilmuvad pealkirjad vastavalt veebilehe vaikimis häälestatud kujundusega või arendaja loodud kujundusega.

Erinevate stiilidest näidised sisuhalduse tarkvaras

Sarnaselt pealkirjadele tuleb sisuhalduskeskkonnas sisestada ka muu teksti vormindus, näiteks loendid, nummerdatud loendid ja teksti nihutamised (taanded). Paljudel sisuhalduskeskkondadel on võimalik pakutavat standardfunktsionaalsust laiendada lisamoodulite abil. Lisamooduli kasutamisel luuakse vastav HTML-keele konstruktsioon, kuhu toimetaja saab sisestada soovitud info. Alloleval pildil on toodud näide Wordpressi sisuhalduskeskkonnale paigaldatud lisamoodulist, mis võimaldab veebilehele lisada soovitud ridade ja veergude arvuga tabeli. Lisatud tabel kuvatakse redigeerimisaknas raamistikuna, kuhu sisestatakse vajalik info.
Tabeli lisamise näidis sisuhalduse tarkvaras

Taoliste lisamoodulite kasutamisel ei pea toimetaja vahetult sisestama HTML märgendeid, kuid siiski peab neid tundma piisavalt, et tabeli osi korrektselt tähistada. Näiteks pealkirja rea korrektseks tähistamiseks tuleb ülaltoodud lisamoodulis tähistada tabeli päise rida ja muuta päise rea tabeli lahtrite tüüpi. Selleks märgitakse ära tabeli esimene rida ning muudetakse selle rea ja lahtrite seadistusi (vaata Joonist 3 ja Joonist 4).

Tabeli rea seadistamine sisuhalduse tarkvaras Tabeli lahtri seadistamine sisuhalduse tarkvaras

Analoogselt päisega tähistatakse vajadusel tabeli jaluse rida. Korrektselt vormistatud päisele ja jalusele saab arendaja luua vastava kujunduse (näiteks rõhutatud või teist värvi tekstitüübi), mis kuvatakse veebilehele automaatselt.

Paljud sisuhalduskeskkonnad võimaldavad tabelite kopeerimist otse tabelarvutusprogrammidest nagu Microsoft Excel või LibreOffice Calc. Soovitatav on kopeerida ilma tekstivorminduseta tabel ning vormindus lisada veebilehe sisuhalduskeskkonnas. Samuti tuleb kopeeritud tabelil tähistada päis ja jalus ülalpool kirjeldatud viisil.

Tabelite ja muude struktuurielementide sisestamine võib olla sisuhalduskeskkonna spetsiifiline. Seetõttu tuleb nende korrektseks sisestamiseks järgida sisuhalduse lahenduse pakkuja või veebilehe arendaja koostatud juhendmaterjali ning vajadusel küsida neilt nõu konkreetse olukorra lahendamiseks.

Sulge edukriteeriumi kirjeldus »

1.3.2 Tähenduslik järjestus »

WCAG 2.0 tase A Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija Täitmise eest vastutav roll Toimetaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.3.1 A, 2.4.3 A, 2.4.6 AA
Miks on oluline edukriteeriumit järgida?
 

Teksti tähendus sõltub reeglina sellest, millises järjekorras seda näidatakse. Näiteks loeb tavakasutaja reeglina vasakus tulbas olevat teksti, enne kui paremas tulbas olevat teksti. Erinevalt tavakasutajatest ei pruugi abivahendeid kasutavad puuetega inimesed teksti liigendamisest aru saada.

Praktilised juhised edukriteeriumi täitmiseks
 

Tekst tuleb kirjutada alati tähenduslikus järjestuses. See tähendab, et:

  • Pealkirju kasutatakse korrektselt sisu tähtsuse järgi osadeks jagamiseks (vt Näide 1 ja 2)
  • Menüüd on muust tekstis selgelt eraldatud
  • HTML märgendikeeles on sisu samas järjestuses nagu veebilehitsejas kuvatuna

HTML märgendikeeles kasutatakse kuue-tasemelist pealkirjade struktuuri. Esimene pealkiri <h1> on kõige olulisem ning kuues pealkiri <h6> kõige vähem olulisem. Hea praktika on igal veebilehel kirjeldada ainult üks esimese <h1> taseme lehekülje pealkiri. Pealkirjade tasemeid kasutatakse vastavalt vajadusele. Kui veebilehel on võrdse tähtsusega teemad, võib lehel kasutada ühte esimese taseme pealkirja ning kõik ülejäänud pealkirjad võivad olla teise taseme pealkirjad.

Illustreerivad näited
Näide 1: Teksti liigendamise hea näide
Teksti liigendamise hea näide Vikipeedia veebilehe näitel

Vikipeedia veebileht Rootsi riigi kohta on hea näide. Lehel on esimese taseme pealkiri:

<h1>Rootsi</h1>

Alapealkirjad on teise ja kolmanda taseme pealkirjad:

<h2>Loodus</h2>
...
<h3>Kliima</h3>

Üldiselt soovitavad WCAG nõuded kasutada esimese taseme pealkirja (<h1>) ainult ühe korra veebilehe kohta. Tegemist on siis nn lehe pealkirjaga. Teiste tasemete pealkirjad peaksid olema hierarhilises järjekorras, näiteks <h2> taseme pealkirjalt <h4> tasemele hüppamine ei ole hea praktika.

Ka menüüd on tekstist selgelt eraldatud.

Lisaks on teksti punktidega täiendavalt liigendatud.

<ul>
<li>Esileht</li>
<li>Üldine arutelu</li>
<li>Sündmused maailmas</li>
</ul>
Näide 2: Teksti liigendamise halb näide
Teksti liigendamise halb näide Keskonnainvesteeringute Keskuse veebilehe näitel

Keskkonnainvesteeringute Keskuse tutvustuse veebileht on näide, kus lehel on sisuliselt kolme tasemeline pealkirjade struktuur (nt KES ME OLEME>Meie põhiväärtused>Asjatundlikkus), kuid HTML märgendikeeles on märgistatud pealkirjaks ainult lehe pealkiri „KES ME OLEME”:

<h1 class="title" id="page-title">Kes me oleme</h1>

Ülejäänud pealkirjad on HTML märgendikeeles tekstist eraldatud rasvase kirjaga:

<strong>Meie põhiväärtused:</strong>
<strong>Asjatundlikkus</strong>

Rasvane tekst ei ole ekraanilugejatele pealkirjana üheselt ära tuntav.

Sulge edukriteeriumi kirjeldus »

1.3.3 Aistingulised omadused »

WCAG 2.0 tase A Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija, kurt/vaegkuulja, motoorika häirega inimene Täitmise eest vastutav roll Toimetaja, arendaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.4.1 A
Miks on oluline edukriteeriumit järgida?
 

Puuetega inimestel võib olla raske mõista veebilehe objektide aistingulisi omadusi nagu kuju, asukoht või mõõtmed. Näiteks kirjeldus „Kasuta paremal pool olevat otsingut” ei pruugi anda pimedale vajalikku informatsiooni, sest ta võib-olla ei saa aru, kus objekt, millele viidatakse tegelikult asub.

Praktilised juhised edukriteeriumi täitmiseks
 

Objekti aistinguliste omaduste kirjeldamisel tuleks kasutada mitut alternatiivset tunnust nagu asukoht, kuju ja nimetus. Asja mõte on eristada objektid mitme tunnusega, mis võimaldab neid leida ka juhul, kui inimene ei suuda ühte tunnustest tajuda. Näiteks tekst „Otsimiseks kasuta sinist kolmnurka nimetusega „Otsi”, mis asub paremal pool”. Kui inimene on värvipime, otsib ta paremalt poolt lihtsalt kolmnurka nimetusega „Otsi”. Samas võib vaegnägija otsida midagi sinist paremalt.

Veebileht peab andma abitekstide kaudu kasutajale täiendavaid juhiseid (vt Näide 1), kuid antavad juhised ei tohi olla helipõhised (näiteks piiksuv heli, kui vormi täitmisel tehakse viga).

Objekt millele viidatakse peaks olema kirjeldatud nii, et see oleks kergesti leitav (vt Näide 2).

Illustreerivad näited
Näide 1: Abitekst

Näide otsingut kirjeldavast abitekstist Eesti Kunstimuuseumi digikogu veebilehel.
Otsingut kirjeldava abiteksti näide Eesti Kunstimuuseumi veebilehel

Näide 2: Otsingu nupu kirjeldamisest RIA veebilehel

Hea näide on RIA veebilehe otsingunupp.

Otsingu nupu kirjeldamise näide RIA veebilehel

Veebilehel on näha ainult otsingu nupp, kuid spetsiaalselt ekraanilugeja tarbeks on HTML märgendikeeles lisatud silt „Lehe üldotsing”.

<form id="searchform" method="get" action="/index.php">
    <label for="searchword" class="forscreenreader">Lehe üldotsing</label>
    <input id="searchword" type="text" name="query" value="Sisesta märksõna">
    <input id="searchbutton" type="submit" value="Otsi">
</form>

Sulge edukriteeriumi kirjeldus »

Teha sisu nägemine ja kuulmine kasutajatele lihtsamaks muuhulgas esiplaani eraldamisega taustast.

Veebilehte vaataval puudega inimesel võib olla vajadus lehest arusaamiseks selle visuaalset kuju muuta. Näiteks teksti suurendada või tausta ja sisu värvide kontrastsust muuta. Selleks tuleb talle luua mugavad võimalused.

Suunisega seotud taseme A ja AA edukriteeriumid:

1.4.1 Värvikasutus »

WCAG 2.0 tase A Testimise meetod Automaatselt
Sihtgrupp Pime/vaegnägija, motoorika häirega inimene Täitmise eest vastutav roll Toimetaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.3.3 A, 3.3.1 A, 3.3.2 A
Miks on oluline edukriteeriumit järgida?
 

Värv ei tohi olla ainus informatsiooni edasi andmise vahend, kuna puuetega inimesed ei pruugi sellest tavakasutajaga samaväärselt aru saada.

Praktilised juhised edukriteeriumi täitmiseks
 

Kogu oluline informatsioon, mis on edasi antud värvidena peab olema ka teksti kujul välja toodud. Näiteks kui tekstis on mõnda olulist sõna rõhutatud värviga, on üks võimalus seda tekstis ära märkida, kui sõna ette või järgi lisatakse tekst "oluline".

Nähtava tausta ja selle peal oleva teksti kontrastsuse suhe peab olema vähemalt 3:1. Juhul, kui taustaks on  erinevate värvidega pilt, siis võrreldakse pildi kõige väiksema kontrastsusega värvi teksti värviga (vt Näide 1).

Linkide puhul, mis on tekstist ainult värvi alusel eristatavad, tuleb lisada täiendav märgistus, et link oleks puudega inimesele leitav (vt Näide 2). Kasutada tuleb, kas heledat tausta ja tumedat teksti või tumedat tausta ja heledat teksti.

Illustreerivad näited
Näide 1: Kontrastsus

Halb teksti ja tausta kontrastsus 2.2:1:

Kontrastsuse näide 2.2:1

Hea teksti ja tausta kontrastsus 7.03:1:

Kontrastsuse näide 7.03:1
Näide 2: Linkide märgistamine

Linkide täiendavat märgistust on kasutatud näiteks Riigi Infosüsteemi Ameti veebilehelAllajoonitud lingi peale liikumine muudab lingi teksti värvi ning hiirekursor muutub noolest näpu kujuliseks ja eemaldatakse allajoonimine.

Näide, kus vasakul on lingi näidis ilma sellele kursorit viimata ning paremal sama link kui sellele on kursor viidud.

Tekstist parema eristumise eesmärgil soovitatakse linke märgistada vaikimisi allajoonitult ning kursori lingile viimisel allajoonimine automaatselt eemaldada. Kui näiteks kasutatakse mustvalget ekraani, on allajoonimata linke muust tekstist raske eristada ning kasutaja peab kogu teksti hiire või klaviatuuriga läbi käima, et lingid üles leida.

Sulge edukriteeriumi kirjeldus »

1.4.2 Helitugevuse kontrollimine »

WCAG 2.0 tase A Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija, motoorika häirega inimene Täitmise eest vastutav roll Toimetaja
Olulisus Eesti kontekstis
 
Oluline, rakendada, kui võimalik
Seotud edukriteeriumid Puuduvad
Miks on oluline edukriteeriumit järgida?
 

Mõnedel puuetega inimestel on raskusi sisule keskendumisega. Segavad faktorid, nagu automaatselt mängima hakkav muusika võib veebi sisust arusaamist nende jaoks oluliselt halvendada. Näiteks pime ei pruugi segava taustaheli tõttu kuulda, mis informatsiooni ta ekraanilugeja tarkvara kõnesüntesaator edastab.

Praktilised juhised edukriteeriumi täitmiseks
 

Heli, mis hakkab lehe laadimisel automaatselt mängima, peab olema võimalik välja lülitada või selle tugevust reguleerida. Helitugevuse reguleerimisel ei saa tugineda kasutaja arvuti võimalustele. Veebileht peab vastava võimaluse ise välja pakkuma. Kasutaja arvuti helitugevuse reguleerimine võib mõjutada ka muid helisid peale veebilehega seotud heli ning muuta veebilehe näiteks ekraanilugejaga kasutamatuks. Heli kontrollriba peab olema kergesti leitav.

Nõuet ei pea rakendama, kui heli mängimine lõpetatakse automaatselt vähem kui kolme sekundi jooksul.

Illustreeriv näide
Näide 1: Heli kontrollriba
Heli kontrollriba näide

Hea näide veebilehest, kus on olemas koht heli välja lülitamiseks.

Halb näide veebilehest, kus heli pole võimalik välja lülitada.

Sulge edukriteeriumi kirjeldus »

1.4.3 Kontrast (miinimumnõue) »

WCAG 2.0 tase AA Testimise meetod Automaatselt
Sihtgrupp Pime/vaegnägija Täitmise eest vastutav roll Toimetaja, arendaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.4.5 AA, 1.4.6 AAA, 1.4.9 AAA
Miks on oluline edukriteeriumit järgida?
 

Puuetega inimestel võib olla raske teksti taustast eristada. Et teksti eristamist neile kergemaks teha peab teksti ja sisu kontrast olema piisavalt erinev.

Praktilised juhised edukriteeriumi täitmiseks
 

Tekstis ja taustana kasutatavate värvide kontrastide erinevust ja on võimalik testida veebipõhiste töövahenditega (vt Näide 1).

Minimaalne teksti- ja taustavärvi kontrastsuse erinevuse suhe peab olema 4,5.1. Suure teksti puhul (alates suurus 18) peab kontrastsuse erinevuse suhe 3:1.

Kasutada tuleks, kas heledat tausta ja tumedat teksti või tumedat tausta ja heledat teksti.

Illustreeriv näide
Näide 1: Kontrastsus

Halb teksti ja tausta kontrastus 2.2:1:

Kontrastsuse näide 2.2:1

Hea teksti ja tausta kontrastsus 7.03:1:

Kontrastsuse näide 7.03:1

Automaatseks kontrastsuse testimiseks on võimalik kasutada Snook.ca veebitööriista.

Sulge edukriteeriumi kirjeldus »

1.4.4 Teksti suuruse muutmine »

WCAG 2.0 tase AA Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija, motoorika häirega inimene Täitmise eest vastutav roll Arendaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.4.5 AA, 1.4.8 AAA, 1.4.9 AAA
Miks on oluline edukriteeriumit järgida?
 

Puuetega inimestel võib olla vaja veebilehe loetavuse parandamiseks ja veebilehel paremaks navigeerimiseks teksti suurust muuta. Selleks peab neile looma võimaluse.

Praktilised juhised edukriteeriumi täitmiseks
 

Kuna kaasaaegsetele veebilehitsejatele on teksti suuruse muutmise võimalus juba sisse ehitatud, siis tuleks lihtsalt järgida, et veebilehe suurendamisel selle funktsionaalsus toimiks. Selleks tuleb veebilehte testida enimlevinud veebilehitsejatega, suurendusega 200%.

Veebilehele võib luua ka veebilehitsejast sõltumatu täiendava kasutajaliidese, mis võimaldab kasutajal teksti suurust muuta ja teksti vähemalt 200% suurendada (vt Näide 1).

Illustreeriv näide
Näide 1: Kasutajaliides teksti suurendamiseks

Eesti Panga kodulehel on loodud vaegnägijatele eraldi link, mis avab lehe ülaosas täiendava kasutajaliidese.

Näide vaegnägijate kasutajaliidesest Eesti Panga kodulehel

Sulge edukriteeriumi kirjeldus »

1.4.5 Pildivormingus tekst »

WCAG 2.0 tase AA Testimise meetod Käsitsi
Sihtgrupp Pime/vaegnägija Täitmise eest vastutav roll Toimetaja, arendaja
Olulisus Eesti kontekstis
 
Väga oluline, kindlasti rakendada
Seotud edukriteeriumid 1.1.1 A, 1.4.3 AA, 1.4.4 AA, 1.4.6 AAA, 1.4.9 AAA
Miks on oluline edukriteeriumit järgida?
 

Kuna pimedad või vaegnägijad kasutavad veebilehel eelkõige teksti kujul olevat sisu, ei pruugi pildivormingus tekst neile arusaadav olla. Seetõttu tuleb teabe edastamiseks kasutada pigem teksti, kui pildivormingus teksti.

Praktilised juhised edukriteeriumi täitmiseks
 

Kui vähegi võimalik tuleb kasutada tekstiga pildi asemel tavalist teksti (vt Näide 1). Siia alla kuuluvad ka pdf-failid, mida on võimalik nii pildi, kui teksti kujul salvestada. Infole parema ligipääsetavuse tagamiseks tuleb veebilehel olevad pdf-failid võimalusel alati salvestada tekstina, mitte pildina.

Veebilehe kujundamisel tuleb kasutada tehnoloogiaid, mis eraldavad informatsiooni ja esitluskihid, jättes sellega sisu ekraanilugejatele loetavaks (näiteks CSS).

Tekstiga pilte võib kasutada:

  • Kui tegemist on logode või kaubamärkidega
  • Kui sisu ei ole võimalik tekstina esitada, näiteks tüpograafilise teose edastamisel
Illustreeriv näide
Näide 1: Tekstiga pilt

Linnamuuseumi veebilehel on pildi kujul lingid erinevatele muuseumitele koos pildil oleva muuseumi kirjeldusega. Pildid ei ole abivahenditele tekstina loetavad ning konkreetsel lehel puuduvad ka alternatiivsed kirjeldused. Ilma alternatiivse kirjelduseta võib pimedatel ja nende kasutatavatel abivahenditel tekkida raskusi pildi kujul esitatud linkide kirjeldustest arusaamisega.

Halb näide pildi kujul linkidest

Halb näide pildi kujul linkidest

Sulge edukriteeriumi kirjeldus »

 

AAA edukriteeriumid

WCAG 2.0 AAA taseme edukriteeriumid kehtestavad samade põhimõtete ja suuniste kohta rangemad nõuded kui A ja AA taseme edukriteeriumid. 

Vastavalt Majandus- ja Kommunikatsiooniministri 19.03.2012 käskkirjaga nr 12-0106 kinnitatud „Veebide koosvõime raamistik” versioonile 1.0, on A ja AA taseme edukriteeriumite nõuete täitmine avaliku sektori veebilehtedel kohustuslik ja AAA taseme edukriteeriumite järgimine soovituslik. Kuigi teiste sektorite veebilehtedele pole WCAG 2.0 järgimine ühegi õigusaktiga kohustuslikuks tehtud, on seda siiski soovitatav teha. Nii tagatakse veebis oleva informatsiooni loetavus ka erivajadustega inimestele.



AAA taseme edukriteeriumite täitmisele tuleb suuremat tähelepanu pöörata eelkõige puuetega inimestele suunatud veebilehtede ja veebipõhiste infosüsteemide arendamisel. Samuti lihtsustab mitmete AAA taseme edukriteeriumite nõuete täitmine veebilehe või infosüsteemi kasutamist piiratud võimalustega oludes: näiteks ereda päikesevalguse käes viibimisel, töötamisel kinnastega või ebatraditsiooniliste juhtseadmetega (kuulhiir, gürohiir, metallist turvaklaviatuur).

Järgnevalt on välja toodud ülevaade tajutavuse põhimõtte all kehtestatud AAA taseme edukriteeriumite olulisematest nõuetest koos selgitustega, millal on otstarbekas nende täitmisele suuremat rõhku panna.

 

1.2.6 Viipekeel (eelsalvestatud sisu puhul) – Kurdid eelistavad videofailide helivoo edasi andmiseks enamasti viipekeelt subtiitritele. Kurtidele suunatud sisu loomisel tuleks võimalusel kaaluda viipekeelse tõlke lisamist. Selleks tuleb teha, kas eraldi videofaili versioon, kuhu on lisatud viipleva inimese kujutis videofaili helivoo edasi andmiseks või teha eraldi videofail viiplemisega ja viidata sellele vastava video juures. Silmas tuleb pidada ka, et Eestis kasutatakse erinevaid viipekeeli: eesti, vene ja rahvusvahelist viipekeelt. See võib muuta selle meetme rakendamise kalliks ja keerukaks.

1.4.6 Kontrast (laiendatud) – WCAG 2.0 AA taseme edukriteeriumid näevad ette, et tausta ja sellel oleva teksti kontrastsuse suhe peab olema minimaalselt 4,5:1. Laiendatud AAA edukriteerium määrab kontrastsuse suhteks minimaalselt 7:1. Soovitatud on 7:1 või suurema kontrastsuse suhte rakendamist kaaluda veebilehtede juures, mida kasutatakse ereda valguse käes või aku energia kokkuhoiu eesmärgil väiksema ekraani taustavalgustusega töötamisel mobiilsetes seadmetes.

1.4.9. Pildivormingus tekst (eranditeta) – Edukriteerium näeb ette pildivormingus tekstidest loobumise eranditeta. Antud edukriteeriumit tuleb rakendada veebilehtedel, mis on mõeldud kasutamiseks monokroom või piiratud värviedastusega ekraanidel (kassaaparaadid, tööstusseadmete juhtarvutid, välitingimustes kasutatavad iseteenindusarvutid nt turismiinfo jms). Selliste seadmete kasutamisel võib esineda probleeme pildina esitatud teksti lugemisega.

Tajutavuse põhimõtte teisi AAA taseme edukriteeriume (1.2.6, 1.2.7, 1.2.8, 1.2.9, 1.4.6, 1.4.7, 1.4.8, 1.4.9) saab vaadata WCAG 2.0 ametlikust tõlkest.