Pengantar penggunaan atribut alt dan atribut judul tag htmlimg

Ketika penjual browser mendistorsi standar dan melakukan hal -hal sendiri, mereka dapat menyebabkan beberapa masalah, atau setidaknya menyebabkan kebingungan. Salah satu contoh adalah cara beberapa browser menangani atribut ALT (biasanya disebut tag alt secara tidak benar), seperti browser IE dengan sejumlah besar pengguna di Windows.

Teks alt tidak digunakan sebagai tips alat, atau lebih tepatnya, itu tidak memberikan instruksi tambahan untuk gambar. Sebaliknya, atribut judul harus digunakan untuk memberikan informasi penjelasan tambahan untuk elemen tersebut. Informasi ini ditampilkan sebagai tip alat di sebagian besar browser gambar, meskipun produsen dapat menggunakan cara lain untuk membuat teks atribut judul.

Banyak orang tampaknya bingung dengan dua atribut ini (pertanyaannya menjadi lebih umum dalam milis grup standar web baru -baru ini), jadi saya menuliskan pemikiran saya tentang cara menggunakannya.

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 bahwa ini adalah atribut daripada label) termasuk instruksi penggantian, yang diperlukan untuk hotspot gambar dan gambar. Ini hanya dapat digunakan dalam elemen IMG, area dan input (termasuk elemen applet). Untuk elemen input, atribut alt dimaksudkan untuk mengganti gambar tombol kirim. Sebagai contoh: <input type = gambar src = image.gif alt = kirim />.

Gunakan atribut alt untuk memberikan deskripsi teks kepada pemirsa yang tidak dapat melihat gambar dalam dokumen Anda. Ini termasuk pengguna yang menggunakan browser yang tidak mendukung tampilan gambar atau tampilan gambar dimatikan, pengguna yang tunanetra dan pengguna yang menggunakan pembaca layar. Teks alternatif digunakan untuk mengganti gambar daripada memberikan keterangan tambahan.

Pikirkan baik -baik sebelum menulis teks alternatif untuk memastikan bahwa teks tersebut memang memberikan informasi ilustratif bagi mereka yang tidak melihat gambar dan masuk akal dalam konteksnya. Untuk gambar dekoratif, Anda dapat menggunakan nilai kosong (alt =, tidak ada spasi dalam kutipan) alih -alih menggunakan pengganti yang tidak relevan seperti Blue Bullet atau Spacer.gif. Jangan abaikan. Jika Anda mengabaikannya, beberapa pembaca layar akan langsung membaca nama file file gambar, dan browser teks tersebut, seperti Lynx, akan menampilkan nama file file gambar, yang akan sedikit berguna untuk browser Anda.

Paling mudah untuk mengatur teks pengganti dalam gambar yang berisi teks. Teks yang terkandung dalam gambar umumnya dapat digunakan sebagai nilai atribut alt.

Adapun panjang teks penggantian, lihat apa WCAG 2.0 (Panduan Kegunaan Konten Situs Web 2.0) mengatakan:

Nilai atribut alt harus kurang dari 100 karakter bahasa Inggris atau pengguna harus memastikan bahwa teks penggantian sesingkat mungkin.

Saya memahaminya sesingkat mungkin dan selama mungkin.

Bahkan jika Anda ingin tampil sebagai tip alat, jangan gunakan atribut alt untuk elemen teks, yang bukan penggunaannya. Sejauh yang saya tahu, itu hanya berfungsi di Windows IE Browser dan Netscape kuno 4.* (Versi Windows). Tidak ada browser Mac yang akan menampilkannya sebagai tip alat.

Ketika browser menampilkan teks pengganti sebagai tip alat, perilaku menggunakan atribut alt secara tidak benar juga didorong. Beberapa orang mulai menulis teks substitusi yang tidak berarti karena mereka cenderung berpikir itu adalah informasi ilusi tambahan daripada penggantian yang tidak dapat menampilkan gambar. Orang lain mungkin tidak ingin tip alat muncul, dan kemudian abaikan sepenuhnya menulis nilai atribut alt. Praktik -praktik yang salah ini telah menyebabkan kesulitan bagi pemirsa yang tidak dapat melihat gambar.

Untuk instruksi tambahan dan informasi yang tidak penting, silakan gunakan atribut judul.

Atribut judul memberikan informasi sugestif untuk elemen yang menetapkan atribut ini.

Sumber: Atribut judul.

