Pedoman Aksesibilitas Email: Standar & Praktik Terbaik

Lihatlah sekeliling, dengarkan apa yang terjadi. Apakah Anda melihat semuanya dengan jelas, dalam mode penuh warna? Dan Anda mendengar suara dan suara dengan baik? Selamat, Anda pasti orang yang beruntung. Apalagi, kamu sebenarnya orang yang sangat bahagia. Anda memiliki penglihatan dan pendengaran!

Anda mungkin berpikir kemampuan ini umum dan diberikan secara default kepada semua orang? Bagaimana jika saya memberi tahu Anda bahwa 4,5% penerima di daftar kontak Anda menderita buta warna, sehingga sulit bagi mereka untuk membaca atau memahami konten email Anda?

Padahal buta warna bukan satu-satunya kelainan yang tersebar luas. Fakta sederhana: 285 juta orang di seluruh dunia menderita gangguan penglihatan parah yang membuat penglihatan menjadi masalah bahkan dengan lensa kontak atau kacamata.

Dan 5% dari populasi bumi memiliki gangguan pendengaran. Dalam istilah lain, lebih dari 360 juta.

Itu sesuatu untuk dipikirkan. Kita tidak bisa mengabaikan semua orang itu. Kita harus melakukan yang terbaik untuk bersikap ramah kepada mereka, dan membuat hidup mereka lebih baik. Inilah yang dimaksud dengan aksesibilitas.

Sekarang, buatlah secangkir teh atau kopi untuk diri Anda sendiri, dan mari selami detailnya.

Apa yang dimaksud dengan aksesibilitas email?

Ada orang yang menderita gangguan penglihatan yang parah atau bahkan kebutaan total. Mereka menggunakan perangkat lunak pembaca layar untuk menyuarakan email kotak masuk — VoiceOver, Microsoft Narrator, dan alat serupa lainnya. Oleh karena itu tugas kami adalah menyesuaikan konten kami dengan asisten ini.

Ketika berbicara tentang buta warna, dari protanopia (ketika orang tidak dapat membedakan warna tertentu) hingga monokromasi — tidak ada alat yang membantu orang dengan kondisi ini. Jadi kita sendiri yang harus mengoptimalkan citra email.

Lainnya menderita gangguan pendengaran, disleksia, dll. Akibatnya, ada seperangkat aturan aksesibilitas untuk setiap jenis gangguan. Jadi kami sampai pada jawaban atas pertanyaan di judul.

Singkatnya, itu berarti berpegang teguh pada standar yang membuat email dapat dibaca oleh orang-orang dengan semua jenis persyaratan khusus. Untungnya, pembuat template email HTML modern dan perangkat lunak pemasaran lainnya memberi kami alat canggih untuk menerapkan standar ini dengan cukup mudah dan tanpa keahlian khusus.

Saya akan membagikan standar ini di bawah, serta beberapa praktik yang akan membantu untuk membuat email yang dapat diakses.

Standar aksesibilitas

Jadi, teman-teman terkasih, inilah saatnya untuk menjelajahi satu per satu kumpulan rekomendasi ini yang perlu kita ikuti untuk mengirimkan email "universal" yang akan mudah dibaca oleh penerima dengan semua jenis gangguan penglihatan, pendengaran, dan persepsi.

1. Buta warna

Ada daftar jenis buta warna. Di sini mereka:

Protanopia berarti persepsi yang tidak berfungsi dari warna merah. Pembaca dengan protanopia, alias orang buta merah, cenderung mengacaukan warna hitam dengan semua nuansa merah. Mereka juga tidak dapat membedakan coklat tua dari hijau tua dan tidak melihat perbedaan antara warna biru dan pertengahan warna merah. Lihat email ini dari Uber:

Dan ini adalah bagaimana penerima dengan protanopia melihatnya:

Deuteranopia adalah penurunan persepsi warna hijau. Orang-orang ini juga cenderung bingung diapason merah/hijau tengah, hijau terang/kuning, dan biru muda/ungu. Sekali lagi, lihat email yang sama: asli di sebelah kiri, dan versi deuteranopia di sebelah kanan.

