图像alt属性最佳做法

时间:2009-03-05 00:44:54

标签: html accessibility

alt标记上<img>属性的用途究竟是什么?

它应该描述图像,还是应该为屏幕阅读器(以及关闭图像的人)提供有意义的替换文本?

例如,如果我在我的网站上有一个人的简短传记,并且包含他们的一张小照片,那么视觉障碍用户是否真的有意义地向他们宣读“John Smith的照片”?

10 个答案:

答案 0 :(得分:18)

HTML 5规范上有huge section

基本上,如果您根本没有使用图像,alt属性应该是文本。如果您的图片纯粹是装饰性的,则可以使用alt=""。描述在title属性中。

答案 1 :(得分:4)

我认为我的想法是使用alt文本来传达与图像相同的信息。这取决于图像是什么。

导航元素可能更好地通过它们的功能(“下一页”,“后面”)来描述,而不是它们的外观(“右箭头”)。

约翰史密斯的照片可能会被约翰史密斯的描述所取代,或者对事件的描述等等。

答案 2 :(得分:3)

来自w3.org

虽然替代文字可能非常有用,但必须小心处理。作者应遵守以下准则:

  • 在包含用于格式化页面的图像时,请勿指定不相关的替代文字,例如,alt =“red ball”不适合添加红色球来装饰标题或段落的图像。在这种情况下,备用文本应为空字符串(“”)。无论如何,建议作者避免使用图像来格式化页面;应该使用样式表。
  • 不要指定无意义的替代文本(例如,“虚拟文本”)。这不仅会使用户感到沮丧,而且还会减慢必须将文本转换为语音或盲文输出的用户代理。

答案 3 :(得分:2)

如果由于某种原因无法加载图像,它会提供“备用”文本。在你的例子中,我会说是的,这是合适的。

答案 4 :(得分:2)

“alt”属性是图像语义的替代(文本)表示。这不仅用于无法加载的图像:它还用于屏幕阅读器或纯文本浏览器。

在您的特定情况下,包括alt-text类型取决于您是否认为重要的是要注意该页面包含该人的图片。如果它是纯视觉项目,您可能不需要任何替代文本。如果它也被用作某种类型的链接,你可能想要一些alt文本,这样使用屏幕阅读器的人就链接可能会做什么有一些线索。

答案 5 :(得分:1)

首先点击谷歌这个[img alt accessibility]给出考虑页面的样子或听起来像是什么时候没有显示图像。然后,为每个图像写一个最适合作为替代的替代文字Guidelines on alt texts in img elements

答案 6 :(得分:0)

如果没有显示图像,它应该是帮助用户的任何东西。

当您将鼠标悬停在IE中的图像上并且工具提示显示ALT不是ALT的正确行为时,请注意“功能”。标题应该用于此。

答案 7 :(得分:0)

简洁地描述图像,就好像你在和一个盲人说话一样。很简单。

我确信Google使用此属性值来索引图片搜索。

答案 8 :(得分:0)

  

如果我有简短的传记   在我的网站上的人,并包括一个   他们的小照片,真的   对视障用户有意义   让“约翰史密斯的照片”宣读   对他们?

如果您没有该替代文字,您认为他们认为图像是什么? “约翰史密斯和他的妻子的照片”? “John Smith接受他的奥斯卡奖的照片”? “约翰史密斯暗杀肯尼迪的照片”? “约翰史密斯被他的宠物大象谋杀后躺在他的露台上的照片”?

如果是约翰史密斯的照片,是的,请说出来。如果是别的话,可以这样说。

答案 9 :(得分:0)

Alt 属性与 img 标记一起使用。

Alt表示备用

用于图像的简短描述。

如果浏览器无法加载图片

,则会在屏幕上显示

Click to Know more