Bantuan
Masuk

Aksesibilitas untuk tema

Saat Anda menyesuaikan tema, buatlah pilihan desain dan konten yang membantu menjaga agar toko online Anda tetap dapat diakses. Situs web yang dapat diakses dirancang agar dapat digunakan oleh semua orang, termasuk penyandang disabilitas. Membuat pilihan untuk toko online Anda dengan mempertimbangkan aksesibilitas dapat membantu Anda memberikan pengalaman inklusif bagi semua pelanggan Anda.

Panduan di bawah ini dibuat dengan mempertimbangkan Panduan Aksesibilitas Konten Web (WCAG). Karena ada banyak faktor yang perlu dipertimbangkan saat membuat situs web yang dapat diakses, mengikuti panduan di bawah ini saja tidak menjamin bahwa toko online Anda dapat diakses sepenuhnya. Anda dapat mempelajari selengkapnya tentang aksesibilitas web dengan mengunjungi situs web WCAG, atau dengan melihat sumber daya yang tercantum di bawah.

Di halaman ini

Aksesibilitas teks

Penting agar teks di toko online Anda dapat dibaca oleh pelanggan yang memiliki gangguan penglihatan atau yang kesulitan membaca blok teks yang padat.

Kontras warna

Saat Anda mengedit warna untuk toko online Anda, pastikan semua teks Anda dapat diakses oleh pelanggan yang buta warna atau memiliki gangguan penglihatan. Pelanggan ini mengandalkan kontras warna yang memadai untuk membedakan satu hal dari yang lain secara visual. Anda dapat menggunakan alat rasio kontras online untuk memeriksa kontras berbagai bagian toko Anda.

Pada contoh di bawah, teks memiliki rasio kontras 2,4:1 terhadap latar belakangnya, dan sulit dibaca oleh sebagian pelanggan.

Sebuah blok teks abu-abu muda dan latar belakang putih polos.

Pada contoh berikutnya, teks memiliki rasio kontras 4,8:1, dan lebih mudah dibaca oleh banyak pelanggan.

Sebuah blok teks abu-abu tua di latar belakang putih polos.

Uji kontras semua teks, termasuk teks isi, judul, tautan, dan kolom formulir. Gunakan panduan berikut:

  • Warna teks isi dan teks tombol memiliki rasio kontras setidaknya 4,5:1 terhadap latar belakangnya.
  • Warna judul dan teks besar lainnya (ukuran font 24 piksel ke atas) memiliki rasio kontras setidaknya 3:1 terhadap latar belakangnya.
  • Warna semua teks di atas gambar, termasuk tayangan slide, spanduk, dan video, memiliki rasio kontras yang cukup terhadap latar belakangnya. Untuk teks besar (ukuran font 24 piksel ke atas), kontrasnya minimal 3:1. Untuk teks yang lebih kecil, kontrasnya minimal 4,5:1.
  • Warna elemen non-teks, termasuk batas input dan ikon, memiliki rasio kontras setidaknya 3:1 terhadap latar belakangnya.

Judul teks

Saat Anda menambahkan judul ke halaman Anda dengan editor teks kaya, penting untuk menjaganya dalam urutan berurutan (1 - 6). Judul digunakan oleh teknologi asistif untuk mengomunikasikan bagaimana konten halaman diatur. Melewatkan level, seperti judul level 2 diikuti oleh judul level 4, dapat membingungkan pengguna. Gunakan panduan berikut:

  • Judul digunakan secara berurutan dan tidak melewatkan level.

Ukuran dan perataan teks

Saat Anda mengedit pengaturan tipografi tema, pastikan teks Anda cukup besar agar dapat dibaca dengan nyaman oleh pelanggan.

Teks juga harus memiliki spasi yang konsisten antar kata dan huruf agar mudah dibaca. Pada contoh di bawah, perataan teksnya adalah rata kanan-kiri, yang menciptakan spasi yang tidak konsisten antar kata.

Sebuah blok teks dengan perataan rata kanan-kiri. Setiap baris teks mengisi ruang dari ujung ke ujung, yang memaksa adanya variasi spasi antar kata agar pas.

Pada contoh berikutnya, perataan teksnya adalah rata kiri, yang menciptakan spasi yang konsisten antar kata.

Sebuah blok teks dengan perataan rata kiri. Ada spasi yang konsisten di antara setiap kata.

Saat menyesuaikan ukuran dan perataan teks, gunakan panduan berikut:

  • Ukuran font minimum untuk teks isi setara dengan 16 px.
  • Perataan teks tidak rata kanan-kiri. Teks rata kanan-kiri menciptakan spasi yang tidak konsisten antar kata.

Tautan teks

Tautan teks harus digarisbawahi atau memiliki gaya lain yang berbeda secara visual dibandingkan dengan teks biasa. Karena beberapa pelanggan kesulitan melihat warna, Anda tidak bisa mengandalkan perubahan warna saja untuk membedakan tautan dari teks biasa.

Tautan teks harus terbuka di tab yang sama. Tautan yang terbuka di tab atau jendela baru dapat menyebabkan kebingungan, terutama di perangkat seluler karena jendela lama tidak terlihat, dan tidak inklusif bagi pelanggan, terutama pelanggan yang menggunakan pembesaran layar atau kurang teknis.

