U sklopu aktivnosti podizanja svijesti o značaju veb pristupačnosti specijalna biblioteka (Specijalna biblioteka za slijepa i slabovida lica RS, Banja Luka, Republika Srpska, Bosna i Hercegovina) je izdala priručnik "Veb pristupačnost", autor: Žarko Lalović. Priručnik možete preuzeti sa Priručnik Veb pristupačnost u elektronskom formatu.

 

Uvod

Svrha i namjena dokumenta

Ideja ovog priručnika je da čitalac nakon završetka čitanja bude upućen ne samo u pojam i značaj veb pristupačnosti već i način na koji slijepe i slabovide osobe koriste računare i internet. Teme koje su obrađene i način na koji su koncipirane predviđa da čitalac po završetku čitanja bude sposoban da procijeni da li je veb sajt institucije za koju radi pristupačan i ako nije, da ga u dovoljnoj mjeri preuredi. Takođe bi trebalo da ima jasnu predstavu kako i gdje može dalje proširiti svoja znanja o veb pristupačnosti.

Razlog nastanka ovog štiva je taj da u našem okruženju ne postoji svijest o problemu veb pristupačnosti, takođe ne postoji ni literatura na našem jeziku koja bi objasnila problem i ponudila rješenje osoblju koje radi na održavanju veb sajtova.

Potrebno je učiniti korake ka približavanju veb tehnologija slijepim i ostalim licima sa invaliditetom, jer se na taj način može bitno olakšati njihov svakodnevni život. Specijalna biblioteka za slijepa i slabovida lica Republike Srpske ovim priručnikom, koji ujedno predstavlja i manifest, ima za cilj da podigne nivo svijesti o značaju veb pristupačnosti.

Evropska unija je dala preporuke za prilagođavanje veb sadržaja slijepim licima. U našem zakonodavstvu postoji praznina u pogledu regulisanja ove materije. Bitan aspekt svakog društva je ravnopravnost i jednakost svih njegovih članova, a povećanjem veb pristupačnosti bi se načelo jednakosti i ravnopravnosti dosljednije ispoštovalo.

Kome je dokument namijenjen

Veoma je važno da informacije u vezi sa javnim službama budu pristupačne slijepim i ostalim licima sa invaliditetom. Dokument je namijenjen svim institucijama koje mogu preduzeti konkretne korake u podizanju nivoa svijesti o bitnosti veb pristupačnosti. To su u prvom redu institucije koje predstavljaju javnu vlast, državne institucije, ministarstva, agencije, mediji, institucije lokalnih uprava i različite organizacije koje pružaju elektronske usluge građanima.

 Između ostalog to su:

• Ministarstva nauke i tehnologije RS
• Agencija za informaciono društvo RS
• Ministarstvo civilnih poslova i komunikacija BiH
• Regulatorna agencija za komunikacije

Prilozi uz dokument

• Prilog A - Navodi tipove vizuelnih invaliditeta i daje kraći opis svakog od njih, kao i načine na koje lica s tom vrstom invaliditeta koriste veb te prepreke  sa kojima se susreću.
• Prilog B - Opširnije opisuje način na koji slijepi koriste internet i aplikacije koje im u tome pomažu, konkretno čitače ekrana. Takođe daje kratko uputstvo za korištenje popularnih čitača ekrana.
• Prilog V - Navodi alate i metode za validaciju koda postojećih veb sajtova i testiranje pristupačnosti.
• Prilog G - Objašnjava principe pristupačnog dizajna i može se koristiti kao konkretno uputstvo za tehnička lica pri realizaciji novih veb sajtova tako da budu pristupačni.
• Prilog D - Detaljnije objašnjava problem i rješenja kod poremećaja kolornog vida - daltonizma.
• Prilog Đ - Navodi prednost tečnog i elastičnog rasporeda veb strana nad fiksnim i navodi konkretnu realizaciju.
• Prilog E - Navodi najbitnije trenutne standarde u oblasti pristupačnosti i daje kraće uputstvo za korištenje WCAG (Web Content Accessibility Guidelines) smjernica za one koji žele proučavati materiju veb pristupačnosti dalje, izvan okvira ovog dokumenta.

Dalji koraci

Nadamo se da ćete poslije čitanja našeg priručnika, koji ujedno predstavlja i našu inicijativu, uvidjeti važnost izložene materije i učiniti korake u prilagođavanju veb sadržaja potrebama slijepih lica. Dalji korak koji bismo mogli zajednički učiniti jeste uvođenje zakonske regulative u smislu obaveznosti poštivanja pravila veb pristupačnosti pri izradi sajtova.

Šta je veb pristupačnost

Da bi se veb sajt mogao nazvati pristupačnim svi korisnici moraju biti u mogućnosti da pristupe svim njegovim dijelovima. To ne znači da svi moraju doživjeti isto korisničko iskustvo, ali znači da ne bi trebalo da postoji niti jedna funkcionalnost ili dio sadržaja koji je nedostupan bilo kome bez obzira na njegovu invalidnost, uređaje i veb čitače koje koristi ili okruženje iz kog pristupa.

Zašto je veb pristupačnost bitna

Većina veb sajtova u našem okruženju ima prepreke koje otežavaju osobama sa invaliditetom da ih koriste, odnosno veći dio sadržaja na internetu može se samo djelimično ili se ne može uopšte koristiti pomoću asistativnih tehnologija kao što su čitači ekrana. Nažalost, to predstavlja veliku prepreku za slijepa lica, pogotovo što se većina informacija danas dobija putem interneta, koji je najbrži i najjednostavniji način za informisanje.

Veb je sve više bitan resurs u mnogim oblastima života: obrazovanju, zaposlenju, trgovini, rekreaciji itd. Od esencijalnog je značaja da veb bude pristupačan da bi se obezbijedio ravnopravan pristup i ravnopravne prilike ljudima sa invaliditetom.

Ako sve više veb sajtova postane pristupačno, osobe sa invaliditetom će moći da koriste i doprinose više vebu. Takođe, na taj način aktivnije će učestvovati u dešavanjima iz svoje okoline i svijeta. Tako će se smanjiti njihova izolovanost i otuđenost iz svakodnevnog života.

Postojeća zakonska regulativa i preporuke

Nastanak veba kao forme informacionih i komunikacionih tehno-logija od glavnog značaja pokreće interesantna pitanja o primjeni postojećih zakona i političkih rješenja na ovaj novi medij i otvaranju mogućnosti svakog pojedinca u društvu, uključujući i ljude sa invaliditetima, da ga koriste.

Danas se pojavljuje sve više zakona koji regulišu ovu oblast, kako međunarodnom tako i u unutrašnjem zakonodavstvu. Akcenat se stavlja na dostupnost informacionih i komunikacionih tehnologija licima sa invaliditetom uključujući internet i veb. Postoje različiti pristupi u rješavanju ovog problema. Na primjer, pojedini daju prednost  uspostavljanju ljudskih i građanskih prava nad informacionim i komunikacionim tehnologijama, drugi opet imaju stav da svaka informaciona i komunikaciona tehnologija koju vlada kupi mora biti dostupna. Postoji i shvatanje da svaka informaciona i komunikaciona tehnologija prodata na tržištu mora biti dostupna. Ovdje su navedena samo neka mišljenja i stavovi, postoji još i niz drugih stavova o ovoj tematici.

Bosna i Hercegovina je jedna u nizu od zemalja koja je potpisala i ratifikovala Konvenciju Ujedinjenih nacija o pravima osoba sa invaliditetom te se na taj način obavezala da će sprovoditi istu i držati se njenih načela. Tom konvencijom su zagarantovana prava invalida i učinjen je pokušaj da im se značajno olakša i pojednostavi život. U članu 8. tačka 2. stav g. navode se prava invalida na pristupačnost i informacije. Stav glasi: „Promovisanje pri-stupačnosti osobama sa invaliditetom novih informacionih i komunikacijskih tehnologija i sistema, uključujući internet“.

Dakle, u citiranom članu Konvencije jasno je navedeno da invalidi imaju pravo na korištenje tehnoloških dostignuća koja im olakšavaju korišćenje veba.

Takođe, treba neizostavno navesti i Standardna pravila UN-a o izjednačavanju mogućnosti za osobe sa invaliditetom (rezolucija 48/96). Ova pravila nisu pravno obavezujuća, ali moralno jesu. Naveden je dio člana koji se odnosi na predmet manifesta gdje se izričito kaže da države „trebaju razviti strategiju kojom će informacione usluge i dokumentaciju učiniti pristupačnim različitim kategorijama osoba sa invaliditetom. Brajevo pismo, zvučni snimak i druge odgovarajuće tehnologije treba koristiti da bi se osigurala dostupnost pisanih informacija i dokumenta-cije osobama s oštećenjima vida.“

Univerzalna deklaracija o ljudskim pravima (čl. 19.) navodi da svako ima pravo na slobodu mišljenja i izražavanja, kao i pravo da traži, prima i širi obavještenja i ideje bilo kojim sredstvima i bez obzira na granice.

Evropska konvencija o ljudskim pravima u članu 10. kaže da svako ima pravo na slobodu izražavanja. Ovo pravo uključuje slobodu posjedovanja sopstvenog mišljenja, primanja i saopštavanja informacija i ideja.

Konvencija UN za zaštitu i promovisanje prava i dostojanstva osoba sa invaliditetom uređuje pristupačnost okruženja i mobilnost osobama sa invaliditetom kao i pristupe informacijama i komunikacijama. Odredbe ove konvencije uređuju mjere kojima se u praksi ostvaruju prava na slobodu kretanja i izražavanja osobama sa invaliditetom.

U zemljama u regionu nedovoljno je pažnje posvećeno pitanjima pristupa informacijama za osobe sa invaliditetom.

Spisak adresa postojećih dokumenata u vezi sa zakonskim regulisanjem veb dostupnosti u mnogim zemljama svijeta (uključujući SAD i EU) može se naći na zvaničnoj stranici WAI (Web Accessibility Initiative) inicijative za veb pristupačnost W3C (World Wide Web Consortium) konzorcijuma.

