Aksesibilitas dalam Pemasaran Email: 7 Trik Sederhana untuk Membuat Kode Anda Lebih Mudah Diakses

Diterbitkan: 2019-04-16

Aksesibilitas dengan cepat menjadi pilar pemasaran email seperti halnya dalam pengalaman dan desain pengguna. Semakin banyak merek memastikan bahwa kampanye email mereka dapat dinikmati oleh setiap pelanggan, apakah mereka memiliki cacat fisik, visual, atau kognitif—atau bahkan jika mereka tidak dapat melihat gambar di email mereka karena pengaturan perusahaan.

Sebagai pemasar email, kita semua berusaha untuk mengirimkan email yang bagus ke kotak masuk pelanggan kita. Kami menjalankan pengujian spam dan pengujian email untuk memastikan desain kami ditampilkan dengan sempurna di semua perangkat dan klien email. Namun terkadang, kita lupa menyetel tag ALT untuk gambar kita, menggunakan kombinasi warna yang sulit dibaca, atau gagal mengoptimalkan email untuk pembaca layar—dan itu membuat beberapa pelanggan kita terasing.

Jika Anda baru memulai membuat kode email Anda lebih mudah diakses, banyak hal yang bisa membuat Anda kewalahan. Namun ada beberapa trik sederhana yang dapat Anda terapkan dengan mudah—dan berdampak besar pada aksesibilitas email.

Berikut cara memeriksa email Anda untuk aksesibilitas ke semua pelanggan Anda, bagian demi bagian.

Apakah email Anda dapat diakses?

Pemeriksaan aksesibilitas di Daftar Periksa Litmus memudahkan pengujian email Anda terhadap praktik terbaik aksesibilitas utama, mengidentifikasi area untuk peningkatan, dan membuat email Anda lebih mudah diakses oleh semua pelanggan Anda.

Pelajari lebih lanjut →

Daftar Periksa Aksesibilitas Anda

1. Tambahkan kode bahasa ke <HTML> . Anda

Tidak semua pelanggan Anda akan membaca email Anda di laptop atau ponsel mereka—beberapa akan menggunakan pembaca layar untuk mengakses email Anda. Karena konten email Anda akan dibacakan, itu harus dalam bahasa yang tepat sehingga pengucapannya benar—Anda tidak ingin email Anda yang ditulis dalam bahasa Prancis diucapkan dalam bahasa Inggris Amerika, bukan?

Untuk mencegah hal itu terjadi, Anda harus memberi tahu pembaca layar dalam bahasa apa email Anda ditulis. Jika tidak ada kode bahasa yang ditentukan dalam email Anda, pembaca layar tidak dapat mengucapkan salinan dengan benar—dan email Anda yang fasih mungkin keluar terdengar sepenuhnya salah.

Itulah mengapa penting untuk memeriksa kode bahasa <HTML> Anda—itulah potongan kode sederhana yang menentukan bahasa email Anda. Jika belum ada di kode Anda, tambahkan lang=“xx” —ganti xx dengan kode bahasa yang sesuai untuk email Anda. Daftar semua kemungkinan kode bahasa dan lokalitas—yang memungkinkan Anda memperhitungkan aksen yang berbeda, seperti perbedaan antara bahasa Inggris British dan Amerika—dapat ditemukan di sini .

Ada beberapa kasus khusus yang perlu dipertimbangkan:

Jika Anda menggunakan XML apa pun di tag <HTML>, Anda juga perlu menambahkan xml:lang=“xx” .
Jika Anda menyertakan perbaikan Outlook 120dpi dalam kode email, Anda memerlukan solusi ini untuk menentukan bahasa. Begini tampilan kode kami dengan perbaikan ini:
```
 <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
```

Kiat pro: dimungkinkan untuk mengisi kode bahasa secara dinamis jika Anda telah mengatur pelokalan dalam ESP Anda.

2. Selalu sertakan tag ALT untuk gambar Anda

Penting untuk diingat bahwa gambar dalam email Anda mungkin tidak selalu terlihat oleh pelanggan Anda. Mungkin gambarnya tidak aktif, atau koneksinya buruk, atau mereka menggunakan pembaca layar—dan jika Anda menyertakan banyak informasi penting dalam gambar, pesan itu akan hilang. Di situlah teks ALT masuk. Anda dapat mengatur teks yang terlihat oleh pelanggan Anda (atau dibacakan oleh pembaca layar mereka) sehingga mereka tetap mendapatkan pesan yang sama dengan orang yang dapat melihat gambar Anda.

Di mana pun Anda memiliki tag <IMG> di kode email Anda, pastikan untuk mengatur tag ALT. Jika Anda telah mengisi tag ALT, periksa kembali untuk memastikan bahwa teks cocok dengan teks pada gambar. Jika Anda memiliki tag ALT kosong, pastikan tidak ada teks pada gambar yang perlu diisi agar pembaca layar dapat melihatnya. Jika tidak ada tag ALT pada gambar Anda dan tidak ada teks dalam gambar itu sendiri—atau tidak ada teks yang diperlukan untuk arti email—pastikan untuk menambahkan tag ALT kosong: alt=“” . Jika Anda tidak menyertakan ini, pembaca layar akan membacakan URL gambar—dan tidak seorang pun ingin URL panjang dibacakan untuk mereka!

Setelah Anda menetapkan semua tag ALT Anda—kosong atau tidak—untuk gambar di email Anda, tambahkan gaya font ke dalam tag <IMG> untuk teks ALT gaya . Gaya ini memungkinkan Anda untuk menyukai teks ALT Anda dan memungkinkan Anda mengubah tampilan font, warna, ukuran, gaya, dan berat.

