Kebolehcapaian untuk tema

Apabila anda menyesuaikan tema anda, ia adalah idea yang baik untuk membuat pilihan reka bentuk dan kandungan yang membantu mengekalkan kebolehcapaian kedai dalam talian anda. Laman web yang boleh dicapai direka supaya ia boleh digunakan oleh semua orang, termasuk orang kelainan upaya. Kebolehcapaian untuk kedai dalam talian anda adalah penting untuk menyediakan pengalaman yang inklusif bagi pelanggan anda.

Garis panduan berikut dicipta dengan mempertimbangkan tentang Garis Panduan Kebolehcapaian Kandungan Web (WCAG). Oleh kerana terdapat banyak faktor yang perlu dipertimbangkan ketika mencipta laman web yang boleh dicapai, kepatuhan terhadap garis panduan di bawah ini tidak menjamin kedai dalam talian anda dapat dicapai sepenuhnya. Anda boleh mengetahui lebih lanjut tentang kebolehcapaian web dengan melayari laman web WCAG, atau dengan melihat sumber yang disenaraikan di bawah.

Kebolehaksesan teks

Penting bahawa teks di kedai dalam talian anda boleh dibaca untuk pelanggan yang cacat penglihatan atau yang mengalami kesulitan membaca blok teks yang padat.

Kontras warna

Apabila anda mengedit warna untuk kedai dalam talian anda, pastikan semua teks anda dapat diakses oleh pelanggan yang buta warna atau cacat penglihatan. Pelanggan-pelanggan ini bergantung pada kontras warna yang mencukupi untuk membezakan satu perkara dengan visual yang lain. Anda boleh menggunakan alat nisbah kontras dalam talian untuk menyemak kontras bahagian-bahagian kedai anda yang berlainan.

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

Satu blok teks kelabu pudar dan latar belakang putih pepejal.

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

Blok teks kelabu gelap pada latar belakang putih pepejal.

Uji kontras semua teks, termasuk teks badan, pengepala, pautan, dan medan borang. Gunakan garis panduan berikut:

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

Pengepala teks

Apabila anda menambah pengepala kepada halaman anda dengan editor teks aneka, adalah penting untuk menyimpannya secara berurutan (1 - 6). Pengepala digunakan oleh teknologi bantuan untuk menyampaikan cara kandungan halaman diatur. Melangkaui tahap, seperti tahap pengepala 2 yang diikuti dengan tahap pengepala 4, boleh mengelirukan pengguna. Gunakan garis panduan berikut:

  • Tajuk digunakan dalam urutan yang berturutan dan tidak melangkaui tahap.

Saiz dan penjajaran teks

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

Teks juga harus mempunyai jarak yang tekal antara perkataan dan huruf untuk memudahkan pembacaan. Dalam contoh di bawah, penjajaran teks adalah terwajar, yang mewujudkan jarak yang tidak tekal di antara perkataan.

Satu blok teks diseimbangkan sejajar. Setiap baris teks mengisi ruang hujung ke hujung, memaksa pelbagai jarak antara perkataan untuk memastikan ia muat.

Dalam contoh seterusnya, penjajaran teks adalah di sebelah kiri, yang mencipta jarak yang sama antara perkataan.

Satu blok teks jajar kiri. Terdapat jarak yang tekal antara setiap perkataan.

Apabila menyesuaikan saiz dan penjajaran teks, gunakan garis panduan berikut:

  • Saiz fon minimum untuk teks badan adalah bersamaan dengan 16 piksel.
  • Penjajaran teks tidak diseimbangkan. Teks yang diseimbangkan mencipta jarak yang tidak sama antara perkataan.

Pautan teks

Apabila anda menambah pautan ke teks anda, pastikan ia dapat dikenal pasti oleh semua pelanggan anda. Disebabkan sesetengah pelanggan mempunyai masalah untuk melihat warna, anda tidak boleh bergantung pada perubahan warna sahaja untuk membezakan pautan dari teks biasa. Dalam contoh di bawah, teks Terokai cerita kami digariskan supaya ia tidak bergantung pada perubahan warna untuk berkomunikasi bahawa teks adalah satu link:

Mesej selamat datang yang menyatakan 'Terokai kisah kami dan temui orang yang memacu jenama kami'. Teks 'Terokai kisah kami' adalah berwarna merah dan digariskan untuk berkomunikasi dengannya adalah pautan.

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

  • Pautan teks sama ada digariskan atau mempunyai pembezaan visual lain daripada teks biasa.

Teks alternatif untuk imej

