Pristupačnost sajta: WCAG osnove za vlasnike firmi

Pristupačnost sajta znači da vaš sajt mogu da koriste svi: ljudi sa slabijim vidom, daltonisti, oni koji ne mogu da koriste miš, stariji korisnici, ali i neko ko čita telefon na jakom suncu. Dobra vest je da većina poboljšanja nije skupa ni komplikovana. Kontrast teksta, opisi slika, logični naslovi, forme sa jasnim oznakama i mogućnost kretanja tastaturom rešavaju najveći deo problema. Uz to, isti ti koraci pomažu i SEO-u, jer Google i čitač ekrana „čitaju“ sajt na veoma sličan način.

Šta je WCAG i zašto vas se tiče

WCAG (Web Content Accessibility Guidelines) je skup međunarodnih smernica koje opisuju kako napraviti sajt dostupan osobama sa invaliditetom. Smernice su podeljene na četiri principa, koje je lako zapamtiti:

• Uočljivo – sadržaj mora moći da se vidi ili čuje (tekst umesto samo slike, dovoljan kontrast, titlovi za video).
• Upotrebljivo – sve mora moći da se koristi i bez miša, a korisnik mora imati dovoljno vremena da završi radnju.
• Razumljivo – tekst je jasan, navigacija predvidljiva, greške u formama objašnjene.
• Robusno – kod je ispravan, pa sajt radi u različitim pregledačima i pomoćnim tehnologijama.

Svaki kriterijum ima nivo A, AA ili AAA. U praksi se kao razuman cilj uzima nivo AA. Za mali biznis ne morate da čitate celu specifikaciju – dovoljno je da pokrijete osnove opisane u nastavku.

Što se zakonske obaveze tiče: pravila o digitalnoj pristupačnosti postoje u Evropskoj uniji i sve su prisutnija, a neke delatnosti i javni sektor imaju strože zahteve. Proverite propise koji se odnose na vašu delatnost, posebno ako prodajete robu ili usluge kupcima u EU. Ali i bez ikakve obaveze, pristupačan sajt je jednostavno bolji sajt – za svakog posetioca.

Kontrast i čitljivost teksta

Svetlosivi tekst na beloj pozadini izgleda „elegantno“ na monitoru dizajnera, ali ga polovina posetilaca na telefonu jedva čita. WCAG za običan tekst preporučuje odnos kontrasta od najmanje 4,5:1, a za krupan tekst (naslove) 3:1. Kontrast lako proverite besplatnim alatima za proveru kontrasta ili kroz alatke za programere u pregledaču.

• Osnovni tekst neka bude najmanje oko 16 piksela, sa dovoljnim proredom.
• Ne pišite dugačke pasuse velikim slovima ni kurzivom.
• Ne oslanjajte se samo na boju: ako je polje sa greškom crveno, dodajte i tekst „Unesite ispravan broj telefona“.
• Linkovi treba da se razlikuju od običnog teksta i po nečemu osim boje, na primer podvlačenjem.

Ovo je naročito važno na mobilnom, gde se sajt često gleda napolju i na manjem ekranu. Više o tome pišemo u tekstu o tome zašto je mobilna verzija sajta najvažnija.

Alt tekst za slike

Alt tekst je kratak opis slike koji čitač ekrana izgovara slepim korisnicima, a koji se prikazuje i kada se slika ne učita. Istovremeno, to je jedan od signala pomoću kojih Google razume šta je na slici.

Pravilo je jednostavno: opišite ono što je na slici važno u kontekstu stranice. Dekorativne slike dobijaju prazan alt atribut, kako ih čitač ekrana ne bi čitao. I nikada ne stavljajte važne informacije (cene, radno vreme, telefon) isključivo u sliku – to ne može da pročita ni čitač ekrana ni pretraživač. Ako vas zanima tehnička strana slika, pogledajte vodič o optimizaciji slika za sajt.

Navigacija tastaturom

Deo korisnika ne koristi miš: zbog motoričkih teškoća, zbog čitača ekrana ili prosto iz navike. Probajte sami: otvorite svoj sajt, odložite miš i pritiskajte taster Tab. Postavite sebi nekoliko pitanja:

