Spletno dostopnost pogosto razumemo kot nujno zlo zaradi zakonodaje. Vendar tehnične prilagoditve za osebe z oviranostmi dejansko prinašajo boljšo prodajo. Čista koda in premišljen dizajn pomagata iskalnikom razumeti vsebino. Kupci pa do cilja pridejo hitreje in brez zmede.
Več kot le zakonska zahteva
Evropski akt o dostopnosti prinaša nova pravila. Če na to gledate samo kot na birokracijo, boste izgubili kupce. Usklajenost s standardi WCAG preprosto pomeni, da spletno mesto deluje za vse. Tako za slepe in slabovidne kot tudi za nekoga, ki brska po telefonu zunaj na močnem soncu.
Upoštevanje dostopnosti pri oblikovanju odpravi ovire pri uporabi strani. Manj preprek pomeni več zaključenih nakupov. Spletna stran mora biti jasna in mora delovati brez napak. To obdrži obiskovalce in poveča prodajo.
Barvni kontrast in zapuščanje strani
Slaba izbira kontrasta med besedilom in ozadjem je zelo pogosta napaka. Oblikovalci radi uporabijo svetlo sivo pisavo na beli podlagi za modernejši videz. Ta rešitev večinoma ne dosega zahtevanega razmerja 4.5:1.
Ljudje se pri branju slabo kontrastnega besedila naprezajo. Velikokrat ga sploh ne morejo prebrati in zato stran takoj zapustijo. Iskalniki to hitro zaznajo. Stopnja odboja pri takšnih straneh je pogosto višja za več kot 10 odstotkov v primerjavi s tistimi, ki upoštevajo WCAG standarde.
Težave v nakupnem procesu
Kontrast je še posebej pomemben pri gumbih in obrazcih. Če polje za vnos nima vidne obrobe ali uporablja samo začasno besedilo, ki ob kliku izgine, obiskovalec hitro naredi napako. Zmeda pri izpolnjevanju podatkov za plačilo je glavni razlog, da si ljudje premislijo glede nakupa.
Semantični HTML in iskalniki
Google in drugi iskalniki strani ne vidijo, ampak berejo njeno kodo. Iskalnik deluje podobno kot bralnik zaslona, ki ga uporabljajo slepi in slabovidni uporabniki. Za pravilno branje potrebujeta ustrezen HTML.
Ko je gumb narejen samo kot div element z dodanim stilom, bralnik zaslona ne ve, čemu služi. Tudi iskalnik težko razume njegovo vlogo na strani. Uporaba pravih HTML značk (button, nav, main, article) uredi strukturo. Kakovostna izdelava spletnih strani mora tehnično optimizacijo in uporabniško izkušnjo reševati hkrati.
ARIA oznake dodatno pojasnijo dinamične elemente. Če ima koda jasne opise posameznih stanj elementov, jo iskalniki lažje indeksirajo in pogosto uvrstijo višje med rezultati.
Podatki po izvedeni optimizaciji
Analiza konkretne spletne trgovine dobro prikaže učinke. Trgovina s tehnično opremo je imela 76 odstotkov zapuščenih košaric in 64-odstoten odboj na produktnih straneh. Konverzija je bila le 1,1-odstotna.
Pri pregledu kode so našli več napak:
- Glavni meni ni deloval brez miške.
- Filtri izdelkov niso imeli ARIA oznak, zato bralniki zaslona in iskalniki niso vedeli, kaj počnejo.
- Kontrast med cenami in ozadjem je bil prenizek (3.2:1).
- Fokusna stanja za izbrane elemente so bila izklopljena.
Ekipa je popravila te pomanjkljivosti. Barve so spremenili tako, da je kontrastno razmerje doseglo 5:1. Kodo so preuredili s semantičnimi značkami in omogočili premikanje po strani s tipkovnico. Obrazci za plačilo so dobili stalne oznake nad polji za vnos besedila.
Vpliv na konverzije
Odboj na produktnih straneh je hitro padel s 64 na 41 odstotkov. Ljudje so vsebino lažje brali in se dlje zadržali v trgovini. Zapuščenih košaric je bilo manj (padle so na 58 odstotkov).
Konverzija je zrasla na 2,4 odstotka. Zaradi boljše semantične strukture so iskalniki stran raje prikazovali in organski obisk se je povečal za 19 odstotkov. Prihodki so v tistem letu zrasli za 40 odstotkov ob enakem oglaševalskem proračunu.
Pogoste tehnične napake
Spletna mesta pogosto izgubljajo obiskovalce zaradi povsem osnovnih napak v kodi. Navigacija s tipkovnico je tipičen primer, saj veliko ljudi pri izpolnjevanju obrazcev uporablja tipko Tab. Včasih razvijalec v kodi skrije vizualni fokus (z ukazom outline: none v CSS), da bi stran izgledala lepše. S tem uporabniku onemogoči, da bi videl, na katerem polju se trenutno nahaja.
Fokusna stanja morajo biti jasno vidna. Namesto da jih skrijete, lahko uporabite barve podjetja in s tem poudarite aktivne elemente. Stran bo še vedno estetska, hkrati pa enostavna za uporabo.
Druga pogosta napaka je pomanjkanje alternativnih besedil pri slikovnem gradivu. Slike, ki nimajo ustreznega opisa, so za slepe in slabovidne uporabnike popolnoma neuporabne, saj bralnik zaslona ne more prepoznati njihove vsebine. Prav tako iskalniki ne morejo pravilno indeksirati vizualnih elementov brez teh opisov. Zato je dosledno dodajanje natančnih alt atributov ključnega pomena za izboljšanje uporabniške izkušnje in optimizacijo. To ne zahteva veliko časa, prinaša pa izjemno pozitivne rezultate pri organskem dosegu in splošni dostopnosti spletnega mesta.
Testiranje spletne dostopnosti
Redno preverjanje dostopnosti je pomembno. Avtomatizirana orodja za testiranje običajno odkrijejo manj kot tretjino napak. Za dobre rezultate je treba ročno pregledati kodo in preizkusiti stran zgolj s tipkovnico ter bralnikom zaslona.
Dostopna spletna stran je lahko vizualno zelo privlačna. Dobro narejena tehnična osnova obiskovalcem prihrani marsikateri zaplet. Ko stran nima nepotrebnih tehničnih ovir, se uporabniki na njej lažje znajdejo in več kupujejo.
