Šta je web accessibility (pristupačnost)

Šta je web pristupačnost

Web pristupačnost ili web accessibility označava praksu dizajniranja i razvoja veb sajtova i aplikacija tako da ih mogu koristiti svi ljudi uključujući osobe sa invaliditetom. To podrazumeva osobe sa oštećenjem vida, sluha, motoričkim teškoćama i kognitivnim poremećajima. Prema podacima Svetske zdravstvene organizacije preko milijardu ljudi širom sveta živi sa nekim oblikom invaliditeta što čini pristupačnost ne samo etičkim imperativom već i poslovnom potrebom jer ignorisanjem ove populacije gubite značajan deo potencijalne publike.

Pristupačnost nije samo za osobe sa trajnim invaliditetom. Situacione prepreke poput korišćenja telefona na jakom suncu, privremene povrede ruke ili bučnog okruženja koje onemogućava slušanje zvuka pogađaju sve naš. Dizajniranjem za pristupačnost poboljšavate iskustvo za sve korisnike. Pristupačan sajt je obično i bolje optimizovan za SEO jer pretraživači i čitači ekrana interpretiraju sadržaj na sličan način. BeoHosting podržava pristupačnost kao važan aspekt kvalitetnog web prisustva.

WCAG smernice

Pregled WCAG standarda

Web Content Accessibility Guidelines ili WCAG je međunarodni standard za web pristupačnost. Obezbeđivanje sajta putem sigurnosnog sertifikata je takođe važno za bezbednost korisnika koji razvija W3C organizacija. Trenutna verzija WCAG 2.2 je objavljena 2023. godine i definiše tri nivoa usaglašenosti: A kao minimalni nivo, AA kao preporučeni nivo za većinu sajtova i AAA kao najviši nivo koji je teško u potpunosti postići za sve vrste sadržaja. Većina zakonskih regulativa zahteva nivo AA koji predstavlja dobar balans između pristupačnosti i praktičnosti implementacije.

WCAG je organizovan oko četiri principa poznatih kao POUR: Perceivable, Operable, Understandable i Robust. Perceivable znači da korisnici moraju moći da percipiraju sadržaj barem jednim čulom. Operable znači da korisnici moraju moći da koriste interfejs i navigaciju. Understandable znači da sadržaj i interfejs moraju biti razumljivi. Robust znači da sadržaj mora biti dovoljno robustan da ga razne tehnologije mogu interpretirati uključujući asistivne tehnologije.

Ključni kriterijumi usaglašenosti

Tekstualne alternative za netekstualni sadržaj su jedan od najvažnijih kriterijuma. Svaka slika mora imati alt atribut koji opisuje njen sadržaj za korisnike koji ne mogu da je vide. Dekorativne slike koriste prazan alt atribut alt="" da čitači ekrana znaju da ih preskoče. Informativne slike imaju koncizan opis sadržaja dok kompleksne slike poput grafikona zahtevaju detaljniji opis ili tekstualnu alternativu u blizini. Video i audio sadržaj zahtevaju transkripte i titlove.

Navigabilnost tastaturom je kritična jer mnogi korisnici ne mogu koristiti miš. Svaki interaktivni element mora biti dostupan putem tastature koristeći Tab za navigaciju, Enter za aktivaciju i Escape za zatvaranje. Vidljiv fokus indikator mora jasno pokazivati koji element je trenutno aktivan. Skip navigation link na početku stranice omogućava korisnicima čitača ekrana da preskoče ponavljajuću navigaciju i direktno pristupe glavnom sadržaju.

ARIA atributi

Osnove ARIA

Accessible Rich Internet Applications ili ARIA je set atributa koji proširuju HTML sa dodatnim informacijama za asistivne tehnologije. ARIA ne menja vizuelni izgled ili ponašanje elemenata već samo način na koji ih čitači ekrana prezentuju korisnicima. Prvo pravilo ARIA je da ga ne koristite ako postoji nativni HTML element koji pruža istu semantiku. Na primer umesto div role=button koristite nativni button element koji već ima ugrađenu pristupačnost uključujući fokus i tastaturu.

