Pomoć
Prijavi se

Pristupačnost za teme

Kada prilagođavate temu, birajte dizajn i sadržaj koji pomažu u održavanju pristupačnosti vaše internetske trgovine. Pristupačno mrežno mjesto dizajnirano je tako da ga svi mogu upotrebljavati, uključujući osobe s invaliditetom. Donošenje odluka za internetsku trgovinu uz uzimanje u obzir pristupačnosti može vam pomoći u pružanju uključivog iskustva svim vašim korisnicima.

Smjernice u nastavku izrađene su imajući na umu Smjernice za pristupačnost mrežnog sadržaja (WCAG). Budući da prilikom izrade pristupačnog mrežnog mjesta treba uzeti u obzir brojne čimbenike, samo pridržavanje smjernica u nastavku ne jamči da će vaša internetska trgovina biti u potpunosti pristupačna. Više o mrežnoj pristupačnosti možete saznati posjetom mrežnom mjestu smjernica WCAG ili u resursima navedenim u nastavku.

Na ovoj stranici

Pristupačnost teksta

Važno je da tekst u vašoj internetskoj trgovini bude čitljiv korisnicima s oštećenjem vida ili onima koji imaju poteškoća s čitanjem gustih blokova teksta.

Kontrast boja

Prilikom uređivanja boja u internetskoj trgovini provjerite je li sav tekst pristupačan korisnicima koji su daltonisti ili imaju neko drugo oštećenje vida. Ti se korisnici oslanjaju na odgovarajući kontrast boja kako bi vizualno razlikovali jednu stvar od druge. Možete upotrijebiti mrežni alat za omjer kontrasta kako biste provjerili kontrast različitih dijelova trgovine.

U donjem primjeru tekst ima omjer kontrasta 2,4:1 u odnosu na pozadinu i nekim je korisnicima teško čitljiv.

Blok svijetlosivog teksta i jednobojna bijela pozadina.

U sljedećem primjeru tekst ima omjer kontrasta 4,8:1 i lakše ga je čitati mnogim korisnicima.

Blok tamnosivog teksta na jednobojnoj bijeloj pozadini.

Ispitajte kontrast cjelokupnog teksta, uključujući glavni tekst, naslove, poveznice i polja obrasca. Pridržavajte se sljedećih smjernica:

  • Boja glavnog teksta i teksta na gumbima ima omjer kontrasta od najmanje 4,5:1 u odnosu na pozadinu.
  • Boja naslova i drugog velikog teksta (veličina fonta od 24 px naviše) ima omjer kontrasta od najmanje 3:1 u odnosu na pozadinu.
  • Boja cjelokupnog teksta preko slika, uključujući prezentacije, natpise i videozapise, ima dovoljne omjere kontrasta u odnosu na pozadinu. Za veliki tekst (veličina fonta od 24 px naviše) kontrast je najmanje 3:1. Za manji tekst kontrast je najmanje 4,5:1.
  • Boja netekstualnih elemenata, uključujući okvire za unos i ikone, ima omjer kontrasta od najmanje 3:1 u odnosu na pozadinu.

Tekstualni naslovi

Prilikom dodavanja naslova na stranicu pomoću uređivača obogaćenog teksta, važno je zadržati ih u ispravnom redoslijedu (1 – 6). Asistivne tehnologije upotrebljavaju naslove za prenošenje informacija o organizaciji sadržaja stranice. Preskakanje razina, na primjer naslova razine 2 nakon kojeg slijedi naslov razine 4, može zbuniti korisnike. Pridržavajte se sljedeće smjernice:

  • Naslovi se upotrebljavaju u ispravnom redoslijedu bez preskakanja razina.

Veličina i poravnanje teksta

Kada uređujete postavke tipografije teme, provjerite je li vaš tekst dovoljno velik da ga korisnici mogu ugodno čitati.

Tekst bi također trebao imati dosljedan razmak između riječi i slova kako bi bio lako čitljiv. U donjem primjeru tekst je poravnat obostrano, što stvara nedosljedan razmak između riječi.

Blok obostrano poravnatog teksta. Svaki redak teksta ispunjava prostor od početka do kraja, uzrokujući promjenjive razmake između riječi kako bi se tekst uklopio.

U sljedećem je primjeru tekst poravnat ulijevo, što stvara dosljedan razmak između riječi.

Blok teksta poravnat ulijevo. Između svake riječi postoji dosljedan razmak.

Prilikom prilagodbe veličine i poravnanja teksta pridržavajte se sljedećih smjernica:

  • Minimalna veličina fonta za glavni tekst jednaka je 16 px.
  • Poravnanje teksta nije obostrano. Obostrano poravnat tekst stvara nedosljedan razmak između riječi.

Tekstualne poveznice

Tekstualne poveznice trebale bi biti podcrtane ili vizualno istaknute drugačijim stilom u odnosu na običan tekst. S obzirom na to da neki korisnici imaju poteškoća s prepoznavanjem boja, ne možete se osloniti isključivo na promjenu boje kako biste razlikovali poveznicu od običnog teksta.

Tekstualne se poveznice trebaju otvarati u istoj kartici. Poveznice koje se otvaraju u novoj kartici ili prozoru mogu izazvati zabunu, osobito na mobilnim uređajima na kojima stari prozor nije vidljiv, te nisu inkluzivne za korisnike, a posebice za korisnike koji se služe povećalom zaslona ili su slabije tehnički potkovani.

Ako uređujete stilski list svoje teme, pazite da ne uklonite stilove tekstualnih poveznica. Pridržavajte se sljedećih smjernica:

  • Tekstualne su poveznice ili podcrtane ili imaju neku drugu vizualnu razliku koja nije isključivo boja, tako da korisnici mogu razlikovati poveznice od običnog teksta.
  • Tekstualne se poveznice klikom otvaraju u istoj kartici.