1. Da li se jasno vidi koji je element trenutno izabran (okvir ili isticanje fokusa)?
2. Da li se fokus kreće logičnim redom – sleva nadesno, odozgo nadole?
3. Možete li otvoriti meni, popuniti formu i poslati je samo tastaturom?
4. Da li iskačući prozor (npr. baner za kolačiće) može da se zatvori tasterom Esc ili Tab pa Enter?
5. Postoji li link „Preskoči na sadržaj“ na vrhu stranice, da korisnik ne mora svaki put da prolazi kroz ceo meni?

Najčešći problem je to što dizajneri uklone vidljiv okvir fokusa jer im „ruži“ izgled. Bolje ga je stilizovati u bojama brenda nego ukloniti.

Naslovi i struktura stranice

Korisnici čitača ekrana često „skeniraju“ stranicu skačući sa naslova na naslov, baš kao što vi očima preletite podnaslove. Zato naslovi moraju da prate logičnu hijerarhiju: jedan glavni naslov (H1), zatim H2 za glavne celine i H3 za podceline. Nemojte birati nivo naslova prema veličini slova koju želite – izgled se podešava stilom, a nivo naslova određuje strukturu.

Isto važi i za ostale elemente: liste treba da budu prave liste, tabele prave tabele sa zaglavljem, a dugmad prava dugmad, a ne obojeni blokovi teksta na koje se može kliknuti. Semantički ispravan kod je osnova i za pristupačnost i za pretraživače. Jasna struktura pomaže i kod pisanja – o tome više u tekstu kako napisati tekstove za sajt koji prodaju.

Forme koje svako može da popuni

Kontakt forma je mesto gde sajt zarađuje, a upravo tu se najčešće greši. Nekoliko pravila:

• Svako polje ima vidljivu oznaku (label), a ne samo sivi tekst unutar polja koji nestaje čim korisnik počne da kuca.
• Obavezna polja su jasno označena, i to rečju, ne samo zvezdicom u boji.
• Poruka o grešci kaže šta tačno nije u redu i kako da se ispravi, i pojavljuje se pored polja.
• Forma traži samo ono što vam zaista treba – kraće forme se češće popunjavaju.
• CAPTCHA ne sme da bude jedina prepreka koju korisnik sa oštećenim vidom ne može da reši; postoje nevidljive i blaže zaštite od spama.
• Dugme za slanje ima jasan tekst („Pošalji upit“), a posle slanja korisnik dobija potvrdu.

Kako pristupačnost pomaže SEO-u

Pretraživači nemaju oči – oni čitaju kod, tekst, naslove i opise, slično kao čitač ekrana. Zbog toga se pristupačnost sajta i SEO u velikoj meri preklapaju:

Pristupačnost nije garancija boljih pozicija, ali uklanja prepreke i za ljude i za robote. Zato je u našem radu deo standardne SEO optimizacije i responzivnog dizajna, a ne dodatak koji se naplaćuje posebno.

Brza provera za 15 minuta

Ako želite da odmah proverite svoj sajt, uradite sledeće: pokrenite besplatnu Lighthouse proveru u Chrome pregledaču (odeljak Accessibility), prođite kroz sajt samo tastaturom, uvećajte stranicu na 200% i proverite da li se sve i dalje vidi, i pogledajte da li slike imaju alt tekst. Automatski alati hvataju samo deo problema, pa je ručna provera obavezna. Ne očekujte savršenstvo odjednom – krenite od početne strane, kontakt forme i stranica sa uslugama.

Zaključak

Pristupačnost sajta ne znači poseban „sajt za osobe sa invaliditetom“, već pažljivo napravljen sajt koji je čitljiv, jasan i upotrebljiv za sve. Kontrast, alt tekst, tastatura, naslovi i forme su osnova koju svaki poslovni sajt treba da ima, a nagrada su zadovoljniji posetioci, više upita i čistiji signali za Google. Ako niste sigurni kako vaš sajt stoji, pošaljite nam adresu – uradićemo besplatnu analizu i ponudu i reći vam šta treba popraviti prvo.