5.6　提供替代文本

如果访问者使用较大的屏幕和较快的网络，图像可能效果很好，但对于手持设备、手机用户，连接速度慢的用户以及盲人，效果就不那么好了，甚至可能导致明显的问题。可以为图像添加一段描述性文本，当图像出于某种原因不显示的时候，就将这段文字显示出来。同时，屏幕阅读器可以朗读这些文本。

提供图像无法显示时的替代文本的步骤

  • 在img标记内，在src属性及其值的后面，输入alt="。

  • 输入图像出于某种原因没有显示时应该出现的文本（参见图5.6.1和图5.6.2）。

  • 输入"。

  1. ...
  2. <body>
  3.  
  4. <h2>Barcelona's Market</h2>
  5.  
  6. <img src="cornermarket.jpg" alt="Fruit Stand in Market" />
  7.  
  8. <p>This first picture shows one of the fruit stands in the Mercat de la Boquería, the central market that is just off the Rambles. It's an incredible place, full of every kind of fruit, meat, fish, or whatever you might happen to need. It took me a long time to get up the nerve to actually take a picture there. You might say I'm kind of a chicken, but since I lived there, it was just sort of strange. Do you take pictures of your supermarket?</p>
  9.  
  10. </body>
  11. </html>

图5.6.1　尽管从理论上说，替代文本的长度没有限制，但大多数浏览器不会为其进行自动换行。因此，应尽量让替代文本少于50个字符

5.6　提供替代文本 - 图1

图5.6.2　在Internet Explorer中，替代文本出现在一个带红叉的小方块旁边。在其他浏览器中，替代文本是单独出现的

提示　在HTML5中，img元素必须包含alt属性。

　

提示　JAWS等屏幕阅读器可以将替代文本朗读出来，这样盲人或视障人士就可以了解图像的大致内容了。

　

提示　如果图像与非可视用户无关，W3C建议设置alt=""。如果图像有标题，或周围的文本可以准确地描述图像，也可以让alt留空。