Vizuelni invaliditeti

Sljepilo

Sljepilo podrazumijeva trajan, nepovratan gubitak vida na oba oka.

Da bi koristili veb, slijepe osobe se oslanjaju na čitače ekrana - softver koji čita tekst koji se šalje na monitor i prosljeđuje ove informacije do sintetizatora govora ili do brajevog retka. Neki slijepi ljudi koriste tekstualne veb pretraživače kao što je Lynx ili govorne veb pretraživače, umjesto pretraživača sa grafičkim korisničkim interfejsom u kombinaciji sa čitačem ekrana. Slijepi moraju koristiti strategije za brzu navigaciju kao što je prolaženje kroz naslove ili linkove na veb strani pomoću tastera Tab umjesto da čitaju svaku riječ redom.

Primjeri prepreka koje slijepi ljudi susreću na vebu su slijedeći:

• slike koje nemaju alternativni tekst;
• kompleksne slike (dijagrami ili grafikoni) koje nisu adekvatno opisane;
• video koji nije opisan u tekstu ili kroz audio zapis;
• tabele koje nemaju smisla kada se čitaju redom (u linearizovanom ili obrascu ćelija po ćelija);
• okviri koji nemaju „noframe“ alternative ili koji nemaju sadržajne nazive;
• forme kroz koje se ne može kretati pomoću tastera Tab u logičnom redoslijedu ili kojima su polja loše označena (pomoću label elemenata);
• Flash sadržaj koji nije pristupačan;
• dijelovi stranice koji nisu pristupačni pomoću tastature;

Slabovidost

Postoje mnogi oblici slabovidosti, npr. slaba oštrina vida, suženi vid, mogućnost da se vide samo spoljni obodi vidnog polja, zamagljeni vid...

Da bi koristile veb, neke slabovide osobe koriste posebno velike monitore i povećavaju veličinu sistemskih fontova i slika. Drugi koriste softvrska povećala ekrana. Neke osobe koriste posebne kombinacije boja teksta i pozadine, kao što je žuti font na crnu pozadinu.

Prepreke koje slabovide osobe mogu susresti na vebu su slijedeće:

• veb stranice sa fiksnim veličinama fontova koje se ne mogu lako izmijeniti (povećati ili smanjiti);
• veb stranice koje su zbog nekonzistentnog rasporeda teške za navigaciju kada se uvećaju, radi gubitka okolnog konteksta;
• veb stranice ili slike na veb stranicama koje imaju loš kontrast i čiji se kontrast ne može lako promijeniti tako što bi korisnik zamjenio postojeće definicije stilova (CSS);
• tekst predstavljen u obliku slika, koji onemogućava prelazak viška teksta u novi red kada se uveća.

Daltonizam

Poremećaj prepoznavanja boja daltonizam je nedostatak osjetljivosti na određene boje. Česti oblici daltonizma uključuju otežano razlikovanje crvene i zelene, ili žute i plave boje. Ponekad daltonizam rezultira nemogućnošću da se vidi bilo koja boja.

Da bi koristile veb, neke osobe koje su daltonisti koriste svoje sopstvene definicije stilova da izmjene originalne izbore boja pozadina i fontova.

Prepreke koje osobe koje su daltonisti mogu susresti na vebu podrazumijevaju:

• boju koja se koristi kao jedini način da bi se naglasio tekst na veb stranici;

tekst koji je u neadekvatnom kontrastu sa šemom boja pozadine.

 

Čitači ekrana

Korisnička strana

Da bi bilo ko mogao da razvija pristupačna veb rješenja, mora imati spoznaju  o korisničkom iskustvu koje će slijepi doživjeti i biti upoznat sa načinom i tehnologijama pomoću kojih oni koriste računare i veb. Te tehnologije su konkretno - čitač ekrana, sintetizator glasa i brajev redak (koji u ovom slučaju nije praktičan jer je hardverska komponenta i zahtjeva poznavanje brajevog pisma).

Ako je sajt zadovoljio sve testove i smjernice pristupačnosti, ne znači da će biti optimalan za korištenje. To je slučaj kao i sa sajtovima koji se oslanjaju na vizuelnu komponentu - na nekima se videći korisnik može lako snaći, dok će se na nekima za kratko vrijeme isfrustrirati i izgubiti želju za korištenjem. Ako nema kontakt sa slijepim korisnicima od kojih može dobiti povratnu informaciju o nivou pristupačnosti veb sajta, onaj ko ga razvija mora sam da ga testira upravo pomoću tih tehnologija. 

Pojam čitača ekrana

Čitač ekrana je aplikacija koja pokušava da identifikuje i interpretira u vidu tekstualnih informacija ono što je prikazano na ekranu (ili tačnije rečeno ono što se šalje na standardni izlaz, bilo da je monitor prisutan ili ne). Ova interpretacija se onda ponovo prezentuje korisniku npr. pomoću sintetizatora govora ili brajevog retka. Čitači ekrana su osnovni alat pomoću kojeg slijepe osobe mogu koristiti računar. Dakle slijepe osobe ne koriste specijalizovane aplikacije za svakodnevno korištenje računara, već standardne, ali uz pomoć čitača ekrana. Tako da mjera koliko će neka aplikacija odgovarati slijepim osobama zavisi od toga koliko dobro ta aplikacija funkcioniše sa čitačem ekrana i da li on može pročitati sadržaj koji ona prikazuje. Od popularnih veb čitača najbolju podršku za čitače ekrana pružaju Internet Explorer i Mozilla Firefox, dok u radu sa Google Chrome postoje određeni problemi.

Izbor čitača ekrana zavisi od mnogih faktora uključujući platformu i cijenu jer su neki vrlo skupi. Vodeći operativni sistemi uključuju neke jednostavnije čitače ekrana kao što je Microsoft Narrator koji trenutno ne podržava jezike iz naše okoline, tako da nema neku praktičnu primjenu.

Sintetizator govora

Sintetizator govora je dio računarskog sistema zadužen za vještačku produkciju ljudskog glasa. Može biti realizovan kao hardverska ili češće softverska komponenta. Termin TTS (Text To Speach) označava mogućnost prevođenja teksta običnog jezika u govor. Јoš jedan bitan pojam za korisnike Windows operativnih sistema je SAPI (Speech Application Programming Interface). To je API koji omogućava sintetizaciju i prepoznavanje ljudskog glasa u sklopu Windows aplikacija. Namjena ovog API-ja je da omogući programerima da pišu aplikacije koje mogu da vrše prepoznavanje i sintetizaciju govora koristeći standardan skup interfejsa dostupnih iz različitih programskih jezika. Tako je moguće drugim proizvođačima da proizvode svoje TTS mašine (uprošteni naziv za sintetizator) i mašine za prepoznavanje govora (Speech Recognition i Text To Speach Engine). Ovo je bitno u smislu da ako je TTS sintetizator govora napravljen da podržava  SAPI interfejse, on se onda može koristiti umjesto onih koje nudi Microsoft ili neki drugi proizvođač, tako da se može koristiti sintetizator prilagođen jezicima sa naših prostora. Konkretno ako čitač ekrana podržava SAPI umjesto TTS sintetizatora govora koji je došao sa njim, može se koristiti sintetizator prilagođen za naše područje.

API-ji pristupačnosti

U ranijim operativnim sistemima poput MS-DOS-a, koji su koristili interfejs komandne linije, prikaz na ekran se sastojao od karaktera koji su mapirani direktno na bafer ekrana u memoriji. Tako da su čitači mogli lako pristupiti sadržaju. Sa dolaskom GUI-ja (Graphics User Interface) situacija je postala komplikovanija. Pošto se sadržaj sastoji i od iscrtane grafike, čitači moraju presretati poruke operativnog sistema i koristiti ih da bi izgradili “off-screen” model. Presretanje poruka i pravljenje modela su komplikovani zadaci.

Dizajneri operativnih sistema i aplikacija su pokušavali da riješe ove probleme dajući mogućnost čitačima da pristupe sadržaju ekrana na standardizovan i organizovan način putem API-ja pristupačnosti. Postojeći API-ji uključuju:

• Apple Accessibility API
• AT-SPI
• IAaccessible2
• Microsoft Active Accessibility (MSAA)
• Microsoft UI Automation
• Java Access Bridge

Sada čitači ekrana mogu da vrše upite nad operativnim sistemom ili aplikacijama za onim što je trenutno prikazano. Ovaj pristup je znatno lakši, ali ne zadovoljava kada aplikacije nisu kreirane u skladu sa API-jem pristupačnosti, npr. ako aplikacija nije u skladu sa MSAA API-jem, onda čitači ekrana moraju održavati off-screen model za nju.

Od navedenih Microsoft-ovih API-ja MSAA je starija tehnologija, dok je trenutna Microsoft UI Automation.

NAPOMENA: Razlika između API-ja pristupačnosti i SAPI-ja je u tome što je namjena API-ja pristupačnosti da čitač ekrana na standardizovan način komunicira sa operativnim sistemom, dok je namjena SAPI-ja da čitač ekrana komunicira sa sintetizatorom govora. Ako neka aplikacija zadovoljava API pristupačnosti, onda će čitač ekrana moći lako da pročita sadržaj koji ona prikazuje; ako sintetizator govora zadovoljava SAPI, onda će čitač ekrana pomoću njega moći prezentovati korisniku u vidu glasa ono što aplikacija trenutno prikazuje.

Podržanost za srpski i ostale srodne jezike

Većina najšire korištenih komercijalnih čitača ekrana kao što su JAWS proizvođača Freedom Scientific, Windows-Eyes firme GW Micro napravljeni su za tržište engleskog govornog područja i sintetizatori govora koji dolaze sa njima, kao i TTS mašina koja dolazi uz Windows operativni sistem, ne podržavaju jezike našeg područja.  Na sreću postoje komercijalna rješenja i projekti otvorenog koda koji omogućavaju korištenje na srpskom i srodnim jezicima.

