Bantuan
Log masuk

Kebolehcapaian untuk tema

Apabila anda menyesuaikan tema anda, buat pilihan reka bentuk dan kandungan yang membantu dalam memastikan kedai dalam talian anda boleh dicapai. Laman web yang boleh dicapai direka bentuk supaya dapat digunakan oleh semua orang, termasuk golongan kurang upaya. Membuat pilihan untuk kedai dalam talian anda dengan mengambil kira ciri kebolehcapaian dapat membantu anda menyediakan pengalaman yang inklusif untuk semua pelanggan anda.

Garis panduan di bawah dicipta dengan mengambil kira Garis Panduan Kebolehcapaian Kandungan Web (WCAG). Oleh sebab terdapat banyak faktor yang perlu dipertimbangkan semasa membuat laman web yang boleh dicapai, sekadar mengikut garis panduan di bawah tidak menjamin kedai dalam talian anda boleh dicapai sepenuhnya. Anda boleh mengetahui lebih lanjut tentang kebolehcapaian web dengan melawati laman web WCAG, atau dengan melihat sumber yang disenaraikan di bawah.

Pada halaman ini

Kebolehcapaian teks

Teks pada kedai dalam talian anda perlu boleh dibaca oleh pelanggan yang cacat penglihatan atau menghadapi kesukaran membaca blok teks yang padat.

Kontras warna

Apabila anda mengedit warna untuk kedai dalam talian anda, pastikan semua teks anda boleh dicapai oleh pelanggan yang rabun warna atau mempunyai masalah penglihatan lain. Pelanggan ini bergantung pada kontras warna yang mencukupi untuk membezakan satu perkara dengan perkara lain secara visual. Anda boleh menggunakan alat nisbah kontras dalam talian untuk menyemak kontras bagi pelbagai bahagian pada kedai anda.

Dalam contoh di bawah, teks tersebut mempunyai nisbah kontras 2.4:1 terhadap latar belakangnya dan sukar dibaca oleh sesetengah pelanggan.

Satu blok teks kelabu cerah dan latar belakang warna putih padu.

Dalam contoh seterusnya, teks mempunyai nisbah kontras 4.8:1, dan lebih mudah dibaca oleh ramai pelanggan.

Satu blok teks kelabu gelap pada latar belakang warna putih padu.

Uji kontras bagi semua teks, termasuk teks isi, tajuk, pautan dan medan borang. Gunakan garis panduan yang berikut:

  • Warna teks isi dan teks butang mempunyai nisbah kontras sekurang-kurangnya 4.5:1 terhadap latar belakangnya.
  • Warna tajuk dan teks besar yang lain (saiz fon 24 px ke atas) mempunyai nisbah kontras sekurang-kurangnya 3:1 terhadap latar belakangnya.
  • Warna bagi semua teks pada imej, termasuk tayangan slaid, sepanduk dan video, mempunyai nisbah kontras yang mencukupi terhadap latar belakangnya. Untuk teks yang besar (saiz fon 24 px ke atas), kontras mestilah sekurang-kurangnya 3:1. Untuk teks yang lebih kecil, kontras mestilah sekurang-kurangnya 4.5:1.
  • Warna elemen bukan teks, termasuk sempadan input dan ikon, mempunyai nisbah kontras sekurang-kurangnya 3:1 terhadap latar belakangnya.

Tajuk teks

Apabila anda menambahkan tajuk pada halaman anda dengan editor teks beraneka, tindakan mengekalkan tajuk mengikut urutan (1 – 6) amatlah penting. Tajuk digunakan oleh teknologi bantuan untuk menyampaikan maklumat tentang cara kandungan halaman disusun. Tindakan melangkau tahap, seperti tahap tajuk 2 yang diikuti oleh tahap tajuk 4, boleh mengelirukan pengguna. Gunakan garis panduan yang berikut:

  • Tajuk digunakan mengikut urutan dan tidak melangkau tahap.

Saiz dan jajaran teks

