Accessibility web stranice

Accessibility, odnosno pristupačnost web stranice, znači da sadržaj i funkcionalnosti weba može koristiti što širi krug ljudi.

To uključuje korisnike koji:

• ne vide ili slabije vide
• ne razlikuju određene boje
• ne mogu koristiti miš
• koriste tipkovnicu
• koriste screen reader
• imaju poteškoće s motorikom
• povećavaju tekst ili cijeli prikaz
• imaju privremenu ozljedu
• koriste web u otežanim uvjetima

Pristupačnost zato nije samo tema za vrlo specifičan broj korisnika.

Mnoge dobre accessibility prakse istovremeno poboljšavaju ukupni UX.

Jasniji sadržaj, veći klikabilni elementi, dobre forme i logična navigacija koriste gotovo svima.

WCAG kao okvir

Najpoznatiji okvir za web accessibility je WCAG, odnosno Web Content Accessibility Guidelines.

Smjernice su organizirane oko četiri osnovna principa.

Sadržaj treba biti:

• moguće percipirati
• moguće koristiti
• razumljiv
• tehnički dovoljno robustan za različite alate i tehnologije

To ne znači da vlasnik malog poslovnog weba mora naučiti cijeli standard napamet.

Ali osnovna pravila trebaju biti dio dizajna, razvoja i testiranja.

Accessibility od početka

Jedna od čestih grešaka je razmišljati o pristupačnosti tek nakon što je cijeli web završen.

Tada se accessibility pretvara u:

Što sada moramo popravljati?

Puno je jednostavnije odmah pravilno napraviti:

• naslove
• boje
• forme
• gumbe
• navigaciju
• HTML strukturu

nego kasnije popravljati desetke komponenti.

Accessibility treba biti dio procesa izrade web stranice, ne završni dodatak.

Kontrast teksta

Jedan od najčešćih problema je nedovoljan kontrast.

Primjer:

svijetlosivi tekst na bijeloj pozadini.

Može izgledati elegantno na dizajnerskom monitoru.

Ali nekim korisnicima može biti vrlo teško čitljiv.

Posebno ako je:

• tekst malen
• font tanak
• ekran lošije kvalitete
• korisnik na suncu
• vid korisnika slabiji

Tekst mora biti dovoljno jasno odvojen od pozadine.

Nije samo crno i bijelo

Dobar kontrast ne znači da svaki web mora koristiti:

crni tekst na bijeloj pozadini.

Možete koristiti cijeli brand sustav boja.

Samo treba provjeriti stvarni odnos:

• teksta
• pozadine
• buttona
• linkova
• inputa

Brand boja koja odlično radi kao veliki dekorativni element možda nije dobra za mali tekst.

Tekst preko slike

Poseban problem je tekst preko fotografije.

Jedan dio fotografije može biti taman.

Drugi svijetao.

Naslov preko nje možda izgleda dobro na jednom cropu, ali postane nečitljiv na drugom uređaju.

Moguća rješenja uključuju:

• overlay
• gradient
• solidnu površinu iza teksta
• drugačiji crop

Čitljivost treba biti važnija od efekta.

Boja nije jedini signal

Nemojte koristiti samo boju za prenošenje važne informacije.

Primjer forme:

zeleno polje = ispravno

crveno polje = greška

Korisnik koji ne razlikuje te boje možda neće razumjeti što se dogodilo.

Bolje je koristiti i:

• ikonu
• tekst
• jasan status

Primjer:

Unesite ispravnu e-mail adresu.

Boja može dodatno pomoći, ali ne smije biti jedini način komunikacije.

Linkovi u tekstu

Ako su svi linkovi samo malo drugačije plave nijanse od običnog teksta, dio korisnika ih može teško prepoznati.

Linkovi se mogu razlikovati kroz:

• underline
• boju
• hover stanje
• focus stanje

U dužem sadržaju treba biti jasno što je klikabilno.

Korisnik ne bi trebao istraživati svaki dio teksta mišem kako bi otkrio postoji li link.

