Pristupačnost

Pristupačnost je oblikovanje sajta tako da ga mogu koristiti i ljudi koji slabije vide, ne razlikuju boje, ne koriste miš ili se oslanjaju na program koji im čita ekran. Na engleskom se zove accessibility, a u branši se često skraćuje kao a11y, jer između prvog i zadnjeg slova ima jedanaest drugih.

Lako je ovo zamisliti kao posao za mali broj ljudi. Nije. Tu su i stariji kupci kojima je sitan sivi tekst nečitljiv, i čovjek sa slomljenom rukom koji sajt koristi tastaturom, i svako ko otvara stranicu na telefonu na suncu. Sajt koji je pristupačan je u pravilu samo sajt koji se lakše koristi.

Šta to konkretno znači

Smjernice koje se koriste svugdje zovu se WCAG i objavljuje ih W3C, organizacija koja postavlja standarde za web. Imaju tri nivoa, a nivo AA je ono što se najčešće traži. Umjesto da se čitaju cijele, većina posla staje u nekoliko pravila.

• Dovoljan kontrast. Običan tekst mora imati odnos kontrasta najmanje 4,5 prema 1 prema pozadini. Svijetlosivo na bijelom redovno pada ispod toga.
• Opisane slike. Svaka slika koja nosi informaciju ima alt tekst koji čitač ekrana pročita naglas.
• Rad tastaturom. Do svakog linka, dugmeta i polja u formi se može doći tasterom Tab, i vidi se gdje se trenutno nalazite.
• Forme s oznakama. Svako polje ima vidljivu oznaku, a ne samo sivi tekst unutar polja koji nestane kad počnete kucati.
• Boja nije jedini znak. Greška u formi nije označena samo crvenom bojom, nego i tekstom.
• Ispravna hijerarhija naslova. Naslovi idu redom, jer čitač ekrana po njima pravi sadržaj stranice.
• Tekst koji se može povećati bez da se raspored raspadne.

Ko je zapravo korisnik

Kad se kaže pristupačnost, većina ljudi zamisli slijepu osobu s čitačem ekrana. To je jedan korisnik, i važan, ali daleko od jedinog.

Ljudi koji slabije vide ne koriste čitač nego povećavaju tekst, i trebaju sajt koji se pri tome ne raspadne. Ljudi koji ne razlikuju crvenu i zelenu ne vide razliku između uspješno poslane forme i greške ako je jedini znak boja. Ljudi s tremorom ruku ne pogađaju sitna dugmad. Ljudi koji čitaju sporije ili im jezik nije maternji trebaju jasne rečenice.

A onda privremene situacije: slomljena ruka, telefon na jakom suncu, bučno okruženje u kojem se video ne može slušati. Pristupačnost u tim trenucima pomaže svakome.

Kod nas je posebno važna starija publika. Firme koje prodaju penzionerima, pacijentima ili roditeljima s djecom u naručju imaju više posjetilaca kojima je ovo svakodnevna potreba nego što misle.

Zakonska strana

Ovdje treba biti precizan, jer se o tome dosta pretjeruje u oba smjera.

Za privatne firme u Bosni i Hercegovini koje prodaju samo domaćim kupcima trenutno nema opšte zakonske obaveze uporedive s evropskom.

Firme koje prodaju kupcima u Evropskoj uniji su druga priča. Evropski akt o pristupačnosti se od juna 2025. primjenjuje na niz proizvoda i usluga, uključujući internet trgovinu, uz izuzeća za najmanje firme. Trgovina iz BiH koja šalje robu u Njemačku ili Austriju treba to provjeriti za svoj slučaj, idealno s nekim ko poznaje propise, a ne na osnovu jednog teksta.

Bez obzira na zakon, sajt koji dio kupaca ne može koristiti je sajt koji gubi prodaju.

Pristupačnost i ostatak posla

Veliki dio ovoga se preklapa s poslovima koji se ionako rade, i zato se najbolje radi zajedno s njima.

S UX dizajnom, jer su jasne forme, vidljiva dugmad i razumljivi koraci isto pitanje posmatrano iz dva ugla.

Sa SEO poslom, jer opisni alt tekst, ispravni naslovi, tekstovi linkova koji govore kuda vode i brz sajt koriste i čitaču ekrana i Googleu.

S tipografijom, jer su veličina slova, razmak između redova i kontrast pola čitljivosti.

