logo

Hostgator coupons

Hostgator coupons are scattered all over this blog in different posts. All coupons from the entire blog are gathered here.

Dostopni okvirji

Ta članek je prevod članka: Creating Accessible Frames. Vse pravice pridržane © WebAIM.

Uvod

Množica okvirjev (frameset) je spletna stran, ki sestoji iz vsaj dveh drugih ločenih strani, prikazanih v istem vizualnem prostoru. Uporabniki takšno stran navadno vidijo kot povezano celoto. Tako lahko pregledujejo vsebino večih strani naenkrat.

Uporabniki, ki uporabljajo bralnike zaslona, ne morejo hitro pregledati večih strani. Vse vsebina je prikazana linearno, okvir (frame) za okvirjem. Okvirji niso nedostopni modernim bralnikov zaslonov, vendar pa so lahko zavajajoči.

Bralnik zaslona JAWS navadno prebere vse okvirje v množici okvirjev kot bi bili na eni sami strani. Bralnik zaslona obvesti uporabnika, da je ta stran dejansko sestavljena iz množice okvirjev, potem pa nadaljuje z branjem vseh strani v množici okvirjev. Obstaja tudi bližnjica na tipkovnici za hitro premikanje bralnika med okvirji. Vse bližnjice so na voljo v dodatku (Appendix) na Keyboard Shortcuts for JAWS.

Ostali programi obravnavajo okvirje drugače. Home Page Reader ne omogoča samodejnega branja strani v množici okvirjev. Namesto tega ponudi uporabniku seznam okvirjev znotraj posamezne množice okvirjev, potem pa se uporabnik sam odloči kateri okvir želi pregledovati.

Dostopnost okvirjev

Okvirji naj imajo naslov

Pozor

Ena najpomembnejših stvari, ki pripomorejo k večji dostopnosti je, da ima vsak okvir naslov.

Ko uporabnik bralnika zaslona sliši okvirje iz seznama, je uporabno, da ve kakšen je namen vsakega okvirja. Spletnim razvijalci z uporabo naslova, sporočaijo namen vsakega posameznega okvirja uporabnikom bralnikov zaslona. Najboljše je, da so naslovi okvirjev kratki in jedernati.  V množici z dvema okvirjem je to npr. »navigacijski okvir« ali pa »glavna vsebina«.

Če okvir nima naslova, bralnik zaslona poskuša najti druge vire informaciji kot so ime okvirja (atribut name) ali pa ime datoteke. Včasih ostali viri niso pretirano uporabni. Npr. če je ime okvirja al pa ime datoteke »default3.htm« (ali kaj podobnega), potem je nemogoče vedeti kaj vsebuje posamezen okvir, razen če bralnik zaslona obdela vsebino vsakega okvirja.

Uporaba pravilnega tipa dokumenta

Stran, ki uporablja okvirje, mora imeta pravilen tip dokumenta (doctype – document type). Spodnji primer prikazuje uporabo doctype-a na strani, ki uporablja HTML 4. Pravilen doctype omogoča bralnikom zaslona in ostalim brskalnikom, da zaznajo, da je dokument sestavljen iz večih okvirjev.

Noframes vsebina

V primeru, da uporabnik ne more ali ne želi videti vsebine okvirja, mora biti na voljo vsebina v znački noframes. Vsebina znotraj značke noframes mora nakazovati kaj je vsebina okvirjev in vsebovati povezave do posameznih okvirjev.

Primer dostopnega okvirja

Primer prikazuje pravilno uporabo doctype-a in nazorne a jedernate naslove okvirjev.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<head>
<title>Stran z okvirji</title>
</head>
<frameset cols="15%, 85%">
<frame src="menu.html" title="Navigacijski meni" name="menu">
<frame src="content1.html" title="Glavna vsebina" name="content">
<noframes>

<p>Ta dokumen z okvirji vsebuje:</p>
<ul>

<li><a href="menu.html">Navigacijo po straneh</a></li>

<li><a href="content1.html">Glavno vsebino</a></li>

</ul>
</noframes>
</frameset>
</html>

Dostopnost medvrstičnih okvirjev (inline frame / iframe)

Medvrstični okvirji so vse bolj popularni. Omogočajo enostavno vstavljanje različnih spletnih dokumentov (ali celo celotnih spletnih strani) znotraj okna neke spletne strani brez da bi specifirali frameset dokument.

<iframe src="webpage.htm">
<p>Vsebina znotraj značke iframe bo vidna samo na brskalnikih, ki ne podpirajo medvrstičnih okvirjev.</p>
</iframe>

Večina modernih brskalnikov podpira medvrstične okvirje. V primeru da brskalnik ne podpira medvrstičnih okvirjev ali pa jih uporabnik onemogoči, se mu prikaže alternativna vsebina, ki je definirano znotraj značk iframe.

Primer

Koda uporabljena za ta medvrstični okvir:

<iframe src="webpage.htm" width="40%" height="80">
<p>Če lahko vidite to besedilo, potem vaš brskalnik ne podpira medvrstičnih okvirjev.

<a href="webpage.htm">Oglejte si vsebino tega medvrstičnega okvirja v brskalniku.</a></p>
</iframe>