Veličina teksta

Premali tekst otežava korištenje weba velikom broju ljudi.

Posebno treba paziti na:

• body tekst
• footer
• pomoćne opise
• forme
• disclaimere

Česta greška je da glavni body ima razumnu veličinu, ali onda sekundarni sadržaj padne na izrazito sitan font.

Sekundarna informacija ne mora biti jednako istaknuta.

Ali mora ostati čitljiva.

Zoom

Korisnik može povećati browser na:

• 125%
• 150%
• 200%

Web treba i dalje biti upotrebljiv.

To može otkriti probleme poput:

• preklapanja teksta
• nestalih gumba
• horizontalnog scrolla
• navigacije koja više ne stane

Zato je zoom test koristan i za accessibility i za responsive testiranje.

Ne blokirajte zoom

Mobilni web ne bi trebao nepotrebno onemogućavati korisniku povećavanje sadržaja.

Ako netko treba zoom kako bi pročitao informacije, stranica mu to treba omogućiti.

Design ne bi trebao pretpostavljati da svi korisnici vide jednako.

Keyboard navigacija

Velik dio weba trebao bi biti moguće koristiti bez miša.

Jednostavan test:

Odmaknite miš i koristite samo tipku Tab.

Možete li:

• otvoriti navigaciju
• doći do linkova
• aktivirati gumbe
• ispuniti formu
• koristiti modal
• poslati upit

Ako ne možete, postoji accessibility problem.

Tab redoslijed

Tipka Tab treba korisnika voditi logičnim redoslijedom.

Primjer:

Logo
↓
Navigacija
↓
CTA
↓
Glavni sadržaj
↓
Forma
↓
Footer

Ako focus nasumično skače s headera na footer pa nazad u hero sekciju, iskustvo je vrlo teško pratiti.

Vizualni i funkcionalni redoslijed trebaju biti usklađeni.

Focus mora biti vidljiv

Jedna od najčešćih pogrešaka u CSS-u je ukloniti outline jer:

ružno izgleda.

Primjer:

outline: none;

Ako ga uklonite bez odgovarajuće zamjene, keyboard korisnik više ne zna koji je element trenutno odabran.

Focus stanje treba biti jasno vidljivo.

Može biti dizajnirano tako da odgovara brandu.

Ali mora postojati.

Focus nije hover

Hover i focus nisu ista stvar.

Mouse korisnik vidi hover.

Keyboard korisnik treba focus.

Ako button ima lijepi hover efekt, ali nema nikakav focus prikaz, dio korisnika gubi važan signal.

Svaka interaktivna komponenta treba imati odgovarajuća stanja.

Skip link

Na stranicama s velikom navigacijom može biti korisno omogućiti korisniku da preskoči ponavljajuće elemente i odmah ode na glavni sadržaj.

Primjer:

Preskoči na sadržaj

Takav link često nije vidljiv dok ne dobije keyboard focus.

Za mouse korisnika ne smeta.

Keyboard i screen-reader korisniku može značajno ubrzati korištenje stranice.

Koristite pravi button

Ako nešto radi kao gumb, koristite semantički button element.

Nemojte napraviti:

<div>Klikni ovdje</div>

i zatim JavaScriptom simulirati button ako nema stvarnog razloga.

Pravi HTML button već daje browseru mnogo očekivanog ponašanja:

• keyboard podršku
• focus
• semantiku
• interakciju

Native HTML često daje accessibility gotovo besplatno.

Link ili button?

Jednostavno pravilo:

Link

Vodi korisnika na drugu lokaciju.

Button

Izvršava akciju.

Primjer:

Pogledajte cijene → link

Otvori menu → button

Vizualno oba mogu izgledati slično.

Ali semantički imaju različitu ulogu.

Semantički HTML

HTML elementi imaju značenje.

Primjeri:

• header
• nav
• main
• article
• section
• footer

Njihovo pravilno korištenje pomaže browserima i assistive tehnologijama razumjeti strukturu stranice.

