Veb je predviđen da bude pristupačan svima, bez obzira na lokaciju, kulturu, hardver, softver, fizičke ili mentalne sposobnosti.

Pojam pristupačnosti veb sadržaja (eng. Web accessibility) odnosi se na prakse uklanjanja barijera koje sprečavaju interakciju ili pristup sadržaju od strane osoba sa bilo kojom vrstom invaliditeta.

Veb sadržaj se generalno odnosi na veb stranice i aplikacije i obuhvata:

  • tekst, sliku i zvuk,
  • kod koji definiše strukturu i izgled sadržaja.

Nažalost, svjedoci smo toga da se ovakvoj praksi ne posvećuje dovoljno pažnje, niti se ona sprovodi kako treba. Posledica toga je činjenica da nemaju svi korisnici (jednako dobar) pristup informacijama i funkcionalnostima koje veb nudi. Uz opravdanje da je razvoj pristupačnijih sajtova zahtijeva angažovanje više resursa, vlasnici sajtova većinom odustaju od te ideje.

Pristupačnost je od ključnog značaja developerima i organizacijama koji teže kvalitetnom veb sadržaju i ne žele ikome da onemoguće ili otežaju korišćenje svojih proizvoda i usluga.

Ivana Ćorović

Ivana Ćorović

Frontend Developer

Uz vječiti osmjeh i tiho pjevušenje transformiše dizajnerske zamisli u funkcionalna interaktivna rješenja. Njen pixel-perfect osjećaj se u timu smatra magijom. Obično tiha, zna da svojim dosjetkama i neočekivanim komentarima zasjeni i najveće kreativce. Voli i da članove tima vrati u realnost sa svojim “no nonsense” pristupom životu.

a11y je skraćenica, tzv. numerom (eng. numeronym) za „accessibility“. Numerom a11y znači da se između „a” i „y” nalazi 11 slova.

W3C (World Wide Web Consortium) je organizacija zadužena za razvijanje standarda u koje spadaju i HTML, CSS i XML. WAI (Web Accessibility Initiative) je dio W3C-a i poštuje W3C proces za razvinjanje veb standarda. Saradnjom između WAI-ja, pojedinaca i organizacija usvojen je WCAG (Web Content Accessibility Guidelines) standard za pristupačnost veb sadržaja koji zadovoljava potrebe pojedinaca, udruženja i vlada na međunarodnom nivou. WCAG predstavlja skup smjernica za kreiranje što pristupačnijeg veb sadržaja za osobe sa invaliditetom.

U Crnoj Gori, od ukupnog broja stanovnika, 11% (68.064) osoba ima smetnje pri obavljanju svakodnevnih aktivnosti zbog dugotrajne bolesti, invaliditeta ili starosti, pokazali su podaci sa Popisa 2011. godine. Prema podacima, 5% crnogorske populacije ima problem sa kretanjem, 2% sa vidom iako koristi naočare i sočiva, a od ukupnog broja stanovnika 1% stanovništva ima problem sa sluhom i pored korišćenja slušnih aparata. Smetnje sa pamćenjem, koncetracijom ili za vrijeme sporazumijevanja sa drugima ima 1% stanovništva, dok 4% stanovništva osjeća teškoće druge vrste. (Izvor: STRATEGIJA ZA INTEGRACIJU LICA SA INVALIDITETOM U CRNOJ GORI za period 2016-2020)

Mnogi sajtovi imaju grafičke definisane likove i druge sadržaje koji uz to nemaju tekstualnu alternativu, pa ih citači ekrana ne mogu pročitati. – linkovani su baneri, slike i sl. Takođe, na nekim sajtovima se tekstualni linkovi otvaraju u okviru istog taba. Na taj način se osoba ostećenog vida zbuni. Neki sajtovi imaju previše linkova i onda treba mnogo vremena da ih govorni program pročita i da osoba ostećenog vida shvati strukturu sajta.

Udruženje mladih sa hendikepom Crne Gore - AYDM

Budući da smo gotovo svi danas korisnici veb sadržaja, postoji i drugi ugao gledanja na problem nedovoljne pristupačnosti: iako trenutno nemamo nikakvu smetnju, svi postajemo stariji (a vidjeli ste statistiku) i podložni smo povredama, pa bi za buduće nas trebalo da pravimo što pristupačniji veb sadržaj.

Sudeći po Adrijanu Roseliju, jednom od članova W3C-a i strastvenom zagovorniku pristupačnosti veb sadržaja, najefikasnije promjene nastaju kada počnemo misliti o pristupačnosti radi nas samih.

Razmotrimo par svakodnevnih situacija koje nas mogu privremeno onemogućiti, a u kojima se svi možemo naći:

  • Radite u relativno bučnom kafiću, ili pred nekog ko spava, a zaboravili ste slušalice: zar ne bi bilo jako dobro kad bi video koji pokušavate da pogledate imao titl?
  • Jedete sendivč dok radite na računaru i ruka za miš je zauzeta: možete li doći do svakog linka pomoću TAB-a?
  • Sunčan je dan i radite napolju, ali morate da pojačate svjetlost ekrana da bi vidjeli: šta se dešava sa kontrastom na veb stranicama, možete li išta da vidite?
  • Putujete avionom i skučeni ste u sjedištu tako da nemate previše prostora za pomjeranje lakta: da li su dugmad ili linkovi na koje bi kliknuli dovoljno veliki, lako uočljivi i odvojeni jedan od drugog?