Tritanopia berarti kebutaan terhadap warna biru dan coraknya. Inilah sebabnya mengapa mereka yang menderita gangguan ini biasanya bingung membedakan biru muda/abu-abu, dan ungu tua/hitam. Sampel email yang sama, tetapi Anda dapat melihat persepsi tritanopia di sebelah kanan:

Monokromasi adalah untuk buta warna total. Orang-orang ini dapat melihat kenyataan yang dicat hanya dalam warna hitam, putih, dan berbagai warna abu-abu. Tidak ada warna lain. Bayangkan saja dunia di layar TV yang sangat tua. Ini adalah bagaimana monokromasi terlihat. Serius, itu membuatku merinding.

Apa yang harus kita lakukan?

• Pilih ukuran font untuk salinan email tidak kurang dari 14 px. Namun, saya merekomendasikan 16px untuk menyediakan desain email yang dapat diakses penerima;
• Hindari solusi kontras berdasarkan warna yang tidak dapat dibedakan oleh klien buta warna. Misalnya, jangan menulis salinan Anda dengan teks hijau atau biru di atas latar belakang merah atau ungu. Lihatlah pesan di bawah ini. Tidak apa-apa untuk orang dengan persepsi warna diapason penuh… tetapi apakah itu baik dalam kasus penglihatan protanopia atau monokromatik? Saya kira tidak demikian…

(pesan asli)

(Beginilah cara klien dengan protanopia akan melihatnya)

(cara monokromatis melihat pesan ini)

Bagaimana mereka harus memahami apakah tim favorit mereka menang atau kalah dalam pertandingan?

• Lupakan ide menambahkan tombol hijau di atas foto merah, atau sebaliknya. Hal yang sama berlaku untuk semua kombinasi warna "berisiko" yang disebutkan di atas. Idenya sangat buruk — orang dengan gangguan persepsi warna mungkin tidak memperhatikan tombol sama sekali;
• Selalu tentukan warna produk dalam tanda kurung — klien mungkin tidak membedakan, misalnya, warna merah tetapi mereka tahu bahwa kemeja atau gaun merah sangat cocok dengan gambar mereka;
• Buat tautan di email Anda tebal.

Ya, warna biru biasa untuk teks tautan tidak cukup. Dan bukan hanya karena penerima buta warna. Pernahkah Anda membaca email di jalan saat matahari bersinar tanpa ampun tepat di layar smartphone? Maka Anda tahu apa yang saya maksud — sulit untuk membedakan warna sama sekali. Jadi buat tautan tebal, dan jangan menggarisbawahinya. Mengapa? Karena menggarisbawahi dapat mengalihkan perhatian penderita disleksia. Kami akan berbicara tentang disleksia secara rinci nanti.

Dalam email ini, item menu juga dicetak tebal. Ide sederhana ini mengoptimalkan navigasi pelanggan dalam buletin — mereka akan dengan mudah menemukan kategori apartemen yang diinginkan.

Perhatikan tautan "Lihat detail" dengan panah. Dikatakan bahwa Anda dapat melihat lebih banyak detail dengan mengkliknya;

Jika Anda menambahkan elemen interaktivitas atau menjalankan pengujian dalam kampanye, pilih warna hijau/merah tua/biru muda untuk menyorot jawaban yang benar. Dan merah/hitam/abu-abu masing-masing untuk salah masing-masing. Pastikan untuk menduplikasi jawaban ya/tidak dengan teks.

Sangat penting untuk memeriksa apakah email sesuai dengan persyaratan orang yang menderita kekurangan warna. Untuk kenyamanan Anda, saya ingin menambahkan tabel ini ke posting kami. Simpan untuk menemukan warna yang cocok dan menghindari kebingungan:

Ada juga alat simulator buta warna gratis yang menunjukkan foto Anda seperti yang akan dilihat oleh penerima buta warna.

Seperti yang bisa kita lihat, pengujian warna tidak terlalu rumit — jangan abaikan saja. Tunjukkan kepedulian Anda untuk semua pelanggan. Jadilah baik.

2. Kebutaan dan gangguan penglihatan yang parah

