具有文本替代HTML5的图像?

时间:2014-03-26 12:47:05

标签: html5 validation w3c-validation alt

我正在尝试验证一些HTML5文档,一切都已通过,但我收到了一些警告,有人知道如何解决这是警告

以下图片有文字替代品。请考虑文本替代方案是否有意义,考虑到页面上下文中图像的用途,并避免使用像“...的图像”这样的短语。

请注意,旁边带有文字或纯装饰的多余图标应具有alt =""代替。 图像文本替代位置 不可解析的公司徽标从第80行第8列;到第80行,第115栏

和 的 HTML

<img src="logo.png" alt="Company Logo">

有简单的解决方法吗?

1 个答案:

答案 0 :(得分:0)

很难在这里给出明确的答案。
下面给出了一些可接受的替代方案。

基本上,它有助于了解屏幕阅读器的功能,用户如何体验alt text,以及在给定情况下需要传达给该用户的确切信息。< / p>

我链接到下面的页面使我对屏幕阅读器有了很好的了解,验证了替代文本的原因以及它如何塑造盲人的网页体验。 它肯定会以一种有用的方式指导我将来使用该属性。
我现在很清楚如何编写替代文本字符串!。
真的建议您脱脂。

以下是alt图片上文字的准则。
http://jkorpela.fi/html/alt.html

这是专门引用The logo controversy的部分。

此部分值得一读,因为它对如何适当对待徽标进行了细致的讨论。
乱扔带有“徽标”的页面可能不会添加信息,并且可能会让整天都在听屏幕阅读器的人们感到烦恼。而且,这也不是我们在普通对话中会说话的方式。

注意:屏幕阅读器在链接上将alt text读为“链接到...” 如果徽标链接到主页,那么可能会有所帮助:

  

alt="FooBar main page" [优于..."FooBar logo",[因为]上下文会使文本过于误导...如果您听到“链接到FooBar徽标”,... [ ]很自然地希望它指向有关徽标的信息,而不是[the FooBar主页......
  请注意,在主页本身上,徽标不应是链接;指向页面本身的链接容易引起混乱

此外,徽标还可用于将页面“标记”为网站或企业所有。因此,在某些情况下,这可能是屏幕阅读器用户可能尚未拥有的信息,因此很有用。

最后,他们给出了大学徽标的alt文本的2种变体示例,可以很好地阐明如何使用此属性。

装饰图片可能相关的其他信息:

  

如果目的是装饰,请不要再说了   如果图像仅用于装饰,则无论装饰多么精美或美观,alt =“”都足够。用言语解释毫无意义。   多余的图片需要空的alt

冗余图像(重复周围文字的图像):

  

空的备用文本通常也适用于冗余图像,即,即使图像本身内容丰富,也可以用视觉方式说明文本中已充分说明的内容。冗余并不意味着没有用。这样的图像对于许多人来说可能非常有用,但是如果已经给出了替代文本,那么看不到图像的人就不会使用替代文本!

What about empty alt texts? Should I use alt="" or alt=" "

  

一些指南和检查人员说,不应使用空的替代文本。但是,当图像的适当替代文本为空字符串时,空的替代文本是完全有效和正确的。

     

原则上,alt =“”和alt =“”表示不同的话...
  空字符串alt =“”,因为您通常希望浏览器像完全不存在img元素一样工作(在不显示图像的情况下)。

     

但是对于间隔图像,有时最好使用alt =“”。如果在单词之间使用透明图像以创建一定宽度的间距,则当不显示图像时,alt =“”会导致出现一些空格。

以下是有关传达信息的网页上的最佳建议的最佳建议:
使文本和图像真正具有替代性。[http://jkorpela.fi/html/alt.html#parallel]