Ove korisničke priče pomažu pri kreiranju persona. U knjizi A Web for Everyone kreirane su persone za osobe sa invaliditetom za neke od tipova invaliditeta. Ako uzmete u obzir poteškoće sa kojima se ove persone susreću pri koriščenju veb sadržaja, sajt koji razvijate im možete bolje prilagoditi. Nažalost, persone sa invaliditetom bivaju zanemarene dosta rano u procesu. Iskusni developeri savjetuju da se, pri dizajniranju sajta, persone kreiraju za osobu koja donosi odluke. Na primjer, ukoliko naručilac sajta često igra tenis, umjesto razmatranja persone koja slabo vidi, formirajte personu kojoj smeta sunce na teniskom terenu, pa za nju povećajte slova i kontrast ne bi li joj sadržaj bio što pristupačniji.

Tehnički savjeti za što bolju pristupačnost vašeg veb sadržaja

ALT atribut za slike

Za korsnike koji imaju oštećen vid i koriste čitać ekrana, vrijednost ALT atributa predstavlja informaciju koju će dobiti umjesto slike. Izostavljanje ALT atributa nije opcija, jer u tom slučaju može biti pročitan URL slike. U slučaju da se slika iz nekog razloga nije učitala, upotreba ALT atributa će biti od koristi svim korisnicima, a pored toga je i zgodna praksa za bolje rangiranje na Google-u.

Postoje tri vrste slika koje se koriste na sajtu:

  1. informativne,
  2. dekorativne i
  3. kompleksne.

Vrijednost ALT atributa za informativnu sliku treba da bude sažeta informacija koja je sadržana na slici, ili naznaka da je slika linkovana. Malo duže vrijednosti koriste se za kompleksne slike (grafike, tabele i slično), dok dekorativne slike mogu da imaju alt=”” (da korisnici ne bi bili zatrpavani informacijama). Ako koristite alt=” “ (jedan prazni karakter), neki čitači ekrana će i dalje naglasiti korisniku da se tu nalazi slika.

Linkovi

Linkovi su jedna od osnovnih funkcionalnosti veb sadržaja, i upravo zato je njihova nepristupačnost jedna od najvećih prepreka cjelokupne pristupačnosti. Link mora imati neprazan HREF atribut da bi bio smatran istinskim linkom i pristupačan korisnicima koji koriste samo tastaturu. Takođe je za sve linkove preporučljivo koristiti isti stil kojim uočljivo razlikujete linkove od ostalog teksta.

Korisnicima koji ne koriste miš (ili touchpad), linkovi su beskorisni ukoliko se do njih ne može doći isključivo uz pomoć tastature. U većini pretraživača, TAB omogućava korisnicima da idu od linka do linka, a ENTER da kliknu na željeni link. Kako bi korisnici pomoću TAB-a znali do kog linka su stigli, obavezno koristite :focus CSS selektor (dodajte :focus svuda gdje imate :hover).

Kako je uopšte moguće kreirati link koje će prkositi ovakvoj praksi? Moguće je, ako za njega vežete određene JavaScript metode, kao na primjer:

<a href="onmouseover=dropdownmenu()">Odaberi proizvod</a>

Kako bi obezbijedili pristupačnost, koristite samo funkcije (event handlers) koje su nezavisne od uređaja (one koje se mogu pokrenuti pomoću miša i tastature: onFocus, onBlur, onSelect, onChange i onClick), ili koristite i funkcije koje se pokreću uz pomoć miša (onMouseOver, onMouseOut i onDblClick) zajedno sa onim koje se pokreću pomoću tastature (onKeyDown, onKeyUp, itd).

Linkovi i čitači ekrana

Svrha svakog pojedinačnog linka treba da bude jasna iz teksta samog linka. Čitači ekrana obično najavljuju korisnicima kada su tekst ili grafika linkovani, najavljujući ih riječju „Link”. Na primjer, „proizvodi” bi bilo pročitano kao „link proizvodi”. Zbog toga, a i činjenice da korisnici već znaju da je u pitanju link, nema potrebe navoditi u tekstu linka i samu riječ „link”.

Korisnici koji se služe čitačem ekrana obično prelaze sa linka na link, preskačući tekst koji je između, dok neki čitači ekrana ređaju linkove po abecedi. Zbog toga treba izbjegavati linkove koji su nerazumljivi van konteksta, na prijmer „Više” ili „Kliknite ovdje”.

Takođe je važno navesti da li se link otvara u novom tabu/prozoru. Ovakve informacije se navode nakon ključnih, na primjer, napišite „Proizvodi (link se otvara u novom prozoru)”, umjesto „(Link se otvara u novom prozoru) proizvodi”. Ovo važi posebno za stranice na kojima ima više linkova koji se otvaraju u novom prozoru, jer je teško utvrditi gdje jedan počinje da drugi se završava, i korisnici moraju da odslušaju cijelo objašnjenje prije nego saznaju šta ustvari taj link otvara.

