Pengenalan kepada penggunaan atribut alt dan atribut tajuk HTMLimg tag_HTML/Xhtml_Web page production

Apabila vendor penyemak imbas melanggar piawaian dan melakukan perkara yang tidak mengikut peraturan, mereka boleh menyebabkan masalah, atau sekurang-kurangnya kekeliruan. Satu contoh ialah cara sesetengah penyemak imbas mengendalikan atribut alt (selalunya dipanggil teg alt secara salah), seperti Internet Explorer untuk Windows, yang mempunyai bilangan pengguna yang ramai.

Teks Alt tidak digunakan sebagai petua alat, atau lebih tepat, ia tidak memberikan maklumat deskriptif tambahan untuk imej. Sebaliknya, atribut tajuk harus digunakan untuk menyediakan maklumat deskriptif tambahan untuk elemen tersebut. Maklumat ini dipaparkan sebagai petua alat dalam kebanyakan penyemak imbas imej, walaupun pengeluar bebas untuk memberikan teks atribut tajuk dengan cara lain.

Ramai orang kelihatan keliru dengan kedua-dua sifat ini (soalan ini telah muncul dalam senarai mel Web Standards Group sejak kebelakangan ini), jadi saya menulis pendapat saya tentang cara menggunakannya.

atribut alt

ialah ejen pengguna (UA) yang tidak boleh memaparkan imej, borang atau applet Atribut alt digunakan untuk menentukan teks ganti. Bahasa teks gantian ditentukan oleh atribut lang. Sumber: Cara menentukan teks ganti

Atribut Alt (perhatikan bahawa ia adalah "atribut" dan bukannya "label") termasuk arahan penggantian, yang diperlukan untuk imej dan tempat liputan imej. Ia hanya boleh digunakan dalam elemen img, kawasan dan input (termasuk elemen applet). Untuk elemen input, atribut alt bertujuan untuk menggantikan imej butang hantar. Contohnya:

Gunakan atribut alt untuk memberikan penerangan teks untuk penonton yang tidak dapat melihat imej dalam dokumen anda. Ini termasuk pengguna yang menggunakan penyemak imbas yang tidak menyokong paparan imej secara asli atau paparan imej dimatikan, pengguna cacat penglihatan dan pengguna yang menggunakan pembaca skrin. Teks Alt digunakan untuk menggantikan imej dan bukannya menyediakan teks deskriptif tambahan.

Berfikir dengan teliti sebelum menulis teks alternatif untuk memastikan ia benar-benar memberikan maklumat kepada orang yang tidak dapat melihat imej dan ia masuk akal dalam konteks. Untuk imej hiasan, gunakan nilai kosong (alt="", tiada ruang antara petikan) dan bukannya teks gantian yang tidak berkaitan seperti "peluru biru" atau "spacer.gif". Jangan abaikan jika anda mengabaikannya, sesetengah pembaca skrin akan membaca nama fail fail imej secara langsung dan penyemak imbas teks seperti Lynx akan memaparkan nama fail fail imej, dan itu tidak akan berguna kepada penyemak imbas anda. .

Paling mudah untuk menetapkan teks alternatif untuk imej yang mengandungi teks Secara umumnya, teks yang terkandung dalam imej boleh digunakan sebagai nilai atribut alt.

Bagi panjang teks alternatif, lihat apa yang dikatakan WCAG 2.0 (Garis Panduan Ketersediaan Kandungan Laman Web 2.0):

Panjang nilai atribut Alt mestilah kurang daripada 100 bahasa Inggeris aksara atau pengguna mesti memastikan penggantian teks Keep sesingkat mungkin.

Saya memahaminya sebagai "singkat mungkin dan selagi perlu".

Walaupun anda mahu ia dipaparkan sebagai petua alat, jangan gunakan atribut alt untuk elemen teks Ini bukan kegunaannya. Setahu saya, ini hanya berfungsi dalam pelayar IE Windows dan Netscape 4 purba.* (versi windows). Tiada penyemak imbas Mac memaparkan ini sebagai petua alat.

Apabila penyemak imbas memaparkan teks alt sebagai petua alat, penggunaan atribut alt yang salah adalah digalakkan. Sesetengah orang mula menulis teks alt yang tidak bermakna kerana mereka cenderung menganggapnya sebagai maklumat deskriptif tambahan dan bukannya pengganti yang tidak dapat memaparkan imej. Orang lain mungkin tidak mahu petua alat muncul, dan kemudian mengabaikan nilai atribut alt sepenuhnya. Amalan salah ini menyebabkan kesukaran kepada penonton yang tidak dapat melihat imej.

Untuk maklumat penjelasan tambahan dan maklumat tidak penting, sila gunakan atribut tajuk.

atribut tajuk