Ako je cijeli web sastavljen od generičkih div elemenata, vizualno može izgledati identično.

Ali struktura je siromašnija.

Naslovi

Heading struktura također je važna.

Primjer:

H1 – Izrada web stranica

H2 – Što uključuje usluga

H3 – Responsive dizajn

H3 – SEO temelji

H2 – Proces izrade

To ima jasnu hijerarhiju.

Naslovi ne trebaju biti određeni samo prema tome koja veličina fonta izgleda dobro.

Ako želite mali vizualni naslov, to se može riješiti CSS-om.

Semantička razina treba pratiti strukturu sadržaja.

Jedan H1?

Za tipičnu poslovnu ili blog stranicu najčešće ima smisla imati jedan jasan glavni H1 koji opisuje glavnu temu stranice.

Ispod njega gradimo logičnu hijerarhiju H2 i H3 naslova.

To koristi:

• korisnicima
• screen readerima
• organizaciji sadržaja
• SEO-u

Struktura sadržaja i accessibility često idu u istom smjeru.

Alt tekst

Slike koje prenose relevantnu informaciju trebaju imati odgovarajuću tekstualnu alternativu.

Primjer fotografije:

Screenshot početne stranice web trgovine prikazane na desktopu i mobitelu.

To daje smisleni kontekst ako korisnik ne vidi sliku.

Alt nije mjesto za SEO spam.

Loše:

web stranica izrada web stranica SEO Osijek najbolja web stranica

To ne pomaže korisniku.

Dekorativne slike

Ne treba svaka slika detaljan alt tekst.

Ako je element čisto dekorativan i ne prenosi nikakvu informaciju, assistive tehnologiji često nema potrebe čitati:

dekorativni zeleni krug u pozadini.

To samo stvara dodatnu buku.

Treba razlikovati:

• informativne slike
• funkcionalne slike
• dekorativne slike

Slika kao link

Ako je klikabilna slika jedini sadržaj linka, tekstualna alternativa treba korisniku dati informaciju kamo link vodi.

Primjer logotipa koji vodi na naslovnicu treba imati smisleno dostupno ime.

Screen reader ne bi trebao samo reći:

link, image123.

Ikone

Ikona bez teksta može biti nejasna.

Primjer:

• kanta
• olovka
• tri točkice
• strelica

Vizualni korisnik možda odmah razumije značenje.

Screen reader treba dobiti odgovarajući naziv.

Primjer:

Izbriši projekt

umjesto generičkog:

Button.

Nemojte duplicirati tekst

Ako button već vizualno sadrži:

Pošalji upit

ne treba screen readeru dati potpuno drugi naziv poput:

Kliknite ovdje za kontaktiranje naše tvrtke.

Accessible name treba odgovarati onome što korisnik vidi.

Dosljednost smanjuje zbunjenost.

Forme

Kontakt forma je jedno od najvažnijih mjesta za accessibility.

Svako polje treba imati jasan label.

Primjer:

E-mail adresa

Ne treba se osloniti samo na placeholder:

unesite email…

Jer placeholder nestaje kada korisnik počne pisati.

Korisnik tada može zaboraviti što se od njega tražilo.

Label i input

Vizualno prikazan label treba biti tehnički povezan s odgovarajućim inputom.

To omogućuje assistive tehnologijama razumjeti:

ovo polje je E-mail.

To također može povećati klikabilno područje kada korisnik klikne label.

Mali tehnički detalj s velikom praktičnom vrijednošću.

Obavezna polja

Ako je polje obavezno, korisniku to treba biti jasno.

Ne samo kroz crvenu boju.

Možete koristiti:

• tekst “obavezno”
• zvjezdicu uz odgovarajuće objašnjenje
• semantičku oznaku

Korisnik prije slanja treba znati koja polja mora ispuniti.

Error poruke

Forma ne treba reći samo:

Došlo je do pogreške.

Treba objasniti:

Unesite ispravnu e-mail adresu.

ili:

Polje Ime je obavezno.

Poruka treba biti povezana s problematičnim poljem.