Kao komercijalni eksterni (SAPI 4 i SAPI 5) sintetizatori za srpski jezik najčešće se koriste AnReader i WinTalker Voice. Proizvođač AnReadera je preduzeće AlfaNum iz Novog Sada. Aktuelna verzija u toku pisanja ovog teksta je 4. Kao besplatno rješenje može se koristiti sintetizator otvorenog koda eSpeak koji podržava veći broj jezika iz regiona i takođe podržava SAPI tako da se može koristiti uz sve navedene komercijalne i besplatne čitače ekrana.

Јoš jedan projekat za naše prostore koji je možda vrijedan pomena je MBROLA koja nije samostalan produkt već se može koristiti pomoću eSpeaka. U sklopu tog projekta postoji baza za hrvatski jezik koja se besplatno može preuzeti sa njihovog sajta.

JAWS

JAWS (Job Access With Speech) je komercijalni čitač ekrana kompanije Freedom Scientific namijenjen za omogućavanje pristupačno korištenje Microsoft Windows operativnog sistema slijepim i slabovidim korisnicima. Aktuelna verzija u toku pisanja ovog teksta je 12. JAWS dolazi sa ugrađenim sintetizatorima za više svjetskih jezika (Eloquence i RealSpeak),  ali nijedan od ovih sintetizatora ne podržava srpski jezik. JAWS podržava SAPI 5 sintetizatore, tako da se uz njega mogu koristiti navedeni sintetizatori za jezike regiona.

Zastupnik i distributer JAWS-a za Srbiju je preduzeće “Glorria Ferrari”.

Postoje tri dostupna načina rada koja su u vezi sa radom JAWS-a na vebu. To su: PC Cursor, JAWS Cursor i Virtual PC Cursor. Za HTML okruženje tj. veb stranice koristi se Virtual PC Cursor. Virtual PC Cursor je uveden u verziji 3.31 i njegova namjena je da oponaša PC kursor i omogući korisniku da upravlja kroz HTML dokumente koristeći iste tastere i komande koje bi koristio za rad u omiljenom programu za obradu teksta. Kada se sa JAWS-om koristi neki veb čitač, radi se u načinu Virtual PC cursor mode. JAWS naglašava postojanje okvira, linkova i formi na stranici i njihove brojčane vrijednosti. Kada se virtualni kursor pozicionira na polje forme, moguće je ući u Forms Mode u kom je moguće editovati kontrole i kretati se po poljima forme (pritiskanje dugmeta, unos teksta).

Window-Eyes

Window-Eyes je komercijalni čitač ekrana kompanije GW Micro koji se odnedavno pojavio na lokalnom tržištu. U potpunosti je lokalizovan na jezike regiona. Radi pod operativnim sistemom Microsoft Windows. Isporučuje se u dvije verzije: standard i professional. Isporučuje se sa softverskom govornom jedinicom Eloquents sa šest jezičnih podrški. Radi sa velikim brojem brajevih redaka i sa navedenim sintetizatorima glasa. Zastupništvo GW Micro Inc. za Hrvatsku ima Udruženje za unapređenje obrazovanja slijepih i slabovidih osoba, Zagreb.

NVDA

NVDA (NonVisual Desktop Access) je besplatan portabilni (prenosni) čitač ekrana otvorenog koda za Microsoft Windows. Projekat je pokrenuo Majkl Karan (Michael Curran) u 2006. NVDA je programiran u Pyton-u. Trenutno izbjegava tehnike presretanja poruka operativnog sistema (koje koristi JAWS) i koristi API-je pristupačnosti kao što su Microsoft Active Accessibility, Iaccessible2 i Java Access Bridge. NVDA koristi eSpeak kao integrisani sintetizator govora koji podržava mnoge jezika (između ostaloga i srpski), ali dodatno podržava SAPI sintetizatore (što bi značilo da može koristiti i AnReader i WinTalker Voice, ali ovi sintetizatori nisu besplatni).

Pored opšte Windows funkcionalnosti NVDA radi sa WordPadom, Notepadom i Internet Explorerom. Takođe podržava osnovne funkcio-nalnosti Outlook Express-a, Microsoft Word-a 2000/XP/2003 i Microsoft Excel-a 2000/XP/2003. Besplatni skup alata za kancelarijske potrebe OpenOffice je podržan do određene mjere. NVDA takođe podržava Mozillu Firefox (verzije 3 ili više). NVDA programeri preporučuju Firefox kao veb čitač za maksimalno iskustvo veb pretraživanja bez prepreka.

Od početka 2009. NVDA podržava WAI-ARIA tako da buduće veb aplikacije mogu bolje koristiti slijepim osobama.

Podrška za i-mejl je pružena pomoću Mozilla Thunderbird verzije 3 ili više.

U najnovijem izdanju 2010.1 NVDA podržava 64-bitni Windows i ekran za prijavljivanje u sistem, takođe ima i noviju verziju eSpeak sintetizatora govora i punu podršku za Internet Explorer.

Kompleksni dokumenti koji se mogu samo čitati (poput HTML stranica) su reprezentovani u NVDA unutar virtuelnih bafera. Virtuelni bafer je definisana i jasna prezentacija sadržaja kao što je veb stranica, kroz koju se može kretati pomoću tastera za navigaciju. Informacije poput onih da li je tekst link, zaglavlje itd. se naglašavaju zajedno sa tekstom u toku kretanja kroz njega. Sa virtuelnim baferom postoje dva načina interakcije. Prvi način je pretraživanje u kom se može kretati unaokolo kroz tekst koristeći virtualni kursor, a drugi način je fokus u kom se može direktno intereagovati sa kontrolom (izmjena tekstualnog polja, padajućeg okvira, radio dugmeta). Trenutno NVDA koristi virtualni bafer za čitanje dokumenata u Mozilla Firefox-u, Microsoft Internet Explorer-u i Adobe Reader-u.

U 2010. god. Specijalna biblioteka za slijepa i slabovida lica Republike Srpske je obavila lokalizaciju interfejsa programa i propratne pomoćne dokumentacije.

Govorni Linux za slijepe

Јoš jedan projekat koji zaslužuje da bude spomenut, jer je vezan za naše prostore i srodne jezike je „Govorni Linux za slijepe“, programski paket namijenjen slijepim i slabovidim osobama. Radi se o Mandrake operativnom sistemu i nekoliko aplikacija: pretraživač datoteka, audio plejer s podrškom za mp3 i WAV, tekst procesor, kalkulator i Internet pretraživač. Paket dolazi na jednom CD-u, sa kojeg se pokreće, tako da ne postoji nikakvo zauzeće računara na kojem se radi. To omogućava slijepima i slabovidima da rade na bilo kojem računaru. Isto tako, pošto projekat spada u otvoreni kod, potpuno je besplatan za korisnike. Osnova GLS-a je zvučni interfejs, odnosno, korisnik informacije s računara prima zvučnim putem. Za sintezu govora GLS koristi vlastiti zvučni sintetizator koji je posebno razvijen za hrvatski jezik, a osnova je baza difona razvijena na Odsjeku za fonetiku Filozofskog fakulteta u Zagrebu. Projekt se razvija od 2001. godine, a u njemu su učestvovali uglavnom vojni regruti na civilnom odsluženju vojnog roka, te volonteri i vanjski saradnici. GLS je dio projekta IPSIS - Internet pomoć slijepim Internet surferima.

Testiranje veb strane pomoću čitača ekrana

Za testiranje pristupačnosti veb strane pomoću čitača ekrana potrebno je poznavati osnovne komande i koncepte korištenja čitača ekrana. Čitači ekrana se za samo čitanje koriste isključivo pomoću komandi na tastaturi, tj. kombinovanjem tastera. Najčešće je to kombinacija kontrolnog tastera, obično INSERT i nekog drugog. Ovdje će biti naveden jedan kratak scenario testiranja pristupačnosti stranice sa nekim osnovnim potrebnim komandama.

Ako je data situacija da je dizajner tek završio sa pravljenjem nove veb strane i želi pomoću čitača ekrana testirati pristupačnost te strane, tj. provjeriti da li je osobi koja će tu stranu koristiti pomoću čitača ekrana i tastature dostupan svaki element koji je dostupan i videćim korisnicima i da li je sadržaj i dalje logičan i shvatljiv kada se čita sekvencijalno, scenario i komande koje bi on koristio bi mogle biti slijedeće.

U polje za adrese veb čitača je unesena adresa veb strane koja se testira. Veb čitač počinje sa procesom učitavanja strane, za vrijeme učitavanja čitač ekrana će izgovoriti postotak učitavanja strane. Po završetku učitavanja strane u veb čitaču, čitač ekrana će izgovoriti neke inicijalne podatke o strani kao što su broj naslova (heading), okvira (frame) i linkova na strani.

Slijedeći korak je da se pomoću komandi za čitanje i kretanje prođe kroz čitav sadržaj strane od vrha do dna i na taj način prateći pogledom sadržaj u veb čitaču i slušajući ono što čitač ekrana pročita provjeri da li je sav sadržaj veb strane dostupan čitaču ekrana. Stranica u veb čitaču bi trebalo da se pomjera na dole u skladu sa sadržajem koji čitač ekrana pročita. Slijedi spisak osnovnih komandi prečica.

Kratak pregled komandi prečica

Uputstvo za korištenje čitača ekrana veba namijenjeno je dizajnerima ili programerima koji će ih koristiti da bi testirali pristupačnost veb stranica.

NAPOMENA: Većina funkcija čitača ekrana je dostupna putem numeričke tastature, zato je za vrijeme rada čitača ekrana automatski ugašena opcija Num Lock, tj. tasteri nemaju funkciju brojeva.  Taster INSERT u lijevom donjem uglu se koristi u kombinaciji sa ostalim tasterima da bi se kontrolisalo šta će čitač ekrana izgovoriti.

Čitanje

Prva i osnovna funkcija čitača ekrana je da čita sadržaj strane. Postoje na desetine skraćenica na tastaturi pomoću kojih se može pročitati sadržaj po redovima, rečenicama, riječima, slovu itd. Slijedi lista osnovnih skraćenica za čitanje. Sa ovim skraćenicama se može proći kroz većinu sadržaja:

INSERT + Strelica dole	Pročitaj sve
Page Up/Page Down	Povećava/Smanjuje brzinu govora dok se koristi „Pročitaj sve“
Ctrl	Zaustavi čitanje
INSERT + Strelica gore	Trenutni red
INSERT + Strelica lijevo/desno	Prethodna/Slijedeća riječ
Strelica gore	Prethodni red
Strelica dole	Slijedeći red
Strelica lijevo/desno	Prethodno/Slijedeće slovo, dok se koristi „Pročitaj sve“  unazad/unaprijed
F5/Shift + F5	Osvježavanje stranice/Potpuno osvježavanje stranice. Dobar način da se krene iz početka pri zbunjivanju.

Videći korisnici vizuelno upravljaju kroz veb sadržaj na više načina. Letimično prelazeći pogledom preko strane traže naslove, liste, tabele itd. Većina ovih metoda je dostupna korisnicima čitača ekrana ako je sajt ispravno struktuiran i dobro organizovan. Da bi se upravljalo naprijed i nazad  kroz linkove i elemente formi na strani, koristi se Tab i Shift + Tab. Ostale skraćenice su navedene ispod.

Tasteri za brzi pristup

Slijedeći tasteri pomažu pri navigaciji kroz uobičajene elemente strane. Funkcionišu tako što se svakim novim pritiskom određenog tastera čitač  pozicionira na slijedeći element tog tipa na strani.

H	Naslovi
F	Forme
T	Tabele
N	Tekst koji nije link (tj. skoči na prvu stvar koja nije link - korisno za preskakanje sadržaja)
B	Dugmad. Dugme za pretragu je obično prvo dugme na strani. Može se doći do dugmeta za pretragu pomoću B a poslije toga pomoću Shift + Tab  vratiti do prethodnog elementa - tekst polja za pretraživanje
L	Liste
I	Stavke liste
1-6	Naslovi nivo 1-6
Shift + Taster za brzi pristup	Kretanje kroz elemente u obrnutom redoslijedu (funkcioniše sa većinom tastera za brzi pristup)
Ctrl + Insert + Taster za brzi pristup	Za većinu tastera za brzi pristup ova prečica prikazuje listu elemenata sa kojima je taj taster povezan (npr. Ctrl + Insert + T za listu tabela)

Ostale skraćenice za upravljanje

Insert + F1	Pomoć sa trenutnim elementom
Insert + F2	Lista formi
Insert + F6	Lista naslova
Insert + F7	Lista linkova
Ctrl + Home	Vrh stranice
Ctrl + End	Dno stranice (Kada je čitač pozicioniran na vrhu strane, Shift + Tab će fokus prenijeti na posljednji link ili posljednji element forme na strani)
Alt + D ili F6	Polje za adresu veb čitača

Svaka slika na strani treba imati alternativni tekst. Ako ga neka slika nema, čitač ekrana će je obično ignorisati, ali ponašanje može biti različito zavisno od njene funkcije

Da se preskoči tabela, koristi se taster T. Za kretanje kroz ćelije koristi se kombinacija Ctrl + Alt sa strelicom gore/dole/lijevo/desno. Ctrl + Alt + 5 (na numeričkoj tastaturi) će pročitati zaglavlja reda i kolone za trenutnu ćeliju.

Brzi tasteri

U veb čitaču brzi tasteri (Access key) omogućavaju korisniku da direktno „skoči“ na određen dio veb strane pomoću tastature. Oni su uvedeni 1999. i ubrzo su dobili univerzalnu podršku među svim veb čitačima.

Brzi tasteri se navode u HTML-u pomoću accesskey atributa. Vrijednost atributa je taster koji korisnik treba pritisnuti, u kombinaciji sa jednim tasterom ili više njih u zavisnosti od veb čitača koji je u pitanju, da bi aktivirao ili prebacio fokus na element sa tim atributom. Slijedi kratka lista tastera koje treba pritisnuti u kombinaciji sa brzim tasterom za popularne veb čitače pod Windows operativnim sistemom:

Internet Explorer	Alt
Firefox 2, 3, 4 i 5	Alt + Shift
Opera	Shift+Esc
Google Chrome 3 i više	Alt

U narednom primjeru poslije pritiska na taster “h” u kombinaciji sa odgovarajućim tasterima, veb čitač će otići na stranu koju link pokazuje tj. na početnu stranu.

<a href="/index.html" accesskey="h">Početna</a>

Nakon nekog vremena pokazalo se da je većina kombinacija koje brzi tasteri koriste u konfliktu sa tastaturnim komandama čitača ekrana i da stvaraju probleme njihovim korisnicima. Tome je uslijedila preporuka da se brzi tasteri uopšte ne koriste.

U HTML 2, revidiranoj verziji, HTML radna grupa W3C konzorcijuma je proglasila upotrebu accesskey atributa zastarjelom u korist HTML Role Access Modula. Ovaj modul se zasniva na korištenju access elementa i role atributa. Nakon HTML 2 zvanični standard HTML 5 koji je uspostavljen avgusta 2009.  ponovo dopušta korištenje accesskey atributa bez razlike u odnosu na verziju HTML 4.01. 

Zaključak ovog konfuznog toka odluka je taj da su osobe sa invaliditetom stekle naviku na koji način koriste asistativne tehnologije. Ovdje je konkretno riječ o slijepim i slabovidim osobama i načinu na koji one koriste veb sajtove pomoću čitača ekrana. One za to koriste strategije brze navigacije. Veb sadržaj ne bi trebalo da dolazi u konflikt sa njihovim navikama i nameće način na koji ga koriste, već da obezbijedi standardne mogućnosti na koje bi se one mogle osloniti.

Principi pristupačnog dizajna

Lista osnovnih principa

U narednoj listi biće navedeni neki od ključnih principa pristupačnog dizajna. Većina principa pristupačnosti se može implementirati veoma lako i neće uticati na opšti izgled veb sajta.

• Obezbijediti odgovarajući alternativni tekst

  Alternativni tekst pruža tekstualnu alternativu netekstualnom sadržaju veb stranica. On je pogotovo koristan ljudima koji su slijepi i oslanjaju se na čitače ekrana da im čitaju sadržaj veb sajta.

• Obezbijediti zaglavlja za tabele podataka

  Tabele na vebu ne bi trebalo koristiti za raspoređivanje strukture stranice već organizovanje prikaza podataka. Tabele koje se koriste da organizuju tabelarne podatke bi trebalo da imaju odgovarajuća zaglavlja kolona i redova (<th> elemente). Ćelije podataka bi trebalo da budu povezane sa odgovarajućim zaglavljima i na taj način bi olakšavale shvatanje i kretanje tabelom za korisnike koji koriste čitače ekrana.

• Obezbijediti da korisnici mogu ispuniti i poslati sve forme

  Obezbijediti da svaki element forme (tekstualno polje, polje za potvrdu, padajuća lista itd.) ima labelu i da je ta labela povezana sa korektnim elementom koristeći <label> tag. Takođe obezbijediti da korisnici mogu ispuniti i poslati formu nezavisno od ulazno-izlaznog  uređaja koji koriste i ispraviti bilo koju vrstu greške, kao što je neispunjavanje svih potrebnih polja.

• Obezbijediti da svi linkovi imaju smisla i van konteksta

  Svaki link bi trebalo da ima smisla ako se tekst linka čita zasebno. Korisnici čitača ekrana će možda odabrati opciju da čitaju samo listu  linkove sa veb strane. Određene fraze kao što su „kliknite ovdje“ i „više“ se moraju izbjegavati.

• Obezbijediti pristupačnost sadržaja koji se nudi na sajtu i nije HTML, uključujući PDF datoteke, Microsoft Word dokumente, PowerPoint prezentacije i Adobe Flash sadržaj

  Dodatno svim ostalim principima nabrojanim ovdje, PDF dokumenti i ostali sadržaj koji nije HTML moraju biti što pristupačniji. Ako se ne mogu učiniti pristupačnijim, treba razmotriti mogućnost korištenja HTML-a umjesto njih  ili barem obezbijediti pristupačnu alternativu. PDF dokumenti bi takođe trebalo da sadrže seriju tagova koji bi ih učinili još pristupačnijim. Tagovan PDF nosi informaciju o strukturi dokumenta i lakši je za navigaciju.

• Obezbijediti korisnicima mogućnost da preskoče elemente na stranici koji se ponavljaju

  Trebalo bi obezbijediti metodu koja omogućava korisnicima da preskoče navigaciju ili druge elemente koji se ponavljaju na svakoj strani. Ovo se obično ostvaruje tako što se dodaju linkovi „Skoči na sadržaj“, „Skoči na glavni sadržaj“ ili „Preskoči navigaciju“ na vrhu svake strane koji skaču na glavni sadržaj strane.

• Ne treba se oslanjati samo na boju da prenese značenje

  Korištenje boje može naglasiti bitnost neke informacije, ali ne treba koristiti samo boju da bi se prenijela informacija. Ta informacija možda neće biti dostupna osobi koja je daltonista ili osobi koja koristi čitač ekrana.

• Osigurati da je sadržaj jasno pisan, logično organizovan i lak za čitanje

  Postoje mnogi načini da se sadržaj učini lakšim za razumijevanje. Treba pisati jasno, koristiti pregledne fontove, koristiti zaglavlja i liste na odgovarajući način da bi se napravila logična struktura stranice.

• Učiniti JavaScript pristupačnim

  Obezbijediti da JavaScript rukovaoci događajima (event handlers) budu nezavisni od uređaja (npr. ne zahtijevaju korištenje miša) i obezbijediti da se veb strana ne oslanja isključivo na JavaSript da bi bila funkcionalna.

• Dizajnirati prema standardima

  Strane koje zadovoljavaju HTML standard i koje su pristupačne su više robusne i pružaju bolju optimizaciju za pretraživače veba. Kaskadno definisanje stilova (CSS) dozvoljava da se sadržaj odvoji od prezentacije. Ovo pruža veću fleksibilnost i pristupačnost sadržaja.