Tabindex

Ne koristiti tabindex veći od 0!

Već je napomenuto da korisnici (samo) tastature mogu da koriste TAB da bi došli do određenih elemenata stranice. Ovo elementi imaju, po automatiznu, tabindex vrijednost 0, i bivaju odabrani onim redim kojim se pojavljuju u kodu stranice.

Elementi koji, po automatizmu, ne dobijaju TAB fokus (<div>, <span>, <p> i <a> bez href-a), mogu ga dobiti tako što će im se dodijeliti tabindex=”0”. Na ovaj način se ne remeti raspored TAB-ovanja kroz stranicu.

S druge strane, pozitivne tabindex vrijednosti remete redosled odabiranja elemenata i treba ih izbjegavati! Elelment koji ima veću tabindex vrijednost biva fokusiran ranije, što može dovesti do neočekivanog skakanja po stranici.

tabindex=”-1” uklanja TAB fokus sa elemenata i omogućava im da dobiju programski TAB fokus. Dobar primjer upotrebe tabindex=”-1” je modalni prozor (koji je obično <div>) i kao takav se ne fokusira, ali ga je potrebno fokusirati kad se otvori, kako bi čitač ekran mogao da navigira kroz njega.

<button>, <input> ili <a>?

Ako vodi na novi URL, koristite <a>.

Ako mijenja nešto na trenutnoj stranici, koristite <button> (za hide, toggle i slično).

Ako šalje formu, koristite <input type=”submit”> ili <buton type=”submit”>.

<button> i <input> se mogu aktivirati pritiskom na SPACE, dok <a> ne može.

Kontrast boja

Postarajte se da postoji dovoljan kontrast između boja na stranicama, i da osobe koje imaju poteškoće sa razlikovanjem boja i dalje mogu da razlikuju elemente sadržaja. Testirajte izgled sajta povećavajući i smanjujući osvijetljenost ekrana.

Neophodni odnos između boja mora biti:

  • 5:1 između teksta kopija i pozadine;
  • 3:1 između teksta i pozadine, kad je u pitanju veći tekst (14+pt+bold, ili 18+pt);
  • 3:1 između teksta i linkova, s tim što iz to mora postojati i dodatni vizuelni nagovještaj da je u pitanju  link.

Neki od alata kojim možete testirati kontrast boja i njegovu usklađenost sa WCAG-om su:

Omogućite zumiranje

Mada mobilni pretraživači obično ovo sami ispravljaju, dobra je praksa da u kodu pronađete <meta name=”viewport”> element i iz njega obrišite:

maximum-scale=1.0; user-scalable=no;

Iz @-ms-viewport {} dijela obrišite:

zoom: 1.0

Šta još možete da uradite?

Koristite HTML5 jer sardži već ugrađenu podršku za čitače ekrana.

Dodijelite odgovarajuću vrijednost <html> LANG atributu.

Poklapajte labele sa odgovarajućim poljima forme: vrijednost FOR atributa labele mora se poklapati sa vrijednošću ID-ja polja na koje se odnosi. Test: da li odabir labele prenosi fokus sa odgovarajuće polje?

Izbjegavajte beskonačno skrolovanje kroz stranicu, jer na taj način određeni korisnici nikad ne mogu doći do linkova/formi u futeru.

Ako koristite audio ili video sadržaj, koristite transkripte i  titlove.  NO MORE CRAPTIONS je jedan od alata koji možete koristiti za ispravljanje auto-generisanih YouTube titlova, koji obično nisu baš najbolji.

Zaključak

Kao što vidite, određene stvari koje možete da uradite da bi vaš veb sadržaj bio pristupačniji zahtijevaju samo malo više truda i korišćenje postojećih tehnologija. Ključna stvar koju treba usvojiti je da sadržaj činimo pristupačnijim ne samo ljudima sa invaliditetom, već i budućim nama.

Navedeni savjeti su generalne heuristike, i postoje situacije u kojima je njihovo svjesno i plansko kršenje opravdano (na primjer: tab index veći od nule u veb aplikaciji u kojoj se popunjava uplatnica, drugačiji :focus u onda kada je :hover vrlo suptilan i slično).

Ivana Ćorović

Ivana Ćorović

Frontend Developer

Uz vječiti osmjeh i tiho pjevušenje transformiše dizajnerske zamisli u funkcionalna interaktivna rješenja. Njen pixel-perfect osjećaj se u timu smatra magijom. Obično tiha, zna da svojim dosjetkama i neočekivanim komentarima zasjeni i najveće kreativce. Voli i da članove tima vrati u realnost sa svojim “no nonsense” pristupom životu.

Ostanite u toku!

Ostanite u toku!

Prijavite se na Alicorn e-mail časopis i budite u toku sa najnovijim člancima našeg tima. Nema spama. Poruke šaljemo rijetko, isključivo kad imamo nešto važno da kažemo.

Hvala! Uspješno ste se prijavili!