Alternativni tekst za slike

Prilikom dodavanja slika u internetsku trgovinu važno ih je učiniti pristupačnima korisnicima koji su slijepi ili slabovidni. To možete učiniti dodavanjem alternativnog teksta koji točno opisuje svaku sliku. Korisnici koji upotrebljavaju čitače zaslona oslanjaju se na alt. tekst za prenošenje informacija o sadržaju slika u vašoj internetskoj trgovini.

Možete dodati alt. tekst svojim slikama proizvoda u administratorskom alatu za Shopify. Možete dodati alt. tekst ostalim slikama u temi u alatu za uređivanje tema.

Kada dodajete alt. tekst slici, dobra je praksa zamisliti da sliku opisujete nekome tko drži zatvorene oči. Pomozite mu da stvori sliku u svojem umu. Način na koji opisujete sliku također ovisi o kontekstu vaše web-stranice. Na primjer, sliku biste mogli opisati drugačije ako vodite turističku agenciju u odnosu na trgovinu s opremom za aktivnosti na otvorenom. Razmotrite sljedeću sliku:

Dvoje prijatelja s ruksacima zagrljeni gledaju prema oceanu

Kao turistička agencija mogli biste navesti zemlju i regiju po kojoj dvoje prijatelja putuje te ime oceana ili mora u koje gledaju. S druge strane, u trgovini s opremom za aktivnosti na otvorenom mogli biste se usredotočiti na marke i značajke njihovih ruksaka.

Ako vodite turističku agenciju, primjer lošeg alt. teksta bio bi: „Dvoje ljudi ispred oceana.” Za tu istu agenciju primjer dobrog alt. teksta glasio bi: „Dvoje prijatelja putuje u Lagos u Portugalu, a sunčanog dana gledaju prema pješčanoj uvali na plaži Praia do Camilo.”

Pristupačnost prezentacija i videozapisa

Prilikom dodavanja videozapisa u internetsku trgovinu svakako uzmite u obzir potrebe slabovidnih i gluhih korisnika, onih oštećenog sluha te korisnika koji bi mogli biti osjetljivi na vestibularne poremećaje.

Neki od tih korisnika oslanjaju se na mogućnost pretvaranja teksta u govor na čitačima zaslona, koji naglas čitaju sadržaj web-stranice. Dodatni zvuk iz videozapisa i glazbe, pogotovo kada je neočekivan, može otežati to iskustvo. Za gluhe korisnike i korisnike oštećenog sluha preporučuje se dodavanje titlova u videozapise kako bi i oni mogli pristupiti sadržaju.

Korisnici s vestibularnim poremećajima mogu osjetiti vrtoglavicu zbog pomičnog sadržaja. Stoga je važno da se prezentacije i videozapisi ne reproduciraju automatski te da korisnik može upravljati prezentacijom pomoću kontrolnih gumba.

Prezentacije

Kada u svoju internetsku trgovinu dodajete prezentaciju, pridržavajte se sljedećih smjernica:

  • Prezentacije se ne reproduciraju automatski.
  • Ako se prezentacije reproduciraju automatski, onda sadrže kontrole prezentacije koje korisnici mogu upotrijebiti za pauziranje, pomicanje unaprijed ili zaustavljanje prezentacije.

Videozapisi

Kada u svoju internetsku trgovinu dodajete videozapis, pridržavajte se sljedećih smjernica:

  • Videozapisi se ne reproduciraju automatski.
  • Ako se videozapisi reproduciraju automatski, njihov je zvuk isključen.
  • Za videozapise sa zvukom, videozapis je u potpunosti vidljiv i nije zaklonjen drugim elementima stranice. Time se omogućuje da titlovi ostanu vidljivi.
  • Za videozapise koji sadrže dijalog dostupni su tekstualni transkripti. Oni su uključeni ili na samoj stranici ili putem poveznice na zasebnu stranicu.

Ove smjernice vrijede i za videozapise koji se nalaze unutar prezentacije.

Podrška za tipkovnicu

Korisnici s oštećenjem vida ili motorike mogu se pri navigaciji i izvršavanju zadataka na mreži koristiti tipkovnicom. Ti se korisnici oslanjaju na vizualni pokazatelj pomoću kojeg vide na kojemu je dijelu web-stranice fokus njihove tipkovnice. U primjeru u nastavku polje E-pošta ima vizualni pokazatelj fokusa:

Zaslon za prijavu korisnika u internetsku trgovinu koji prikazuje polja obrasca za e-poštu i lozinku. Polje E-pošta uokvireno je plavom bojom.

Ako uređujete stilski list svoje teme, pazite da ni s jednog elementa stranice ne uklonite stil fokusa tipkovnice. Upotrijebite sljedeću smjernicu:

  • Svi interaktivni elementi stranice imaju jasan vizualni pokazatelj kada su u fokusu tipkovnice. U te se elemente ubrajaju poveznice, gumbi i polja obrazaca.

Resursi

Kako biste saznali više o web-pristupačnosti za teme o kojima se raspravlja u ovom članku, pogledajte sljedeće resurse.

Resursi za kontrast boja

  • Colors with Good Contrast, članak organizacije Web Accessibility Initiative
  • Contrast Ratio, mrežni alat pomoću kojeg možete saznati omjer kontrasta između dviju boja
  • Color Contrast Analyzer, aplikacija za izračun omjera kontrasta koja je dostupna za preuzimanje i koju je razvila tvrtka The Paciello Group

Resursi za tekst

Resursi za alternativni tekst

Resursi za prezentacije i videozapise

Resursi za podršku za tipkovnicu

U ovom odjeljku