Ova lista ne prezentuje sva pitanja pristupačnosti, ali se dotiče osnovnih principa koji osiguravaju veću pristupačnost veb sadržaja svima. U daljem tekstu ovog poglavlja neki od principa će biti detaljnije opisani.

Obezbijediti odgovarajući alternativni tekst

Dodavanje alternativnog teksta slikama je prvi princip veb pristupačnosti. Alternativni tekst pruža tekstualnu alternativu netekstualnom sadržaju veb strana. Principi koji će ovdje biti navedeni se mogu primijeniti na medije, aplete ili druge netekstualne veb sadržaje.

Alternativni tekst ima nekoliko funkcija:

• Čitaju ga čitači ekrana umjesto slika omogućavajući da sadržaj i funkcija slike budu pristupačni osobama sa vizuelnim invali-ditetom.
• Prikazuje se umjesto slike u veb čitačima koji ne podržavaju prikazivanje slika ili kada korisnici odaberu da ne prikazuju slike.
• Pruža semantičko značenje i opis slikama koje mogu čitati pretra-živači veba.

Ključni princip je da računari i čitači ekrana ne mogu analizirati sliku i odrediti šta slika predstavlja. Programer mora obezbijediti korisniku tekst koji predstavlja sadržaj i funkciju slike unutar veb sadržaja.

Alternativni tekst se može prezentovati na dva načina:

• unutar alt atributa img elementa;
• unutar konteksta ili okruženja same slike.

Ovo znači da alt atribut nije jedini mehanizam za pružanje sadržaja i funkcije slike. Ova informacija se može obezbijediti u tekstu koji prethodi slici ili u nekim slučajevima linku ili longdesc atributu koji referencira otvorenu stranu koja sadrži duže objašnjenje. Svaka slika mora imati alt atribut. Ovo je zahtjev HTML standarda. Slike bez alt atributa su nepristupačne.

<img src="/logo.jpg" alt="Specijalna biblioteka za slijepa i slabovida lica Republike Srpske" />

Obezbijediti zaglavlja za tabele podataka

Tabele se na vebu koriste za dvije osnovne namjene: kao tabele podataka i kao tabele za raspored strukture stranice. Originalna namjena HTML tabela je bila prezentacija podataka. Termin „tabela podataka“ se koristi onda kada su prisutna zaglavlja redova, zaglavlja kolona ili oboje.

Da bi se osigurala pristupačnost tabelarne informacije, tabele treba prezentovati na način koji će očuvati veze između informacija čak i kada ih korisnici ne mogu vidjeti. Informacija se smatra tabelarnom kada postoje logične veze između podataka (teksta, brojeva, slika ili druge vrste) u dvije dimenzije (vertikalnoj i horizontalnoj). Ove relacije su predstavljene u kolonama i redovima, i kolone i redovi moraju biti prepoznatljivi da bi se logičke veze sačuvale.

Koristeći table element sa elementima djecom tr, th  i td ove veze se čuvaju.

Slijedi primjer jednostavne tabele sa sedmičnim rasporedom sa kolonama i zaglavljima. Prvi red predstavlja dane u sedmici. Vremenski intervali su navedeni u prvoj koloni. Ove ćelije su označene sa th elementom što identifikuje dane sedmice kao zaglavlja kolona i vremenske intervale kao zaglavlja redova.

Čitači ekrana izgovaraju informacije o zaglavljima dok se korisnik kreće kroz tabelu. Tako ako se korisnik čitača ekrana pomjeri lijevo duž reda, čuće dan sedmice (zaglavlje kolone) i poslije toga podatak u toj ćeliji, to jest sastanak (ako je unijet u tabelu). Ako se kreće gore ili dole duž jedne kolone, čuće vremenske intervale tj. zaglavlje redova i poslije toga sastanak. Na ovaj način korisnik za svaku ćeliju zna kom zaglavlju pripada i znaće tačno gdje se u tabeli nalazi.

<table>
  <tr>     <td> </td>
    <th>Ponedjeljak</th>
    <th>Utorak</th>
    <th>Srijeda</th>
    <th>Četvrtak</th>
    <th>Petak</th>
  </tr>
  <tr>
    <th>8:00-9:00</th>
    <td>Sastanak sa Marijom</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00-10:00</th>
    <td> </td>
    <td> </td>
    <td>Pregled kod doktora</td>
    <td>Ponovo Marija</td>
    <td>Polazak na more</td>
  </tr>
</table>

Obezbijediti da korisnici mogu ispuniti i poslati sve forme

Forme se koriste za sve vrste interaktivnih namjena na vebu. Pomoću forme korisnik može da izabere i kupi robu, ispuni anketu, da se registruje na kurs, da pretražuje informacije na vebu i dug niz drugih akcija.

Mnogi korisnici mogu jedino pomoću tastature koristiti stranu i kretati se po njoj. Mora se obezbijediti da se forme na strani mogu ispuniti koristeći samo tastaturu. Malo je stvari koje mogu učiniti formu potpuno nepristupačnom sa tastaturom. Najčešći razlog nepristupačnosti je korištenje JavaScripta. Treba biti oprezan u korištenju JavaScripta pri manipulaciji podacima forme, postavljanju fokusa, promjeni elemenata forme ili slanju formi. Svaka od ovih stavki može učiniti formu teškom ili nemogućom za ispunjavanje ili shvatanje koristeći samo tastaturu.

Јedna od primjena formi koja je postala česta na vebu je meni sa padajućim listama za navigaciju. Ovaj način dozvoljava da se dosta stavki za navigaciju smjesti na mali prostor na stranici. Korisnici mogu koristiti padajuću listu da izaberu stavku koja je u vezi sa lokacijom na vebu.  Ove forme same po sebi ne izazivaju probleme u pristupačnosti, ali ako se JavaScript koristi da se pošalju podaci forme nakon što korisnik izabere stavku padajućeg menija, to će se odraziti negativno na pristupačnost. Ove forme često koriste JavaScript onChange događaj, što znači da kada je forma izmijenjena, veb čitaču se naređuje da automatski ode na određenu veb stranu. Ovaj onChange događaj se okida kada korisnik oslobodi dugme miša nakon što je izabrao stavku u padajućem meniju. Ako ipak korisnik ne koristi miša, moraće koristiti tastere strelice na tastaturi. Svaki put kada se korisnik pomjeri gore ili dole kroz stavke menija, JavaScript detektuje onChange događaj što odvodi veb čitač na novu stranu.

BITNO: Ne koristiti JavaScript tako da automatski mijenja  lokaciju veb čitača poslije nekog izvršenog događaja. Umjesto toga treba dozvoliti korisniku da izabere stavku menija i poslije toga da izabere dugme koje slijedi da bi otišao na željenu stranu. Ovo generalno vrijedi za sve forme. Korisnik treba imati kontrolu nad procesom slanja forme. Kada unese potrebne podatke, slanje forme se potvrđuje pritiskom na naznačeno dugme.

Forme bi uvijek trebalo organizovati u logičnom redoslijedu. Treba postaviti labelu za element forme pored njega samog.

<label for="ime">Ime:</label>
<input type="text" name="ime" id="ime" />>

Potrebno je obezbijediti jasne instrukcije o tome kakve informacije se zahtijevaju za ispunjavanje formi. Ako je neki element forme neophodan, to je potrebno naglasiti. Treba obezbijediti da redoslijed u kom se pristupa elementima forme bude logičan i lak (tako da se pomoću tab tastera može kretati kroz polja forme). Ovo je nekada problematično jer se za kontrolu rasporeda stavki forme koriste tabele. Treba osigurati da i u linearizovanom obliku tabele forma ima smisla. Redoslijed tabele se može provjeriti pomoću veb čitača ili alata za provjeru pristupačnosti.

Obezbijediti da svi linkovi imaju smisla i van konteksta

Linkovi su jedan od najosnovnijih elemenata HTML-a, zbog toga je pisanje linkova na pristupačan način jedan od osnovnih i najbitnijih aspekata veb pristupačnosti.

Korisnik mora biti u mogućnosti da se kreće i selektuje bilo koji link koristeći samu tastaturu. U većini veb čitača tab taster dozvoljava korisnicima da skaču sa linka na link, a taster Enter da selektuju taj link. Ako je do linka jedino moguće doći pomoću miša, onda je taj link beskoristan ljudima koji ne mogu koristiti miša. Kako je uopšte moguće kreirati link koji je nedostupan pomoću tastature? U većini uobičajenih slučajeva to je moguće koristeći JavaScript rukovaoce događajima koji ne dozvoljavaju pristup tastaturi.

Јedna od najozbiljnijih prepreka je kreiranje linkova koji ne vode nigdje. Programeri ponekad koriste JavaScript da kreiraju dinamičke menije koji padaju kada korisnik pređe mišem preko određenih linkova. U nekim slučajevima sam link ne vodi nigdje i jedina mu je svrha da otkrije druge linkove u padajućem meniju koji imaju stvarne destinacije. Linkovi  kao što je ovaj obično imaju znak povisilice kao znak destinacije. Klikanje na ovaj link ne vodi nigdje i ne izvršava ništa.

<a href="#" onmouseover="dropdownmenu()">Produkti</a>

Korisnici koji mogu koristiti miša moći će da kliknu na linkove sa padajućeg menija, ali korisnici tastature ne mogu da dođu do padajućeg menija tako da je link za njih potpuno beskoristan, a ostali linkovi potpuno nepristupačni. Јedan način da se ovo riješi jeste da se napusti rješenje padajućeg menija i da se umjesto toga koriste standardni linkovi. Drugo rješenje je da se navede stvarna destinacija linka (npr. href=”proizvodi.html”) koji bi izlistao iste linkove koji su dostupni i u padajućem meniju.

Qudi koji koriste čitače ekrana često koriste tastaturu radije nego miša tako da je pristupačnost veba pomoću tastature bitan prvi korak, ali iza toga važno je znati kako čitači ekrana pristupaju linkovima.

