Panduan Utama untuk Teks ALT Bergaya di Email

Praktik terbaik yang diterima secara umum di dunia email adalah penyertaan atribut ALT untuk gambar. Singkatan untuk teks alternatif, teks ALT dalam email sekarang menjadi praktik standar untuk penggemar email.

Ada beberapa alasan mengapa:

• Sebagian besar klien email memblokir gambar secara default. Dalam beberapa kasus, alih-alih menampilkan gambar, klien email malah akan menampilkan teks ALT. Ini pasti berguna, terutama dalam kasus di mana desain email sebagian besar terdiri dari gambar. Teks ALT dapat membantu mengkomunikasikan pesan meskipun gambar tidak bisa.
• Dalam situasi di mana gambar tidak dapat atau tidak dapat dimuat karena koneksi yang buruk, tautan rusak, dll., teks ALT akan muncul sebagai ganti gambar.
• Pemasar dan desainer yang peka terhadap kebutuhan pembaca tunanetra memahami bahwa teks ALT digunakan oleh pembaca layar. Karena pengguna ini tidak dapat melihat teks atau gambar, teks ALT berfungsi untuk menjelaskan gambar melalui pembaca layar.

Verifikasi bahwa gambar Anda memiliki teks ALT Dengan Daftar Periksa Litmus, Anda akan mendapatkan pratinjau email Anda dengan gambar yang tidak aktif, dan akan diberi tahu jika ada gambar Anda yang kehilangan teks ALT. Kirim dengan percaya diri setiap saat. Coba Lakmus gratis →

Menyetel teks ALT untuk gambar dalam email HTML itu sederhana. Dikenal sebagai atribut , ini adalah bagian standar sintaks HTML, dan disertakan dalam tag gambar:

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

Penting untuk menyertakan nilai tinggi dan lebar karena ini membuat kotak placeholder untuk teks ALT untuk berada saat gambar dinonaktifkan.

Tampilan teks ALT standar

Inilah tampilan gambar yang dinonaktifkan dalam email tanpa teks ALT yang dikirim ke Gmail:

Dibandingkan dengan gambar yang dinonaktifkan dalam email dengan teks ALT :

Mana yang lebih Anda sukai?

Menambahkan gaya ke teks ALT

Anda juga bisa menyukai teks ALT Anda, menambahkan sedikit CSS sebaris untuk mengubah font, warna, ukuran, gaya, dan bobot teks ALT:

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

Berikut contoh yang sama di atas, tetapi dengan gaya teks ALT yang diterapkan:

Dukungan teks ALT bergaya di seluruh klien email

Meskipun teknik yang bagus, ini masih email yang sedang kita bicarakan, jadi tentu saja dukungan sedikit tersebar di antara program email yang berbeda. Saya telah meminjam beberapa elemen dari email Dreamforce Salesforce yang mengesankan untuk menguji teks ALT bergaya untuk contoh berikut.

Dukungan Teks ALT Bergaya Webmail

Klien email web seperti Gmail adalah yang paling beragam karena program email ini dapat diakses di browser yang berbeda. Di semua klien email web, dukungan untuk teks ALT bergaya bergantung pada browser yang digunakan. Teks ALT bergaya didukung di versi Firefox, Chrome, dan Safari saat ini.

Misalnya, teks ALT yang ditata akan terlihat oleh pelanggan yang melihat Gmail mereka di Firefox, tetapi hanya berfungsi di Internet Explorer. Dalam hal ini, warna didukung, tetapi bukan font atau atribut lainnya. Internet Explorer tampaknya menjadi browser yang tidak ramah untuk teks ALT bergaya secara umum. Kami menemukan bahwa meskipun warna didukung, seringkali font tidak:

• Gmail dan G-Suite di Internet Explorer
• GMX.de di Internet Explorer
• Office 365 di Internet Explorer
• Outlook.com di Internet Explorer
• Web.de di Internet Explorer
• Yahoo! Email di Internet Explorer

Teks ALT bergaya di Gmail/Firefox:

Teks ALT bergaya di Gmail/IE:

Teks ALT pada gambar tertaut

Teks ALT untuk gambar tertaut mungkin digarisbawahi atau biru di beberapa klien email web. Yahoo! menggarisbawahi teks ALT dalam gambar tertaut, sementara Gmail menggarisbawahi dan mengabaikan warna tertentu, sebagai gantinya default ke biru cerah:

Outlook.com

Alih-alih memblokir semua gambar, Outlook.com mengklaim untuk "memblokir konten dari pengirim yang tampak mencurigakan", meskipun saya tidak yakin bagaimana mereka menentukan siapa yang terlihat mencurigakan! Secara acak, beberapa pengirim "tepercaya", secara otomatis menampilkan gambar, sementara yang lain memberikan peringatan konten yang diblokir:

Pengguna memiliki kemampuan untuk memblokir gambar untuk siapa pun yang tidak ada dalam daftar pengirim aman mereka di pengaturan Outlook.com mereka. Outlook.com memperlakukan kedua jenis pemfilteran konten ini secara berbeda, menggunakan perilaku pemblokiran gambar seperti Gmail untuk pengirim yang "berpenampilan mencurigakan" saat menggunakan kotak abu-abu Hotmail untuk memblokir gambar bagi pengguna yang memiliki setelan pemblokiran konten yang lebih ketat.

