Teemojen kaytettavyys
Kun mukautat teemaa, on hyvä tehdä suunnittelun ja sisällön suhteen valintoja, jotka auttavat varmistamaan verkkokaupan esteettömyyden。Esteetön sivusto on suunniteltu siten, että sitä voivat käyttää kaikki, myös toimintarajoitteiset käyttäjät。Verkkokaupan esteettömyys on olennaisen tärkeää osallistavan kokemuksen tarjoamiseksi asiakkaille。
Seuraavissa ohjeissa在huomioitu上网页内容无障碍指南(WCAG) -ohjeet．科斯卡esteettömän verkkosivuston luomisessa on otettava huomioon monia tekijöitä， seuraavien ohjeiden noudattaminen ei yksistään takaa verkkokauppasi täydellistä esteettömyyttä。Lisätietoja verkon esteettömyydestä saat WCAG:n verkkosivustolta tai tutustumallamainittuihin resseihin．
Vinkki: Jos olet kehittäjä， voit optimoida teemasi helppokäyttötoiminnot Shopifyn työkalujen ja parhaiden käytäntöjen avulla。卢lisää osoitteestaShopify.dev．
Tekstin esteettomyys
tärkeää että verkkokaupassasi oleva teksti On myös niiden asiakkaiden luettavissa, jotka ovat näkövammaisia tai joilla On vaikeuksia lukea tiheitä tekstikappaleita。
Varikontrasti
Kun muokkaat verkkokaupan värejä， varmista, että kaikki teksti on esteetöntä värisokeille tai muuten näkövammaisille asiakkaille。Näille asiakkaille värikontrastin on oltava riittävä， jotta he erottavat asiat visuaalisesti toisistaan。我爱你，我爱你，我爱你kontrastisuhdetyokalunavulla。
Seuraavassa esimerkissä tekstin kontrastisuhde taustaa vasten on 2,4:1, ja sen lukemminen on vaikeaa joillekin asiakkaille。
Seuraavassa esimerkissä tekstin kontrastisuhde上4,8:1,ja monien asiakkaiden上helpompi lukea sitä。
Testaa kaikkien tekstien kontrasti, mukaan lukien leipäteksti, otsikot, linkit ja lomakekentät。Noudata seuraavia ohjeita:
- Leipätekstien ja painiketekstien värin kontrastisuhde taustaa vasten vähintään 4,5:1。
- Otsikoiden ja muiden suurten tekstien (fonttikoko vähintään 24 pikseliä) värin kontrastisuhde taustaa vasten vähintään 3:1。
- Kaikkien kuvien, kuten diaesitysten, bannerien ja videoiden, päällä olevan tekstin värin kontrastisuhde taustaa vasten on riittävä。Suurten tekstien (fonttikoko vähintään 24 pikseliä) kontrastisuhde在vähintään 3:1。在vähintään 4,5:1。
- Muiden kuin tekstielementtien, kuten syöterajojen ja kuvakkeiden, värin kontrastisuhde taustaa vasten on vähintään 3:1。
Vinkki: Joissakin teemoissa voit sijoittaa tekstin ja kuvan väliin väripeiton, joka parantaa tekstin kontrastia ja luettavuutta。
Tekstiotsikot
鲲lisäät奥茨科伊塔西葫芦富文本编辑器Avulla，登录tärkeää pitää otsikkotasot järjestyksessä(1-6)。Avustavat teknologiat viestivät otsikkojen avulla, miten sivun sisältö on järjestetty。taojen ohittaminen esimerkiksi hyppäämällä otsikkotasolta 2 otsikkotasolle 4 voi olla hämmentävä käyttäjille。Noudata seuraavaa ohjetta:
- Käytä otsikkotasoja järjestyksessä äläkä hyppää taojen yli。
Tekstin koko ja tasaus
Kun muokkaat teeman typografia-asetuksia, varmista tekstin riittävä koko, jotta asiakkaat voivat lukea sitä mukavasti。
Jotta tekstiä在helppo lukea, myös sanojen ja kirjainten välistyksen在oltava johdonmukainen。真主安拉olevassa esimerkissä teksti on tasattu kumpaankin reunaan, mikä tekee sanojen välistyksestä epäjohdonmukaisen。
Seuraavassa esimerkissä teksti on tasattu vasemmalle, mikä tekee sanojen välistyksestä johdonmukaisen。
昆木卡塔特，特克斯汀，科科亚，塔乌斯塔，诺data seuraavia ohjeita:
- Leipätekstin vähimmäiskoko在16 pikseliä。
- Tekstiä ei ole tasattu molempiin reunoihin。Tasaus molempiin reunoihin tekee sanojen välistyksestä epäjohdonmukaisen。
Tekstilinkit
昆lisäät tekstiin linkkejä， varmista, että kaikki asiakkaasi tunnistavat ne。Koska joidenkin asiakkaiden关于vaikea erotta värejä， et voi erotta linkkiä tavallisesta tekstistä pelkällä värimuutoksella。Teksti kannattaa mitiivata, jotta linkki erottuu muusta tekstistä muutenkin kuin pelkän värin perusteella。
Jos muokkaat teeman tyylisivua, varmista, että et poista tekstilinkkien tyylejä。Noudata seuraavaa ohjetta:
- Tekstilinkit on reliivattu tai ne erotetaan muulla visuaalisella keinolla tavallisesta tekstistä。
Kuvien vaihtoehtoinen teksti
Kun lisäät kuvia verkkokauppaan, on tärkeää， että ne ovat myös sokeiden tai heikkonäköisten asiakkaiden käytettävissä。Voit tehdä tämän lisäämällä vaihtoehtoisen tekstin, joka kuvaa tarkasti kutakin kuvaa。Vaihtoehtoisen tekstin avulla näytönlukijaa käyttävät asiakkaat saavat tiedon verkkokaupassasi olvien kuvien sisällöstä。
我们Lisätä vaihtoehtoisen tekstin tuotekuviinShopify Administa。我们Lisätä vaihtoehtoisen tekstin teemasi muihin kuviinteemaeditorista。
鲲lisäät kuvaan vaihtoehtoisen tekstin, hyvänä käytäntönä在ajatella kuvan kuvailemista henkilölle, jolla在silmät kiinni。Auta häntä muodostamaan kuva mielessään。Kuvan kuvailutapa riippuu myös verkkosivun kontekstista。Voit esimerkiksi kuvata kuvaa eri tavalla, jos yrityksesi在matkatoimisto, kuin silloin, jos yrityksesi在ulkoiluvälinekauppa。Pohdi seuraavaa kuvaa:
Matkatoimistona saatat mainita maan ja alueen, jossa kaksi ystävystä matkustaa, ja nimetä meren, jota he katselevat。Ulkoiluvälinekauppana saatat taas keskittyä ystävysten reppujen merkkiin ja ominaisuuksiin。
Jos yrityksesi on matkatoimisto, huono vaihtoehtoinen teksti voisi olla esimerkiksi“Kaksi ihmistä meren äärellä。”Saman yrityksen osalta hyvä teksti voisi olla "Kaksi ystävystä matkailee Portugalin Lagosissa ja katselee Praia do Camilon aurinkoista hiekkarantaa "
Diaesitysten ja videoiden esteettömyys
Kun lisäät verkkokauppaasi videoita, varmista, että otat huomionheikkonäköisten ja kuurojen tai kuulovamaisten asiakkaiden tarpeet sekä asiakkaat, jotka saattavat olla alttiitatasapainohairioille．
奥萨näistä asiakkaista käyttääNäytönlukijoiden teksti puheeksi -toimintoa， joka lukee verkkosivsisällön ääneen。视频iden ja musiikin ylimääräinen - varsinkin odottamaton - äänisisältö voi tehdä tästä kokemuksesta hankalan。Kuuroja tai kuulovammaisia asiakkaita varten videoihin上hyvä lisätä kuvateksti, jotta asiakkaat voivat hyödyntää sisältöä。
Liikkuva sisältö voi aiheuttaa huimausta tasapainohäiriöistä kärsiville asiakkaille。Siksi上tärkeää， että diaesitykset ja视频eivät toistu automaattisesti。
Diaesitykset
昆lisäät verkkokauppaasi diaesityksen, noudata seuraavia ohjeita:
- Diaesityksiä ei toisteta automaattisesti。
- Jos diaesitys toistettaan automaattisesti, siinä on asetus, jonka avulla asiakas voi keskeyttää tai lopettaa esityksen。
Videot
Kun lisäät verkkokauppaasi videon, noudata seuraavia ohjeita:
- 录象塔，我是自动的。
- Jos video toisttaan automaattisesti, sen ääni on mykistetty。
- Ääntä sisältävissä videoissa videokuva on täysin näkyvissä eivätkä sivun muut elementit häiritse sitä。Näin kuvatekstit pysyvät näkyvissä。
- Vuoropuhelua sisältävien videoiden sisältö on saatavilla tekstinä。Tekstit ovat joko samalla sivulle tai linkitettyinä erilliselle sivulle。
Nämä ohjeet koskevat myös diaesityksiin sisältyviä videoita。
Nappaimistotuki
Asiakkaat, joilla on näkövamma tai motorinen häiriö， voivat käyttää navigointiin ja toimintojen suorittamiseen näppäimistöä。Nämä seuraavat visuaalista ilmaisinta, joka kertoo näppäimistön kohdistuksen sijainnin verkkosivulla。真主安拉olevassa esimerkissä visuaalinen kohdistusilmaisin onSahkoposti-kentassa:
乔斯·穆克卡特·蒂曼·泰利斯瓦，瓦尔米斯塔，että et poista näppäimistön kohdistustyyliä mistään sivuelementistä。Noudata seuraavaa ohjetta:
- Kaikissa vuorovaikutteisissa sivuelementeissä on selkeä visuaalinen ilmaisin näppäimistökohdistukselle。Näitä elementtejä ovat linkit, painikkeet ja lomakekentät。
Resurssit
Lisätietoja verkkosivuston esteettömyydestä ja tässä artikkelissa käsitellyistä aiheista saat seuraavista respsseista。
Värikontrastia koskevat revissit
- 对比性强的颜色-网页无障碍倡议artikkeli
- 对比度- verkkotyökalu, jonka avulla voit selvittää kahden värin välisen kontrastisuhteen
- 色彩对比分析仪- Paciello集团kehittämä ladattava kontrastisuhdesovellus
Tekstiä koskevat revissit
- 16像素字体大小:用于主体复制。否则就是一个代价高昂的错误-砸杂志洋蓟
- 文本对齐方式- Paciello Group Web目标:n artikkeli
- 链接的外观- Web AIM:n artikkeli
- 使用标题的内容结构- Web AIM:n artikkeli
Vaihtoehtoista tekstiä koskevat respssit
- 从文字到语音-网页无障碍倡议artikkeli
- 替代文本- Web AIM:n artikkeli
- 编写alt文本时的注意事项-中号洋蓟。
Diaesityksiä ja videoita koskevat复活
- 前庭神经障碍入门- A11Y计划洋蓟
- 从文字到语音-网页无障碍倡议artikkeli
- 视频字幕-网页无障碍倡议artikkeli
- 使用自动字幕- YouTube帮助洋蓟
- 字幕和字幕- Vimeo帮忙放洋蓟