Apabila anda mengedit tetapan tipografi tema anda, pastikan teks anda cukup besar untuk dibaca dengan selesa oleh pelanggan.

Teks juga perlu mempunyai jarak yang konsisten antara perkataan dengan huruf untuk memudahkan pembacaan. Dalam contoh di bawah, jajaran teks adalah seimbang, ini menyebabkan jarak antara perkataan tidak konsisten.

Satu blok teks yang dijajarkan secara seimbang. Setiap baris teks mengisi ruang dari hujung ke hujung, memaksa jarak yang pelbagai di antara perkataan agar sepadan.

Dalam contoh seterusnya, jajaran teks diselaraskan ke kiri, perkara ini dapat menghasilkan jarak yang konsisten antara perkataan.

Satu blok teks dijajarkan ke kiri. Terdapat jarak yang konsisten di antara setiap perkataan.

Apabila menyesuaikan saiz dan jajaran teks, gunakan garis panduan yang berikut:

  • Saiz fon minimum untuk teks isi adalah bersamaan 16 px.
  • Jajaran teks tidak diseimbangkan. Teks yang seimbang mencipta jarak tidak konsisten antara perkataan.

Pautan teks

Pautan teks perlu digariskan atau mempunyai gaya berbeza secara visual yang lain berbanding dengan teks biasa. Oleh sebab sesetengah pelanggan mungkin mengalami kesukaran untuk melihat warna, anda tidak boleh bergantung pada pertukaran warna sahaja untuk membezakan sesuatu pautan daripada teks biasa.

Pautan teks sepatutnya dibuka pada tab yang sama. Pautan yang dibuka dalam tab atau tetingkap baharu boleh mengelirukan, terutamanya pada peranti mudah alih yang tetingkap lama tidak kelihatan, dan pautan teks ini juga tidak inklusif kepada pelanggan, khususnya pelanggan yang menggunakan pembesaran skrin atau kurang mahir secara teknikal.

Jika anda mengedit lembaran gaya tema anda, pastikan anda tidak mengalih keluar gaya pautan teks. Gunakan garis panduan yang berikut:

  • Pautan teks sama ada digariskan atau mempunyai pembeza visual lain dan tidak hanya pada warna agar pelanggan dapat membezakan pautan dengan teks biasa.
  • Pautan teks akan dibuka dalam tab yang sama apabila diklik.

Teks alternatif untuk imej

Apabila anda menambahkan imej pada kedai dalam talian anda, tindakan untuk menjadikannya boleh dicapai kepada pelanggan yang buta atau kurang penglihatan adalah sangat penting. Anda boleh melakukan perkara ini dengan menambahkan teks alternatif yang menghuraikan setiap imej dengan tepat. Pelanggan yang menggunakan pembaca skrin bergantung pada teks alt untuk menyampaikan kandungan imej pada kedai dalam talian anda.

Anda boleh menambahkan teks alt pada imej produk anda daripada pentadbir Shopify. Anda boleh menambahkan teks alt pada imej lain dalam tema anda daripada penyunting tema.

Apabila anda menambahkan teks alt pada imej, amalan yang baik ialah membayangkan bahawa anda sedang menerangkan imej tersebut kepada seseorang dengan keadaan mata mereka tertutup. Bantu mereka membayangkan imej tersebut dalam minda mereka. Cara anda menghuraikan imej juga bergantung pada konteks halaman web anda. Contohnya, anda mungkin menerangkan sesuatu imej dengan cara berbeza jika perniagaan anda merupakan agensi pelancongan berbanding dengan perniagaan kelengkapan luar. Pertimbangkan imej yang berikut:

Dua orang rakan yang memakai beg galas dengan saling merangkul tangan sambil melihat lautan

Untuk agensi pelancongan, anda mungkin boleh merujuk kepada negara dan rantau dua orang rakan tersebut pergi melancong serta nama lautan atau laut yang sedang dilihat oleh mereka. Sebaliknya, untuk kedai kelengkapan luar, anda mungkin boleh memfokuskan pada jenama dan ciri beg galas dua orang rakan tersebut.

