Pomoč
Prijava

Dostopnost za teme

Pri prilagajanju teme izbirajte dizajn in vsebino tako, da ohranite dostopnost svoje spletne trgovine. Dostopna spletna stran je zasnovana tako, da jo lahko uporabljajo vsi, vključno z invalidnimi osebami. Če pri sprejemanju odločitev o spletni trgovini upoštevate dostopnost, lahko s tem zagotovite vključujočo izkušnjo za vse svoje stranke.

Spodnje smernice so bile ustvarjene z upoštevanjem Smernic za dostopnost spletnih vsebin (WCAG). Ker je treba pri ustvarjanju dostopne spletne strani upoštevati veliko dejavnikov, zgolj upoštevanje spodnjih smernic ne zagotavlja, da bo vaša spletna trgovina v celoti dostopna. Več informacij o spletni dostopnosti lahko najdete na spletnem mestu WCAG ali v spodaj navedenih virih.

Na tej strani

Dostopnost besedila

Pomembno je, da je besedilo v vaši spletni trgovini berljivo za stranke z okvaro vida ali tiste, ki težko berejo goste bloke besedila.

Barvni kontrast

Ko urejate barve za svojo spletno trgovino, se prepričajte, da je vse besedilo dostopno strankam, ki so barvno slepe ali imajo druge okvare vida. Te stranke se zanašajo na ustrezen barvni kontrast, da vizualno ločijo posamezne elemente. Za preverjanje kontrasta različnih delov vaše trgovine lahko uporabite spletno orodje za preverjanje razmerja kontrasta.

V spodnjem primeru ima besedilo razmerje kontrasta 2,4:1 glede na ozadje, zato ga nekatere stranke težje preberejo.

Blok svetlo sivega besedila na povsem belem ozadju.

V naslednjem primeru ima besedilo razmerje kontrasta 4,8:1, zaradi česar je lažje berljivo za mnoge stranke.

Blok temno sivega besedila na povsem belem ozadju.

Preverite kontrast celotnega besedila, vključno z glavnim besedilom, naslovi, povezavami in polji obrazcev. Upoštevajte naslednje smernice:

  • Barva glavnega besedila in besedila na gumbih ima razmerje kontrasta vsaj 4,5:1 glede na ozadje.
  • Barva naslovov in drugega velikega besedila (velikost pisave 24 px in več) ima razmerje kontrasta vsaj 3:1 glede na ozadje.
  • Barva celotnega besedila, ki je prikazano čez slike, vključno z diaprojekcijami, pasicami in videoposnetki, ima ustrezen kontrast glede na ozadje. Za veliko besedilo (velikost pisave 24 px in več) je kontrast vsaj 3:1. Za manjše besedilo je kontrast vsaj 4,5:1.
  • Barva nebesedilnih elementov, vključno z obrobami vnosnih polj in ikonami, ima razmerje kontrasta vsaj 3:1 glede na ozadje.

Besedilni naslovi

Ko strani dodajate naslove z urejevalnikom obogatenega besedila, je pomembno, da ohranite njihovo zaporedje (1–6). Podporne tehnologije uporabljajo naslove, da posredujejo informacije o organiziranosti vsebine na strani. Izpuščanje ravni, na primer preskok z naslova 2. ravni na naslov 4. ravni, lahko uporabnike zmede. Upoštevajte naslednjo smernico:

  • Naslovi si sledijo v pravilnem zaporedju in ne preskakujejo ravni.

Velikost in poravnava besedila

Ko urejate tipografske nastavitve teme, poskrbite, da bo besedilo dovolj veliko, da ga bodo stranke lahko udobno brale.

Besedilo mora imeti tudi dosleden razmik med besedami in črkami za lažje branje. V spodnjem primeru je poravnava besedila obojestranska, kar ustvari nedosledne razmike med besedami.

Blok obojestransko poravnanega besedila. Vsaka vrstica besedila zapolni prostor od začetka do konca in tako izsili različne razmike med besedami, da se besedilo prilega.

V naslednjem primeru je besedilo poravnano levo, kar ustvari dosledne razmike med besedami.

Blok levo poravnanega besedila. Razmiki med besedami so povsod enaki.

Pri prilagajanju velikosti in poravnave besedila upoštevajte naslednje smernice:

  • Najmanjša velikost pisave za glavno besedilo je enakovredna 16 px.
  • Poravnava besedila ni obojestranska. Obojestranska poravnava ustvari nedosledne razmike med besedami.

Besedilne povezave

Besedilne povezave naj bodo podčrtane oziroma naj imajo drugačen vizualno opazen slog v primerjavi z navadnim besedilom. Ker nekatere stranke slabše vidijo barve, se za razlikovanje povezave od navadnega besedila ne zanašajte samo na spremembo barve.

Besedilne povezave se morajo odpirati v istem zavihku. Povezave, ki se odprejo v novem zavihku ali oknu, lahko povzročijo zmedo, zlasti v mobilnih napravah, kjer staro okno ni vidno. Prav tako niso vključujoče, zlasti do strank, ki uporabljajo povečavo zaslona ali pa so manj tehnično podkovane.