Korisnik mora moći brzo pronaći i ispraviti problem.

Više o UX-u formi obradili smo u vodiču kako napraviti dobru kontakt formu.

Error nije samo crven

Ponovno vrijedi pravilo da boja nije dovoljna.

Možete kombinirati:

• boju
• ikonu
• tekst

Tako korisnik dobiva nekoliko jasnih signala.

Success poruke

Nakon uspješne akcije korisnik također treba dobiti jasan feedback.

Primjer:

Upit je uspješno poslan.

Ako se sadržaj promijeni samo vizualno bez odgovarajućeg statusa, assistive tehnologija možda neće odmah prenijeti korisniku da je akcija završena.

To je posebno važno kod dinamičkih React i JavaScript sučelja.

Placeholder nije label

Ovo zaslužuje ponoviti jer je vrlo česta dizajnerska praksa.

Forma:

[ Vaše ime ]

[ Email ]

[ Poruka ]

može izgledati minimalistički.

Ali nakon što korisnik počne unositi sadržaj, kontekst nestaje.

Dizajn forme ne treba žrtvovati jasnoću samo kako bi izgledao čišće.

Radio i checkbox

Klikabilno područje ne treba biti samo mala točka ili kvadratić.

Korisnik bi trebao moći kliknuti i label.

Primjer:

○ Izrada web stranice

Cijela opcija može biti jednostavna za odabir.

To koristi i korisnicima s motoričkim poteškoćama i svima koji koriste touch uređaj.

Touch targeti

Mali gumbi mogu biti problematični za velik broj korisnika.

Primjer:

X

za zatvaranje modala može vizualno biti ikona od 16 px.

Ali klikabilna površina može i treba biti veća.

Isto vrijedi za:

• hamburger
• checkbox
• carousel kontrole
• pagination
• tooltip ikone

Veći target ne znači nužno veći vizual.

Mobile accessibility

Mobilni accessibility nije posebna tema od responsive dizajna.

Primjerice, korisnik može povećati veličinu teksta na uređaju.

Što se događa s layoutom?

Može li:

• naslov stati
• button primiti tekst
• navigacija ostati funkcionalna

Mobile dizajn treba biti fleksibilan.

Ne samo prilagođen jednoj točnoj veličini fonta.

Modal

Modal je jedna od komponenti koju je lako napraviti vizualno dobro, ali accessibility loše.

Treba provjeriti:

• gdje ide focus nakon otvaranja
• može li korisnik koristiti Tab
• ostaje li focus unutar modala
• može li ga zatvoriti tipkovnicom
• kamo se focus vraća nakon zatvaranja

Ako keyboard korisnik otvori modal i zatim focus nestane iza njega, komponenta postaje vrlo teška za korištenje.

Escape

Kod standardnih modalnih dijaloga korisnik obično očekuje mogućnost zatvaranja tipkom Escape.

To je primjer predvidljivog ponašanja koje smanjuje potrebu za učenjem custom sučelja.

Nemojte izmišljati neobične interaction patterne bez dobrog razloga.

Dropdowni

Custom dropdown često izgleda ljepše od native select elementa.

Ali puno ga je teže pravilno implementirati.

Treba podržavati:

• keyboard
• focus
• odabir
• screen reader
• otvaranje i zatvaranje

Ako ne trebate stvarno custom ponašanje, native kontrola često je sigurniji izbor.

Accordion

Accordion također treba raditi tipkovnicom.

Naslov koji otvara sadržaj treba biti interaktivan na predvidljiv način.

Korisnik treba moći razumjeti:

• je li sadržaj otvoren
• je li zatvoren

Isto vrijedi za FAQ.

Vizualna strelica nije dovoljna informacija za sve korisnike.

Carousel

Carousel može imati značajne accessibility probleme.

Posebno ako:

• automatski mijenja slajdove
• nema pauzu
• kontrole nisu dostupne tipkovnicom
• sadržaj nije jasno označen

Ako carousel nema stvarnu vrijednost, možda je jednostavnije prikazati sadržaj bez njega.