ARIA role atribut definiše ulogu elementa u interfejsu. Na primer role=navigation označava navigacioni blok, role=main označava glavni sadržaj stranice a role=alert označava dinamičku poruku koja zahteva pažnju korisnika. Landmark uloge poput banner, main, navigation i contentinfo pomažu korisnicima čitača ekrana da se brzo kreću po strukturi stranice preskačući delove koji ih ne zanimaju.

Najčešće korišćeni ARIA atributi

Atribut aria-label pruža pristupačnu oznaku za element koji nema vidljivi tekst. Koristite ga za ikone dugmad poput aria-label=Zatvori meni za dugme sa X ikonom. Atribut aria-labelledby referira na ID drugog elementa čiji tekst služi kao oznaka. Atribut aria-describedby povezuje element sa detaljnijim opisom što je korisno za forme gde polje ima dodatna uputstva za popunjavanje.

Atribut aria-hidden=true sakriva element od čitača ekrana dok je i dalje vizuelno vidljiv. Koristite ga za dekorativne elemente koji samo zbunjuju korisnike čitača ekrana. Atribut aria-expanded označava da li je element poput menija ili sekcije razvijen ili skupljen. Atribut aria-live označava regione čiji se sadržaj dinamički menja i koji treba da budu najavljeni korisnicima čitača ekrana. Vrednost polite čeka da korisnik završi trenutnu aktivnost dok assertive prekida odmah.

Kontrast boja

Zahtevi za kontrast

WCAG definiše minimalne odnose kontrasta između teksta i pozadine. Za normalan tekst minimalni kontrast ratio je 4.5:1 na nivou AA i 7:1 na nivou AAA. Za veliki tekst od 18pt ili 14pt bold minimalni kontrast je 3:1 na AA i 4.5:1 na AAA nivou. Neinteraktivni grafički elementi i komponente interfejsa zahtevaju kontrast od minimum 3:1 prema susednim bojama. Ova pravila obezbeđuju čitljivost za osobe sa smanjenim vidom i kolornim deficitom.

Nikada ne oslanjajte informaciju samo na boju. Na primer ako koristite želenu za uspeh i crvenu za grešku u formi dodajte i tekstualnu oznaku ili ikonu jer korisnici sa deuteranopijom ne razlikuju crvenu od želene. Koristite alate poput WebAIM Contrast Checker ili browser DevTools za proveru kontrasta. Chrome DevTools ima ugrađen kontrast checker koji prikazuje ratio i WCAG usaglašenost direktno u inspektoru elemenata.

Dizajn sa pristupačnošću na umu

Pristupačan dizajn ne mora biti dosadan. Mnoge moderne dizajn pallete ispunjavaju WCAG kriterijume kontrasta uz vizuelnu privlačnost. Tamni tekst na svetloj pozadini je generalno pristupačniji od svetlog teksta na tamnoj pozadini. Izbegavajte tekst preko slika osim ako ne koristite poluprovidan overlay koji obezbeđuje dovoljan kontrast. Za interaktivne elemente poput dugmadi i linkova obratite pažnju na kontrast u svim stanjima: normalno, hover, fokus i aktivno.

Tipografija igra ključnu ulogu u pristupačnosti. Koristite fontove koji su dizajnirani za čitljivost na ekranu sa jasnim razlikama između sličnih karaktera poput l, 1 i I. Minimalna veličina teksta za telo sadržaja treba da bude 16px sa visinom linije od 1.5 za optimalnu čitljivost. Izbegavajte italic za velike blokove teksta i ne koristite isključivo velika slova za rečenice jer su teže za čitanje. Dozvolite korisnicima da povećaju tekst do 200% bez gubitka sadržaja ili funkcionalnosti.

Čitači ekrana

Kako rade čitači ekrana

Čitač ekrana je softver koji interpretira sadržaj ekrana i prezentuje ga korisniku putem sintetizovanog govora ili brajevog displeja. Najpopularniji čitači ekrana su NVDA besplatan za Windows, JAWS komercijalni za Windows, VoiceOver ugrađen u macOS i iOS i TalkBack ugrađen u Android. Čitači ekrana se oslanjaju na HTML semantiku i ARIA atribute da bi razumeli strukturu i namenu sadržaja. Zato je pravilno korišćenje HTML elemenata ključno za pristupačnost.

