Pagalba
Prisijungti

Temų pritaikymas neįgaliesiems

Kai tinkinate savo temą, priimkite dizaino ir turinio sprendimus, kurie padeda išlaikyti Jūsų internetinę parduotuvę pritaikytą neįgaliesiems. Pritaikyta svetainė yra sukurta taip, kad ja galėtų naudotis visi, įskaitant žmones su negalia. Priimdami sprendimus dėl savo internetinės parduotuvės ir atsižvelgdami į pritaikymą neįgaliesiems, galite padėti užtikrinti įtraukią patirtį visiems savo klientams.

Toliau pateiktos gairės buvo sukurtos atsižvelgiant į interneto turinio pritaikymo neįgaliesiems gaires (WCAG). Kadangi kuriant pritaikytą svetainę reikia atsižvelgti į daug veiksnių, vien tik šių gairių laikymasis negarantuoja, kad Jūsų internetinė parduotuvė bus visiškai pritaikyta neįgaliesiems. Daugiau apie interneto pritaikymą neįgaliesiems galite sužinoti apsilankę WCAG svetainėje arba peržiūrėję toliau pateiktus išteklius.

Šiame puslapyje

Teksto pritaikymas neįgaliesiems

Svarbu, kad Jūsų internetinės parduotuvės tekstas būtų įskaitomas klientams, turintiems regėjimo sutrikimų arba kuriems sunku skaityti tankius teksto blokus.

Spalvų kontrastas

Kai redaguojate savo internetinės parduotuvės spalvas, įsitikinkite, kad visas tekstas yra pritaikytas klientams, kurie yra daltonikai arba turi kitų regėjimo sutrikimų. Šie klientai pasikliauja tinkamu spalvų kontrastu, kad vizualiai atskirtų vieną dalyką nuo kito. Galite naudoti internetinį kontrasto santykio įrankį, kad patikrintumėte skirtingų parduotuvės dalių kontrastą.

Toliau pateiktame pavyzdyje teksto kontrasto santykis su fonu yra 2,4:1 ir kai kuriems klientams jį sunku perskaityti.

Šviesiai pilko teksto blokas baltame fone.

Kitame pavyzdyje teksto kontrasto santykis yra 4,8:1 ir daugeliui klientų jį lengviau perskaityti.

Tamsiai pilko teksto blokas baltame fone.

Patikrinkite viso teksto, įskaitant pagrindinį tekstą, antraštes, nuorodas ir formos laukus, kontrastą. Laikykitės šių gairių:

  • Pagrindinio teksto ir mygtukų teksto spalvos kontrasto santykis su fonu yra ne mažesnis kaip 4,5:1.
  • Antraščių ir kito didelio teksto (šrifto dydis 24 px ir didesnis) spalvos kontrasto santykis su fonu yra ne mažesnis kaip 3:1.
  • Viso teksto, esančio ant paveikslėlių, įskaitant skaidrių demonstracijas, reklamjuostes ir vaizdo įrašus, spalva turi pakankamą kontrasto santykį su fonu. Dideliam tekstui (šrifto dydis 24 px ir didesnis) kontrastas yra ne mažesnis kaip 3:1. Mažesniam tekstui kontrastas yra ne mažesnis kaip 4,5:1.
  • Ne teksto elementų, įskaitant įvesties rėmelius ir piktogramas, spalvos kontrasto santykis su fonu yra ne mažesnis kaip 3:1.

Teksto antraštės

Kai į puslapį pridedate antraštes naudodami raiškiojo teksto rengyklę, svarbu išlaikyti jų eiliškumą (1–6). Pagalbinės technologijos naudoja antraštes, kad perduotų, kaip sutvarkytas puslapio turinys. Lygių praleidimas, pvz., po 2 lygio antraštės einanti 4 lygio antraštė, gali klaidinti naudotojus. Laikykitės šios gairės:

  • Antraštės naudojamos nuoseklia tvarka ir lygiai nepraleidžiami.

Teksto dydis ir lygiavimas

Redaguodami temos tipografijos nustatymus, įsitikinkite, kad tekstas yra pakankamai didelis, kad klientai galėtų jį patogiai perskaityti.