Bab berikutnya didedikasikan untuk standar aksesibilitas bagi penyandang tunanetra dan tunanetra sebagian. Aturan-aturan ini juga tentang gangguan penglihatan, tetapi prinsip dan solusi di sini sama sekali berbeda. Tidak ada skema warna atau kombinasi kontras yang dapat membantu dalam kasus ini. Aspek ilmu aksesibilitas ini didasarkan pada penggunaan perangkat lunak pembacaan layar.

Akibatnya, misi kami adalah menyesuaikan email kami dengan alat ini. Dengan kata lain, kita harus membuat email terbaca untuk alat ini.

Apa yang harus diberikan perhatian khusus di sini?

Subjek email

Biasanya, pembaca layar mulai membaca email dari subjeknya.

Jadi aturan yang diterima secara umum sederhana namun efektif: buat baris subjek Anda singkat dan deskriptif. Subjek yang baik harus menjelaskan inti inti pesan.

Pengaturan bahasa

Sangat penting untuk mengonfigurasi pengaturan bahasa dalam salinan email. Tugas ini membutuhkan usaha dan pekerjaan dengan salinan email, tetapi itu sepadan. Masalahnya adalah teks email yang disuarakan oleh pembaca layar mungkin terdengar menakutkan jika Anda mengabaikan pengaturan ini. Sesuatu seperti percakapan orc dari Lord of the Rings

Untuk menghindarinya, tentukan bahasa masing-masing dalam kode email (jika tersedia).

Urutan logis

Pembaca layar memiliki aturan ketat tentang cara menyuarakan email. Mereka membaca wadah dan balok dari kiri ke kanan dan kemudian melanjutkan ke baris berikutnya.

Untuk menyediakan aksesibilitas, tentukan tag header seperti <h1> , <h2> , <p> , dll dalam kode HTML. Tag ini akan menambahkan prioritas di atas teks biasa, jadi elemen ini disuarakan terlebih dahulu.

Juga, ukuran font tidak masalah ketika tag ditentukan. Dalam contoh di atas, ukuran font heading 2 adalah 24px, dan font salinan normal lebih besar — ​​27px. Namun pembaca layar akan menyuarakan heading 2 terlebih dahulu.

teks alternatif

Teknologi AI berkembang pesat saat ini. Tetapi alat pembaca layar masih belum cukup pintar untuk "melihat" gambar di email dan mendeskripsikannya. Mungkin dalam waktu dekat… Adapun saat ini, utilitas ini hanya dapat membaca teks alternatif alias teks Alt yang kami tambahkan ke gambar.

Bagaimana cara menyesuaikan teks alternatif dengan standar aksesibilitas? Anda menebak dengan benar, ini cukup jelas: buat teks ini singkat, deskriptif, dan informatif. Satu catatan yang berguna: hindari kata “gambar” dalam teks ini. Tag gambar sudah menentukannya, jadi agak aneh mendengar "gambar gambar..." yang digandakan.

Tautan, item CTA, ikon sosial

Tautan harus sesingkat dan seinformatif mungkin. Tambahkan teks yang jelas ke mereka dan ingat bahwa pembaca layar akan mengubah teks ini menjadi suara! Beri tahu penerima apa yang Anda tawarkan kepada mereka dan ke mana mereka akan pergi dengan mengklik.

Lihat saja tautan-tautan ini:

Tautan pertama… uh… serius, saya takut membayangkan betapa menyeramkannya itu terdengar. Sedangkan yang kedua dengan jelas menentukan situs web, tanggal publikasi, dan judul posting.

Hal yang sama berlaku untuk tombol CTA dan ikon media sosial. Bahkan, barang-barang ini adalah hyperlink juga, hanya dibungkus dalam bentuk visual yang menarik secara estetis. Setiap pemasar email yang terampil memberikan perhatian paling dekat kepada mereka, mengerjakan desain dan efek, memilih solusi warna yang sempurna untuk menghasilkan klik…

Tetapi ketika berbicara tentang pembaca layar dan aksesibilitas bagi penyandang tunanetra, satu-satunya hal penting di sini adalah teks. Buatlah cukup menarik untuk menyelesaikan misinya — memaksa pelanggan untuk mengklik tombol.