Korisnici čitača ekrana ne čitaju stranice linearno kao što mi vizuelno skeniramo. Oni koriste naslove za navigaciju po strukturi sadržaja, liste za pregledanje stavki, landmark regione za prelazak između sekcija i tabove za navigaciju po interaktivnim elementima. Zato je pravilna hijerarhija naslova h1 do h6 ključna jer korisnici čitača ekrana koriste naslove kao sadržaj za navigaciju slično kao mi koristimo vizuelni pregled stranice.

Testiranje sa čitačima ekrana

Testiranje sajta sa čitačem ekrana otkriva probleme koji nisu vidljivi vizuelnom inspekcijom. Koristite alat za proveru sajta za dodatnu analizu. Uključite VoiceOver na macOS-u sa Command+F5 i navigirajte po sajtu koristeći samo tastaturu. Slušajte kako čitač ekrana najavljuje svaki element i proverite da li su oznake smislene i da li se struktura sadržaja logično prezentuje. Na Windows-u instalirajte besplatni NVDA i ponovite isti test. Svaka stranica treba da ima smislen page title, jasnu strukturu naslova i informativne oznake za sve interaktivne elemente.

Automatizovani alati poput axe DevTools, Lighthouse accessibility audita i WAVE evaluatora mogu detektovati mnoge tehničke probleme ali ne mogu zameniti ručno testiranje. Automatski alati pronalaze nedostajuće alt atribute, kontrast probleme i ARIA greške ali ne mogu proceniti da li je alt tekst zaista opisan, da li je redosled fokusa logičan ili da li je poruka greške u formi razumljiva. Kombinujte automatizovano i ručno testiranje za najbolje rezultate.

Srpske regulacije za pristupačnost

Zakon o elektronskim komunikacijama i Zakon o sprečavanju diskriminacije osoba sa invaliditetom u Srbiji postavljaju osnove za digitalnu pristupačnost. Državne institucije i javna preduzeća su obavezna da svoje sajtove učine pristupačnim prema WCAG 2.1 AA standardu. Privatni sektor nema eksplicitnu zakonsku obavezu ali Zakon o zaštiti potrošača i anti-diskriminacioni propisi mogu se tumačiti u kontekstu digitalne pristupačnosti.

Europska direktiva o pristupačnosti web sadržaja koja je deo procesa pristupanja EU će dodatno pojačati zahteve za pristupačnost u Srbiji. Kompanije koje planiraju poslovanje na EU tržištu moraju već sada razmotriti European Accessibility Act koji od 2025. godine zahteva pristupačnost digitalnih proizvoda i usluga. Proaktivan pristup pristupačnosti nije samo zakonska obaveza već i konkurentska prednost jer pokazuje društvenu odgovornost i otvara sajt široj publici.

Praktični koraci za implementaciju

• Koristite semantički HTML: header, nav, main, article, section, footer umesto generičkih div elemenata
• Dodajte alt tekst svim informativnim slikama i prazan alt dekorativnim slikama
• Obezbedite navigaciju tastaturom za sve interaktivne elemente sa vidljivim fokus indikatorom
• Proverite kontrast boja koristeći WebAIM Contrast Checker za sve kombinacije teksta i pozadine
• Označite jezik stranice sa lang atributom na html elementu za pravilnu sintezu govora
• Koristite labele za sva polja u formama i povežite ih sa for atributom
• Dodajte skip navigation link na početku svake stranice
• Testirajte sa čitačem ekrana barem jednom mesečno
• Pokrenite Lighthouse accessibility audit i popravite sve detektovane probleme
• Edukujte tim o pristupačnosti jer je to odgovornost svih ne samo developera

Zaključak

Web pristupačnost je fundamentalni aspekt kvalitetnog web razvoja koji obezbeđuje da vaš sajt bude upotrebljiv za sve ljude bez obzira na njihove sposobnosti. Implementacija WCAG smernica, pravilno korišćenje ARIA atributa, obezbeđivanje dovoljnog kontrasta boja i testiranje sa čitačima ekrana su ključni koraci ka pristupačnom sajtu. Pristupačnost nije jednokratan projekat već kontinuirani proces koji treba biti integrisan u svaki aspekt dizajna i razvoja. Na BeoHosting-u podržavamo pristupačnost kao važan deo profesionalnog web prisustva i naši hosting paketi su optimizovani za brzo učitavanje koje je ključno za korisnike asistivnih tehnologija.