Jednostavnije komponente često su i robusnije.

Automatsko kretanje

Sadržaj koji se:

• automatski pomiče
• blinka
• rotira
• nestaje

može otežati korištenje stranice.

Posebno ako korisnik nema mogućnost:

• pauzirati
• zaustaviti
• kontrolirati

Animacije ne smiju biti važnije od pristupa sadržaju.

Reduced motion

Neki korisnici u operativnom sustavu imaju postavku kojom traže smanjenu količinu animacije.

Web može poštovati tu preferenciju.

Primjerice:

• ukloniti veliki parallax
• smanjiti kompleksne tranzicije
• izbjeći nepotrebno pomicanje

To ne znači da svi korisnici moraju dobiti potpuno statičan web.

Možemo prilagoditi iskustvo prema njihovoj postavci.

Video sadržaj

Ako video sadrži govor ili važan audio sadržaj, titlovi mogu biti ključni za korisnike koji ga ne mogu čuti.

Titlovi pomažu i ljudima koji video gledaju:

• u javnom prostoru
• bez zvuka
• u bučnom okruženju

Još jedan primjer accessibility funkcionalnosti koja koristi puno širem krugu korisnika.

Tekst u videu

Ako važne informacije postoje samo u videu, korisnik koji ga ne može pogledati ili čuti može ih izgubiti.

Za ključne informacije često ima smisla imati i tekstualnu alternativu.

Posebno na poslovnim stranicama.

Video treba dopunjavati sadržaj, ne nužno ga potpuno zamijeniti.

Jezik stranice

HTML dokument treba imati pravilno definiran jezik.

Ako je web na hrvatskom, assistive tehnologija treba znati da sadržaj čita kao hrvatski.

To utječe na:

• izgovor
• screen readere
• interpretaciju sadržaja

Ako dio sadržaja mijenja jezik, i to se po potrebi može označiti.

Jasne poruke

Accessibility nije samo tehnička implementacija.

Sadržaj također treba biti razumljiv.

Izbjegavajte:

• nepotrebno kompleksne rečenice
• stručni žargon bez objašnjenja
• nejasne CTA-ove

Primjer:

Kliknite ovdje

je manje informativno od:

Pogledajte cijene

Jasnije pisanje poboljšava i accessibility i konverzije.

Konzistentnost

Ako isti element na jednom dijelu weba radi na jedan način, a drugdje potpuno drugačije, korisnik mora ponovno učiti sučelje.

Primjer:

plavi gumb jednom otvara modal.

Drugi put vodi na novu stranicu.

Treći put pokreće download.

Vizualni i interakcijski obrasci trebaju biti dosljedni.

Naslov stranice

Svaka stranica treba imati smislen browser title.

To pomaže korisniku razumjeti:

• koju stranicu je otvorio
• koji tab koristi

Posebno kada ima otvoreno puno tabova.

Dobar SEO title tako istovremeno ima i usability vrijednost.

Link “više”

Stranica može sadržavati deset kartica i svaki link glasi:

Saznajte više

Vizualni korisnik vidi kontekst kartice.

Screen-reader korisnik koji navigira kroz listu linkova može dobiti:

• Saznajte više
• Saznajte više
• Saznajte više

Puno korisnije može biti:

• Saznajte više o SEO optimizaciji
• Saznajte više o izradi web stranica

Ili tehnički pružiti odgovarajući accessible name.

Breadcrumb

Na dubljim webovima breadcrumb može pomoći korisniku razumjeti gdje se nalazi.

Primjer:

Naslovna → Usluge → SEO optimizacija

To može koristiti i:

• navigaciji
• strukturi
• SEO-u

Ponovno vidimo da accessibility često ide u istom smjeru kao dobra opća arhitektura weba.

CAPTCHA

Captcha može biti velika prepreka.

Posebno sustavi koji traže:

• prepoznavanje slika
• kompleksne zadatke

Spam zaštita je potrebna.