Atribut tajuk menyediakan maklumat yang dicadangkan untuk elemen yang mana ia ditetapkan.
Sumber: Atribut tajuk.

Atribut tajuk boleh digunakan dalam semua teg kecuali asas, font asas, kepala, html, meta, param, skrip dan tajuk. Tetapi ia tidak perlu. Mungkin sebab tu ramai yang tak faham bila nak guna.

Gunakan atribut tajuk untuk memberikan maklumat tambahan yang tidak penting. Kebanyakan penyemak imbas visual memaparkan teks tajuk sebagai petua alat apabila tetikus melayang di atas elemen tertentu Walau bagaimanapun, terpulang kepada pengilang untuk memutuskan cara untuk memaparkan teks tajuk. Sesetengah pelayar akan memaparkan teks tajuk dalam bar status. Contohnya, versi awal penyemak imbas Safari.

Penggunaan atribut tajuk yang baik adalah untuk menambah teks deskriptif pada pautan, terutamanya apabila pautan itu sendiri tidak begitu jelas tentang tujuan pautan. Dengan cara ini pelawat tahu ke mana pautan akan membawa mereka dan mereka tidak akan memuatkan halaman yang mereka mungkin tidak berminat langsung. Satu lagi aplikasi yang berpotensi adalah untuk menyediakan maklumat deskriptif tambahan untuk imej, seperti tarikh atau maklumat lain yang tidak penting.

Nilai atribut tajuk boleh ditetapkan lebih lama daripada nilai atribut alt. Walau bagaimanapun, ambil perhatian bahawa sesetengah penyemak imbas akan memotong teks yang terlalu panjang (seperti petua alat atau lain-lain). Sebagai contoh, pelayar teras Mozilla hanya boleh memaparkan 60 aksara pertama. Ini dianggap sebagai pepijat Mozilla dan merupakan sesuatu yang perlu anda ketahui.

Berfikir sebelum anda menggunakannya

Nasihat saya ialah menyimpan teks alt kepada perkara pentingnya. Dalam kebanyakan aplikasi, ia harus dibiarkan kosong, alt="" (perhatikan bahawa tiada ruang antara tanda petikan). Fikirkan tentang imej tersebut, apakah jenis maklumat yang diberikan kepada mereka yang melihatnya, apakah perkataan yang perlu anda gunakan untuk menerangkannya atau apakah maklumat yang perlu anda berikan kepada orang yang tidak dapat melihat imej itu? Adakah ia benar-benar membantu seseorang yang tidak dapat melihat imej untuk menulis teks alt sebagai "Foto: Ketua Pegawai Eksekutif berdiri di luar bangunan, memakai sut kelabu dan tali leher hitam, melihat ke langit"? Jika anda fikir begitu, maka tulislah. Dalam banyak kes, saya rasa lebih baik untuk membiarkan teks gantian kosong.

Untuk atribut tajuk, sukar untuk memberikan arahan penggunaan yang ketat. Saya kebanyakannya menggunakannya pada pautan yang tidak jelas, seperti teks pautan yang sama pada halaman yang sama, tetapi halaman terpaut yang berbeza. Kadangkala lebih banyak teks deskriptif disediakan untuk beberapa butang atau elemen bentuk.

Penerangan yang Lebih Panjang

Apabila imej memerlukan penerangan yang lebih panjang daripada had atribut alt, terdapat beberapa pilihan.

Atribut longdesc boleh digunakan untuk menyediakan pautan ke halaman berasingan yang mengandungi penerangan teks imej. Ini bermakna memautkan penonton ke halaman lain, yang mungkin menyebabkan kesukaran untuk memahami. Selain itu, sokongan penyemak imbas untuk atribut longdesc adalah tidak konsisten dan tidak begitu baik.

Atribut longdesc boleh mengandungi pautan ke bahagian lain dokumen semasa (sauh) dan bukannya memaut ke halaman lain. Dalam nota kaki Kebolehcapaian, Andy Clarke memberikan penjelasan yang baik tentang cara menerapkannya.

Pautan penerangan (pautan D) boleh digunakan untuk menambah longdesc. Pautan penerangan ialah pautan biasa ke halaman yang mengandungi teks alt. Pautan diletakkan di sebelah imej dan tersedia dalam semua pelayar. Terdapat banyak pendapat yang berbeza tentang keberkesanannya, dan saya secara peribadi tidak menyukai nota ini. WCAG juga, dalam draf kerja Teknik HTML mereka untuk WCAG 2.0, pautan penerangan "ditamatkan".

Jika huraian panjang imej berguna kepada mana-mana penonton, maka anda harus mempertimbangkan untuk memaparkannya dalam dokumen yang sama, bukannya memaut ke halaman lain atau menyembunyikannya. Jadi semua orang boleh membacanya. Ini adalah pendekatan yang mudah dan berteknologi rendah.