Apabila anda menambah imej ke kedai dalam talian anda, penting untuk menjadikannya mudah diakses oleh pelanggan yang buta atau mempunyai daya penglihatan yang rendah. Anda boleh melakukan ini dengan menambah teks alternatif yang secara tepat menerangkan setiap imej. Pelanggan yang menggunakan pembaca skrin bergantung pada teks alternatif untuk menyampaikan kandungan imej di kedai dalam talian anda.

Anda boleh menambah teks alt pada imej produk anda dari pentadbir Shopify. Anda boleh menambah teks alt ke imej lain dalam tema anda dari editor tema.

Apabila anda menambahkan teks alternatif kepada imej, amalan yang baik adalah membayangkan anda sedang menerangkan imej kepada seseorang yang menutup mata. Bantu mereka mencipta imej dalam fikiran mereka. Cara anda menerangkan imej juga bergantung pada konteks laman web anda. Sebagai contoh, anda mungkin menggambarkan imej yang berbeza jika perniagaan anda adalah agensi pelancongan berbanding jika perniagaan anda adalah sebuah kedai peralatan luar. Pertimbangkan imej berikut:

Dua kawan memakai beg sandang dengan tangan mereka di atas bahu satu sama lain, memandang ke laut

Untuk agensi pelancongan, anda mungkin merujuk kepada negara dan wilayah yang mana kedua-dua orang rakan tersebut sedang dalam perjalanan, dan kepada nama lautan atau laut yang mereka lihat. Sebaliknya, untuk kedai peralatan luaran, anda mungkin menumpukan pada jenama dan ciri-ciri beg galas dua orang kawan.

Jika perniagaan anda adalah sebuah agensi pelancongan, maka contoh teks alt lemah mungkin, "Dua orang di depan lautan". Untuk agensi yang sama, contoh teks alt yang baik mungkin, "Dua sahabat yang berpergian di Lagos, Portugal, melihat ke teluk yang berpasir di Praia do Camilo pada hari yang cerah".

Kebolehaksesan tayangan slaid dan video

Apabila anda menambah video ke kedai dalam talian anda, pastikan anda mempertimbangkan keperluan pelanggan dengan penglihatan yang rendah, pelanggan yang pekak atau sukar mendengar, atau pelanggan yang mungkin terdedah kepada gangguan vestibular.

Sesetengah pelanggan ini bergantung kepada teks untuk keupayaan ucapan pembaca skrin, yang membacakan kandungan halaman web dengan kuat. Audio tambahan dari video dan muzik, terutamanya apabila ia tidak dijangka, dapat membuat pengalaman ini sukar. Untuk pelanggan yang pekak atau sukar mendengar, itu adalah idea yang baik untuk menambahkan kapsyen tertutup kepada video anda supaya pelanggan boleh mengakses kandungan tersebut.

Pelanggan dengan gangguan vestibular boleh mengalami pening dengan kandungan yang bergerak. Oleh sebab itu, penting bahawa tayangan slaid dan video tidak dimainkan secara automatik.

persembahan slaid

Apabila anda menambah tayangan slaid ke kedai dalam talian anda, gunakan garis panduan berikut:

  • Tayangan slaid tidak dimainkan secara automatik.
  • Sekiranya persembahan slaid berfungsi secara automatik, maka ia termasuk tetapan yang boleh digunakan oleh pelanggan untuk menjeda atau menghentikan tayangan slaid.

Video

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

  • Video tidak dimainkan secara automatik.
  • Jika video dimainkan secara automatik, audio mereka dibisukan.
  • Untuk video yang merangkumi audio, video itu dapat dilihat sepenuhnya dan tidak dihalang oleh elemen halaman lain. Ini membenarkan kapsyen tertutup untuk kekal kelihatan.
  • Untuk video yang termasuk dialog, transkrip teks adalah tersedia. Ini termasuk sama ada pada halaman, atau dalam pautan ke halaman yang berasingan.

Garis panduan ini juga digunakan untuk video yang terdapat dalam tayangan slaid.

Sokongan papan kekunci

Pelanggan dengan kecacatan penglihatan atau motor mungkin menggunakan papan kekunci untuk menavigasi dan melengkapkan tugas dalam talian. Pelanggan-pelanggan ini bergantung pada penunjuk visual untuk berkomunikasi di tempat fokus papan kekunci mereka berada pada halaman web. Dalam contoh di bawah, medan E-mel mempunyai penunjuk fokus visual:

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

Jika anda mengedit lembaran gaya tema anda, pastikan anda tidak mengalih keluar gaya fokus papan kekunci dari sebarang elemen halaman. Gunakan garis panduan berikut:

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

Sumber

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

Sumber kontras warna

Sumber teks

Sumber teks alternatif

Tayangan slaid dan sumber video

Sumber sokongan papan kekunci

Sedia untuk mula menjual dengan Shopify?

Cuba secara percuma