Dukungan Teks ALT Bergaya Desktop

Klien desktop sedikit lebih andal karena tidak banyak variabel yang terlibat:

*Outlook menambahkan pesan keamanan ke teks ALT. Lebih detail di bawah ini.

Meskipun Apple Mail dan Thunderbird tidak memblokir gambar secara default, Anda dapat memilih untuk melakukannya di preferensi untuk setiap aplikasi. Saya secara manual mengaktifkan pemblokiran gambar pada klien ini untuk melihat apakah mereka mendukung teks ALT bergaya.

Ada beberapa variasi kecil dalam mendukung variabel lain, terutama yang terkait dengan font web:

• Apple Mail tidak mendukung font bergaya, meskipun warna dan properti lainnya masih disertakan.
• Di Outlook 2000-2003, meskipun Anda dapat mengubah warna, Anda tidak dapat menyesuaikan apa pun dengan teks ALT yang ditata.

Pesan keamanan Outlook

Outlook 2003, 2007, 2010, 2013, dan 2016 mengawali teks ALT dengan pesan keamanan yang panjang, yang menyatakan “Klik kanan di sini untuk mengunduh gambar. Untuk membantu melindungi privasi Anda, Outlook mencegah pengunduhan otomatis gambar ini dari Internet.” Sayangnya, ini membuat teks ALT di klien email ini hampir tidak berguna karena hanya muncul di akhir peringatan keamanan Outlook:

Pesan ini juga muncul di Windows 10, sepenuhnya memblokir teks ALT apa pun.

Dukungan Teks ALT Gaya Seluler

Klien seluler memiliki dukungan kuat untuk teks ALT bergaya, yang merupakan berita bagus—terutama bagi pemasar dengan audiens Android yang banyak.

Seperti Apple Mail dan Thunderbird, saya secara manual memperbarui pengaturan iOS saya untuk memblokir gambar untuk mengamati bagaimana OS seluler ini menangani teks ALT.

Teks ALT bergaya di Android (Samsung Galaxy Nexus):

Teks ALT yang ditata muncul secara identik di aplikasi email dan Gmail di Android.

Teks ALT bergaya di BlackBerry OS 6 (Torch 9810):

Teks ALT bergaya di iOS (iPhone 5):

Pemblokiran gambar di Windows Phone 7.5 (Nokia Lumia 900):

Properti font CSS, tautan, dan panjang adalah variabel

Menyelami secara spesifik, sebagian besar properti font berikut ini didukung di klien yang menampilkan teks ALT bergaya:

• font-family
• ukuran huruf
• font-berat
• warna
• gaya tulisan

Ada beberapa variasi dalam pengujian ketika datang ke properti tertentu yang didukung. Hampir setiap klien mendukung properti warna, tetapi bukan font. Ini bervariasi di antara browser juga. Misalnya, inilah tampilan Gmail/G-Suite di Chrome dalam pengujian saya terhadap dua font bergaya, dengan warna berbeda:

Sementara Gmail/G-Suite di Internet Explorer menghormati warna tetapi bukan font:

Ketahuilah bahwa beberapa klien mungkin tidak mendukung semua font atau ukuran dalam teks ALT bergaya mereka, tetapi itu tidak berarti Anda tidak dapat menambahkan beberapa branding atau bakat. Lihat sumber daya yang berguna ini, Spesialis Pemasaran Email Jaina Mistry menulis untuk Monitor Kampanye untuk memeriksa ulang dukungan font web.

Saya juga merekomendasikan daftar font yang biasa diinstal pada Windows dan Mac.

Perilaku pemblokiran gambar penting lainnya

Di banyak klien email, teks ALT akan hilang setelah ukuran atau panjang teks melebihi lebar dan/atau tinggi wadah gambar. Karena perilaku ini, mungkin yang terbaik adalah tetap berpegang pada deskripsi yang lebih pendek dan ukuran font yang lebih kecil untuk menghindari teks ALT Anda dihapus sama sekali.

Hampir semua klien email memungkinkan Anda mengubah pengaturan untuk menampilkan atau menyembunyikan gambar secara otomatis (walaupun paling sering menyembunyikan/memblokir adalah pengaturan default), dan mereka akan meminta pengguna untuk mengaktifkan gambar untuk masing-masing pesan. Beberapa juga mengizinkan pengguna untuk menambahkan pengirim tertentu ke daftar yang diizinkan atau buku alamat, atau memilih "Selalu tampilkan gambar dari..."

Pratinjau email Anda dengan gambar mati (dan hidup!)

Bagaimana tampilan email Anda dengan gambar dinonaktifkan? Apakah teks ALT Anda dirender dengan benar? Pratinjau email Anda di lebih dari 50 klien desktop, seluler, dan email web—termasuk tampilan tanpa gambar—dengan Litmus.

Mulai pengujian →