alt attribute dan title attribute_CSS/HTML

作者：JunChen 2005-5-23 12:00:35
原文：http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
翻译：JunChen

首发：http://blog.handsbrain.com/junchen/archive/2005/05/21/3355.aspx
版权：本文版权归译者Junchen所有，转载请先联系译者。
当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事，他们可能会造成一些问题，或者至少产生了混淆。例子之一就是一些浏览器处理alt属性（一般会被错误的称作alt标签）的方式，比如拥有大量用户的Windows的IE浏览器。

替换文字（alt text）并不是用来做提示（tool tip），或者更加确切的说，它并不是为图片提供额外说明信息的。相反地，title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示（tool tip），虽然制造商可以任意采取其他方式渲染title属性的文字。

很多人看来对这两个属性感到迷惑（最近这个问题在Web Standards Group邮件列表里变多了）， 所以我写下我的想法，如何去用它们。

alt属性

为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。
来源：How to specify alternate text.

Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。比如：.

使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

在写替换文字前仔细想想，保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格），而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它，如果你忽略了，那么一些屏幕阅读器会直接阅读图像文件的文件名，那些文字浏览器，比如Lynx会显示图像文件的文件名，而那对于你的浏览者就没什么用了。

包含文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。

至于替换文字的长度，看看WCAG 2.0（网站内容可用性指南2.0）是怎么说的：

Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
我把它理解为“尽可能短，尽需要长”。

即使你想让它显示为提示（tool tip），也不要给文字元素使用alt属性，这并不是它的用法。至今据我所知，那样做仅能在Windows的IE浏览器和古老的Netscape 4.*（windows版本）有效。没有一个Mac的浏览器会将它显示为提示（tool tip）。

当浏览器把替换文字显示为提示（tool tip）后，那些错误使用alt属性的行为也受到了鼓励。一些人开始写无意思的替换文字，因为他们趋向于认为它是一个额外的说明信息，而不是不能显示图像的替换。其他人可能不想让提示（tool tip）出现，然后就完全忽略了写alt属性值。这些错误的做法，都给那些不能看到图像的浏览者造成了困难。

额外的说明信息和非本质的信息请使用title属性。

title属性

title属性为设置该属性的元素提供建议性的信息。
来源: The title attribute.

title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。

使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip），然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。

Penggunaan atribut tajuk yang baik adalah untuk menambah teks deskriptif pada pautan, terutamanya apabila tujuan pautan tidak begitu jelas daripada pautan itu sendiri. 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 menggunakan

Nasihat saya adalah untuk mengekalkan teks alt anda kepada intipati. Dalam kebanyakan aplikasi, ia harus dibiarkan kosong, alt="" (perhatikan bahawa tiada ruang antara tanda petikan). Fikirkan tentang imej tersebut, apakah maklumat yang mereka berikan 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 tersebut? 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 yang dibenarkan oleh 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 penerangan panjang imej berguna kepada mana-mana penonton, maka anda harus mempertimbangkan untuk memaparkannya dalam dokumen yang sama, dan bukannya memaut ke halaman lain atau menyembunyikannya. Jadi semua orang boleh membacanya. Ini adalah pendekatan yang mudah dan berteknologi rendah.

Maklumat lanjut

Ingin mengetahui lebih lanjut tentang atribut alt, title dan longdesc? Lihat di sini:

Garis panduan tentang teks alt dalam elemen img
Menulis teks ALT yang baik
Alternatif yang boleh diakses
Nota kaki kebolehaksesan
Masalah imej
Atribut Tajuk – Ambilan Anda
Menggunakan Tajuk pautan untuk Membantu Pengguna Ramalkan Ke Mana Mereka Akan Pergi
Cara untuk menentukan teks ganti
Atribut tajuk