Tekste taip pat turėtų būti vienodi tarpai tarp žodžių ir raidžių, kad jį būtų lengva skaityti. Toliau pateiktame pavyzdyje tekstas yra abipusiškai lygiuotas, dėl to atsiranda nevienodi tarpai tarp žodžių.

Teksto blokas, išlygiuotas pagal abu kraštus. Kiekviena teksto eilutė užpildo visą plotį, todėl tarp žodžių atsiranda nevienodi tarpai.

Kitame pavyzdyje tekstas išlygiuotas pagal kairįjį kraštą, todėl tarpai tarp žodžių yra vienodi.

Teksto blokas, išlygiuotas pagal kairįjį kraštą. Tarpai tarp kiekvieno žodžio yra vienodi.

Tinkindami teksto dydį ir lygiavimą, vadovaukitės šiomis gairėmis:

  • Minimalus pagrindinio teksto šrifto dydis yra 16 px atitikmuo.
  • Tekstas nelygiuojamas pagal abu kraštus. Taip lygiuojant tekstą atsiranda nevienodi tarpai tarp žodžių.

Teksto nuorodos

Teksto nuorodos turėtų būti pabrauktos arba turėti kitą vizualiai išsiskiriantį stilių, palyginti su įprastu tekstu. Kadangi kai kuriems klientams sunku atskirti spalvas, negalima pasikliauti vien spalvos pokyčiu norint atskirti nuorodą nuo įprasto teksto.

Teksto nuorodos turėtų būti atidaromos tame pačiame skirtuke. Nuorodos, kurios atidaromos naujame skirtuke ar lange, gali klaidinti, ypač mobiliuosiuose įrenginiuose, kuriuose senas langas nematomas, ir nėra įtraukios klientams, ypač tiems, kurie naudoja ekrano didinimo priemones arba yra mažiau techniškai išprusę.

Jei redaguojate savo temos stiliaus aprašą, įsitikinkite, kad nepašalinate teksto nuorodų stilių. Vadovaukitės šiomis gairėmis:

  • Teksto nuorodos yra pabrauktos arba turi kitą vizualinį skiriamąjį ženklą, kuris nėra vien tik spalva, kad klientai galėtų atskirti nuorodas nuo įprasto teksto.
  • Paspaudus teksto nuorodos atidaromos tame pačiame skirtuke.

Alternatyvus tekstas paveikslėliams

Kai į internetinę parduotuvę pridedate paveikslėlių, svarbu juos pritaikyti neregiams arba silpnaregiams klientams. Tai galite padaryti pridėdami alternatyvųjį tekstą, kuris tiksliai apibūdina kiekvieną paveikslėlį. Ekrano skaitytuvus naudojantys klientai pasikliauja alternatyviuoju tekstu, kad suprastų, kas pavaizduota Jūsų internetinės parduotuvės paveikslėliuose.

Galite pridėti alternatyvųjį tekstą prie savo produktų paveikslėlių „Shopify“ administratoriaus skydelyje. Galite pridėti alternatyvųjį tekstą prie kitų temos paveikslėlių temos redaktoriuje.

Kai pridedate alternatyvųjį tekstą prie paveikslėlio, gera praktika yra įsivaizduoti, kad apibūdinate paveikslėlį žmogui užmerktomis akimis. Padėkite jam susikurti vaizdą savo mintyse. Tai, kaip apibūdinsite paveikslėlį, taip pat priklauso nuo Jūsų tinklalapio konteksto. Pavyzdžiui, jei esate kelionių agentūra, paveikslėlį apibūdinsite kitaip, nei jei turite lauko įrangos parduotuvę. Pažvelkite į šį paveikslėlį:

Du draugai su kuprinėmis, apsikabinę vienas kitą, žiūri į vandenyną

Kelionių agentūros atveju galite nurodyti šalį ir regioną, kuriame keliauja du draugai, ir vandenyno ar jūros, į kurią jie žiūri, pavadinimą. Kita vertus, lauko įrangos parduotuvės atveju galite sutelkti dėmesį į dviejų draugų kuprinių prekių ženklus ir savybes.