Čitači ekrana obavještavaju korisnika da je dio teksta (ili grafički element) link. JAWS npr. kaže „link“ prije svakog linka. Tako će se npr. link čiji je tekst „proizvodi“ u JAWS-u interpretirati kao „link proizvodi“. Zaključak ovoga je da sam tekst linka ne treba da navodi da je tu link, jer će korisnici čitača već to znati.

Korisnici čitača ekrana se obično kreću od linka do linka preskačući tekst između linkova. Јedan način na koji ovo rade je kretanje od linka do linka pomoću tastera tab, ali i čitači ekrana nude opciju da prikažu listu svih linkova na stranici. Zaključak ovog je da bi linkovi trebalo da imaju smisla i van konteksta. Fraze kao što su „klikni ovdje“, „više“, „klikni za detalje“ itd. potpuno su beznačajni kada se čitaju van konteksta, opet suviše vremena bi bilo potrošeno uzalud kada bi se svaki put slušao čitav tekst konteksta u kom se link nalazi. Drugi zaključak je da ako se dio teksta ponavlja u više linkova, taj dio teksta ne treba staviti na prvo mjesto, već na prvo mjesto treba doći dio teksta koji te linkove razlikuje.

Јedan od problema ovog pristupa da tekst sadrži dovoljno informacija da bi se mogao koristiti van konteksta je taj što višak teksta može narušiti izgled strane za korisnike koji nisu slijepi. Moguće rješenje ovog problema je da se dio teksta koji treba da nosi bitne informacije, istovremeno za slijepe i za lica koja normalno vide, ostavi kao vidljiv, a ostatak teksta pomakne van ekrana pomoću CSS definicija stila tako da ostanu dostupni čitačima ekrana, ali da ne narušavaju izgled korisnicima koji vide.

.text-for-blind {
    font-size:1px;
    position:relative;
    top:-10000px;
}

<a href="/xmlui/browse?type=title" class="">Naslovi<span class="text-for-blind">, Pregledaj E-Biblioteku po naslovima</span></a>

Razlog zašto je za position korišteno relative umjesto logičnog absolute je taj što čitači ekrana pogrešno tumače span element kao još jedan link. Ako se dio teksta koji treba sakriti ne nalazi unutar linka, slobodno se može koristiti absolute.

Јoš jedna korisna mogućnost je sakrivanje dijela teksta i od čitača ekrana i od korisnika koji vide, što se može uraditi kao:

style="display:none"

Vidljivost nekog dijela stranice se može dinamički mijenjati pomoću JavaScripta, npr. omogućavanjem opcije prikazivanja više ili manje detalja o nekoj stavci i na taj način se stranica sa mnogo detalja može učiniti jednostavnijom za pregled slijepim licima.

Obezbijediti pristupačnost sadržaja koji se nudi na sajtu i nije HTML

Ostali sadržaj koji se pojavljuje na veb sajtu, a nije HTML takođe treba učiniti što pristupačnijim.

Korisnici koji veb koriste pomoću čitača ekrana najčešći problem imaju sa Flash sadržajem. On po svojoj prirodi ne odgovara načinu na koji funkcionišu čitači ekrana. Flash je multimedijalni format koji se zasniva na promjenama u vremenu dok je HTML statičan i tekstualan i to omogućava čitačima ekrana da prepoznaju sadržaj i čitaju ga linearno. Flash se može učiniti pristupačnim, on za to pruža više mogućnosti nego  HTML. On dopušta veći nivo interakcije pomoću tastature, sadržaj se može prezentovati u audio formatu tako da ne postoji potreba za čitačima ekrana, saradnja sa API-jima pristupačnosti itd. Ali većina Flash sadržaja se ne pravi na način da bude pristupačan, zato je najbolje rješenje pružiti tekstualnu alternativu svim informacijama koje se kroz njega žele prenijeti. Slijepe osobe obično čitače ekrana podese tako da zanemare Flash sadržaj.

Već je navedeno da bi PDF dokumenti trebali sadržati tagove. Ovi tagovi trebaju biti vezani za naslove sekcija, tabele, liste itd.  u dokumentima slično kao tagovi u HTML dokumentima i na taj način održati strukturu dokumenta da bi se korisnici lakše kretali kroz njih. Takođe  PDF dokumenti se ne bi trebali sastojati od skeniranih dokumenata već bi trebali biti tekstualni, tj. konvertovani u PDF iz tekstualnih dokumenata. Razlog ovome je što čitači ekrana ne mogu čitati slike, a skenirani dokumenti su upravo to.  Ako se PDF dokumenti generišu iz Microsoft Word dokumenata, postoji mogućnost pri konverziji da se tagovi formiraju automatski ako je Word dokument korektno formatiran (obilježeni naslovi, liste itd). Takođe Word dokumenti bi i sami trebali biti korektno formatirani, ako su dio sadržaja koji se nudi na veb sajtu.

Obezbijediti korisnicima da preskoče elemente na stranici koji se ponavljaju

Јedan od problema sa mnogim šablonima za dizajniranje veb strana je da glavni sadržaj nije uvijek stavka na strani. Osobe koje koriste čitače ekrana su često primorane da slušaju duge liste navigacionih linkova, podliste linkova, ikone kompanije, elemente za pretraživanje sajta i druge elemente prije nego što dođu do glavnog sadržaja. U stvari korisnici tastatura su primorani da prođu pomoću tastera Tab kroz sve linkove da bi došli do glavnog sadržaja. U nekim slučajevima broj linkova može doći do preko 100. Јedno rješenje ovog problema je da se izmijeni dizajn stranice i da se glavni sadržaj smjesti na početak stranice. Treba napomenuti da je da bi se ovo postiglo, potrebna određen nivo poznavanju CSS-a da bi se elementi navigacije i zaglavlja vizuelno pozicionirali na vrh strane. Primjer ovakvog rasporeda sajta se može vidjeti na stranici Specijalne biblioteke za slijepa i slabovida lica Republike Srpske.

Drugi, jednostavniji način na koji se ovaj problem može prevazići je postavljanje linkova za „preskakanje navigacije“. Potrebno je obezbijediti link na vrhu strane koji skače do sidro linka (anchor) u donjem dijelu strane na početku glavnog sadržaja. Iako vrlo jednostavna, i ova tehnika se može obaviti na više načina. Neki od njih su slijedeći:

1. Postaviti vidljive linkove na vrhu strane
2. Postaviti vidljive linkove na drugim dijelovima strane
3. Praveći linkove nevidljivima
4. Praveći linkove nevidljivima dok ne dobiju fokus tastature.

Najjednostavniji način je napraviti vidljivi link na vrhu strane:

<body>
<a href="#glavnisadrzaj">Preskoči navigaciju</a>
...
<h1><a name="glavnisadrzaj" id="glavnisadrzaj"></a>Zaglavlje</h1>
<p>Ovo je prvi paragraf</p>

Kao što je navedeno, linkovi se mogu napraviti i nevidljivima. Napomena: Za ovo je potrebno određeno znanje  CSS-a.