Atribut judul dapat digunakan pada semua tag kecuali base, Basefont, head, html, meta, param, skrip dan judul. Tapi itu tidak perlu. Mungkin itu sebabnya banyak orang tidak mengerti kapan harus menggunakannya.

Gunakan atribut judul untuk memberikan informasi tambahan yang tidak penting. Sebagian besar browser visual menampilkan teks judul sebagai tip alat ketika mouse ditangguhkan pada elemen tertentu, tetapi ini tergantung pada produsen untuk memutuskan bagaimana membuat teks judul. Beberapa browser akan menampilkan teks judul di bilah status. Misalnya, versi sebelumnya dari browser Safari.

Atribut judul memiliki tujuan yang baik, yaitu menambahkan teks deskriptif ke tautan, terutama ketika tautan itu sendiri tidak mengungkapkan tujuan tautan dengan sangat jelas. Ini memungkinkan pengunjung untuk mengetahui di mana tautan itu akan mengambilnya, dan mereka tidak akan memuat halaman yang mungkin tidak menarik sama sekali. Aplikasi potensial lainnya adalah memberikan informasi ilustratif tambahan untuk gambar, seperti tanggal atau informasi non-esensial lainnya.

Nilai atribut judul bisa lebih lama dari nilai atribut alt. Namun, perlu dicatat bahwa beberapa browser memotong teks terlalu panjang (seperti tooltips atau lainnya). Misalnya, browser inti Mozilla hanya dapat menampilkan 60 karakter pertama. Ini dianggap sebagai bug Mozilla, dan itu adalah sesuatu yang perlu Anda perhatikan.

Saran saya adalah untuk memastikan bahwa teks penggantian sangat penting. Di sebagian besar aplikasi, itu harus dibiarkan kosong, alt = (perhatikan bahwa tidak ada spasi dalam dua kutipan). Pikirkan tentang gambar -gambar itu, informasi seperti apa yang diberikan oleh pandangan -pandangan itu, teks apa yang harus Anda gunakan untuk menggambarkannya, atau informasi apa yang harus Anda berikan kepada orang -orang yang tidak melihat gambar? Menulis teks pengganti menjadi foto: CEO yang berdiri di luar gedung, mengenakan setelan abu -abu dan dasi hitam, melihat ke langit, apakah itu sangat membantu bagi orang yang tidak dapat melihat gambarnya? Jika Anda berpikir demikian, maka Anda dapat menulisnya. Dalam banyak kasus, saya pikir lebih baik membiarkan teks penggantiannya kosong.

Untuk atribut judul, sulit untuk memberikan instruksi yang ketat. Sebagian besar penggunaan saya adalah pada tautan yang tidak dapat jelas, seperti teks tautan yang sama di halaman yang sama dan halaman tautan yang berbeda. Terkadang lebih banyak teks teks disediakan untuk beberapa tombol atau elemen bentuk.

Ketika suatu gambar membutuhkan deskripsi yang lebih panjang dan melebihi batasan atribut Alt, ada beberapa opsi.

Properti Longdesc dapat digunakan untuk menyediakan tautan ke halaman terpisah yang berisi deskripsi teks gambar. Ini berarti menghubungkan pemirsa ke halaman lain, yang dapat menyebabkan kesulitan pemahaman. Selain itu, dukungan browser untuk atribut Longdesc juga tidak konsisten, dan itu tidak terlalu bagus.

Properti Longdesc dapat berisi tautan ke bagian lain dari dokumen saat ini (Anchor Point) alih -alih menautkan ke halaman lain. Dalam catatan kaki aksesibilitas, Andy Clarke menjelaskan cara menerapkannya dengan sangat baik.

Deskripsi Tautan (t Link) dapat digunakan untuk melengkapi Longdesc. Tautan deskripsi adalah tautan reguler yang terhubung ke halaman yang berisi teks alternatif. Tautan ditempatkan di sebelah gambar dan baik -baik saja di semua browser. Orang -orang memiliki banyak pendapat berbeda tentang keefektifannya, dan saya tidak suka catatan ini menurut pendapat pribadi saya. WCAG juga, dan dalam draf mereka teknik HTML untuk WCAG 2.0, tautan deskripsi tidak disetujui.

Jika deskripsi panjang gambar berguna untuk setiap penampil, Anda harus mempertimbangkan hanya menunjukkannya di dokumen yang sama alih -alih menautkan ke halaman lain atau menyembunyikannya. Dengan cara ini semua orang bisa membacanya. Ini adalah metode yang sederhana dan berteknologi rendah.