Priručnik "Veb pristupačnost" - Princi pristupačnog dizajna

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.