如何为图像编写好的替代文本,以帮助屏幕阅读器和盲人用户了解图片是什么?

时间:2009-11-16 11:47:41

标签: usability accessibility w3c wcag

如何为图像编写好的替代文字,以帮助屏幕阅读器和盲人用户了解图片的内容?如果我们使用Alt文本,那么如果我们在菜单图像等特殊情况下使用它们,那么应该在Title =“text”中应该是什么

3 个答案:

答案 0 :(得分:19)

我是一名屏幕阅读器用户,并将使用Stackoverflow作为好的和坏的一个例子。

Alt标签应简洁且具有描述性。例如,用于投票和投票选项的stackoverflow的alt标签很好,因为它们不需要很长时间才能阅读并快速达到目的。坏alt标签的例子是让这个问题成为最喜欢的并接受这个答案。这两个标签都不具有描述性,最喜欢的标签只是“*”而接受答案标签是“check”我告诉他们的唯一方法是阅读来源或拥有有人看见让我知道它们的用途。

title属性而言,我并没有太多建议。我的屏幕阅读器默认不读它们,所以我通常不会使用它们。可能有用的一个例子是附加信息。例如,我接受的答案率如此之低的原因是因为我无法说出我是否接受了一个问题的答案。如果接受此答案图形上的title属性会说“点击接受此答案”,如果答案未被接受,并且“点击将此答案删除为接受的答案“如果是接受的答案。

答案 1 :(得分:12)

您应该让视障用户了解图片的全部内容。对于盲人而言,图像有效不存在,所有文字都是文本。

alt文本应该作为单个句子/段落工作,可以替换图像,传达相同的内容,并且在相邻内容的上下文中仍然有意义。

如果图像是GUI的一部分,则alt文本应传达动作(动词),行 upvote 回答此退出

您应该使用links访问您的网站,并尝试了解您的网站。如果存在饼图,则其alt文本应该是百分比的小摘要。如果你只是在博客文章旁边有一朵漂亮的花,不要给它一个innane alt文本,如博客邮件#324 的花卉图片伴侣,或者甚至更糟糕的 flower.jpg

如果图片对导航很重要或获取信息,请尝试为其提供alt文字,以使网站在没有图片的情况下正常工作。如果图片仅为演示文稿,请为其添加一个空的alt文字。

据我所知,

title只应在悬停时显示,因此他们应该为图片提供额外信息,因此应避免使用useless duplication of information。对于屏幕阅读器,这有点棘手,因为用户之间的支持和配置可能非常不同。

有些empirical data显示title无效:

  
      
  • 屏幕阅读软件的大多数用户不会更改其默认设置以访问链接上的TITLE属性信息。
  •   
  • 默认情况下,大多数屏幕阅读软件都可以访问表单控件上的TITLE属性内容。
  •   
  • 某些屏幕阅读软件无法访问TITLE属性信息。
  •   
  • 屏幕放大镜的用户可以在较低的放大倍率下读取TITLE属性文本。
  •   
  • 屏幕放大镜的用户无法在更高的放大倍数下读取包含超过1或2个字的TITLE属性文本。
  •   

Here's good piece of advice,比我更好“

  

使用此选项可提供非必要的其他信息。大多数可视浏览器在元素悬停时将标题文本显示为工具提示,但是由浏览器制造商决定如何呈现标题文本。有些会在状态栏中显示文字。例如,早期版本的Safari就是这样做的。

     

title属性的一个很好的用途是向链接添加描述性文本,特别是如果链接文本本身没有清楚地描述链接的目的地。通过这种方式,您可以帮助访问者了解链接的位置,可以避免他们加载页面,只是发现它不是他们感兴趣的东西。另一个潜在的用途是为图像提供额外的信息,例如日期或其他可能不重要的信息。

请记住,longdesc属性应该是链接以获取更多信息,而不是文本,因为有些人会错过它。

答案 2 :(得分:0)

我认为最佳做法是在alt和title属性中加入相同的内容。

关于“写什么” - 只是简单,用几句话就可以了解图片。

查看这篇文章,其中描述了alt属性:http://www.cs.tut.fi/~jkorpela/html/alt.html