#skip a, #skip a:hover, #skip a:visited
{

position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#skip a:active, #skip a:focus
{
position:static;
width:auto;
height:auto;
}

<div id="skip">
<a href="#content">Skoči do glavnog sadržaja</a>
</div>

Position:absolute će element izmjestiti iz njegovog prirodnog mjesta u strukturi stranice i pomaći ga na određenu poziciju.

Daltonizam

Proces vida

Osjećaj svjetlosti kod ljudi počinje sa fotoreceptorima smještenim u mrežnjači. Postoje dva tipa receptora: čepići, ili konusi i štapići. Vizuelna informacija od mrežnjače prenosi se preko optičkih nervnih vlakana do moždanih polja i naziva se vizuelna kora, gdje se vizuelni proces i razumijevanje završava.

Štapići koji su brojniji od čepića rade pod slabim ambijentalnim svjetlom i izvlače jedino luminentnu informaciju tj. osjetljivi su samo na promjene u sjajnosti u srednjem dijelu spektra svjetlosti. Ako bi čovjek imao samo štapiće, vidio bi crno-bijelo.

Čepići funkcionišu pod sjajnim svjetlom i mogu da opažaju ton boje. Postoje tri vrste čepića koje imaju preklapajuće prelazne opsege u vidljivom spektru:

• L – čepići su osjetljivi primarno na crveni opseg vidljivog spektra
• M – čepići su osjetljivi na zeleni opseg
• S – čepići su osjetljivi na plavi opseg

Dok su crvena, zelena i plava raspoređene prilično ravnomjerno preko vidljivog spektra, određene osjetljivosti L, M i S čepića nisu. Ovo može djelovati malo zbunjujuće pogotovo zato što L-čepići nisu čak ni blizu centrirani u crvenoj oblasti spektra. Na sreću osjetljivost čepića je samo jedan dio načina na koji mozak dekodira informaciju boje. Dodatna procesiranja uzimaju ove osjetljivosti u računicu.

Problem

Problem sa viđenjem boje nastaje kada svi čepići jednog ili više tipova funkcionišu ispod normalnih nivoa ili ne funkcionišu uopšte. Pošto su geni koji utiču na viđenje boje dio X hromozoma, nemogućnost viđenja boja zahvata muškarce znatno više nego žene. Oko 8 procenata svih muškaraca imaju neki defekt sa viđenjem boja, dok samo 0.5 procenata svih žena ima vid sa poremećenom mogućnosti viđenja boja.

Slijede nazivi određenih formi poremećaja viđenja boja, takođe su dati primjeri točkova boja i paleta za svaki od njih. Oni predočavaju na koji način boju vide ljudi sa poremećajem. Može biti zbunjujuće to što se ne govori direktno o nedostatku „crvene“, „zelene“ i „plave“. Dva faktora su u igri ovdje. Prvi je taj, kao što dijagram iznad ilustruje, da stvarna osjetljivost čepića na boje nije direktno centrirana unutar njihovih određenih oblasti spektra. Drugi faktor uključuje dalje procesiranje u mozgu, koje u stvari  povezuje boju i sliku sa odgovorima štapića/čepića tako da će rezultantne boje koje vidi korisnik sa defektom viđenja boja biti pomjerene u pokušaju kompenzacije.

Protanopija utiče na oko 1% muške populacije.

Pronotopija je nedostatak osjećaja crvene boje. Ona je rezultat gubitka funkcije L-čepića, koji omogućavaju osjećaj crvenog opsega vidljivog spektra. Pošto je crvena boja na kraju vidljivog spektra postoji samo djelimično preklapanje sa dva druga tipa čepića, tako da ljudi sa protanopiom imaju izražen gubitak osjetljivosti na svijetlo na crvenom kraju spektra.

Protanomalija utiče na oko 1 procenat muške populacije.

Protanomalija je slabost osjetljivosti na crvenu boju i nastaje kada L-čepići funkcionišu, ali ne na nivou na kome bi trebalo.

Deuteranopija utiče na oko 1.1%  muške populacije.

Deuteranopija je nedostatak osjećaja zelene boje. Ona je rezultat gubitka funkcije M- čepića, koji omogućavaju osjetljivost na crveni opseg vidljivog spektra. Zbog lokacije zelene boje u spektru, stvarni osjećaj se preklapa između M-čepića (zelenih) i L-čepića (crvenih) i zbog djelimičnog prekla-panja sa S-čepićima (plava). Qudi sa deutra-nopijom imaju prilično normalan nivo osjetljivosti duž spektra, ipak oni mogu doživjeti da zamjene individulane boje.

Deuteranomalija utiče na oko 4.9 proce-nata muške populacije.

Deuteranomalija je slabost osjetljivosti na zelenu boju i nastaje kada M-čepići funkcionišu, ali ne na nivou na kome bi trebalo.

Negativan način korištenja boja

Gledajući palete boja u prethodnom poglavlju može se shvatiti zašto ljudi koji boluju od poremećaja prepoznavanja boja neće vidjeti neke od boja koje su odabrane za veb sajt.

Na primjer, ako se korisnik suočava sa slijedećom situacijom:

Kliknite na zeleno dugme da nastavite,
žuto dugme ako vam je potrebna pomoć,
ili crveno dugme ako želite da odustanete.

Za osobu sa zdravim vidom izbor bi se činio lakim, ali osoba sa defektom bi mogla vidjeti slijedeće:

ili ili

Ovaj konkretan primjer se rijetko nalazi na veb sajtovima, ali slučajevi ovog tipa se dešavaju, ne samo na veb stranama već i u stvarnom životu.

Јednostavnije je definisati funkciju dugmadi labelama kao što su „Dalje“, „Pomoć“ ili „Izlaz“, čak zauzima i manje mjesta na stranici.

Rješenje problema je izbjegavanje korištenja boja kao jedinih pokazatelja onoga što se može uraditi, ili kao jedini način za prenošenje informacije. Umjesto toga, boje se mogu koristiti samo kao dodatna naznaka korisnicima.

Kontrast i boja

Kao što je poznato svima koji se bave dizajniranjem veb sajtova, jedan od bitnih aspekata izbora boja je jak kontrast između boje pozadine i boje onoga što je u prvom planu. Kontrast omogućava lakše čitanje teksta. Ovo je još bitnije kada se uzmu u obzir korisnici sa poremećajem prepoznavanja boja.

Ako se pogledaju boje na već navedenim točkovima, i onda pogleda na točak sa normalnim bojama, može se primijetiti da će raznolikost boja za korisnike sa smanjenim osjećajem biti znatno manja u odnosu na osobu sa mogućnošću da vidi sve boje. Mnoge od susjednih boja na točku će se činiti praktično identičnim. Primjer kako ovo može uticati na dizajn sajta je opisan u nastavku teksta:

Iako ovo nije prigodan izbor boja, takav ili sličan može se vidjeti na dosta sajtova. Iako se ovaj izbor boja može učiniti suviše drečavim korisniku sa normalnom mogućnošću uočavanja boja, on će ipak moći da pročita poruku koja je prikazana, ali šta je sa osobom koja boluje od defekta osjetljivosti na boje?

Postoji mišljenje da je dovoljan način provjere da li će izbor boja dobro funkcionisati za korisnike sa defektom osjetljivost na boje redukovanje u paletu sa sivim tonovima, tj. nijansama sive. To nije tačno. Na slijedećem primjeru će biti pokazano kako će slika izgledati redukovanjem pomoću palete grej skale:

Naprijed izneseno navodi na zaključak da se ova šema boja može smatrati sigurnom za korisnike sa defektom. Ali, da li je to zaista tako? Na slijedećim primjerima će biti primijenjena paleta koja preciznije aproksimira šta korisnici sa defektom mogu vidjeti:

Protanopija:

Deuteranopija:

Tritanopija:

Čini se da osobe sa tritanopijom u ovom slučaju imaju sreće jer boje koje one vide su malo ugodnije za gledanje nego one za osobe sa normalnim vidom. Ali zato se može vidjeti da slika koja je izgledala zadovoljavajuće sa paletom sivih tonova očigledno nije sigurna kombinacija za mnoge korisnike sa defektom osjetljivosti na boje.

Dizajneri koji praktikuju pravilne izbore boja nikada ne bi odabrali ovu konkretnu šemu boja. Umjesto toga, oni bi izabrali boje sa većim kontrastom da učine informaciju ugodnijom oku. Ako bismo, iz nekog razloga, morali upotrijebiti ovu zeleno-žutu kombinaciju, šta bi dizajner mogao da uradi? Čineći jednu boju tamnijom, a drugu svjetlijom povećaće kontrast. Na slijedećem primjeru je prikazana slika sa istim tonovima boja, dok su svjetlina i zasićenje izmijenjeni da bi se obezbijedio bolji kontrast:

Normalna:

Protanopija:

Deuteranopija:

Tritanopija:

Ova konkretna selekcija boja još uvijek nije dobra kombinacija, ali je mnogo bolja od originalne. Čak i sa ovom malom izmjenom uspješno je postignuto da se održi osnovna namjena originalne selekcije boja i da se proizvede tekst koji korisnici sa defektom mogu čitati.

Formula sjajnosti boja

Da bi se ispoštovale WCAG smjernice, boje pozadine i boje elemenata koji su  u prvom planu treba da omoguće dovoljan kontrast kada ih gleda neka slabovida osoba ili osoba sa defektom osjetljivosti na boje, ili kada se gledaju na crno-bijelom ekranu.

Formula koju predlaže W3C da bi se odredila sjajnost boje je:

((Crvena vrijednost X 299) + (Zelena vrijednost X 587) + (Plava vrijednost X 114)) / 1000

Dvije boje pružaju dobru vidljivost boja ako je razlika između sjajnosti veća od 125 i razlika u boji veća od 500.

Alat za provjeru kontrasta boja

Alat koji bi pomogao dizajneru da izgradi pristupačan veb sajt, treba da posjeduje mogućnost testiranja kontrasta i sjajnosti boja između pozadine i onoga što je u prvom planu svih elemenata u DOM-u.  Na taj način se  osigurava dovoljno velik kontrast za osobe sa oštećenjem vida.

Alati tog tipa mogu se naći ponuđeni na sajtu WCAG. Јedan od takvih alata je i AccessColor - onlajn alat za provjeru kontrasta. Ovaj alat će automatski pronaći relevantne kombinacije boja unutar HTML i CSS dokumenata umjesto da se te boje traže ručno uz testiranje kontrasta za svaku kombinaciju boja. AccessColor koristi algoritam koji predlaže AERT. On analizira i eksterne i interne CSS i onda proračunava kontrast boja između pozadine i teksta u prvom planu za svaki element u DOM-u.

AccessColor provjerava samo kontrast između teksta i pozadine. Ovaj alat je namijenjen za veb sajtove gdje većina teksta nije pisana na pozadinskim slikama ili sa flash-om. Pored ovog postoji još alata tako da je  moguće izabrati onaj koji odgovara za konkretne namjene. Neki od njih su

• Colour Contrast Check – omogućava osnovno testiranje šema boja i nivoa kontrasta
• Color Sheme Designer – omogućava da se paleta boja provjeri u skladu sa nekoliko nivoa defekta kolornog vida
• Color Oracle – ovaj simulator defekta kolorog vida radi na više operativnih sistema i funkcioniše tako što na ekran primjenjuje filtere
• Contrast-a – ovaj Flash alat provjerava određenu kombinaciju boja pozadine i teksta na osnovu smjernica W3C
• GrayBit – konvertuej čitavu stranu u grayscale verziju
• Check My Colours – funkcioniše slično kao i AccessColor.

Kooperativni izbor boja

Iako, postoje utvrđene formule i programi koji će automatski testirati i ponuditi kontraste boja koji bi zadovoljili uslov vidljivosti za sve korisnike, prilično teško je naći kombinaciju koja je optimalna za svaku vrstu korisnika. Dodajući ovoj konfuziji različite stepene defekta viđenja boja za različite korisnike to još više komplikuje problem. Treba uzeti u obzir potencijalnu mogućnost nepravilno podešenih monitora, što će rezultovati lošim kontra-stom čak i za korisnike sa normalnim vidom. Svi ovi faktori zajedno čine izbor odgovarajuće kombinacije boja važnim i teškim.

Јedno od rješenja je da se nakon izbora boja za veb sajt ostavi mogućnost korisnicima da odaberu šemu boja koja će biti korištena na sajtu. Ovo je moguće postići koristeći tehnologiju CSS-a koja već podržava pojam „korisničkog CSS-a“ što znači da je korisnicima dopušteno da zadaju sopstvene CSS-ove koji će prepisati one koje je originalno postavio veb dizajner. Da bi se podržala ova mogućnost, bitno je da se izbjegava pisanje pravila sa ključnom rječju important jer takva pravila korisnik kasnije ne može prepisati u svojoj CSS datoteci. Takođe da bi se korisnicima olakšalo pisanje sopstvenih CSS-ova, potrebno je body zadati id da bi korisnik lakše mogao da mu pristupi. Ipak kreiranje takvog dokumenta je prekomplikovano za prosječnog korisnika. Ono što ovdje može da se uradi je da se na samom veb sajtu korisniku ponudi mogućnost izbora jedne od nekoliko ponuđenih kombinacija boja. Na taj način će korisnik primijeniti onu koja mu najviše odgovara. Slijedi primjer mehanizma kojim je to realizovano na sajtu e-Biblioteke Specijalne biblioteke za slijepa i slabovida lica Republike Srpske:

Ako se nekoliko šema boja pripremi u nekoliko CSS datoteka, na primjer da su to „Sema1.css“, „Sema2.css“,  „Sema3.css“, i u svakoj od ovih datoteka definišu se CSS pravila koja će konkretnim elementima dodijeliti boje jedne od šema. te fajlove možemo dinamički primjenjivati kad korisnik na stranici odabere jednu od ponuđenih opcija.  Primijenjena CSS datoteka se može dinamički zamijeniti bez ponovnog učitavanja stranice koristeći JavaScript

<a title="Primjenite prvu šemu boja" onclick="javascript: zamijeni_css('prvaSema')" href="javascript:void(0)">
    Prva šema boja
</a>

<a title="Primjenite drugu šemu boja" onclick="javascript: zamijeni_css('drugaSema')" href="javascript:void(0)">
    Druga šema boja
</a>

<a title="Primjenite treću šemu boja" onclick="javascript: zamijeni_css('trecaSema')" href="javascript:void(0)">
    Treća šema boja
</a>

Kada korisnik izabere neki od ovih linkova, pozvaće se JavaScript funkcija koja će dinamički primijeniti CSS sa odabranom šemom boja.

function zamijeni_css($ime_datoteke )

{
    $('.css_boje').attr('href', $ime_datoteke + '.css');
    $.cookie('css_boje',$ime_datoteke,{ path: '/', expires: 30});
}

Takođe je potrebno određenoj relaciji za CSS u zaglavlju HTML fajla dodijeliti klasu pomoću koje će joj JavaScript funkcija moći pristupiti

<head>
    ...
    <link class="css_boje" type="text/css" href="/Sema1.css"   rel="stylesheet" />
    ...
</head>

Funkcija podatak o izabranoj šemi smješta se u kolačiće (cookies). Taj podatak će se moći iskoristiti pri učitavanju slijedeće stranice da bi se primijenila izabrana šema. Realizacija čitanja podatka iz kolačića i postavljanja i primjenjivanja odgovarajuće CSS datoteke se obavlja na serverskoj strani i realizacija zavisi od programskog jezika koji se koristi na serverskoj strani.

Јednostavniji način da se ispoštuju potrebe korisnika je da se djelimično za boje sajta izaberu boje izabrane za Windows operativni sistem za različite interfejs komponente. Koristeći kontrolnu tablu za podešavanje prikaza korisnik je vjerovatno već podesio operativni sistem prema svojim potrebama, tako da bi korištenje ponuđenih boja trebalo da bude zadovoljavajuće. Negativna strana ove metode je u tome što je ona zavisna od veb čitača jer trenutno jedino Internet Explorer podržava ovu mogućnost.

Način korišćenja sistemskih boja je da se umjesto konkretnih vrijednosti boja koriste ključne riječi. Na primjer za boju:

<font color="#FFCC9">

bi se koristilo:

<font color="windowtext">

što bi postavilo boju fonta na istu onu koju je korisnik izabrao za boju teksta u Windows operativnom sistemu.

Rasporedi strana

Uvod u rasporede strana

Pri radu sa veb sajtovima slabovide osobe obično koriste velike monitore ili povećavaju veličinu fonta u veb čitaču. Glavni problem pri ovome predstavljaju rasporedi strana sa fiksnim širinama elemenata. Oni su vrlo česti jer dizajneru daju veću kontrolu nad rasporedom i pozicioniranjem. Ako se širina postavi na 720 piksela, ona će uvijek biti 720 piksela. Ovaj pristup ima nekoliko negativnih posljedica.

 Prvo, zbog toga što su fiksni uvijek su iste veličine i ne iskorištavaju optimalno dostupni prostor. Na velikim ekra-nima sajt dizajniran za rezoluciju 800x600 činiće se malim i izgubljenim u centru ekrana. Suprotno od toga sajt dizajniran za rezoluciju od 1024x760 izazvaće pojavu horizontalne klizne trake na manjim rezolucijama što će uveliko umanjiti preglednost.

Druga negativna strana se odnosi na dužine linija i čitljivost teksta. Rasporedi sa fiksnom širinom obično dobro rade sa unaprijed određenim veličinama fontova u veb čitačima, ali ako se veličina poveća za nekoliko koraka, linije teksta se počinju prelamati do mjere kada su prekratke i nepogodne za čitanje, a ako se povećavanje nastavi i dalje, tekst će preći zadate granice i preći u susjedne elemente.

Ova dva problema se mogu riješiti primjenom tečnog i elastičnog rasporeda.

Tečni raspored

Kod tečnog rasporeda dimenzije se zadaju pomoću procenata umjesto piksela. Ovo omogućava tečnim rasporedima da se skaliraju relativno u odnosu na veličinu prozora veb čitača. Kako se poveća ili smanji prozor veb čitača, tako će se mijenjati i dimenzije elemenata.

Ali ni tečni rasporedi nisu bez negativnih strana. Pri malim veličinama prozora, dužine linija teksta mogu postati vrlo uske i teške za čitanje. Ovo se može spriječiti postavljanjem parametra min-width u pikselima ili u em da bi se spriječilo da raspored postane preuzak.

Suprotna situacija je ako se raspored raširi previše, linije mogu postati predugačke i teške za čitanje. Ovaj problem se može riješiti na više načina. Glavni elemeat koji sadrži ostale elemente se ne mora prostirati čitavom dužinom prozora već samo određenim dijelom, recimo 85 procenata. Padding i margin se takođe mogu zadati pomoću procenata. Na ovaj način oni će se mijenjati srazmjerno veličini prozora ne dozvoljavajući sadržaju da se proširi previše. Na kraju takođe se može postaviti maksimalna širina pomoću max-width glavnog elementa u pikselima.

Јedna stvar na koju treba obratiti pažnju pri radu sa procentima je da se dimenzija elementa računa na osnovu elementa koji ga sadrži, a ne na osnovu čitavog prozora.

Slijedi primjer veb strane sa elastičnim rasporedom sa tri kolone.

Za početak se postavlja širina omotača, glavnog div element koji će sadržati ostale elemente, kao procenat širine prozora veb čitača. U ovom primjeru to će biti 85 procenata što daje dobre rezultate na širokom spektru veličina ekrana. Slijedeće što se postavlja je širina sekcije za navigaciju i sekcije za sadržaj kao procenat širine omotača, u ovom slučaju 23 i 75 procenata respektivno. Ostavljena su 2 procenta slobodnog prostora za sve greške u zaokruživanju i neregularnosti u širini do kojih bi moglo doći.

 

 

Slijedeći korak je postavljanje širina kolona u sekciji za sadržaj. Ovaj dio je malo komplikovaniji jer će širine div elemenata unutar nje biti zasnovane na širini div elementa sadržaj, a ne cijelog prozora veb čitača. Ako veličina sporednog sadržaja treba biti ista kao i širina sekcije za navigaciju, potrebno je izračunati koliko je 23 procenta omotača u odnosu na širinu sekcije za sadržaj. Ovo je 23 (širina sekcije za navigaciju) podijeljeno sa 75 (širina sekcije za sadržaj) pomnoženo sa 100 što na kraju daje oko 31 procenat. Potrebno je ostaviti prostor za greške kao i između sekcija za navigaciju i sadržaj, ovo po istoj formuli izađe na oko 3 procenta, što znači da za sekciju glavnog sadržaja ostaje 66 procenata.

Ovako zadat tečni raspored je optimalan na rezoluciji od 1024x780, ali se može lako čitati na manjim i većim rezolucijama kao što se može vidjeti na slici.

Iz razloga što se dati raspored tako dobro skalira nema prevelike potrebe za postavljanjem max-width, ali sadržaj bi se počeo ponašati loše pri malim veličinama ekrana tako da se može postaviti min-width na 720 piksela za omotač.

Elastični raspored

Dok je tečni raspored dobar za optimalno iskorištavanje dostupnog prostora, dužine linija ipak mogu postati neprijatno predugačke na monitorima sa velikim rezolucijama, suprotno tome linije mogu postati vrlo kratke i izlomljene i izaći iz okvira elemenata koji ih sadrže pri uskim dimenzijama prozora i pri povećavanju fonta. U ovim slučajevima rješenje problema je elastični raspored.

Elastični raspored funkcioniše na način da se širine elemenata zadaju relativno u odnosu na veličinu fonta umjesto na širinu prozora. Zadajući širine u em osigurava se da kada se povećava veličina fonta, čitav raspored se prerasporedi srazmjerno. Ovo omogućava da dužine linija ostanu komforne za čitanje što je posebno bitno za slabovida i mentalno nedovoljno razvijena lica.

Kao i druge metode raspoređivanja ni elastični raspored nije bez problema. Najbitniji je sličan problem kao i kod rasporeda sa fiksnom širinom, a to je da ne koristi maksimalno dostupan prostor. Takođe pošto se čitav raspored uvećava pri povećanju fonta, sadržaj može izaći iz okvira prozora veb čitača, što primorava na korištenje horizontalne klizne trake. Ovaj problem se može riješiti zadavanjem veličine max-width od 100%.

Elastični raspored se kreira mnogo brže od tečnog jer u suštini svi elementi ostaju na istom mjestu u odnosu jedni na druge, s tim što im se povećava veličina. Izmjena rasporeda sa fiksnom širinom u elastični je jednostavan zadatak. Trik je u tome da se odredi osnovna veličina fonta tako da 1 em bude ugrubo oko 10 piksela.

Standardna veličina fonta na većini veb čitača je 16 piksela. Deset piksela je otprilike 62.5 procenata od 16 piksela, tako da je potrebno zadati veličinu fonta od 62.5%  za element body.

Pošto je sada 1 em ekvivalentan 10 piksela, konvertovanje rasporeda sa fiksnom širinom u elastični se svodi na konvertovanje svih širina u pikselima u širine zadate u em.