Ini adalah bagaimana kita melihat tombol CTA di email:

Tapi alat pembaca layar tidak memberikan bebek terbang tentang semua trik desainer kami dan efek hover yang luar biasa. Semua yang dilihat perangkat lunak hanyalah teks kosong. Tidak ada lagi. Jadi, pastikan teks Anda berfungsi dengan sendirinya.

Mengenai ikon media sosial, beberapa pelanggan yang "mendengarkan" email kotak masuk mungkin tidak memahami singkatan yang kami terapkan untuk ikon ini. Jadi tulis teks alternatif deskriptif untuk item ini.

Itu semua tentang kebutaan. Hanya satu catatan penting lagi: pembaca layar saat ini banyak digunakan tidak hanya oleh orang-orang yang memiliki gangguan penglihatan parah. Jutaan penerima mendengarkan email kotak masuk mereka saat mereka sibuk, di jalan, di dalam mobil, dll. Jadi aspek aksesibilitas ini bahkan lebih penting daripada yang bisa dibayangkan.

3. Disleksia

Orang yang menderita disleksia cenderung bingung urutan huruf dalam teks, meskipun tingkat IQ normal.

Berikut adalah praktik aksesibilitas untuk penerima disleksia berdasarkan posting yang diterbitkan oleh itu Asosiasi Disleksia Inggris.

• Hindari menggarisbawahi tautan. Seperti yang telah saya sebutkan sedikit di atas, buat tautan Anda tebal alih-alih menggarisbawahinya;
• Jangan memulai kalimat baru di akhir baris. Kalimat baru harus menjadi baris baru masing-masing;
• Tidak ada CAPS LOCK jika Anda perlu menyoroti/menekankan ide tertentu — gunakan font yang lebih besar sebagai gantinya;
• Lupakan perataan tengah — hanya di sisi kiri layar;
• Latar belakang putih dapat mengalihkan perhatian penerima disleksia, warna krem ​​lebih lembut dan tidak menyulitkan;
• Akhiri semua kalimat dengan titik (.), Anda juga harus menggunakan titik koma ketika ada poin-poin dalam salinan email.

4. Tuli dan pendengaran sebagian

Untuk orang dengan gangguan pendengaran, ada satu standar tunggal. Semua video yang disematkan di email Anda harus dilengkapi dengan subtitle atau deskripsi teks.

Hanya saja, jangan mengandalkan subtitle otomatis yang disediakan oleh Youtube dan hosting video lainnya. Mereka sering, eh eh… secara halus, jauh dari ideal. Dan dalam beberapa kesempatan bahkan berada di ambang skizofrenia.

Kiat teratas aksesibilitas email

Saya akan mengakhiri ulasan kami tentang praktik aksesibilitas terbaik hari ini. Seperti yang bisa kita lihat, aspek pekerjaan pemasar email ini sangat penting. Akibatnya, jangan pernah melewatkan pengujian aksesibilitas sebelum mengklik tombol "Kirim"! Periksa kampanye Anda dengan simulator buta warna yang disebutkan di atas, kirim email uji ke semua perangkat yang tersedia, dan dengarkan dengan pembaca layar yang berbeda.

Sekarang mari kita rekap secara singkat poin-poin penting dari posting ini. Bagaimana menyediakan aksesibilitas?

• Pilih warna yang berbeda untuk membuat skema kontras untuk mencegah kebingungan;
• Tulis baris subjek yang jelas dan deskriptif;
• Jangan pernah lupa tentang teks alternatif, tambahkan ke semua citra;
• Jika animasi GIF memiliki peran edukatif, berikan deskripsi mendetail kepada pembaca;
• Jangan gunakan bahasa yang berbeda dalam satu email karena pembaca layar hanya dapat bekerja dengan satu bahasa dalam satu waktu;
• Periksa kebermaknaan tautan Anda;
• Ratakan teks di sisi kiri;
• Buat buletin Anda dan email terpicu dengan cinta sejati. Peduli tentang semua pelanggan Anda.

Saya dengan tulus berharap yang terbaik untuk Anda. Sebarkan kepedulian dan kebaikan di sekitar!