3. Sertakan atribut role="presentation" pada semua elemen <TABLE>

Sebagian besar pemasar email mengandalkan tabel untuk menyusun tata letak email mereka, tetapi itu dapat menyebabkan masalah serius bagi pembaca layar. Jika pembaca layar mengidentifikasi tabel dalam kode email Anda, itu akan dibacakan sebagai satu. Ini mungkin benar-benar memberi tahu Anda berapa banyak baris dan kolom yang ada, memberi tahu Anda posisi dan konten setiap kolom, sehingga tidak mungkin untuk memahami pesan Anda.

Itulah mengapa penting untuk memberi tahu pembaca layar bahwa Anda menggunakan tabel hanya untuk tujuan tata letak. Anda dapat melakukannya dengan menambahkan role=“presentasi” ke setiap tabel di email Anda. Peran ini memberi tahu pembaca layar untuk menghapus makna semantik apa pun dari tabel—jadi alih-alih membacakan nomor baris dan kolom, peran ini berfokus pada konten.

Mari kita lihat header email yang sangat sederhana ini dari salah satu email kita sendiri:

Sebelum kami mengoptimalkan aksesibilitas, kode kami terlihat seperti ini:

 <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Apakah Anda memperhatikan bahwa atribut ALT hilang dan tabel tidak disetel ke role="presentation" ?

Kelalaian kecil itu berdampak besar pada aksesibilitas. Berikut cara pembaca layar menafsirkan kode di atas:

Pembaca layar: Header email yang tidak dapat diakses

Dan ini kode yang sama yang telah difaktorkan ulang dengan menambahkan atribut ALT="” dan role="presentation" ke tag <TABLE> agar ramah pembaca layar:

 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Pembaca layar: Header email yang dapat diakses

Seperti yang Anda dengar, ada perbedaan yang cukup besar!

4. Gunakan elemen semantik untuk menyusun konten Anda

Elemen semantik memudahkan untuk menyorot hierarki konten, menunjukkan kepada pelanggan (dan pembaca layar) apa itu judul dan apa itu salinan paragraf. Menyertakan elemen semantik memberi pelanggan Anda yang menggunakan pembaca layar opsi untuk "memindai" melalui email dengan lebih mudah.

Saat memeriksa ulang salinan Anda, pastikan salinan yang layak untuk judul dilampirkan dalam tag <H> : <H1> , <H2> , <H3> , dan seterusnya. Demikian pula, pastikan setiap body copy ditempatkan di dalam tag <P> . Saat menelusuri email Anda, pembaca layar menekankan pada tajuk tertentu, dan menyiapkan tag <H> dan <P> ini akan membuat email Anda lebih mudah dinavigasi.

5. Ratakan kiri salinan Anda, jika memungkinkan

Ketika datang ke teks tubuh Anda, mungkin tergoda untuk menyelaraskan tengah. Namun, dalam hal aksesibilitas, ini sangat dilarang !

Saat Anda memusatkan teks, tepi awal berubah untuk setiap baris, yang memaksa pelanggan Anda bekerja lebih keras untuk menemukan awal setiap baris—dan itu merupakan tantangan bagi penderita disleksia dan gangguan membaca lainnya. Jika Anda memiliki salinan yang lebih panjang dari dua baris, ratakan kiri salinan tersebut. Ini sangat penting untuk seluler, karena lebar yang sempit sering kali menghasilkan lebih banyak baris teks daripada yang mungkin Anda sadari. Anda mungkin perlu meratakan kiri teks Anda secara responsif di perangkat seluler.

6. Periksa kontras salinan Anda

Periksa rasio kontras warna teks Anda dengan warna latar belakang email Anda. Anda mungkin memiliki pelanggan yang memiliki kekurangan warna, dan jika warna Anda tidak memberikan kontras yang cukup untuk mereka, mereka mungkin tidak dapat membaca email Anda. Ada dua cara untuk memeriksa rasio kontras:

Jika Anda dapat meng-host HTML Anda dan menghasilkan URL untuk digunakan, ini adalah cara favorit saya untuk memeriksa warna saya: http://www.checkmycolours.com/
Jika Anda perlu memasukkan kode warna secara manual, lihat https://contrast-ratio.com/

7. Tambahkan efek hover untuk CTA, tautan, dan gambar

Di Litmus, kami menggunakan efek hover pada CTA, tautan, dan gambar kami untuk menunjukkan kemampuan diklik. Efek hover adalah elemen interaktif sederhana yang dapat membuat email Anda lebih menarik dan meningkatkan pengalaman pelanggan Anda. Meskipun efek hover hanya didukung di AOL, Apple Mail, Gmail, dan Yahoo! Mail, mereka adalah efek populer dan layak diterapkan dalam kode email Anda. Anda dapat memudarkan gambar, mengubah warna tombol CTA, menambahkan tab pop-up, dan banyak lagi.
Efek hover dapat membantu membuat email Anda lebih mudah diakses, seperti dalam contoh ini, di mana tombol berubah warna saat mengarahkan kursor.

Lihat email lengkapnya di Litmus Builder →

Ingin lebih banyak kiat email?

Panduan Utama untuk Aksesibilitas Email

Panduan ini memiliki wawasan dan saran langkah demi langkah yang Anda perlukan untuk menulis, mendesain, dan membuat kode email yang dapat dinikmati oleh siapa saja—terlepas dari kemampuan mereka.

Unduh ebooknya →

Dapatkan kiat pemasaran dan desain email terbaik, statistik, dan sumber daya langsung ke kotak masuk Anda dan tetap menjadi yang terdepan dalam inovasi email saat Anda mendaftar ke Litmus News.

Tetap tahu →