图像上的alt属性有什么作用?
如果用户无法查看图像,alt
属性为图像提供替代信息。这可能是由于连接问题、浏览器限制、HTTP错误,或者用户使用屏幕阅读器。如果不提供alt
属性,那些无法查看图像的用户将获得较差的用户体验。
<img src="image.jpg" alt="替代文本">
如何编写良好的alt文本
alt
属性应该用于以一种对无法看到图像的人有意义的方式来描述图像。描述必须准确且简洁。一些屏幕阅读器在125个字符后会截断描述,因此最好保持描述简短。
让我们看一个例子。假设你想描述一张船在海洋上航行的图像。你可以使用以下alt
属性:
<img src="boat.jpg" alt="一艘船在海洋上航行">
在这个例子中,我们试图以电话方式向某人描述图像。注意我们在描述中没有使用"图片"或"图像"这个词。此外,我们没有简单地说"船",因为那样不提供足够的上下文。
如果图像纯粹是装饰性的呢?
如果图像是纯粹装饰性的,那么最好将alt
属性留空。这将告诉屏幕阅读器跳过图像。
<img src="decorative.jpg" alt="">
请注意,在这个例子中,我们仍然包含了alt
属性,但是我们将其留空。这与完全不包含alt
属性是不同的。如果不包含alt
属性,屏幕阅读器将会读取图片的文件名。