Ketika vendor browser melanggar standar dan melakukan hal-hal yang tidak mengikuti aturan, mereka dapat menimbulkan masalah, atau setidaknya kebingungan. Salah satu contohnya adalah cara beberapa browser menangani atribut alt (sering salah disebut tag alt), seperti Internet Explorer untuk Windows, yang memiliki banyak pengguna.
Teks alternatif (alt text) tidak digunakan sebagai tool tip, atau lebih tepatnya tidak memberikan informasi deskriptif tambahan untuk gambar. Sebaliknya, atribut title harus digunakan untuk memberikan informasi deskriptif tambahan untuk elemen tersebut. Informasi ini ditampilkan sebagai tip alat di sebagian besar browser gambar, meskipun produsen bebas merender teks atribut judul dengan cara lain.
Banyak orang tampaknya bingung dengan kedua properti ini (pertanyaan ini telah muncul di milis Grup Standar Web akhir-akhir ini), jadi saya menuliskan pemikiran saya tentang cara menggunakannya.
atribut alternatif
Untuk agen pengguna (UA) yang tidak dapat menampilkan gambar, formulir, atau applet, atribut alt digunakan untuk menentukan teks alternatif. Bahasa teks pengganti ditentukan oleh atribut lang.
Sumber: Cara menentukan teks alternatif.
Atribut Alt (perhatikan "atribut" dan bukan "label") berisi instruksi penggantian, yang diperlukan untuk gambar dan hotspot gambar. Ini hanya dapat digunakan di elemen img, area, dan input (termasuk elemen applet). Untuk elemen masukan, atribut alt dimaksudkan untuk menggantikan gambar tombol kirim. Misalnya: <input type="image" src="image.gif" alt="Kirim" />.
Gunakan atribut alt untuk memberikan deskripsi teks bagi pemirsa yang tidak dapat melihat gambar di dokumen Anda. Ini mencakup pengguna yang menggunakan browser yang tidak mendukung tampilan gambar atau menonaktifkan tampilan gambar, pengguna tunanetra, dan pengguna yang menggunakan pembaca layar. Teks alternatif digunakan untuk menggantikan gambar daripada memberikan teks deskriptif tambahan.
Pikirkan baik-baik sebelum menulis teks alternatif Anda untuk memastikan teks tersebut benar-benar memberikan informasi bagi orang-orang yang tidak dapat melihat gambar dan masuk akal dalam konteksnya. Untuk gambar dekoratif, gunakan nilai kosong (alt="", tanpa spasi di antara tanda kutip) alih-alih teks pengganti yang tidak relevan seperti "blue bullet" atau "spacer.gif". Jangan abaikan, karena jika Anda mengabaikannya, beberapa pembaca layar akan membaca nama file gambar secara langsung, dan browser teks seperti Lynx akan menampilkan nama file gambar, dan itu tidak akan banyak berguna bagi pemirsa Anda.
Cara termudah untuk mengatur teks alternatif untuk gambar yang berisi teks. Secara umum, teks yang terdapat dalam gambar dapat digunakan sebagai nilai atribut alt.
Mengenai panjang teks alternatif, lihat apa yang dikatakan WCAG 2.0 (Pedoman Ketersediaan Konten Situs Web 2.0):
Panjang nilai atribut Alt harus kurang dari 100 karakter bahasa Inggris atau pengguna harus memastikan teks pengganti sesingkat mungkin.
Saya memahaminya sebagai "sesingkat mungkin dan selama diperlukan".
Meskipun Anda ingin menampilkannya sebagai tip alat, jangan gunakan atribut alt pada elemen teks. Ini bukan tujuan penggunaannya. Sejauh yang saya tahu, ini hanya berfungsi di browser IE Windows dan Netscape 4.* kuno (versi windows). Tidak ada browser Mac yang menampilkan ini sebagai tip alat.
Penyalahgunaan atribut alt dianjurkan ketika browser menampilkan teks alt sebagai tip alat. Beberapa orang mulai menulis teks alternatif yang tidak berarti karena mereka cenderung menganggapnya sebagai informasi deskriptif tambahan daripada pengganti yang tidak dapat menampilkan gambar. Orang lain mungkin tidak ingin tip alat muncul, dan kemudian mengabaikan nilai atribut alt sepenuhnya. Praktik yang salah ini menyebabkan kesulitan bagi pemirsa yang tidak dapat melihat gambar tersebut.
Untuk informasi deskriptif tambahan dan informasi yang tidak penting, silakan gunakan atribut judul.
atribut judul
Atribut title memberikan informasi penasehat untuk elemen yang mengaturnya.
Sumber: Atribut judul.
Atribut title dapat digunakan pada semua tag kecuali base, basefont, head, html, meta, param, script dan title. Tapi itu tidak perlu. Mungkin itu sebabnya banyak orang yang belum paham kapan harus menggunakannya.
Gunakan atribut title untuk memberikan informasi tambahan yang tidak penting. Sebagian besar browser visual menampilkan teks judul sebagai tip alat saat mouse diarahkan ke elemen tertentu. Namun, cara merender teks judul bergantung pada pabrikan. Beberapa browser akan menampilkan teks judul di bilah status. Misalnya, browser Safari versi awal.
Penggunaan yang baik dari atribut title adalah dengan menambahkan teks deskriptif ke link, terutama ketika link itu sendiri tidak secara jelas menyampaikan tujuan link tersebut. Dengan cara ini pengunjung mengetahui ke mana link akan membawa mereka, dan mereka tidak akan memuat halaman yang mungkin tidak mereka minati sama sekali. Penerapan potensial lainnya adalah memberikan informasi deskriptif tambahan untuk gambar, seperti tanggal atau informasi tidak penting lainnya.
Nilai atribut title dapat diatur lebih panjang dari nilai atribut alt. Namun perlu diketahui bahwa beberapa browser akan memotong teks yang terlalu panjang (seperti tooltip atau lainnya). Misalnya browser inti Mozilla hanya dapat menampilkan 60 karakter pertama. Ini dianggap sebagai bug Mozilla dan merupakan sesuatu yang harus Anda waspadai.
Pikirkan sebelum menggunakan
Saran saya adalah menjaga teks alt Anda tetap pada intinya. Di sebagian besar aplikasi, ini harus dikosongkan, alt="" (perhatikan bahwa tidak ada spasi di antara tanda kutip). Pikirkan tentang gambar-gambar tersebut, informasi apa yang diberikan kepada orang yang melihatnya, kata-kata apa yang harus Anda gunakan untuk mendeskripsikannya, atau informasi apa yang harus Anda berikan kepada orang-orang yang tidak dapat melihat gambar tersebut? Apakah akan membantu seseorang yang tidak dapat melihat gambar untuk menulis teks alternatif sebagai "Foto: CEO berdiri di luar gedung, mengenakan jas abu-abu dan dasi hitam, memandang ke langit"? Jika Anda berpikir demikian, maka tulislah. Dalam banyak kasus, menurut saya lebih baik membiarkan teks pengganti kosong.
Untuk atribut title, sulit untuk memberikan instruksi penggunaan yang ketat. Saya kebanyakan menggunakannya pada tautan yang tidak cukup jelas, seperti teks tautan yang sama pada halaman yang sama, tetapi halaman tertaut berbeda. Terkadang teks yang lebih deskriptif disediakan untuk beberapa tombol atau elemen formulir.
deskripsi yang lebih panjang
Jika suatu gambar memerlukan deskripsi yang lebih panjang dari batas atribut alt, ada beberapa opsi.
Atribut longdesc dapat digunakan untuk memberikan link ke halaman terpisah yang berisi deskripsi teks gambar. Ini berarti menghubungkan pengunjung ke halaman lain, yang mungkin menyebabkan kesulitan dalam pemahaman. Selain itu, dukungan browser untuk atribut longdesc tidak konsisten dan tidak terlalu baik.
Atribut longdesc dapat berisi link ke bagian lain dari dokumen saat ini (anchor) dan bukan link ke halaman lain. Dalam catatan kaki Aksesibilitas, Andy Clarke memberikan penjelasan yang baik tentang cara menerapkannya.
Tautan deskripsi (tautan D) dapat digunakan untuk melengkapi longdesc. Tautan deskripsi adalah tautan biasa ke halaman yang berisi teks alternatif. Tautan ditempatkan di sebelah gambar dan tersedia di semua browser. Ada banyak pendapat berbeda tentang keefektifannya, dan saya pribadi tidak menyukai catatan ini. WCAG juga, dalam rancangan kerja Teknik HTML untuk WCAG 2.0, tautan deskripsi "tidak digunakan lagi".
Jika deskripsi panjang gambar berguna bagi pemirsa mana pun, Anda mungkin ingin mempertimbangkan untuk menampilkannya dalam dokumen yang sama daripada menautkan ke halaman lain atau menyembunyikannya. Jadi semua orang bisa membacanya. Ini adalah pendekatan yang sederhana dan berteknologi rendah.