Jei Jūsų verslas yra kelionių agentūra, tai netinkamo alternatyviojo teksto pavyzdys galėtų būti: „Du žmonės prie vandenyno“. Tos pačios agentūros atveju gero alternatyviojo teksto pavyzdys galėtų būti: „Du draugai keliauja Lagose, Portugalijoje, ir saulėtą dieną žiūri į smėlėtą Praia do Camilo įlanką“.

Skaidrių demonstracijos ir vaizdo įrašų pritaikymas neįgaliesiems

Kai į savo internetinę parduotuvę pridedate vaizdo įrašų, įsitikinkite, kad atsižvelgiate į silpnaregių, kurčių ar neprigirdinčių klientų arba klientų, kuriems gali pasireikšti vestibiuliarinio aparato sutrikimai, poreikius.

Kai kurie iš šių klientų pasikliauja ekrano skaitytuvų teksto įgarsinimo funkcija, kuri garsiai perskaito tinklalapio turinį. Papildomas garsas iš vaizdo įrašų ir muzikos, ypač kai jis netikėtas, gali apsunkinti šią patirtį. Kurtiems ar neprigirdintiems klientams prie vaizdo įrašų verta pridėti subtitrus, kad jie galėtų pasiekti turinį.

Klientams, turintiems vestibiuliarinio aparato sutrikimų, judantis turinys gali sukelti galvos svaigimą. Dėl šios priežasties svarbu, kad skaidrių demonstracijos ir vaizdo įrašai nebūtų paleidžiami automatiškai ir kad klientas galėtų valdyti skaidrių demonstraciją valdymo mygtukais.

Skaidrių demonstracijos

Kai į savo internetinę parduotuvę pridedate skaidrių demonstraciją, vadovaukitės šiomis gairėmis:

  • Skaidrių demonstracijos nepaleidžiamos automatiškai.
  • Jei skaidrių demonstracijos paleidžiamos automatiškai, jose turi būti valdikliai, kuriais klientai galėtų pristabdyti, pereiti prie kitos skaidrės arba sustabdyti skaidrių demonstraciją.

Vaizdo įrašai

Kai į savo internetinę parduotuvę pridedate vaizdo įrašą, vadovaukitės šiomis gairėmis:

  • Vaizdo įrašai nepaleidžiami automatiškai.
  • Jei vaizdo įrašai paleidžiami automatiškai, jų garsas yra išjungtas.
  • Vaizdo įrašai su garsu turi būti visiškai matomi ir neuždengti kitų puslapio elementų. Taip užtikrinama, kad subtitrai liktų matomi.
  • Vaizdo įrašams su dialogais turi būti pateikiamos teksto transkripcijos. Jos pateikiamos tame pačiame puslapyje arba kaip nuoroda į atskirą puslapį.

Šios gairės taip pat taikomos vaizdo įrašams, kurie yra skaidrių demonstracijoje.

Valdymas klaviatūra

Klientai, turintys regos ar judėjimo sutrikimų, gali naudoti klaviatūrą naršyti internete ir atlikti užduotis. Šie klientai pasikliauja vaizdiniu indikatoriumi, kuris parodo, kurioje tinklalapio vietoje yra klaviatūros fokusas. Toliau pateiktame pavyzdyje laukelis El. paštas turi vaizdinį fokuso indikatorių:

Kliento prisijungimo ekranas internetinėje parduotuvėje su laukeliais „El. paštas“ ir „Slaptažodis“. Laukelis „El. paštas“ apibrėžtas mėlynu kontūru.

Jei redaguojate savo temos stiliaus aprašą, įsitikinkite, kad nepašalinate klaviatūros fokuso stiliaus iš jokių puslapio elementų. Vadovaukitės šia gaire:

  • Visi interaktyvūs puslapio elementai turi aiškų vaizdinį indikatorių, kai juose yra klaviatūros fokusas. Šie elementai apima nuorodas, mygtukus ir formos laukelius.

Šaltiniai

Norėdami sužinoti daugiau apie žiniatinklio pritaikymą neįgaliesiems šiame straipsnyje aptartomis temomis, peržiūrėkite šiuos šaltinius.

Spalvų kontrasto šaltiniai

Teksto šaltiniai

Alternatyvaus teksto ištekliai

Skaidrių demonstracijų ir vaizdo įrašų ištekliai

Klaviatūros palaikymo ištekliai

Šiame skyriuje