Ali ako postoji manje invazivna opcija poput honeypota ili drugih sustava, korisničko iskustvo može biti bolje.

Kontakt forma ne treba postati test prije nego što vam korisnik smije poslati poruku.

Timeout

Ako korisnik ima ograničeno vrijeme za:

• ispunjavanje forme
• checkout
• login

treba razmisliti što se događa korisniku kojem treba više vremena.

Automatski timeout bez upozorenja može stvoriti veliki problem.

Posebno ako se izgube svi uneseni podaci.

Autocomplete

Kod standardnih podataka kao što su:

• ime
• e-mail
• adresa
• telefon

browser autocomplete može značajno olakšati ispunjavanje.

To koristi svima.

Posebno mobilnim korisnicima i osobama kojima je unos podataka otežan.

Ne treba isključivati browser funkcionalnosti bez razloga.

Test screen readerom

Automatski audit nije dovoljan za sve accessibility probleme.

Vrijedi barem osnovno testirati web screen readerom.

Možete provjeriti:

• ima li stranica smisla bez gledanja
• jesu li linkovi razumljivi
• jesu li gumbi pravilno imenovani
• rade li forme
• postoji li logična heading struktura

Ne morate postati ekspert za svaki assistive alat kako biste pronašli očite probleme.

Test tipkovnicom

Ovo je možda najjednostavniji manualni accessibility test.

Otvorite stranicu.

Ne koristite miš.

Prođite je Tab tipkom.

Pitajte:

• vidim li focus
• mogu li otvoriti sve kontrole
• mogu li se vratiti
• mogu li poslati formu
• mogu li zatvoriti modal

Ako ne možete, problem je konkretan i vrlo lako reproducibilan.

Automatski alati

Lighthouse može dati osnovni accessibility audit.

Postoje i drugi alati koji automatski provjeravaju dio problema.

Takvi alati mogu pronaći:

• kontrast
• nedostajuće alt atribute
• određene ARIA probleme
• form labele
• strukturalne greške

Ali automatski test ne može odgovoriti na sve.

Može potvrditi:

slika ima alt tekst.

Ne mora znati je li taj alt tekst zapravo koristan.

100 nije garancija

Kao i kod performance testa, rezultat od 100 ne znači da je web savršeno pristupačan.

Automatski alat provjerava ono što može automatski utvrditi.

Stvarna pristupačnost zahtijeva i manualnu provjeru.

Zato Lighthouse treba koristiti kao pomoć.

Ne kao jedini dokaz.

ARIA

ARIA može pomoći kada native HTML nije dovoljan za kompleksniju komponentu.

Ali ARIA nije zamjena za kvalitetan HTML.

Česta greška je napraviti custom div komponentu i zatim pokušati velikom količinom ARIA atributa simulirati ono što bi standardni button riješio automatski.

Ako postoji native element koji radi ono što trebate, često je bolji početak.

Ne pretjerujte s ARIA-om

Više accessibility atributa ne znači automatski bolju pristupačnost.

Pogrešno korištena ARIA može čak dati assistive tehnologijama netočne informacije.

Prvo:

semantički HTML.

Zatim ARIA tamo gdje je stvarno potrebna.

Accessibility i SEO

Accessibility i SEO nisu ista stvar.

Ali imaju velik broj dodirnih točaka.

Primjerice:

• semantički HTML
• heading struktura
• alt tekst
• jasan sadržaj
• kvalitetna navigacija

mogu pomoći i korisnicima i tražilicama razumjeti stranicu.

To ne znači da accessibility treba raditi “zbog SEO-a”.

Primarni cilj je omogućiti kvalitetnije korištenje weba.

SEO može biti dodatna korist.

Accessibility i UX

Accessibility je zapravo jedan dio kvalitetnog korisničkog iskustva.

Ako:

• font nije čitljiv
• button je premalen
• error poruka je nejasna
• navigacija je kaotična

to može smetati velikom broju korisnika.

Zato se mnogi problemi accessibilityja pojavljuju i među najčešćim UX greškama.

Ne radite poseban “accessible mode”