I s izborom CMS-a i teme, jer tema koja ne dozvoljava rad tastaturom ili sama postavlja nečitljive boje ograničava sve što se poslije radi.

Kako se provjerava

Postoje dvije vrste provjere i potrebne su obje.

Automatska provjera pronađe ono što se može izmjeriti: nizak kontrast, slike bez alt teksta, polja bez oznaka, pogrešan redoslijed naslova. Lighthouse u Chromeu ima dio posvećen pristupačnosti i daje spisak za nekoliko sekundi. Postoje i besplatni dodaci za pregledač koji isto rade detaljnije.

Ručna provjera pronađe ono što alat ne vidi. Najkorisniji test traje pet minuta: odložite miš i pokušajte samo tasterom Tab doći do kontakt forme, popuniti je i poslati. Ako se u nekom trenutku izgubite, ne vidite gdje ste, ili ne možete otvoriti meni, pronašli ste ono što automatska provjera nije.

Drugi ručni test je povećanje teksta u pregledaču na dvjesto posto. Raspada li se stranica, preklapaju li se dijelovi, nestaje li dugme.

Šta ne pomaže

Dodaci koji obećavaju pristupačnost jednim klikom. Dodaju plutajuću ikonu s trakom opcija za povećanje teksta i promjenu kontrasta, ali ne popravljaju formu bez oznaka ni sliku bez opisa. Dio korisnika čitača ekrana ih doživljava kao prepreku, jer se miješaju s alatima koje već koriste.

Posebna pristupačna verzija sajta. Dvije verzije se ne održavaju jednako, pa ona sporedna brzo zastari.

I odgađanje za redizajn. Kontrast, alt tekstovi i oznake u formama se popravljaju na postojećem sajtu, danas.

Gdje početi kad nema vremena

Ako se sve ne može uraditi odjednom, redoslijed koji donosi najviše za najmanje posla je ovaj.

Prvo kontrast teksta, jer pogađa najviše ljudi i rješava se promjenom nekoliko boja u temi.

Zatim oznake u formama, jer je kontakt forma mjesto gdje sajt zarađuje, a forma koju neko ne može popuniti je izgubljen upit.

Onda vidljiv fokus i rad tastaturom na meniju i formi.

Na kraju alt tekstovi, počevši od slika koje nose informaciju, kao baneri s ponudom i fotografije proizvoda.

Greške koje najčešće viđamo

Prva je svijetlosivi tekst na bijeloj pozadini, izabran jer izgleda elegantno.

Druga su forme u kojima jedina oznaka polja stoji unutar samog polja i nestane kad se počne kucati.

Treća je uklonjen okvir oko elementa na kojem se nalazi fokus tastature, jer je dizajneru smetao. Bez njega se korisnik tastature potpuno izgubi.

Četvrta su slike s tekstom, kao baneri s akcijom, bez ikakvog alt teksta. Čitač ekrana ne pročita ništa.

Peta su linkovi s tekstom kliknite ovdje i saznajte više, koji čitaču ekrana ne govore kuda vode.

Šesta je greška u formi označena samo crvenom bojom.

Lista za provjeru

• Možete li samo tastaturom doći do kontakt forme, popuniti je i poslati?
• Vidi li se uvijek na kojem se elementu nalazi fokus?
• Ima li običan tekst kontrast od najmanje 4,5 prema 1?
• Imaju li sve slike koje nose informaciju opisni alt tekst?
• Ima li svako polje u formi vidljivu oznaku izvan samog polja?
• Označavaju li se greške i tekstom, a ne samo bojom?
• Ostaje li stranica upotrebljiva kad se tekst poveća na dvjesto posto?
• Ako prodajete kupcima u Evropskoj uniji, jeste li provjerili obaveze za svoj slučaj?

Pojmovi koje ćete čuti uz pristupačnost

• WCAG: smjernice za pristupačnost web sadržaja, s nivoima A, AA i AAA.
• Čitač ekrana: program koji sadržaj stranice čita naglas.
• Odnos kontrasta: razlika u svjetlini između teksta i pozadine, izražena kao omjer.
• Fokus: oznaka elementa na kojem se trenutno nalazi korisnik tastature.
• Alt tekst: opis slike koji čitač ekrana pročita naglas.
• ARIA: dodatne oznake u kodu koje čitaču ekrana objašnjavaju interaktivne dijelove stranice.