Jika perniagaan anda ialah agensi pelancongan, contoh bagi teks alt yang tidak baik mungkin, "Dua orang di hadapan lautan." Untuk agensi yang sama, contoh bagi teks alt yang baik pula mungkin, "Dua orang rakan sedang melancong di Lagos, Portugal sambil memandang ke arah teluk berpasir Praia do Camilo pada hari yang cerah."

Kebolehcapaian tayangan slaid dan video

Apabila anda menambahkan video pada kedai dalam talian anda, pastikan anda mempertimbangkan keperluan pelanggan yang kurang penglihatan, pelanggan yang pekak atau mempunyai masalah pendengaran atau pelanggan yang mungkin menghidap masalah vestibular.

Sesetengah pelanggan ini bergantung pada keupayaan teks kepada pertuturan bagi pembaca skrin yang membaca kandungan halaman web dengan kuat. Audio tambahan daripada video dan muzik terutamanya sekiranya audio tersebut tidak dijangka boleh merumitkan lagi pengalaman ini. Untuk pelanggan yang pekak atau menghadapi masalah pendengaran, anda dinasihatkan untuk menambahkan sari kata tertutup pada video anda agar pelanggan tersebut dapat mengakses kandungan.

Pelanggan yang menghidap masalah vestibular boleh berasa pening dengan kandungan yang bergerak. Oleh itu, amat penting untuk tayangan slaid dan video tidak dimainkan secara automatik dan pelanggan boleh mengawal tayangan slaid tersebut dengan butang kawalan.

Tayangan slaid

Apabila anda menambahkan tayangan slaid pada kedai dalam talian anda, gunakan garis panduan yang berikut:

  • Tayangan slaid tidak dimainkan secara automatik.
  • Jika tayangan slaid dimainkan secara automatik, tayangan tersebut menyertakan kawalan tayangan slaid yang boleh pelanggan gunakan untuk menjeda, memajukan atau menghentikan tayangan slaid.

Video

Apabila anda menambah video pada kedai dalam talian anda, gunakan garis panduan berikut:

  • Video tidak dimainkan secara automatik.
  • Jika video dimainkan secara automatik, audio video disenyapkan.
  • Untuk video yang menyertakan audio, video tersebut dapat dilihat sepenuhnya dan tidak dihalang oleh elemen halaman yang lain. Ini membolehkan kapsyen tertutup kekal kelihatan.
  • Untuk video yang menyertakan dialog, transkrip teks tersedia. Transkrip ini disertakan sama ada pada halaman atau dalam pautan ke halaman yang berasingan.

Garis panduan ini terpakai juga pada video dalam tayangan slaid.

Sokongan papan kekunci

Pelanggan yang mengalami kecacatan penglihatan atau motor mungkin menggunakan papan kekunci untuk menavigasi dan melengkapkan tugas dalam talian. Pelanggan ini bergantung pada penunjuk visual untuk menyampaikan tumpuan papan kekunci mereka pada halaman web. Dalam contoh di bawah, medan E-mel mempunyai penunjuk tumpuan visual:

Skrin log masuk pelanggan pada kedai dalam talian yang menunjukkan medan borang untuk E-mel dan Kata Laluan. Medan E-mel digariskan dengan warna biru.

Jika anda menyunting lembaran gaya tema anda, pastikan anda tidak mengalih keluar gaya tumpuan papan kekunci daripada mana-mana elemen halaman. Gunakan garis panduan berikut:

  • Semua elemen halaman interaktif mempunyai penunjuk visual yang jelas apabila elemen tersebut mendapat tumpuan papan kekunci. Elemen ini termasuk pautan, butang dan medan borang.

Sumber

Untuk mengetahui lebih lanjut tentang kebolehcapaian web bagi topik yang dibincangkan dalam artikel ini, rujuk sumber berikut.

Sumber kontras warna

Sumber teks

Sumber teks alternatif

Sumber tayangan slaid dan video

Sumber sokongan papan kekunci

Dalam bahagian ini