Lebih dari 1 miliar orang di seluruh dunia hidup dengan berbagai bentuk disabilitas. Ketika email Anda tidak dapat diakses, Anda mengecualikan sebagian besar audiens Anda—dan kemungkinan melanggar persyaratan hukum. Panduan ini mencakup semua yang perlu Anda ketahui tentang membuat desain email yang berfungsi untuk semua orang.
Mengapa Aksesibilitas Email Penting
Memahami pentingnya desain email inklusif.
Angka-angka
Statistik Disabilitas:
- 1,3 miliar orang secara global memiliki disabilitas yang signifikan
- 285 juta mengalami gangguan penglihatan
- 466 juta mengalami gangguan pendengaran
- 15% dari populasi dunia memiliki disabilitas
Penggunaan Email: Orang dengan disabilitas menggunakan email seperti semua orang lainnya. Ketika email tidak dapat diakses, mereka tidak dapat berinteraksi dengan konten Anda.
Persyaratan Hukum
Peraturan Utama:
Americans with Disabilities Act (ADA): Mengharuskan bisnis untuk menyediakan komunikasi yang dapat diakses.
Section 508: Lembaga federal harus membuat konten elektronik yang dapat diakses.
European Accessibility Act: Persyaratan UE untuk konten digital yang dapat diakses.
AODA (Kanada): Persyaratan aksesibilitas Ontario untuk organisasi.
Risiko Ketidakpatuhan:
- Tindakan hukum dan gugatan
- Denda dan penalti
- Kerusakan reputasi
- Kehilangan pelanggan
Kasus Bisnis
Melampaui Kepatuhan:
- Jangkau lebih banyak pelanggan
- Tingkatkan pengalaman pengguna secara keseluruhan
- Keterlibatan yang lebih baik untuk semua orang
- Persepsi merek yang positif
- Manfaat SEO (beberapa teknik tumpang tindih)
Aksesibilitas Menguntungkan Semua Pengguna: Banyak perbaikan aksesibilitas membantu semua orang:
- Teks yang jelas menguntungkan semua pembaca
- Kontras yang baik membantu di bawah sinar matahari yang terang
- Struktur yang logis meningkatkan kemampuan untuk dipindai
Memahami Disabilitas dan Email
Bagaimana disabilitas yang berbeda mempengaruhi konsumsi email.
Gangguan Penglihatan
Jenis:
- Kebutaan (lengkap atau sebagian)
- Penglihatan rendah
- Buta warna
- Perubahan penglihatan terkait usia
Cara Mereka Membaca Email:
- Pembaca layar (JAWS, NVDA, VoiceOver)
- Pembesar layar
- Mode kontras tinggi
- Tampilan braille
Tantangan:
- Gambar tanpa deskripsi
- Kontras warna yang buruk
- Teks kecil
- Layout yang kompleks
- Konten yang tidak terstruktur
Gangguan Motorik
Jenis:
- Mobilitas tangan terbatas
- Tremor
- Kelumpuhan
- Cedera regangan berulang
Cara Mereka Berinteraksi:
- Navigasi keyboard
- Perangkat switch
- Kontrol suara
- Pelacakan mata
Tantangan:
- Target klik yang kecil
- Tindakan yang sensitif terhadap waktu
- Interaksi yang kompleks
- Elemen yang bergantung pada hover
Disabilitas Kognitif
Jenis:
- Disleksia
- ADHD
- Spektrum autisme
- Gangguan memori
- Ketidakmampuan belajar
Tantangan:
- Bahasa yang kompleks
- Konten yang padat
- Elemen yang mengganggu
- Struktur yang tidak jelas
- Desain yang tidak konsisten
Gangguan Pendengaran
Dampak Lebih Kecil pada Email: Email terutama bersifat visual, jadi gangguan pendengaran memiliki dampak langsung yang lebih kecil. Namun:
- Konten video memerlukan subtitle
- Konten audio memerlukan transkrip
- Bergantung pada alternatif visual untuk isyarat audio
Dasar-dasar Pembaca Layar
Memahami cara pembaca layar memproses email.
Cara Kerja Pembaca Layar
Prosesnya:
- Pembaca layar mengakses konten email
- Membaca elemen HTML secara berurutan
- Mengumumkan jenis elemen (heading, link, gambar, dll.)
- Pengguna menavigasi menggunakan perintah keyboard
- Konten diucapkan dengan keras atau dikirim ke tampilan braille
Pembaca Layar Populer:
- JAWS (Windows)
- NVDA (Windows, gratis)
- VoiceOver (Mac, iOS)
- TalkBack (Android)
- Narrator (Windows)
Apa yang Diumumkan Pembaca Layar
Untuk Elemen yang Berbeda:
Heading: "Heading level 2: Welcome to Our Newsletter"
Gambar: "Image: [konten teks alt]" atau "Image" jika tidak ada teks alt
Link: "Link: Shop Now"
Tombol: "Button: Subscribe"
Tabel: "Table with 3 columns and 5 rows"
Pola Navigasi
Cara Pengguna Menavigasi:
- Lewati berdasarkan heading
- Lompat antar link
- Bergerak melalui tabel
- Navigasi berdasarkan landmark
Mengapa Ini Penting: Struktur email Anda menentukan seberapa mudah pengguna dapat menavigasi.
HTML Semantik untuk Aksesibilitas
Membangun struktur email yang dapat diakses.
Hierarki Heading yang Tepat
Gunakan Heading Secara Logis:
<h1>Main Email Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<h3>Subsection</h3>
Jangan Lewati Level:
- ❌ Salah: h1 → h3 → h2
- ✅ Benar: h1 → h2 → h3
Mengapa Ini Penting: Pengguna pembaca layar menavigasi berdasarkan heading. Hierarki yang logis membantu mereka memahami struktur konten.
Elemen Semantik
Gunakan Tag yang Sesuai:
<p>untuk paragraf<ul>dan<ol>untuk daftar<table>untuk tabel data<strong>untuk teks penting<em>untuk penekanan
Hindari:
- Menggunakan
<br>untuk spasi (gunakan CSS) - Paragraf kosong untuk spasi
- Tabel untuk layout (bila memungkinkan)
Atribut Bahasa
Deklarasikan Bahasa:
<html lang="id">
Mengapa Ini Penting: Pembaca layar menggunakan atribut bahasa untuk mengucapkan teks dengan benar.
Untuk Konten Multibahasa:
<p lang="es">Hola, ¿cómo estás?</p>
Aksesibilitas Gambar
Membuat konten visual yang dapat diakses.
Dasar-dasar Teks Alt
Apa Itu Teks Alt: Teks alternatif yang mendeskripsikan gambar untuk mereka yang tidak dapat melihatnya.
<img src="product.jpg" alt="Tas tangan kulit merah dengan kancing emas, Rp 2.990.000">
Praktik Terbaik Teks Alt:
Bersifat Deskriptif: Jelaskan apa yang ditampilkan gambar dan mengapa itu penting untuk pemasaran email Anda.
- ❌ Buruk: "Image" atau "Photo"
- ❌ Buruk: "img_12345.jpg"
- ✅ Baik: "Pelanggan Sarah tersenyum saat menggunakan aplikasi kami di ponselnya"
Bersifat Ringkas: Usahakan 125 karakter atau kurang bila memungkinkan.
Sertakan Informasi Penting: Jika gambar berisi teks, sertakan teks tersebut dalam alt.
- Gambar menampilkan "50% OFF" → alt harus menyertakan "diskon 50%"
Konteks Penting: Jelaskan tujuan gambar dalam konteks spesifik tersebut.
Gambar Dekoratif
Kapan Menggunakan Alt Kosong: Untuk gambar yang murni dekoratif yang tidak menambah informasi:
<img src="decorative-line.png" alt="">
Contoh Gambar Dekoratif:
- Garis pemisah
- Pola latar belakang
- Grafis yang murni estetis
- Ikon di samping teks yang sudah menjelaskannya
Jangan Gunakan:
<img src="decorative.png" alt="decorative image">
Ini membuat pembaca layar mengumumkan "decorative image," yang tidak berguna.
Gambar Kompleks
Untuk Infografis dan Grafik: Berikan alternatif teks lengkap di dekatnya.
<img src="sales-chart.png" alt="Grafik penjualan yang menunjukkan pertumbuhan. Data lengkap di tabel di bawah."> <!-- Tabel data dengan angka sebenarnya --> <table> <tr><th>Bulan</th><th>Penjualan</th></tr> <tr><td>Januari</td><td>Rp 750.000.000</td></tr> ... </table>
Gambar Teks
Hindari Teks dalam Gambar:
- Pembaca layar tidak dapat membaca teks dalam gambar
- Teks tidak dapat diubah ukurannya oleh pengguna
- Tidak beradaptasi dengan preferensi pengguna
Ketika Tidak Terhindarkan: Sertakan semua teks dalam atribut alt.
<img src="sale-banner.jpg" alt="Obral Musim Panas: diskon 40% semua item. Gunakan kode SUMMER40. Berakhir 31 Juli.">
Warna dan Kontras
Memastikan aksesibilitas visual.
Persyaratan Kontras Warna
Standar WCAG:
Teks Normal (di bawah 18px atau 14px bold):
- AA: rasio kontras minimal 4.5:1
- AAA: rasio kontras 7:1 (ditingkatkan)
Teks Besar (18px+ atau 14px+ bold):
- AA: rasio kontras minimal 3:1
- AAA: rasio kontras 4.5:1
Elemen Non-Teks (tombol, bidang formulir):
- rasio kontras minimal 3:1
Memeriksa Kontras
Alat Gratis:
- WebAIM Contrast Checker
- Colour Contrast Analyser
- Stark (plugin Figma)
- Alat dev browser bawaan
Proses Pengujian:
- Identifikasi warna teks dan warna latar belakang
- Masukkan nilai hex di checker
- Verifikasi memenuhi standar AA minimum
- Sesuaikan warna jika diperlukan
Kegagalan Kontras Umum
Kombinasi Bermasalah:
- Abu-abu muda pada putih
- Kuning pada putih
- Biru muda pada putih
- Oranye pada merah
- Hijau pada merah
Alternatif yang Lebih Baik:
- Abu-abu gelap (#333) pada putih (#FFF) = 12.63:1 ✅
- Biru gelap (#0000AA) pada putih = 9.98:1 ✅
- Putih pada biru gelap (#003366) = 8.6:1 ✅
Jangan Bergantung pada Warna Saja
Masalahnya: Pengguna buta warna tidak dapat membedakan beberapa warna.
Contoh:
- Merah/hijau untuk kesalahan/sukses
- Kategori berkode warna
- Grafik dengan legenda hanya warna
Solusi: Gunakan warna PLUS indikator lain:
- Ikon
- Label teks
- Pola
- Bentuk
Contoh:
<!-- Buruk --> <span style="color: red;">Error</span> <!-- Baik --> <span style="color: red;">❌ Error: Harap masukkan email yang valid</span>
Aksesibilitas Link
Membuat link yang dapat digunakan oleh semua orang.
Teks Link Deskriptif
Jangan Gunakan:
- "Klik di sini"
- "Baca selengkapnya"
- "Pelajari lebih lanjut"
- "Di sini"
Mengapa Ini Masalah: Pengguna pembaca layar sering menavigasi berdasarkan link. "Klik di sini" di luar konteks tidak berarti.
Gunakan Sebagai Gantinya: Teks deskriptif yang menjelaskan ke mana link pergi.
<!-- Buruk --> <a href="/sale">Klik di sini</a> untuk melihat obral musim panas kami. <!-- Baik --> <a href="/sale">Lihat obral musim panas kami</a> <!-- Juga Baik --> Lihat <a href="/sale">obral musim panas kami dengan diskon 40% semua item</a>.
Styling Link
Buat Link Dapat Dikenali:
- Garis bawah (paling andal)
- Perubahan warna (dengan kontras yang cukup)
- Baik garis bawah maupun warna (terbaik)
Jangan Bergantung pada Warna Saja: Pengguna dengan buta warna mungkin tidak menyadari link yang hanya berwarna.
Ukuran dan Spasi Link
Ukuran Target Sentuh:
- Minimum 44x44 piksel direkomendasikan
- Spasi yang memadai antara link
- Mencegah klik yang tidak disengaja
Contoh:
<a href="/option1" style="display: inline-block; padding: 10px;">Opsi 1</a> <a href="/option2" style="display: inline-block; padding: 10px;">Opsi 2</a>
Link yang Membuka Jendela Baru
Tunjukkan Link Eksternal: Beri tahu pengguna ketika link membuka jendela atau tab baru.
<a href="https://external.com" target="_blank"> Situs Eksternal (dibuka di jendela baru) </a>
Atau Gunakan Indikator Visual:
<a href="https://external.com" target="_blank"> Situs Eksternal ↗ </a>
Aksesibilitas Tabel
Membuat tabel data yang dapat diakses.
Kapan Menggunakan Tabel
Gunakan Tabel Untuk:
- Data aktual (konten seperti spreadsheet)
- Informasi perbandingan
- Jadwal dan kalender
Jangan Gunakan Tabel Untuk:
- Layout/penentuan posisi (bila dapat dihindari)
- Membuat kolom (gunakan CSS)
- Spasi konten
Struktur Tabel yang Dapat Diakses
Elemen Penting:
<table role="presentation"> <!-- untuk tabel layout -->
<!-- Untuk tabel data -->
<table>
<caption>Perbandingan Produk</caption>
<thead>
<tr>
<th scope="col">Fitur</th>
<th scope="col">Basic</th>
<th scope="col">Pro</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Penyimpanan</th>
<td>10GB</td>
<td>100GB</td>
</tr>
</tbody>
</table>
Header Tabel
Gunakan Elemen <th>: Tandai sel header dengan <th>, bukan <td> yang diberi gaya.
Gunakan Atribut Scope:
scope="col"untuk header kolomscope="row"untuk header baris
Tabel Kompleks: Untuk tabel kompleks dengan beberapa level header, gunakan atribut id dan headers.
Caption Tabel
Berikan Konteks:
<table> <caption>Penjualan Q3 2024 berdasarkan Wilayah</caption> ... </table>
Caption membantu pengguna memahami tujuan tabel sebelum menyelami data.
Pertimbangan Klien Email
Aksesibilitas di berbagai klien email.
Batasan Klien Email
Masalah Umum:
- Gaya dihapus atau dimodifikasi
- Dukungan CSS terbatas
- Mesin rendering yang berbeda
- Dukungan ARIA yang tidak konsisten
Pengujian di Berbagai Klien
Klien Prioritas:
- Apple Mail (aksesibilitas terbaik)
- Outlook (bervariasi)
- Gmail (menghapus banyak CSS)
- Yahoo (terbatas)
Uji Dengan:
- Litmus
- Email on Acid
- Perangkat nyata dengan pembaca layar
Aksesibilitas Mode Gelap
Tantangan Mode Gelap:
- Inversi warna
- Perubahan kontras
- Latar belakang gambar
Solusi:
- Uji dalam mode gelap
- Gunakan latar belakang gambar transparan
- Pastikan kontras berfungsi dua arah
- Berikan gaya khusus mode gelap bila memungkinkan
Aksesibilitas Konten
Menulis konten email yang dapat diakses.
Bahasa Sederhana
Tulis dengan Jelas:
- Gunakan kata-kata sederhana
- Kalimat pendek
- Suara aktif
- Hindari jargon
Tujuan Keterbacaan: Usahakan tingkat bacaan kelas 8 atau di bawahnya.
Contoh:
Sebelum: "Manfaatkan solusi komprehensif kami untuk mengoptimalkan alur kerja Anda" Sesudah: "Gunakan alat kami untuk bekerja lebih cepat"
Struktur dan Pemformatan
Gunakan Struktur yang Jelas:
- Heading untuk bagian
- Poin-poin untuk daftar
- Paragraf pendek
- Ruang putih
Hierarki Visual:
- Info paling penting terlebih dahulu
- Perbedaan visual yang jelas
- Pemformatan yang konsisten
Urutan Pembacaan
Pastikan Urutan Logis: Urutan pembacaan dalam kode harus sesuai dengan urutan visual.
Uji: Nonaktifkan CSS dan lihat apakah konten masih masuk akal.
Menghindari Dinding Teks
Pecah Konten:
- Maksimal 3-4 kalimat per paragraf
- Gunakan subjudul setiap beberapa paragraf
- Sertakan jeda visual
Aksesibilitas Tombol dan CTA
Membuat call-to-action yang dapat diakses.
Tombol vs. Link
Gunakan Tombol Untuk: Tindakan (kirim, tambahkan ke keranjang, daftar)
Gunakan Link Untuk: Navigasi (pergi ke halaman, baca selengkapnya)
Desain Tombol yang Dapat Diakses
Persyaratan Tombol:
- Teks yang jelas menjelaskan tindakan
- Ukuran yang cukup (minimum 44x44px)
- Kontras tinggi
- Tampilan yang jelas dapat diklik
Teks Tombol:
<!-- Buruk --> <a href="/buy">Kirim</a> <!-- Baik --> <a href="/buy">Beli Sekarang - Rp 735.000</a>
Beberapa Tombol
Bedakan Tindakan: Ketika ada beberapa tombol, buat setiap tombol unik dan jelas.
<a href="/plan-basic">Pilih Paket Basic</a> <a href="/plan-pro">Pilih Paket Pro</a> <!-- Bukan --> <a href="/plan-basic">Pilih</a> <a href="/plan-pro">Pilih</a>
Formulir dalam Email
Elemen formulir yang dapat diakses (bila didukung).
Dasar-dasar Aksesibilitas Formulir
Catatan: Formulir sejati memiliki dukungan email yang terbatas. Sebagian besar "formulir" menautkan ke halaman web.
Jika Menggunakan Formulir:
Label:
<label for="email">Alamat Email</label> <input type="email" id="email" name="email">
Bidang Wajib:
<label for="email">Alamat Email (wajib)</label> <input type="email" id="email" required aria-required="true">
Pesan Kesalahan
Penanganan Kesalahan yang Dapat Diakses:
- Pesan kesalahan yang jelas
- Dikaitkan dengan bidang formulir
- Bukan indikasi hanya warna
<label for="email">Alamat Email</label> <input type="email" id="email" aria-describedby="email-error"> <span id="email-error" style="color: red;"> ❌ Harap masukkan alamat email yang valid </span>
Pengujian untuk Aksesibilitas
Memverifikasi email Anda dapat diakses.
Pengujian Otomatis
Alat:
- Ekstensi browser WAVE
- axe accessibility checker
- Lighthouse (Chrome DevTools)
- Platform pengujian email dengan fitur aksesibilitas
Yang Ditangkap Pengujian Otomatis:
- Teks alt yang hilang
- Masalah kontras warna
- Label yang hilang
- Masalah hierarki heading
- Atribut bahasa
Keterbatasan: Pengujian otomatis menangkap ~30% masalah. Pengujian manual sangat penting.
Pengujian Manual
Pengujian Keyboard:
- Navigasikan email menggunakan tombol Tab saja
- Bisakah Anda mencapai semua elemen interaktif?
- Apakah fokus terlihat?
- Apakah urutannya logis?
Pengujian Pembaca Layar:
- Dengarkan email dengan pembaca layar
- Apakah masuk akal?
- Apakah gambar dijelaskan dengan benar?
- Apakah strukturnya jelas?
Pengujian Visual:
- Perbesar hingga 200%—apakah konten masih dapat digunakan?
- Hapus gambar—apakah email masih berfungsi?
- Periksa dalam grayscale—apakah dapat dipahami?
Daftar Periksa Pengujian
Sebelum Setiap Pengiriman:
- [ ] Semua gambar memiliki teks alt
- [ ] Kontras warna memenuhi standar
- [ ] Heading terstruktur dengan benar
- [ ] Link bersifat deskriptif
- [ ] Konten diatur dengan jelas
- [ ] Diuji dengan pembaca layar
- [ ] Diuji navigasi keyboard
Daftar Periksa Aksesibilitas
Struktur
- [ ] Hierarki heading yang tepat (h1, h2, h3)
- [ ] Urutan pembacaan logis
- [ ] Atribut bahasa diatur
- [ ] HTML semantik digunakan
Gambar
- [ ] Teks alt untuk semua gambar bermakna
- [ ] Alt kosong untuk gambar dekoratif
- [ ] Teks dalam gambar memiliki ekuivalen alt
- [ ] Gambar kompleks memiliki deskripsi terperinci
Warna dan Kontras
- [ ] Teks memenuhi rasio kontras 4.5:1
- [ ] Link dapat dibedakan
- [ ] Warna bukan satu-satunya indikator
- [ ] Berfungsi dalam mode gelap
Link dan Tombol
- [ ] Teks link deskriptif
- [ ] Target sentuh yang memadai (44px)
- [ ] Perbedaan visual yang jelas
- [ ] Link eksternal ditunjukkan
Konten
- [ ] Bahasa sederhana digunakan
- [ ] Paragraf pendek
- [ ] Struktur yang jelas
- [ ] Info penting terlebih dahulu
Tabel
- [ ] Sel header ditandai dengan
<th> - [ ] Atribut scope digunakan
- [ ] Caption disediakan
- [ ] Struktur sederhana diutamakan
Kesalahan Aksesibilitas Umum
Kesalahan 1: Teks Alt Hilang
Masalah: Gambar tanpa teks alt. Perbaikan: Tambahkan alt deskriptif ke semua gambar bermakna.
Kesalahan 2: Link "Klik Di Sini"
Masalah: Teks link non-deskriptif. Perbaikan: Gunakan teks deskriptif yang menjelaskan tujuan.
Kesalahan 3: Kontras Rendah
Masalah: Teks sulit dibaca. Perbaikan: Pastikan rasio kontras minimal 4.5:1.
Kesalahan 4: Makna Hanya Warna
Masalah: Hanya menggunakan warna untuk menyampaikan informasi. Perbaikan: Tambahkan teks, ikon, atau pola sebagai indikator sekunder.
Kesalahan 5: Gambar Teks
Masalah: Teks penting ada dalam gambar. Perbaikan: Gunakan teks nyata; sertakan teks gambar dalam alt bila tidak terhindarkan.
Kesalahan 6: Level Heading yang Dilewati
Masalah: h1 langsung ke h3. Perbaikan: Gunakan hierarki heading yang logis.
Kesalahan 7: Tabel Kompleks
Masalah: Sel yang bersarang atau digabungkan membuat tabel sulit dinavigasi. Perbaikan: Sederhanakan struktur tabel; gunakan baris dan kolom sederhana.
Kualitas Data dan Aksesibilitas
Hubungan antara kesehatan daftar dan pengalaman yang dapat diakses.
Mengapa Ini Penting
Email Valid Memungkinkan:
- Pengiriman pengalaman yang konsisten
- Pelacakan keterlibatan yang akurat
- Umpan balik pengujian aksesibilitas yang tepat
Alamat Tidak Valid Berarti:
- Upaya aksesibilitas terbuang
- Metrik email terdistorsi
- Tidak dapat mengukur apakah email yang dapat diakses berkinerja lebih baik
Aksesibilitas untuk Semua Pelanggan Valid
Ketika Anda memverifikasi daftar email Anda, Anda memastikan bahwa perbaikan aksesibilitas Anda menjangkau orang-orang nyata yang mendapat manfaat darinya.
Kesimpulan
Aksesibilitas email bukan pilihan—ini penting untuk menjangkau audiens penuh Anda dan mematuhi persyaratan hukum. Lebih penting lagi, email yang dapat diakses memberikan pengalaman yang lebih baik untuk semua orang.
Prinsip aksesibilitas utama:
- Gunakan struktur semantik: Heading, daftar, dan elemen yang tepat
- Jelaskan gambar: Teks alt bermakna untuk semua gambar non-dekoratif
- Pastikan kontras: Minimal 4.5:1 untuk teks
- Tulis link deskriptif: Tidak ada "klik di sini"
- Uji dengan teknologi bantu: Pembaca layar mengungkapkan masalah yang tidak dapat Anda lihat
Email yang dapat diakses hanya penting jika mereka mencapai kotak masuk yang valid. Email yang tidak valid berarti upaya aksesibilitas Anda tidak pernah mencapai orang-orang yang membutuhkannya.
Siap memastikan email Anda yang dapat diakses mencapai pelanggan yang valid? Mulai dengan verifikasi email untuk memverifikasi daftar Anda dan memaksimalkan dampak desain email inklusif Anda.