Panduan Utama untuk Email yang Dapat Diakses

Sebagai pemasar email, kami berusaha untuk memberikan pengalaman email yang sempurna kepada pelanggan kami. Kami memastikan email kami dikirim pada waktu yang tepat berdasarkan analitik kami dan dikirim ke kotak masuk dengan memantau kemampuan pengiriman kami dan menjalankan tes spam. Kami mempersonalisasi konten kami agar lebih relevan dan mengotak-atik desain kami untuk memastikan email kami ditampilkan dengan sempurna di banyak perangkat dan di setiap klien email.

Ini semua adalah langkah yang disarankan untuk memastikan email Anda menghasilkan konversi. Namun, email Anda dapat dilewatkan oleh sebagian besar pelanggan Anda—orang-orang dengan disabilitas visual, fisik, atau kognitif dan neurologis.

Hanya perlu beberapa langkah kecil untuk membuat email Anda lebih mudah diakses oleh semua pelanggan Anda. Dalam posting ini, kita akan membahas langkah-langkah tersebut dan bagaimana mereka dapat membuat email lebih baik untuk semua orang.

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 →

Apa itu Aksesibilitas?

Aksesibilitas berfungsi sebagai salah satu pilar pendiri pengalaman dan desain pengguna. Untuk email, ini berarti memastikan bahwa setiap orang dapat menerima dan memahami pesan Anda, terlepas dari kecacatan atau alat bantu apa pun yang mungkin mereka gunakan.

Anda dapat menganggap aksesibilitas dalam email sebagai perpanjangan dari berurusan dengan klien email dengan dukungan yang buruk. Menyertakan solusi dan fallback memastikan setiap pelanggan menerima pengalaman positif.

Sebagai pengembang email, kami menghabiskan waktu berjam-jam untuk mendapatkan email agar terlihat tepat di klien dengan pangsa pasar kurang dari 1% tetapi sangat sedikit dari kami yang akan menghabiskan beberapa menit untuk membuat email dapat diakses.
– Mark Robbins, Rebelmail

Aksesibilitas dalam Desain Email

Mari mulai dengan melihat aspek visual email Anda yang dapat memengaruhi aksesibilitas dan di mana perbaikan dapat dilakukan.

Gunakan Warna Secara Cerdas

Pelanggan dengan buta warna mungkin tidak dapat membedakan beberapa warna dalam email Anda, jadi pastikan bahwa warna bukanlah satu-satunya cara penyampaian informasi.

Kontras warna juga dapat menimbulkan masalah bagi pelanggan dengan kesulitan visual. Gunakan kontras warna yang tinggi antara berbagai elemen di email Anda, terutama antara salinan dan warna latar belakang. Salah satu cara untuk melakukannya adalah dengan menggunakan Pemeriksa Kontras Warna WebAim untuk memeriksa rasio kontras warna di email Anda.

Apakah email Anda dapat diakses? Lihat seperti apa email Anda untuk pengguna tunanetra menggunakan filter buta warna di Pratinjau Email Litmus. Coba Lakmus gratis →

Jangan Membuat Konten Berbahaya

Konten yang berkedip dengan kecepatan atau pola tertentu, seperti GIF animasi, dapat menyebabkan kejang peka-foto pada beberapa individu. Hindari mem-flash konten atau menyertakan tautan ke video yang mungkin memiliki konten serupa.

Seimbangkan Teks dan Gambar

Sementara pengguna yang dapat melihat dapat memindai atau melewatkan konten yang tidak relevan secara visual, pengguna tunanetra harus mendengarkan seluruh konten email, satu email pada satu waktu. Sesuaikan konten tertulis dalam email Anda untuk menyampaikan pesan utama. Juga, pertimbangkan seberapa kompatibel desain Anda dengan pembaca layar populer seperti JAWS atau Window-Eyes.

Tingkatkan Keterbacaan Email Anda

Gunakan Ukuran Font Lebih Besar

Apa pun yang lebih kecil dari 14 piksel pada layar desktop atau laptop memerlukan upaya untuk membaca. Pengguna dapat meningkatkan tingkat zoom pada perangkat mereka untuk membantu mereka membaca layar mereka, tetapi ini dapat berdampak negatif pada email Anda, yang mungkin tampak rusak atau terputus.

Teks dapat tampak lebih kecil di perangkat seluler, memaksa pengguna bekerja lebih keras untuk membaca email Anda. Gunakan kueri media untuk meningkatkan ukuran font minimum dari 14 menjadi 16 piksel pada perangkat yang lebih kecil untuk membantu pengguna membaca email Anda:

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Berikan Ruang Salinan Anda untuk Bernapas

Bagi beberapa orang mungkin sulit untuk membaca paragraf dan blok teks di mana baris salinan ditempatkan berdekatan. Tetapkan tinggi baris yang sesuai pada teks agar lebih mudah dibaca oleh semua orang. Sebaiknya pilih tinggi garis yang 4 piksel lebih besar dari ukuran font Anda.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Tip: Saat meningkatkan ukuran font untuk perangkat seluler, jangan lupa juga untuk menambah tinggi garis.

Paragraf salinan juga membutuhkan ruang untuk bernafas untuk membantu keterbacaan. Saat memindai email, seharusnya mudah untuk mengidentifikasi paragraf dan dapat mempertahankan tempat Anda. Buat ruang putih yang cukup di atas dan di bawah paragraf.

Satu langkah lagi untuk membuat teks lebih mudah dibaca adalah dengan menjauhkannya dari tepi email Anda. Menambahkan padding ke sel tabel atau tag paragraf akan membantu Anda mencapai ini.

Hindari Salinan yang Dibenarkan di Email Anda

Salinan "Dibenarkan" berarti bahwa spasi huruf dan kata disesuaikan sehingga teks rata dengan margin kiri dan kanan. Meskipun umum di media cetak, spasi kata yang tidak konsisten dapat membuat salinan yang dibenarkan sulit dibaca. Teks yang rata kiri telah terbukti lebih mudah dibaca oleh semua orang.

Pilih Jenis Huruf yang Tepat

Penggunaan font web telah meningkatkan kumpulan kemungkinan tipografi yang dapat digunakan dalam email, tetapi sebelum Anda memutuskan untuk menggunakan Lobster sebagai font tubuh Anda, pikirkan tentang seberapa mudah diaksesnya font tersebut. Saat memilih jenis huruf untuk email Anda, pilih salah satu yang spasinya merata dan tidak terlalu padat. Ini adalah ide yang bagus tidak hanya untuk aksesibilitas, tetapi juga untuk pengguna seluler.

Gunakan Elemen Semantik

Menyertakan elemen semantik memberi pelanggan Anda yang menggunakan pembaca layar opsi untuk "memindai" melalui email dengan header. Anda dapat melakukannya dengan menggunakan tag <p> dan <h>. Ini didukung di setiap klien, jadi ini adalah tempat yang baik untuk mulai membuat email Anda lebih mudah diakses.

Secara historis, menata tag <p> dan <h> tidak mudah, itulah sebabnya mengapa tag ini masih jarang digunakan dalam email. Margin di sekitar teks yang dibungkus dengan salah satu tag ini sulit untuk dikelola, tetapi menggunakan kode seperti ini Anda akan dapat mengontrol spasi putih itu:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Tip: Menggunakan mso-line-height-rule:exactly; di tag <h> Anda akan mempertahankan aturan ketinggian baris yang Anda tetapkan di klien email Microsoft Outlook.

Tonton klip ini dari Litmus Live 2017 saat pengembang email Paul Airy menjelaskan mengapa dan bagaimana ia menggunakan elemen HTML semantik dalam emailnya agar lebih mudah diakses:

Tweet video ini →

Belajar dari para ahli di Litmus Live Menjadi pemasar email yang lebih baik dengan saran dunia nyata, praktik terbaik & takeaways praktis ketika Anda bergabung dengan kami untuk konferensi Litmus Live. Pelajari lebih lanjut →

Tulis Salinan yang Dapat Dibaca

Membuat email yang lebih mudah diakses dan dibaca tidak hanya tergantung pada bagaimana email dikodekan, tetapi juga bagaimana salinannya ditulis. Membuat salinan email Anda lebih manusiawi akan membantu keterbacaannya dan membantu membangun komunikasi 1:1 antara Anda dan pelanggan Anda.

Tes paling populer, yang dikenal sebagai tes Kemudahan Membaca Flesch-Kincaid, dapat ditemukan di Microsoft Word dan menghitung seberapa mudah konten Anda dibaca dalam skala 0-100. Itu berarti:

• Skor 90-100 akan mudah dipahami oleh siswa berusia 11 tahun
• Skor 60-70 akan mudah dipahami oleh siswa berusia 13 hingga 15 tahun
• Skor 30-50 akan dipahami oleh mahasiswa
• Skor 0-30 akan lebih dipahami oleh lulusan universitas

Membuat sesuatu yang lebih "dapat dibaca" tidak berarti Anda menghindar dari topik yang rumit atau subjek yang berbobot. Alih-alih membodohi tulisan Anda, itu mengacu pada aksesibilitas teks. Sweet spot Anda berada di antara 60 dan 70 untuk menangkap khalayak umum. Tentu saja, jika audiens Anda berpendidikan tinggi, maka jangan takut untuk menggunakan bahasa yang lebih kompleks.

Anda juga dapat meningkatkan keterbacaan dengan mengedit salinan Anda menjadi langsung dan to the point.

Buat Konten yang Dapat Diakses

Jadikan Tautan Dapat Diklik / Dapat Ditekan

Memastikan ukuran tombol antipeluru Anda cukup besar untuk digunakan oleh ibu jari dan jari di perangkat seluler akan membantu aksesibilitas email Anda juga. Tombol yang lebih besar akan bermanfaat bagi mereka yang tidak dapat mengontrol mouse dengan presisi.

Saya suka tombol besar dan saya tidak bisa berbohong.
– Justine Jordan, Lakmus

Sementara Panduan Antarmuka Manusia iPhone Apple merekomendasikan lebar dan tinggi minimum 44 piksel untuk tombol, jumlah ini bervariasi tergantung pada vendor perangkat seluler. Aturan praktis alternatif akan menggunakan lebar dan tinggi minimum 72 piksel karena ini adalah lebar piksel rata-rata ibu jari.

Hapus Salinan Tautan "Klik Di Sini"

Hindari menggunakan "klik di sini" sebagai salinan untuk tautan Anda. Pengguna pembaca layar sering menelusuri konten, melewatinya sebagai cara memindai email. Memberikan konteks tautan Anda akan membantu pengguna ini memutuskan apakah mereka ingin mengeklik atau tidak.

Misalnya, jika Anda memiliki tautan yang mengarah ke daftar produk sepatu, menggunakan salinan tautan seperti "Lihat sepatu lainnya" akan mengurangi ambiguitas tautan bagi pengguna pembaca layar. Mengurangi ambiguitas tautan bermanfaat bagi semua pelanggan, karena tidak mengharuskan mereka membaca konteks di sekitar tautan—baik bagi mereka yang secara rutin memindai email tanpa menerima semuanya.

Tidak hanya untuk aksesibilitas, membuang tautan “klik di sini” akan membuat konten email Anda menjadi lebih bebas perangkat. Sementara "klik di sini" mungkin masuk akal untuk pelanggan yang menggunakan laptop atau desktop, tetapi tidak untuk seseorang yang menggunakan perangkat seluler atau tablet yang memerlukan tindakan mengetuk.

Gunakan Atribut ALT dengan Benar

Atribut ALT telah menjadi praktik terbaik email sejak awal email HTML, karena klien email memblokir gambar secara default. Teks yang digunakan dalam atribut ALT yang dilampirkan pada gambar ditampilkan saat gambar tidak dimuat. Ini membantu pelanggan "melihat" email jika gambar mereka tidak aktif secara default di klien email mereka atau jika mereka menggunakan pembaca layar untuk membaca email.

Untuk menggunakan atribut ALT dengan benar, konteks gambar harus sepenuhnya dipahami dalam kaitannya dengan konten di sekitarnya. Pertama, Anda perlu memutuskan apakah gambar itu fungsional, ilustratif, atau dekoratif.

Semua gambar memerlukan atribut ALT, jadi atribut null ALT harus digunakan untuk gambar yang tidak perlu dibaca oleh pembaca layar atau mewakili sesuatu yang penting bagi pelanggan.

Lihat email Anda dengan semua gambar dimatikan untuk membantu Anda memutuskan gambar mana yang memerlukan atribut ALT dan mana yang dapat memiliki atribut null.

Untuk menyelam lebih dalam untuk memahami bagaimana konteks menginformasikan penggunaan atribut ALT untuk gambar Anda, kunjungi halaman WebAim pada atribut ALT.

Gunakan role="presentasi" di Semua Tabel Presentasi Anda

Dalam desain email, tabel digunakan untuk menampung konten serta menyusun desain email. Tabel tidak pernah dimaksudkan untuk digunakan untuk desain; namun, karena pembatasan pada klien email seperti Outlook, desainer email terpaksa menggunakan elemen <table> sebagai elemen desain.

Untuk membantu pembaca layar memahami perbedaan antara elemen <table> yang menyimpan konten dan elemen yang murni untuk desain, gunakan add role="presentation" pada setiap tabel yang menyimpan konten yang perlu dibaca pelanggan. Anda hanya perlu menambahkannya ke setiap elemen <table>, bukan setiap <td>. Ini menghindari memaksa pembaca layar untuk membaca setiap sel tabel Anda satu per satu dan membantu pelanggan langsung ke konten penting.

Selain role="presentation", aria-hidden="true" adalah atribut HTML lain yang dapat ditambahkan ke elemen dalam HTML Anda yang ditujukan untuk konten visual dan harus disembunyikan dari pembaca layar:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role="presentasi" juga dapat digunakan pada gambar. Pengembang email Remi Parmienter menemukan beberapa perilaku yang tidak biasa di Chrome untuk pengguna VoiceOver—aplikasi pembaca layar untuk MacOS. VoiceOver telah mulai membaca nama file untuk gambar, meskipun atribut ALT ada tetapi kosong. Disarankan untuk menggunakan atribut HTML role="presentation" pada gambar apa pun dengan atribut ALT kosong untuk menghindari nama gambar terbaca.

Email yang Dapat Diakses dalam Tindakan

Kita dapat menerapkan tingkat aksesibilitas jika kita melihat melampaui tantangan. Fokus pada apa yang bisa Anda lakukan, bukan apa yang tidak bisa Anda lakukan.
– Paul Airy, Beyond the Envelope

Anggota Komunitas Litmus mengambil bagian dalam Kontes Komunitas untuk membuat email yang dapat diakses. Kiriman menggambarkan langkah-langkah kecil yang dapat diambil untuk membuka email ke audiens baru.

Pelanggan email ini akan dapat meningkatkan ukuran teks melalui browser mereka hingga 200% tanpa merusak desain email. Dan fitur GIF animasi yang berhenti setelah tiga siklus (dalam lima detik) bagi mereka yang menderita kejang foto-sensitif.

Eyal Bitton membuat email yang menggunakan salinan untuk tautan yang masuk akal di luar konteks, dan Eyal memberi sinyal akhir email kepada pelanggan buta dengan menggunakan beberapa teks tersembunyi.

Buletin Tipe E menggunakan peningkatan progresif interaktif untuk memungkinkan pelanggan memilih dari ukuran teks standar atau besar. Pengembang email Paul Airy juga menyertakan opsi-didorong oleh opt-in-di mana pelanggan dapat memilih untuk menampilkan email dengan latar belakang berwarna jika mereka menderita cacat tertentu.

Email-email ini menggambarkan bahwa hanya perlu beberapa langkah kecil agar email lebih mudah diakses dan berpotensi menjangkau khalayak yang lebih luas. Banyak dari langkah-langkah ini tidak hanya membantu aksesibilitas tetapi juga membantu meningkatkan email Anda untuk semua orang.

PREVIEW EMAIL ANDA DENGAN GAMBAR ON DAN OFF

Ingin melihat tampilan email Anda di 60+ klien desktop, seluler, dan email web, termasuk tampilan tanpa gambar? Cobalah Lakmus, gratis!

Mulai pengujian sekarang →

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 →