Jika Anda mengedit lembar gaya tema, pastikan Anda tidak menghapus gaya tautan teks. Gunakan panduan berikut:

  • Tautan teks digarisbawahi atau memiliki pembeda visual lain yang bukan hanya warna sehingga pelanggan dapat membedakan tautan dari teks biasa.
  • Tautan teks terbuka di tab yang sama saat diklik.

Teks alternatif untuk gambar

Saat Anda menambahkan gambar ke toko online, penting untuk membuatnya dapat diakses oleh pelanggan tunanetra atau yang memiliki penglihatan rendah. Anda dapat melakukannya dengan menambahkan teks alternatif yang menjelaskan setiap gambar secara akurat. Pelanggan yang menggunakan pembaca layar mengandalkan teks alt untuk menyampaikan konten gambar di toko online Anda.

Anda dapat menambahkan teks alt ke gambar produk dari admin Shopify. Anda dapat menambahkan teks alt ke gambar lain di tema Anda dari editor tema.

Saat Anda menambahkan teks alt ke gambar, praktik yang baik adalah berpura-pura sedang menjelaskan gambar tersebut kepada seseorang yang matanya terpejam. Bantu mereka menciptakan gambaran dalam pikiran mereka. Cara Anda menjelaskan gambar juga bergantung pada konteks halaman web Anda. Misalnya, Anda mungkin menjelaskan sebuah gambar secara berbeda jika bisnis Anda adalah agen perjalanan daripada jika bisnis Anda adalah toko peralatan luar ruangan. Perhatikan gambar berikut:

Dua orang teman yang mengenakan ransel saling merangkul, memandang ke arah lautan

Untuk agen perjalanan, Anda bisa menyebutkan negara dan wilayah tempat kedua teman itu bepergian, serta nama samudra atau laut yang mereka pandangi. Di sisi lain, untuk toko peralatan luar ruangan, Anda mungkin akan berfokus pada merek dan fitur ransel kedua teman itu.

Jika bisnis Anda adalah agen perjalanan, contoh teks alt yang buruk mungkin, "Dua orang di depan lautan." Untuk agen yang sama, contoh teks alt yang baik mungkin, "Dua orang teman yang sedang bepergian di Lagos, Portugal, memandangi teluk berpasir Praia do Camilo pada hari yang cerah."

Aksesibilitas tayangan slide dan video

Saat Anda menambahkan video ke toko online, pastikan Anda mempertimbangkan kebutuhan pelanggan dengan penglihatan rendah, pelanggan tunarungu atau yang sulit mendengar, atau pelanggan yang mungkin rentan terhadap gangguan vestibular.

Beberapa pelanggan ini mengandalkan kapabilitas teks ke ucapan dari pembaca layar, yang membacakan konten halaman web dengan keras. Audio tambahan dari video dan musik, terutama jika tidak terduga, dapat menyulitkan pengalaman ini. Untuk pelanggan tunarungu atau yang sulit mendengar, sebaiknya tambahkan teks tertutup ke video Anda agar pelanggan tersebut dapat mengakses kontennya.

Pelanggan dengan gangguan vestibular dapat mengalami pusing dengan konten yang bergerak. Karena itu, penting agar tayangan slide dan video tidak diputar secara otomatis dan agar pelanggan dapat mengontrol tayangan slide dengan tombol kontrol.

Tayangan slide

Saat Anda menambahkan tayangan slide ke toko online, gunakan panduan berikut:

  • Tayangan slide tidak diputar secara otomatis.
  • Jika tayangan slide diputar secara otomatis, sertakan kontrol tayangan slide yang dapat digunakan pelanggan untuk menjeda, melanjutkan, atau menghentikan tayangan slide.

Video

Saat Anda menambahkan video ke toko online, gunakan panduan berikut:

  • Video tidak diputar secara otomatis.
  • Jika video diputar secara otomatis, audionya akan dibisukan.
  • Untuk video yang menyertakan audio, video sepenuhnya terlihat dan tidak terhalang oleh elemen halaman lain. Ini memungkinkan teks tertutup tetap terlihat.
  • Untuk video yang menyertakan dialog, transkrip teks tersedia. Transkrip ini disertakan di halaman tersebut, atau dalam tautan ke halaman terpisah.

Panduan ini juga berlaku untuk video yang ada di tayangan slide.

Dukungan keyboard

Pelanggan dengan gangguan penglihatan atau motorik mungkin menggunakan keyboard untuk menavigasi dan menyelesaikan tugas secara online. Pelanggan ini mengandalkan indikator visual untuk menyampaikan di mana fokus keyboard mereka berada di halaman web. Pada contoh di bawah, kolom Email memiliki indikator fokus visual:

Layar login pelanggan di toko online yang menunjukkan kolom formulir untuk Email dan Kata Sandi. Kolom Email diberi garis luar berwarna biru.

Jika Anda mengedit lembar gaya tema, pastikan Anda tidak menghapus gaya fokus keyboard dari elemen halaman mana pun. Gunakan panduan berikut:

  • Semua elemen halaman interaktif memiliki indikator visual yang jelas ketika mendapatkan fokus keyboard. Elemen-elemen ini termasuk tautan, tombol, dan kolom formulir.

Sumber daya

Untuk mempelajari lebih lanjut tentang aksesibilitas web untuk topik yang dibahas dalam artikel ini, lihat sumber daya berikut.

Sumber daya kontras warna

Sumber daya teks

Sumber daya teks alternatif

Sumber daya tayangan slide dan video

Sumber daya dukungan keyboard

Di bagian ini