Če urejate datoteko s slogi za temo, poskrbite, da ne boste odstranili slogov besedilnih povezav. Upoštevajte naslednje smernice:

  • Besedilne povezave so podčrtane ali imajo nek drug vizualni razločevalnik, ki ni samo barvni, zato da stranke zlahka ločijo povezave od navadnega besedila.
  • Besedilne povezave se ob kliku odprejo v istem zavihku.

Nadomestno besedilo za slike

Ko v spletno trgovino dodajate slike, je pomembno, da so te dostopne tudi slepim in slabovidnim strankam. To lahko storite z dodajanjem nadomestnega besedila, ki natančno opiše vsako sliko. Stranke, ki uporabljajo bralnike zaslona, se pri razumevanju vsebine slik v spletni trgovini zanašajo na nadomestno besedilo.

Iz skrbnika Shopify lahko dodate nadomestno besedilo k slikam svojih izdelkov. Iz urejevalnika tem lahko dodate nadomestno besedilo drugim slikam v temi.

Ko sliki dodajate nadomestno besedilo, je dobro, da si predstavljate, da sliko opisujete nekomu, ki ima zaprte oči. Pomagajte mu ustvariti sliko v njegovih mislih. Način opisovanja slike je odvisen tudi od konteksta vaše spletne strani. Sliko bi na primer opisali drugače, če ste turistična agencija, kot če ste prodajalec opreme za aktivnosti na prostem. Razmislite o naslednji sliki:

Prijatelja z nahrbtniki sta objeta in zreta v ocean

Če bi šlo za turistično agencijo, bi lahko omenili državo in regijo, po kateri potujeta prijatelja, ter ime oceana ali morja, v katerega gledata. Če pa imate trgovino z opremo za aktivnosti na prostem, bi se lahko osredotočili na blagovne znamke in značilnosti njunih nahrbtnikov.

Če imate turistično agencijo, bi bil primer slabega nadomestnega besedila »Dve osebi pred oceanom«. Za isto agencijo pa bi bil primer dobrega nadomestnega besedila »Prijatelja med potovanjem po portugalskem Lagosu na sončen dan zreta v peščen zaliv Praia do Camilo«.

Dostopnost diaprojekcij in videoposnetkov

Ko v spletno trgovino dodate videoposnetke, ne pozabite upoštevati potreb slabovidnih strank, strank, ki so gluhe ali naglušne, in tistih, ki so morda dovzetne za vestibularne motnje.

Nekatere od teh strank se zanašajo na zmožnost pretvorbe besedila v govor na bralnikih zaslona, ki jim naglas preberejo vsebino spletne strani. Dodaten zvok iz videoposnetkov in glasba lahko otežita to izkušnjo, zlasti če sta nepričakovana. Za stranke, ki so gluhe ali naglušne, je priporočljivo, da videoposnetkom dodate podnapise, da lahko tudi te stranke dostopajo do vsebine.

Stranke z vestibularnimi motnjami imajo lahko ob premikajoči se vsebini občutek vrtoglavice. Zato je pomembno, da se diaprojekcije in videoposnetki ne predvajajo samodejno in da lahko stranka z ustreznimi gumbi upravlja predvajanje.

Diaprojekcije

Ko v spletno trgovino dodate diaprojekcijo, upoštevajte naslednje smernice:

  • Diaprojekcije se ne predvajajo samodejno.
  • Če se diaprojekcije predvajajo samodejno, vključujejo kontrolnike, ki jih lahko stranke uporabijo za začasno ustavitev, previjanje naprej ali zaustavitev diaprojekcije.

Videoposnetki

Ko v svojo spletno trgovino dodate videoposnetek, upoštevajte te smernice:

  • Videoposnetki se ne predvajajo samodejno.
  • Če se videoposnetki predvajajo samodejno, je njihov zvok izklopljen.
  • Pri videoposnetkih, ki vključujejo zvok, je videoposnetek v celoti viden in ga ne ovirajo drugi elementi strani. To omogoča, da podnapisi ostanejo vidni.
  • Pri videoposnetkih z dialogom so na voljo besedilni prepisi. Ti so vključeni na strani ali na povezavi do ločene strani.

Te smernice veljajo tudi za videoposnetke, ki so v diaprojekciji.

Podpora za tipkovnico

Stranke z okvaro vida ali gibalno oviranostjo lahko za krmarjenje in opravljanje nalog na spletu uporabljajo tipkovnico. Te stranke se zanašajo na vizualni indikator, ki prikazuje žarišče njihove tipkovnice na spletni strani. V spodnjem primeru ima polje E-pošta vizualni indikator žarišča:

Zaslon za prijavo stranke v spletni trgovini, ki prikazuje polji obrazca za e-pošto in geslo. Polje e-pošte je obrobljeno z modro barvo.

Če urejate datoteko s slogi svoje teme, pazite, da z elementov strani ne odstranite sloga žarišča tipkovnice. Upoštevajte to smernico:

  • Vsi interaktivni elementi strani imajo jasen vizualni indikator, ko so v žarišču tipkovnice. Ti elementi vključujejo povezave, gumbe in polja obrazcev.

Viri

Če želite izvedeti več o spletni dostopnosti za teme, obravnavane v tem članku, si oglejte te vire.

Viri za barvni kontrast

Viri za besedilo

Viri za nadomestno besedilo

Viri za diaprojekcijo in videoposnetke

Viri za podporo za tipkovnico

V tem razdelku