Pri uporabi medvrstičnih okvirjev moramo biti pozorni, da je alternativna vsebina (znotraj značk iframe) uporabna. V večini primerov je pametno, da ta vsebuje povezavo na vsebino samega okvirja. Značka iframe lahko vsebuje atributa title in longdesc (slednji še ni podprt) za dodatne opise in podrobnosti vsebine okvirja.

Povezave znotraj okvirja so dostopne preko tipkovnice kot da bi bile del same strani. Privzeto se te povezave odprejo znotraj območja okvirja. Če te povezave kažejo na zunanjo stran, lahko to predstavlja problem, sej bo vsebina prikazana znotraj glavne spletne strani.

Obstajajo tri možnosti nadzora pomikanja (z drsenjem) znotraj okvrija: auto, yes in no. Če je scrolling="auto" (tako je privzeto), se bosta vertikalni in horizontalni drsni trak pokazala samo, če se vsebina ne bo mogla zadovoljivo prikazat znotraj dimenzij okvirja. Če je scrolling="yes", se bosta vertikalni in horziontalni trak prikazala neglede na to ali sta potrebna. Če pa je scrolling="no", se drsna trakova ne bosta prikazala tudi če se vsa vsebina ne bo mogla prikazati znotraj območja okvirja. Onemogočanje premikanja z drsenjem znotraj okvirjev ni priporočljiva, saj mnogi uporabniki povečujejo tekst in ostale elemente spletne strani. Navadno je privzeta možnost (auto) najboljša izbira. Prav tako je pametno, da na medvrstičnem okvirju uporabljamo relativne velikosti, saj se bo v tem primeru le ta povečal/pomanjšal, če bomo povečali/pomanjšali velikosti same strani.

Alternative okvirjem

Kot že omenjeno, lahko okvirji predstavljajo težave glede dostopnosti. Kljub temu, da je z medvrstičnimi okvirji manj težav glede dostopnosti kot pri navadnih okvirjih, ti vseeno zahtevajo dodatno delo in organizacijo večih strani. Tipično okvirji in medvrstični okvirji naj ne bi bili uporabljani za prezentacijo in prikaz, temveč za organizacijo vsebine (medvrstični okvirji so odlični za oglaševanje in prikaz zunanje vsebine). Če želimo eno samo spletno prezentacijo, ki bi se prikazovala podobno kot z okvirji, lahko to dosežemo z uporabo Cascading Style Sheets na eni strani. Tako se izognemo kompleksnosti in problemov nedostopnosti okvirjev.

CSS omogoča kompleksne postavitve strani. CSS lahko uporabimo za dodajanje funkcionalnosti pomikanja z drsenjem praktično vsem elementom strani in tako dosežemo prezentacijo in prikaz kot z okvirji in medvrstičnimi okvirji. To naredimo s CSS atributom overflow.

Primer

Ta vsebina je vsebovana znotraj te strani. Koda uporabljena za prikaz vsebine je:

<div style="overflow:auto; width:400px; height:150px;">
Vsebina...
</div>

Vidimo lahko, da zgornja vsebina izgleda zelo podobno vsebini medvrstičnega okvirja zgoraj (medvrstični okvir doda še rob okoli elementov ko se prikaž drsni trak, medtem ko pri CSS ni tako). S CSS-om lahko to dosežemo tako, da skoraj vsem HTML elementov enostavno dodamo overflow:auto. Če je overflow nastavljen na auto, se bo drsni trak prikazal samo, če vsebine ne bo mogoče prikazati znotraj definiranega območja. Kot pri medvrstičnem okvirju, lahko tudi tukaj vsilimo drsni trak z uporabo overflow:scroll ali pa popolnoma onemogočimo drsni trak z overflow:hidden. Kot smo že prej omenili, v primeru, da drsni trak onemogočimo, nekateri uporabniki ne bodo mogli videti in dostopati do celotne vsebine, sploh če je le ta bila povečana zaradi boljše vidljivosti.

Uporaba CSS namesto okvirjev, za kontrolo prikaza in vsebine, prinaša številne prednosti. Vsa vsebina je na isti strani, kar omogoča razvijalcu manj datoteke – manjša zmešnjava. Namesto da mora bralnik zaslona navigirati med okvirji, se stran prikaže normalno kot celota. Uporabnik bralnika zaslona navadno sploh ne bo vedel, da so na strani uporabljeni drsni elementi. Uporaba CSS reši tudi številne probleme s povezavami in navigacijo med okvirji: naslov v naslovni vrstici je pravilen, povezave do zunanjih strani ali vsebine ne bodo vsebovane znotraj postavitve strani, lažje dodajanje med priljubljene, lažji nadzor nad že obiskanimi stranmi.

Drsna vsebina z uporabo CSS pa lahko vseeno povzroči določene nevšečnosti. Lahko se zgodi, da uporabniki ne bodo vedeli, da morajo uporabiti drsne elemente in zato ne bodo videli celotne vsebine. V primeru, da se prikaže več drsnih trakov lahko to uporabnike tudi zmede. Ti problemi so sicer navzoči tudi pri uporabi okvirjev, zato so prednosti CSS dovoljšen razlog za prvo izbiro alternative okvirjem.