Ponekad se pokušava napraviti poseban button:

Accessibility mode

koji potpuno mijenja web.

Bolje je da osnovni web od početka bude što pristupačniji.

Korisnik ne bi trebao prvo pronaći posebnu opciju kako bi mogao koristiti stranicu.

Accessibility nije alternativna verzija weba.

Treba biti dio osnovne verzije.

Overlay nije rješenje svega

Nije dovoljno instalirati widget i pretpostaviti da je cijeli web sada pristupačan.

Ako underlying HTML ima:

• lošu heading strukturu
• nefunkcionalnu keyboard navigaciju
• pogrešne forme
• neimenovane kontrole

jedan frontend overlay neće nužno riješiti stvarne probleme.

Najbolje rješenje je kvalitetna implementacija.

Što prvo provjeriti?

Kod postojećeg poslovnog weba krenuo bih od najčešćih i najvažnijih problema.

1. Kontrast

Je li sav tekst lako čitljiv?

2. Keyboard

Može li se cijeli glavni flow koristiti bez miša?

3. Focus

Je li jasno gdje se korisnik nalazi?

4. Naslovi

Postoji li logična H1-H2-H3 struktura?

5. Slike

Imaju li informativne slike smislen alt?

6. Forme

Imaju li inputi jasne labele i error poruke?

7. Interakcije

Rade li menu, modal i accordion tipkovnicom?

8. Zoom

Radi li web na povećanom prikazu?

9. Mobile

Jesu li touch targeti dovoljno praktični?

10. Automatizirani audit

Postoje li dodatni problemi koje alati mogu brzo pronaći?

Accessibility checklist

Prije objave možemo imati jednostavnu checklistu.

Sadržaj

• H1 je jasan
• heading struktura je logična
• linkovi imaju smislen tekst
• sadržaj je razumljiv

Vizual

• kontrast je dovoljan
• tekst je čitljiv
• boja nije jedini signal
• focus je vidljiv

Slike

• relevantne slike imaju alt
• dekorativne slike ne stvaraju nepotrebnu buku

Navigacija

• radi tipkovnicom
• redoslijed focusa je logičan
• mobile menu je dostupan

Forme

• svaki input ima label
• required polja su jasna
• error poruke su konkretne
• status slanja je vidljiv

Komponente

• modal radi tipkovnicom
• accordion radi tipkovnicom
• carousel se može kontrolirati
• custom kontrole imaju jasnu semantiku

Responsive

• zoom ne razbija layout
• touch targeti su praktični
• sadržaj ne nestaje na manjim ekranima

Accessibility nije jednom gotov

Web se nakon objave mijenja.

Dodaju se:

• novi članci
• nove slike
• forme
• pluginovi
• komponente
• landing stranice

Zato accessibility nije provjera koja se napravi jednom i zauvijek.

Novi sadržaj može ponovno unijeti probleme.

Primjerice, developer napravi kvalitetan template, ali urednik kasnije objavi:

• sliku bez alta
• nejasan link
• tekst vrlo slabog kontrasta

Potrebna su i pravila uređivanja sadržaja.

Pristupačnost je dio kvalitete

Dobar poslovni web treba biti:

• jasan
• brz
• responzivan
• jednostavan za korištenje
• pristupačan što širem broju korisnika

Accessibility zato ne treba promatrati kao dodatni sloj koji radimo samo radi checkliste.

Velik dio dobrih accessibility praksi jednostavno je kvalitetan web development.

Jasan HTML.

Dobre forme.

Čitljiv sadržaj.

Predvidljiva navigacija.

Vidljiv focus.

Elementi koje je lako koristiti.

To su stvari od kojih imaju korist svi korisnici.

Ako želite provjeriti ponašanje stranice kroz različite veličine ekrana, pročitajte responsive dizajn – što treba testirati.

Za širu analizu korisničkog iskustva pogledajte najčešće UX greške na web stranicama.

Ako planirate novi poslovni web, pogledajte naše pakete i cijene izrade web stranica.