非文本内容——为所有呈现给用户的非文本内容都提供相同目的的替代文本_20160406


说明

这个技巧的目的为非文本内容创建一个文本替代,这个文本替代与原非文本内容有一样的目的并且呈现一样的信息。这样,将非文本内容移出,使用替代文本代替,不会有任何功能或者信息丢失。文本替代不应该详细描述非文本内容,它应该与非文本内容有一样的目的传递相同的信息。这有时会导致替代文本看起来像非文本内容的描述。但是如果和原非文本内容提供相同的服务,也是正确的。

如果可以,简短的替代文本应该完成传递目的和信息。如果短句或句子不能传递相同的信息,简短文本替代应该提供一个信息的简短概括。一个长的替代文本用来传递全部信息。

替代文本应该可以取代非文本内容。如果非文本内容从网页上移出并使用文本代替,网页仍会提供相同的功能和信息。替代文本应该简短且尽可能有信息性。

怎样确定替代文本中的文本内容,一个好的方法就是考虑以下的问题:

非文本内容为什么在这?

它呈现出的信息是什么样的?

它满足了什么目的?

如果我不使用非文本内容,应该什么的文本来传达相同的功能或信息?

当非文本内容包含对理解内容来说很重要的文字,alt文本应该包含这些文字。如果如果图片中的文本更适合放在简短文本替代中,它应该放在替代文本中,长的文本替代应该提供全部的文本。


样例

  • 一个搜索按钮使用放大将的图片,替代文本是“搜索”不是“放大镜”;

  • 一个图片展示了一个结是怎样系的,并且用箭头表示了绳子的走向。

  • 一个照片展示了一个玩具正面的样子。替代文本应该描述玩具正面;

  • 一个动画描述了如何换台。一个简单的替代文本应该是动画的内容。长的替代文本描述怎样换台。

  • 在一个列表中,每一个TechTron商品的前面有一个公司logo,这个logo应该有一个简短的替代文本读“TechTron”;

  • 一个图表展示了十月份的销售成绩,图标应该有个简短的替代文本“十月销售表格”。它应该还有一个长的文本描述,提供表格中的所有信息。

  • 一个标题包含一个有文本的图片,“战争历史”有样式,图片的alt文本应为“战争历史”;

  • 在书架上一系列书的某个图片包含交互区域提供特定书网页的导航方式。替代文本“在本节可以购买。选择一本书查看更多信息”描述了图片和交互本质。


  • 无障碍效果

    各读屏、各浏览器的支持效果

    测试人:

    争渡、IE11:
    永德、IE11:
    NVDA、IE11:
    永德、chrome:
    NVDA、chrome:
    NVDA、Firefox:
    voiceover、chrmoe:
    voiceover、Safari: