Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Panduan Pemula untuk Mengemail Aksesibilitas (Sumber Daya + Checklist)

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Panduan ini akan memandu Anda melalui daftar periksa lebih dari tiga puluh peningkatan yang dapat Anda lakukan pada email Anda untuk memastikan mereka dapat diakses semudah mungkin. Ini juga dikemas dengan tautan dan tutorial yang berguna, jadi tandai halaman ini dan jadikan sebagai sumber daya Anda untuk aksesibilitas email.

feature image from Wax Seal Logo Mockup on Envato Market
Menampilkan gambar dari WaxSeal Logo Mockup di Envato Market

Catatan: tutorial ini adalah bagian dari seluruh seminggu dari konten email tentang Tuts+ Web Desain–check out panduan belajar menguasai HTML Email untuk lebih!

Profesional Email: Saatnya Memprioritaskan Aksesibilitas

Kami melakukan banyak upaya dalam buletin, kampanye pemasaran, dan email lain yang kami kirim. Kami dengan hati-hati menyusun pesan yang tepat. Kami dengan tekun mendesain visual. Kami menguji dengan penuh kemenangan di Outlook.

Dan itu terbayar. Email masih bagaimana kebanyakan orang lebih suka mendengar dari perusahaan, dan sebagai saluran pemasaran, ia memiliki laba atas investasi rata-rata 32 banding 1.

Tapi tetap saja, sebagian besar dari kita bisa melakukan lebih baik. Email HTML tidak dirancang secara tradisional dan dikodekan dengan aksesibilitas dalam pikiran. Akibatnya, banyak penerima kami yang berjuang untuk bergabung, dan kami membuang sebagian pemirsa kami.

Terkadang perbaikan sudah jelas. Jika seluruh email Anda terdiri dari cetak halus, kebanyakan dari kita yang berusia di atas 25 tahun akan kesulitan membacanya. Tetapi lebih sering, hambatan yang kami tempatkan antara pesan kami dan penerima kami lebih halus. Saya akan mengaku butuh waktu sejenak untuk memperhatikan masalah di foto berikut:

Begitu kami menyadari masalah ini, sering mudah diperbaiki. Dengan membaca ini, Anda sudah mengambil langkah pertama yang penting untuk membuat email Anda dapat diakses oleh lebih banyak orang.

Jika Anda baru mengkodekan email, saya sarankan untuk terlebih dahulu membaca tutorial Nicole Merlin. Ini akan mengajarkan Anda dasar-dasar email HTML, dan bagaimana mereka berbeda dari halaman web.

Kami akan membangun keterampilan tersebut saat kami mempelajari cara menerapkan pertimbangan aksesibilitas ke email kami.

Apa yang Kita Maksud dengan "Aksesibilitas"?

Pada intinya, aksesibilitas email adalah tentang membuat email Anda tersedia bagi sebanyak mungkin penerima Anda, apa pun keadaannya. Kami umumnya menganggap aksesibilitas sebagai penghitungan berbagai ketidakmampuan, dan itu benar, tetapi sebenarnya itu adalah definisi yang lebih luas dari itu, seperti yang digariskan oleh Sami Keijonen:

“Kita semua berbeda dan kebutuhan kita bisa berubah seiring waktu.” – Sami Keijonen

Cacat datang dalam berbagai bentuk dan keparahan. WHO World report on disability memperkirakan bahwa 15% dari populasi dunia hidup dengan kecacatan. Bergantung pada situasinya, individu-individu ini mungkin memiliki akses ke teknologi bantu yang membuat tugas sehari-hari lebih mudah. Agar email kami lebih mudah diakses, kami perlu menghindari menempatkan hambatan di depan orang-orang serta alat yang mereka andalkan.

Mulailah Dengan Pengalaman Dasar

Pilih email yang Anda kirim baru-baru ini. Buka di layar Anda, atau cetaklah sehingga Anda dapat mencatatnya.

Apa tujuan dari email itu? Tindakan apa yang harus dilakukan penerima setelah membacanya, atau informasi apa yang harus mereka pelajari?

Elemen apa saja yang terdiri dari email? Bagaimana masing-masing berkontribusi pada tujuan? Akankah email tetap masuk akal jika salah satu paragraf, tautan, atau gambar dihapus?

Mengajukan pertanyaan semacam ini membantu Anda menentukan pengalaman dasar–minimal yang perlu dikomunikasikan dengan sukses kepada penerima. Ini mungkin sesederhana tautan dan labelnya, atau mungkin ada banyak hal yang perlu Anda sampaikan.

Di atas segalanya, pengalaman dasar harus tersedia untuk semua penerima untuk mengakses dan memahami. Dan yang lainnya harus dirancang agar tidak menghalangi. Sekarang untuk spesifikasinya...

1. Buat Teks Dapat Dibaca

Hindari Dinding Teks

Semakin panjang paragraf, semakin sulit untuk dibaca. Ini berlaku untuk semua orang, terutama orang dengan disleksia atau ketidakmampuan belajar lainnya.

Berikut ini beberapa kiat untuk membuat teks Anda lebih bisa dipindai:

  • Bagilah paragraf panjang menjadi paragraf yang lebih pendek. Setiap paragraf harus memiliki fokus tunggal. Baca setiap kalimat dan lihat apakah itu berfokus pada hal yang sama seperti yang terakhir. Jika tidak, mulailah paragraf baru.
  • Kelompokkan paragraf terkait di bawah judul deskriptif. Jika Anda menggunakan lebih dari satu level heading, pastikan hierarki masuk akal; biasanya Anda akan menggunakan <h1> untuk judul utama, <h2> untuk setiap bagian, <h3> untuk sub-bagian, dan seterusnya. Menggunakan elemen heading semantik juga membuat email Anda lebih mudah dinavigasi menggunakan pembaca layar.
  • Gunakan italic atau bold untuk penekanan, tetapi gunakan dengan hemat. Jika Anda menekankan segalanya, tidak ada yang menonjol.
  • Hadir kelompok poin sebagai bullet (<ul>) atau nomor (<ol>) daftar untuk membuatnya mudah dicerna.
  • Sertakan grafik untuk memvisualisasikan dan mendukung konten teks.

Gunakan Kata-Kata Sederhana

Jika Anda seorang desainer atau pengembang, menulis mungkin bukan bagian dari pekerjaan Anda. Dalam hal ini, pertimbangkan untuk membagikan tutorial ini dengan kolega atau klien Anda. Ketika bekerja untuk membuat email kami dapat diakses, bahasa yang kami gunakan setidaknya sama pentingnya dengan aspek visual atau teknis.

Ingat bahwa orang membaca pada tingkat bacaan yang berbeda, karena berbagai alasan. Anda mungkin memiliki penerima disleksia. Anda bisa menulis dalam bahasa kedua mereka. Atau mungkin mereka tidak terbiasa dengan jargon subjek.

Jika Anda menulis kepada sekelompok orang tentang suatu topik, Anda akan sering lebih paham dalam materi pelajaran daripada mereka. Semakin banyak yang kita ketahui tentang sesuatu, semakin kita lupa apa yang tidak diketahui. Fenomena ini dikenal sebagai "kutukan pengetahuan".

Jika Anda tidak yakin jika orang yang kurang mengenal topik dapat memahami tulisan Anda, carilah seseorang untuk meminta umpan balik. Rekan-rekan Anda mungkin menderita karena kutukan pengetahuan juga. Mungkin Anda bisa mendapatkan bantuan dari teman, anggota keluarga, atau salah satu pelanggan Anda?

Ketika saya mendaftar untuk menulis untuk Tuts+, mereka mengirimi saya panduan gaya mereka yang memiliki beberapa contoh pilihan kata bahasa Inggris yang sederhana:

Gunakan "buy", bukan "purchase". Gunakan "help", bukan "assist". Gunakan "about", bukan "approximately".

Bisakah Anda mengganti kata-kata di email Anda dengan yang lebih sederhana? Bagaimana dengan menyimpan daftar istilah membingungkan yang biasa Anda gunakan, dan kata-kata untuk digunakan?

Ada juga beberapa rumus untuk mengukur seberapa mudahnya teks Anda dibaca.

Jika Anda menyalin dan menempel konten Anda ke Word atau Outlook, Anda bisa mendapatkan nilai yang dapat dinilai dengan menggunakan dua tes: Uji Kemudahan Membaca Flesch, yang skor kemudahan membaca dari 0 hingga 100, dan tes Tingkat Kelas Flesch-Kincaid, yang memperkirakan pada apa tingkat kelas sekolah AS seseorang biasanya akan memahami teks.

Tes-tes ini melihat rata-rata jumlah kata per kalimat, dan jumlah suku kata rata-rata per kata, sebagai indikator betapa mudahnya teks itu dibaca.

Untuk pengujian yang lebih komprehensif, coba readable.io. Alat online ini memungkinkan Anda menjalankan konten Anda melalui beberapa tes keterbacaan. Paket berbayar mereka bahkan menawarkan alat khusus untuk email: meneruskan email ke alamat email tertentu, dan mereka membalas dengan laporan keterbacaan otomatis.

Gunakan Ukuran Font 14px atau Lebih Besar

Meningkatkan ukuran font bukan hanya trik konyol untuk membuat esai Anda tampak lebih panjang.

Ini juga cara mudah untuk membuat email Anda lebih mudah dibaca. 14px adalah minimal mutlak untuk body copy. Teks di sini di Tuts+ memiliki ukuran font 18px, dan itu juga tidak terasa terlalu besar.

Judul harus cukup besar agar mudah menonjol dari salinan isi. Skala Jenis adalah alat yang berguna untuk menghitung dan melihat ukuran huruf yang sesuai. Pelajari lebih lanjut tentang skala dan hierarki dari tutorial ini:

Pastikan Anda Menggunakan Warna Kontras

Sebagai aturan umum, teks gelap pada warna latar belakang terang paling mudah dibaca oleh kebanyakan orang.

Jika Anda menggunakan kombinasi warna dengan kontras rendah, seperti teks abu-abu terang pada latar belakang putih, itu bisa sulit dibaca untuk orang-orang dengan rabun atau buta warna. Kontras rendah juga membuat teks lebih sulit dibaca di bawah kondisi pencahayaan yang buruk seperti sinar matahari langsung.

Teks terang pada latar belakang gelap juga dapat berfungsi dengan baik, terutama untuk orang dengan sensitivitas cahaya, atau saat menggunakan layar terang di lingkungan gelap. Tetapi untuk orang dengan presbyopia (penglihatan kabur), teks ringan pada latar belakang gelap menciptakan semacam efek cahaya atau cahaya. Semua orang akhirnya mengalami presbiopia sampai taraf tertentu. Kemampuan mata kita untuk fokus berkurang seiring bertambahnya usia, biasanya mulai sekitar 40 tahun.

Ada banyak alat untuk memeriksa apakah kontras warna Anda cukup tinggi:

  • contrast-ratio.com adalah alat yang bermanfaat dengan nama domain yang mudah diingat. Saat Anda memasukkan kombinasi warna, itu langsung menampilkan kontras dan mengubah bilah alamat ke tautan langsung sehingga Anda dapat berbagi kombinasi warna.
  • Saya juga sangat suka pencari kontras tanaguru, yang menyarankan opsi warna lain jika kontras Anda terlalu rendah.


color contrast tool
Benar, PapayaWhip dan DarkSlateGrey, cantik

Hindari Bobot Font Tipis

Font ultra-terang telah populer dengan desainer selama beberapa tahun sekarang, tetapi mereka kurang populer dengan orang-orang dengan penglihatan yang rendah.

Contrast good font weight bad
Kontras baik, font weight jelek

Ketika dikombinasikan dengan kontras warna rendah dan layar yang lebih tua, bobot font ini sangat sulit dibaca. Untuk pengalaman membaca yang lebih baik, gunakan pemberat dari 500 (normal) dan lebih tinggi.

Sejajarkan Salinan Tubuh Anda, Jangan Ratakan atau Pusatkan

Bahasa yang dibaca dari kiri ke kanan, seperti bahasa Inggris, paling mudah dibaca ketika rata kiri. Untuk skrip kanan-ke-kiri seperti yang digunakan dalam bahasa Arab, Persia, dan Ibrani, luruskan teks ke kanan.

Bahkan jika Anda lebih suka tampilan teks terpusat, Anda harus menghindarinya jika Anda bisa. Teks lebih mudah untuk dibaca setiap orang ketika setiap baris dimulai tepat di bawah sebelumnya. Hal ini benar bahkan untuk heading tetapi sangat penting untuk body copy.

Terakhir, Anda seharusnya tidak pernah menggunakan perataan yang dibenarkan, di mana teks diatur sehingga bahkan memiliki sisi pada kedua sisi. Teks yang dibenarkan lebih sulit dibaca secara umum, dan terutama di browser web dan klien email, yang tidak menangani pembenaran dengan baik.

Gunakan Tinggi Ketinggian Cukup Besar

Kata-kata butuh ruang untuk bernapas.

Jika garis-garis teks terlalu berdekatan, mereka bisa sulit untuk dipisahkan. Menjadi terlalu mudah untuk secara tidak sengaja melompat ke garis yang salah. Jika jaraknya terlalu jauh, mereka mulai terlihat seperti paragraf terpisah.

Tinggi baris terbaik untuk digunakan tergantung pada ukuran font dan panjang garis. Namun jika Anda menginginkan aturan cepat dan umum, Anda tidak boleh terlalu salah dengan tinggi garis 1.5 kali dari ukuran font. Misalnya, ukuran font 16px akan nyaman dibaca dengan tinggi baris 24px.

Dukungan klien email untuk properti line-height sebagian besar solid, kecuali untuk beberapa perilaku aneh di Outlook. Gunakan nilai px sebagai ganti nilai em, persentase, atau 'tanpa unit' untuk hasil yang lebih konsisten.

Buat Panjang Garis ("Ukuran") Dapat Dibaca

Semakin jauh Anda mengikuti garis teks, semakin sulit untuk menemukan jalan kembali ke tempat Anda memulai.

Jika teks Anda berjalan terlalu lebar, mata harus sering berpindah-pindah, dan sulit untuk melanjutkan membaca dari satu baris ke baris berikutnya.

Untuk pembacaan yang optimal, arahkan untuk panjang garis sekitar 45-75 karakter.

Ukuran font, tinggi garis, dan panjang garis saling mempengaruhi satu sama lain. Ada banyak pendekatan untuk menentukan proporsi. Beberapa orang suka menggunakan golden ratio (bahkan jika sifat magisnya tidak selalu merupakan resep pasti untuk sukses). Dengan menggunakan kalkulator Tipografi Golden Ratio, Anda dapat dengan cepat mendapatkan rekomendasi ketinggian garis dan menghitung panjang garis perkiraan (CPL, atau karakter per baris) berdasarkan ukuran font dan lebar kolom Anda.

Gunakan Semantic Markup

Secara tradisional, pengembang email telah mengkodekan setiap bagian dari email mereka sebagai markup tabel, termasuk baris tabel terpisah untuk setiap judul dan paragraf. Ini sebagian karena beberapa klien email digunakan untuk mengubah gaya elemen semantik, tetapi juga karena orang-orang akan terbiasa dengan cara kerja tabel HTML sehingga mereka akhirnya menggunakannya secara default.

Seperti kata pepatah: jika semua yang Anda miliki adalah palu, semuanya terlihat seperti paku.

Tetapi karena klien email telah meningkatkan render mereka, dan kami sebagai pengembang email secara kolektif telah meningkatkan praktik pengkodean kami, banyak yang menemukan bahwa ada lebih banyak kerugian daripada keuntungan pada gaya pengkodean berbasis tabel.

Jika Anda malah mengodekan paragraf, daftar, dan judul Anda, seperti <p>, <ul>, <ol>, <h1>, <h2>, dll., Maka orang yang menggunakan pembaca layar dan teknologi bantu lainnya akan lebih mudah menavigasi dan memahami konten Anda.

Anda masih akan memiliki tingkat kontrol yang sama atas bagaimana tampilan konten Anda dengan menata gaya dengan CSS, dan itu akan lebih mudah diakses, dengan lebih sedikit kode. Anda akan ingin menerapkan margin yang Anda inginkan untuk setiap elemen, sedangkan gaya seperti ukuran huruf dan warna body copy dapat disetel pada elemen induk dan diwarisi oleh semua paragraf.

Berikut contoh dasar:

Gunakan Attribute lang

Sebagian besar komputer dan smartphone hadir dengan perangkat lunak pembaca layar yang membaca teks sebagai ucapan. Untuk mengucapkan kata-kata dengan benar, dan tidak seperti seorang stuntman Italia, pembaca layar harus tahu bahasa apa yang digunakan untuk menulis teks Anda.

Untuk menentukan bahasa konten, kami menggunakan attribute lang. Berikut adalah contoh singkat tentang bagaimana kalimat bahasa Prancis berbunyi dengan dan tanpa bahasa yang ditentukan (video dari Léonie Watson):

Attribute lang bekerja dengan elemen HTML apa pun. Jika Anda menggunakan elemen yang berbeda dalam email yang sama, tentukan bahasa yang tepat untuk setiap bagian.

Bahasa utama harus diatur untuk elemen <html>. Tetapi karena beberapa klien email akan menghapus elemen ini saat menampilkan email, paling aman untuk juga mengulangi atribut pada elemen pembungkus di dalam <body>, seperti <div> sekitar seluruh konten email.

Untuk menemukan nilai yang tepat untuk digunakan untuk bahasa Anda, Anda dapat merujuk ke Subtag Registry Bahasa IANA, yang merupakan file teks panjang bahasa dan nilai subtaginya yang sesuai. Atau gunakan pencarian subtag bahasa yang lebih ramah yang memungkinkan Anda mencari informasi yang sama.

Berikut kalimat Prancis dari sebelumnya, dengan bahasa yang disetel dengan benar:

2. Gunakan Warna dengan Bijak

Jangan Berkomunikasi Hanya Dengan Warna

Penggunaan warna yang bijak dapat membantu mendukung pesan Anda atau menyampaikan suasana hati. Tetapi jika Anda mengandalkan warna saja untuk mengkomunikasikan informasi tertentu, mungkin akan terlewatkan oleh penerima yang buta, buta warna, atau dari budaya di mana warna-warna itu memiliki makna yang berbeda.

Misalnya, alih-alih menggunakan titik merah atau hijau untuk menunjukkan apakah suatu produk dalam persediaan, gunakan teks seperti "dalam stok" dan "terjual habis", dan gunakan hanya warna untuk mendukungnya.

Bawa Warna Ke Dalam Akun

Ada berbagai jenis kebutaan warna yang menyebabkan orang mengalami kesulitan membedakan warna. Jenis yang paling umum adalah kebutaan warna merah-hijau, yang membuatnya sulit membedakan warna merah dan hijau. Kebutaan warna total, yang membuat semuanya terlihat hitam dan putih, jarang terjadi.

Saat memilih warna untuk elemen teks, grafik, dan tata letak, perhatikan kombinasi warna dalam rentang merah-oranye-kuning-hijau, ditempatkan berdekatan. Apalagi jika warnanya serupa dalam kecerahan dan saturasi.

Ada juga kombinasi warna lain yang dapat menjadi canggung bagi orang-orang dengan jenis kebutaan warna yang berbeda untuk membedakan. Anda dapat menggunakan simulator kebutaan warna untuk menangkap masalah apa pun di email Anda. Ada banyak pilihan.

Jangan terlalu sering menggunakan Warna Cerah, Jenuh

Untuk orang dengan sensitivitas cahaya dan migrain, menatap layar dengan cahaya latar dapat menyebabkan ketegangan mata dan bertindak sebagai pemicu migrain. Ini dapat diperburuk oleh warna-warna cerah, terutama dalam warna biru dan merah.

Untuk area besar seperti warna latar belakang, gunakan warna yang lebih kalem bila memungkinkan.

Hindari Teks Non-Link yang Digarisbawahi atau Berwarna (Terutama Biru)

Tidak semua tautan berwarna biru dan digarisbawahi, tetapi semua teks bergaris bawah dan biru dikaitkan. Setidaknya itulah yang akan para pembaca harapkan.

Untuk menghindari kebingungan dan frustrasi, jangan menggunakan garis bawah dan warna untuk penekanan.

3. Pastikan Gambar Anda Dapat Diakses

Hindari Teks dalam Gambar

Banyak pengirim masih mendesain email dengan teks dalam gambar, bukan teks HTML langsung. Jika pemberi kerja atau klien Anda menuntut rendering sempurna piksel, sangat mudah untuk melihat bagaimana ini mungkin tampak seperti solusi yang baik. Tetapi kerugian untuk menjebak teks dalam file gambar lebih besar daripada keuntungannya.

  • Pembaca layar tidak dapat membaca teks dalam gambar.
  • Jika pemblokiran gambar dihidupkan di klien email, atau jika email dibaca offline, gambar akan pecah.
  • Anda tidak dapat memilih, menyalin, dan menempelkan teks.
  • Perangkat lunak terjemahan tidak dapat menafsirkan konten.
  • Teks tidak dapat diskalakan atau dialirkan dengan baik untuk menyesuaikan ukuran layar atau tingkat zoom yang berbeda.

Beberapa masalah ini dapat dipecahkan sebagian dengan menetapkan konten sebagai teks alternatif gambar dan styling dengan CSS. Namun sayangnya, klien email tidak berbagi cara yang konsisten dalam menangani pemblokiran gambar dan teks alternatif. Dan hirarki apa pun, seperti judul, akan hilang dalam versi teks alternatif dari konten.

Jika desain Anda meminta teks ditempatkan di atas gambar, backgrounds.cm membantu Anda mengkodekan ini dengan cara yang berfungsi di sebagian besar klien email utama.

Terakhir, dalam situasi di mana Anda tidak dapat menghindari penggunaan gambar untuk teks, tambahkan role="text" ke gambar sehingga pembaca layar akan memperlakukan nilai teks alternatifnya sebagai teks biasa.

Gunakan Teks Alternatif Bermanfaat

Kami menggunakan gambar untuk berbagai tujuan. Beberapa berisi informasi penting, yang lain adalah ilustrasi atau bagian dari tata letak.

Semua gambar harus memiliki attribute alt, tetapi atribut seharusnya tidak selalu memiliki nilai. Jika teks alternatif tidak diperlukan, gunakan attribute alt kosong untuk mencegah pembaca layar mengeja nama file gambar atau URL tautan. Lihat contoh ini dari Rémi Parmentier:


Jika gambar memiliki konten yang berharga, jelaskan dalam teks alternatif. Atau jika gambar adalah tautan, tambahkan teks alternatif untuk menjelaskan tempat tautan mengarah ke.

W3C memiliki pohon keputusan yang berguna untuk teks alternatif. Ini mencakup sebagian besar penggunaan umum untuk gambar, dan bagaimana menggunakan attribute alt dalam setiap kasus.

Gunakan GIF dengan Bertanggung Jawab

Opsi utama kami untuk menyertakan animasi dalam email kami yang akan berfungsi di sebagian besar klien email adalah menggunakan GIF. Kami telah melihat banyak contoh hebat GIF di email. Mereka bisa menjadi hebat untuk menjelaskan ide secara lebih efektif daripada yang Anda bisa dengan gambar statis, atau untuk menambahkan minat visual. Penghitung waktu mundur dan preview video adalah kegunaan populer lainnya.

Sayangnya, GIF dapat menyebabkan masalah bagi beberapa penerima.

Dalam contoh ekstrim, animasi yang intens dapat memicu kejang untuk orang dengan epilepsi fotosensitif. Jika Anda memiliki GIF yang menampilkan warna berkedip atau berkedip, atau pola tebal dengan kontras tinggi, ada baiknya menguji mereka menggunakan Alat Analisis Photosensitive Epilepsy gratis dari The Trace Center (hanya Windows). Alat ini menangkap animasi dari layar Anda dan mengidentifikasi risiko kejang potensial.

Meskipun tidak terlalu dramatis, animasi yang halus dapat menyebabkan masalah juga. GIF bahwa loop selamanya dapat mengalihkan perhatian dari konten Anda yang lain, terutama untuk orang dengan gangguan attention deficit hyperactivity (ADHD) atau autisme. Email pada Asam menawarkan beberapa praktik terbaik animasi untuk pelanggan dengan ADHD.

4. Perhatikan Layout dan Tabel

Hindari Tabel yang Tidak Diperlukan

Meskipun tabel HTML diperlukan untuk mendapatkan tata letak tertentu untuk ditampilkan dengan benar di klien email, terutama di Outlook, pengembang email cenderung terlalu sering menggunakan mereka.

Saya akan merekomendasikan mencari melalui kode template Anda untuk setiap contoh dari <table dan mengevaluasi apakah meja itu diperlukan. Saya sering bertemu tag <table> itu bisa dengan mudah diganti dengan <div> yang lebih mudah diakses dan ringan, atau bahkan dihapus sepenuhnya, tanpa itu mempengaruhi bagaimana email merender.

Gunakan role="presentation" pada Layout Tables

Pada tabel yang tersisa, tambahkan atribut role="presentation". Pembaca layar biasanya mengumumkan setiap sel tabel yang mereka temui, yang dapat membuat surel sangat membosankan untuk dibaca.

Dengan menambahkan role="presentation", Anda memberi tahu pembaca layar untuk memperlakukan tabel sebagai elemen teks biasa, dan untuk tidak menavigasi sebagai tabel data. Lihat contoh tentang Aksesibilitas di email: Bagian II oleh Mark Robbins.

Jika email Anda memiliki tabel yang berisi data tabular sebenarnya, jangan gunakan attribute role pada mereka.

Gunakan aria-hidden="true" pada Elemen Spacer

Karena margin dan padding memiliki dukungan yang agak tidak konsisten di seluruh klien email, tidak jarang menggunakan elemen terpisah seperti <div> atau bahkan gambar spacer sekolah lama untuk menambahkan jarak ke desain email.

Elemen spacer semacam itu tidak menambahkan nilai apa pun bagi orang yang membaca email Anda dengan pembaca layar. Untuk membuat pembaca layar mengabaikan spacer, tambahkan attribute aria-hidden="true" ke elemen.

5. Desain Hapus Tautan dan Klik Target

Jadikan Tautan Jelas, Di Luar Warna

Tautan sering kali merupakan bagian terpenting dari email, karena itulah cara penerima Anda mengambil langkah berikutnya. Memberi mereka warna yang berbeda dari konten lainnya akan membuat mereka lebih mudah ditemukan. Teks biru memiliki peluang terbaik untuk dikenali sebagai tautan, tetapi Anda dapat menggunakan warna lain selama mereka menonjol, bahkan untuk pengguna yang buta warna.

Hindari menggunakan warna tautan Anda untuk teks yang tidak dapat diklik, untuk mencegah kebingungan.

Menggarisbawahi teks juga membantu menyarankannya agar dapat diklik. Beberapa lebih memilih untuk menebalkan tautan mereka sebagai gantinya, untuk alasan estetika, tetapi mungkin sebaiknya sisakan teks tebal untuk penekanan.

Umumnya lebih baik untuk menghindari "Ghost buttons", gaya umum tombol dengan warna kerangka tetapi latar belakang transparan. Ini bisa sulit bagi penerima untuk mengenali sebagai dapat diklik, terutama ketika ditempatkan di atas gambar latar belakang. Gaya tombol dengan warna latar belakang yang kontras lebih mudah ditemukan.

Gunakan Teks Tautan Bermanfaat

Orang-orang yang membaca email Anda dengan pembaca layar mungkin melompati dari tautan ke tautan tanpa membaca konten di antara mereka. Dan penerima low vision dapat membaca email Anda diperbesar, melewatkan konteks di sekitar tautan Anda. Agar tautan dapat diakses oleh mereka, teks tautan harus dapat berdiri sendiri dan tetap masuk akal.

Teks tautan yang pendek dan deskriptif membantu orang menavigasi secara efisien.

Tautan yang menunjuk ke berbagai tempat tidak boleh memiliki teks tautan yang sama. Buat masing-masing unik—tanpa tautan “Baca lebih lanjut”!

Hindari menampilkan URL situs web panjang sebagai teks tautan, karena itu biasanya kurang bermanfaat sebagai teks tautan ke semua penerima.

Buat Tombol Besar dan Dapat Diklik Sepenuhnya

Untuk tautan terpenting di email Anda, tombol ajakan bertindak yang bagus dapat memberi Anda peningkatan klik-tayang yang bagus melalui tautan teks.

Memiliki area yang cukup luas untuk diklik membuat tombol lebih mudah bagi semua orang untuk memukul, terutama banyak pengguna dengan cacat fisik.

Litmus memiliki gambaran yang bagus tentang cara untuk mengkodekan tombol email. Untuk mencegah kesulitan dan frustrasi, pilih salah satu di mana seluruh permukaan tombol dapat diklik.

Litmus button

Mengatakan itu, saya memiliki preferensi pribadi untuk buttons.cm.

Jangan Jadikan Semuanya sebagai Tautan

Untuk meningkatkan klik-tayang, Anda dapat tergoda untuk mengubah setiap judul, gambar, dan bahkan paragraf, menjadi tautan ke laman landas Anda. Ini juga berarti orang dapat mengeklik tautan dengan mudah tanpa harus terlalu akurat. Namun, ada beberapa kelemahan untuk membuat semua tautan.

Bagi orang yang membaca email Anda dengan pembaca layar, setiap tautan akan dibaca, sehingga mengulangi tautan yang sama untuk setiap elemen akan membuat email Anda membosankan untuk dinavigasi.

Jika Anda memiliki elemen yang dekat satu sama lain yang seharusnya tertaut ke tempat yang sama, misalnya, ikon dengan label teks, solusi yang baik sering kali membungkus keduanya di tautan yang sama, menciptakan satu area yang dapat diklik.

Jika sebagian besar email Anda terdiri dari tautan, ini juga dapat membuat email Anda sulit untuk digulirkan di ponsel dan layar sentuh lainnya. Terutama untuk orang-orang dengan tremor atau masalah kontrol otot lainnya, membuatnya melalui email tanpa sengaja mengklik tautan yang tidak terduga dapat menjadi tantangan.

Pertimbangkan style :hover dan :fokus

Memberikan style link yang halus :hover adalah cara sederhana untuk mengkonfirmasi kepada orang-orang bahwa apa yang mereka adalah tentang untuk klik adalah, pada kenyataannya, link.

Ketika menavigasi melalui link dalam email oleh keyboard, :focus gaya membantu pembaca Anda terus melacak link yang mereka berada di. Kebanyakan klien email dan browser menambahkan garis besar sebagai default :focus gaya untuk link. Hal ini umumnya tidak terbaik untuk menghapus garis besar ini, tetapi jika Anda melakukannya, Anda harus memastikan Anda menggantinya dengan sama jelas gaya :focus.

Setiap kali Anda menambahkan gaya :hover, hal ini biasanya baik untuk menerapkan gaya yang sama untuk :focus sehingga orang akan memiliki pengalaman serupa Apakah menavigasi dengan mouse atau keyboard mereka.

Tautkan ke Konten yang Dapat Diakses

Meskipun itu bukan sesuatu yang dapat Anda kendalikan, ketika menautkan ke laman web, sebaiknya Anda memilih konten yang juga dapat diakses.

Jika Anda memiliki pilihan antara menghubungkan ke dua artikel yang serupa, di mana yang mudah dibaca dan yang lain memiliki kontras warna yang buruk atau ukuran font yang kecil—semuanya sama, pergi dengan yang lebih mudah diakses jika Anda bisa.

6. Jangan Lupakan Tentang Teks Biasa

Sertakan Versi Teks-Biasa

Karena masalah aksesibilitas yang mungkin mereka alami dengan banyak email HTML, beberapa penerima memilih untuk menggunakan email versi plain-text sebagai gantinya.

Karena Anda tidak dapat menggunakan gambar, ukuran font, warna, dan sebagainya, opsi tata letak Anda terbatas. Saat membuat versi teks biasa, pikirkan tentang cara terbaik untuk menyajikan pesan inti Anda hanya dengan teks, dan jangan khawatir tentang membuatnya konsisten dengan versi HTML.

Bayar perhatian ekstra pada cara Anda memformat tautan, karena hanya URL tautan yang dapat diklik. Pola yang baik adalah menulis label tautan deskriptif diikuti dengan tanda titik dua pada satu baris, dan kemudian URL tautan pada baris berikutnya.

Banyak ESP (Penyedia Layanan Email) akan secara otomatis menghasilkan versi teks biasa untuk Anda, tetapi jika Anda memberikannya membaca, biasanya Anda akan menemukan cara-cara kecil untuk membuatnya lebih mudah dibaca.

7. Dapatkan Akrab Dengan Pengujian dan Alat

Gunakan Alat Khusus Email Ini

Ada banyak cara untuk menguji email Anda, baik untuk membantu menemukan masalah aksesibilitas, dan untuk memeriksa apakah perbaikan Anda berfungsi sesuai harapan.

Tempat yang baik untuk memulai adalah access-email.org, yang menyediakan Anda dengan laporan aksesibilitas email Anda. Ini memeriksa bahwa semua gambar memiliki attribute alt, level heading tersebut mengikuti hierarki yang benar, dan banyak poin lain yang telah kami bahas di sini.

thorough report from httpwwwaccessible-emailorg
Laporan yang sangat lengkap dari accessible-email.org

Jika ini adalah pertama kalinya Anda mengevaluasi aksesibilitas email Anda, kemungkinannya Anda akan mendapatkan daftar perbaikan yang rapi yang dapat Anda buat. Ketika Anda kembali untuk menguji kembali kode email Anda yang diperbarui, Anda dapat menantikan kepuasan salib merah berubah menjadi tanda centang hijau.

Dengan seperangkat alat pengujian email yang populer, Litmus memungkinkan Anda memeriksa banyak aspek aksesibilitas email Anda, seperti versi teks biasa, tampilan gambar-mati, dan simulasi kebutaan warna yang berbeda dari desain email Anda.

Uji Dengan Pembaca Layar

Cara yang baik untuk mengalami email Anda seperti yang dilakukan oleh beberapa penerima adalah dengan mencoba membacanya menggunakan teknologi bantu seperti pembaca layar. Sebagian besar sistem operasi dilengkapi pembaca layar yang dapat Anda uji dengan:

Anda juga dapat mempertimbangkan pengujian dengan pembaca layar pihak ketiga. Pembaca layar yang paling umum digunakan adalah JAWS (komersial) dan NVDA (open source), yang keduanya berjalan di Windows. Untuk JAWS, lisensi 90 hari tersedia, yang membantu mengurangi biaya pengujian.

Instal Perangkat dan Plugin Browser Pilihan Anda

Semua browser web utama kini hadir dengan alat pengembang internal untuk menguji aksesibilitas. Meskipun ini tidak spesifik untuk email, sebagian besar kekhawatiran berlaku sama.

Salah satu yang sering saya gunakan adalah tab Audit di alat pengembang Chrome, yang memberi skor pada halaman dan memberikan gambaran umum tentang masalah yang harus diperbaiki.

Selain itu, ada beberapa plugin pihak ketiga yang dapat membantu Anda mendapatkan perspektif yang sedikit berbeda pada sebagian besar poin yang sama. Berikut beberapa yang saya sarankan:

  • tota11y hadir sebagai bookmarklet dan ekstensi Chrome yang dapat Anda gunakan di browser untuk menguji email Anda. Pemeriksaannya mencakup kontras warna teks dan penanda ARIA. Ini juga menunjukkan kepada Anda bagaimana pembaca layar melihat berbagai elemen di email Anda.
  • Pengembang Web adalah ekstensi browser untuk Chrome, Firefox, dan Opera, yang membuatnya mudah untuk menguji mematikan gambar dan CSS yang disematkan, di antara hal-hal lainnya.
  • Ekstensi Funkify Chrome terdiri dari satu set "simulator kecacatan". Setiap mode mengubah halaman dengan cara yang mewakili berbagai tantangan, seperti disleksia dan tangan gemetar, untuk membantu Anda mengevaluasi seberapa baik desain Anda bertahan. Funkify juga hadir dengan tota11y termasuk sebagai salah satu modenya.

Memahami Pentingnya Pengujian Pengguna

Tidak ada alat atau simulator yang dapat menggantikan berbicara dengan orang yang hidup dengan disabilitas dan belajar tentang bagaimana mereka berinteraksi dengan email Anda. InVision memiliki artikel bermanfaat tentang memulai dengan pengujian pengguna aksesibilitas.

Kesimpulan

Setelah membaca artikel ini, hal terbaik yang harus dilakukan selanjutnya adalah menemukan peningkatan cepat yang dapat Anda buat ke salah satu email Anda, dan lakukan.

Langkah apa pun yang Anda ambil untuk membuat email yang lebih mudah diakses akan membantu memasukkan lebih banyak orang, yang meningkatkan audiens Anda. Dan ketika Anda memperbaiki masalah yang membuat surel Anda sulit dibaca bagi para penyandang cacat, kemungkinan Anda juga akan membuat segalanya menjadi lebih baik bagi semua orang.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.