替代文字

介绍

为图像添加替代文本是Web可访问性的第一个原则。这也是最难以正确实施的方法之一。网络上充满了缺少,不正确或不良替代文字的图像。与Web可访问性中的许多内容一样,确定适当的,等效的替代文本通常是个人解释的问题。通过使用示例,本文将介绍我们对替代文本的适当使用的经验解释。。

重要

另见我们的关于图像的文章有关图像可访问性的其他信息。。

替代文字基础

替代文本提供了网页中非文本内容的文本替代。我们将讨论替代文本,图像,虽然这些原则可以应用于媒体,applet或其他非文本web内容。。

替代文本有几个功能:

  • 它由屏幕阅读器代替图像读取,允许图像的内容和功能为具有视觉或某些认知障碍的人。。
  • 如果未加载图像文件或用户选择不查看图像,则在浏览器中显示图像。。
  • 它提供了一个语义和描述图片,可以通过搜索引擎或被用来读取后确定图像的内容从页面上下文。。

关键原则是计算机和屏幕阅读器无法分析图像并确定图像呈现的内容。作为开发人员,必须向提供该文本的用户提供文本内容功能您的网络内容中的图像。。

替代文本可以通过两种方式呈现:

  • ALT的属性IMG元件。。
  • 在图像本身的上下文或周围环境中。。

这意味着ALT属性(有时称为ALT 标签虽然从技术上讲这是不正确的)并不是提供图像内容和功能的唯一机制。该信息也可以在与图像相邻的文本中或在包含图像的页面内提供。在某些情况下,相当于不能简洁,和/或链接LONGDESC属性引用一个单独的页面,该页面包含描述可以提供的时间越长。。

重要

术语替代文本,如本文中所使用的,指的是图像的等效文本,无论该文本驻留在何处。它并不仅仅指的是ALT图像标签的属性。。Alt属性将在引用属性本身时使用,该属性本身通常会但不是唯一地包含替代文本。。

每张图片都必须有ALT属性。。这是一个HTML标准的要求(也许在HTML5少数例外)。没有的图像ALT属性很可能在万博体育网官网。在某些情况下,图像可能为空或空ALT属性(e。G。,ALT =”““)。。

语境就是一切

在为图像确定合适的替代文本时,上下文就是一切。基于图像本身的上下文和周围环境,一个图像的替代文本可能大不相同。以乔治华盛顿的下图为例:

示例图片

此图像的替代文本可能会根据上下文发生巨大变化,如下所示。。

注意

为了最好地介绍替代文本的这些原则,本文中的大多数图像都被赋予了替代文本“示例图片“。但是,图像的内容通常在页面上下文中呈现。。

例1

示例图片

因为他作为美军总司令的革命战争,之后,美国的第一任总统,乔治华盛顿通常被称为“他的国家的父亲“。。

例1中图像的适当替代文字是什么??

  1. “乔治华盛顿的形象““
  2. “乔治。华盛顿,美国第一任总统”“
  3. 一个空的ALT属性(ALT =”““)就足够了。。
  4. “乔治华盛顿”“

确定图像的适当替代文本时的第一步是确定图像是否呈现内容如果图像有功能。在大多数情况下,如果图像包含在链接中(或者是图像映射热点或按钮),则图像将仅具有功能。确定图像是否呈现内容以及内容是什么可能要困难得多。如果图像传达的内容在图像的周围环境中的文本内呈现,则为空ALT属性可能就足够了。在上面的示例中,图像呈现的内容是通知用户这是乔治华盛顿。图像没有功能,因为它不是链接而且不可点击。。

让我们来看看一些重要的规则有关ALT属性。。

重要

ALT属性应该一般

  • 是准确的,相当于呈现相同的内容功能图像。。
  • 是简洁的。。这意味着图像的正确内容(如果有内容)和功能(如果有功能)应该在适当的时候简洁地呈现。通常只需要几个单词,但很少有一两句话可能是恰当的。。
  • 不要多余或者在图像的上下文中提供与文本相同的信息。。
  • 不要使用短语“的形象。。。“要么”图形的。。。“描述图像。。用户通常明白它是图像。如果图像是传递内容,它通常是没有必要,用户知道它是一个图像传达的内容,而不是文本。如果图像是照片或插图等的事实是重要的内容,将其包含在替代文本中可能是有用的。。

根据这些规则,选项D(ALT =”乔治华盛顿”“)在这种情况下可能是最好的替代文本。选项A不必要地将图像描述为图像。选项B提供了未在图像中直接呈现的额外信息,并且对于稍后在文本中呈现的内容也是多余的。选项C(没有ALT属性)是不合适的,因为图像传达的内容不是直接在周围环境中呈现的。即使周围的文本确实表明它指的是乔治华盛顿,视觉用户也可以直接从图像的内容中分辨出来 - 所以如果图像传达内容,则应该给出替代文本。。

例2


乔治华盛顿

因为他作为美军总司令的革命战争,之后,美国的第一任总统,乔治华盛顿通常被称为“他的国家的父亲“。。

什么是合适的ALT示例2中图像的属性??

  1. “乔治华盛顿”“
  2. 一个空的ALT属性(ALT =”““)就足够了。。
  3. “图片”“
  4. 图像不需要ALT属性。。

在这种情况下,图像的内容显示在周围的内容中,因此选项B(ALT =”““)是最好的选择。选择一个会是多余的。选项C提供无关且无用的信息。选项D(没有ALT属性)从来就不是正确的选择,都必须有一个形象ALT属性。。

例3

示例图片
乔治华盛顿

什么是合适的ALT例3中的图像属性??

  1. 一个空的ALT属性(ALT =”““)就足够了。。
  2. “维基百科条目乔治华盛顿““
  3. “阅读更多”“
  4. “乔治华盛顿”“

在这种情况下,图像也是一个链接,因此它具有一个功能。每当图像在链接中时,图像的功能必须以也在链接内的替代文本中呈现。在这种情况下,链接中没有描述该功能的相邻文本,因此必须在其中显示ALT属性。结果,选项D(“乔治华盛顿”)可能是最好的选择。而单词“乔治华盛顿”在ALT属性与后面的文本是冗余的,在这种情况下,冗余是充分描述函数所必需的。。

选择一个是不够的。。链接中唯一的图像必须永远不会丢失或为nullALT属性。。这是因为屏幕阅读器必须读一些确定的联系。屏幕阅读器可以读取图像文件名称或链接到页面的URL,它可能或不可能是有用的。并且记住,链接可以从周围文本的上下文中读出,例如当用户通过页面内的链接导航时。选项B提供的内容仅通过图像无法获得(i。即,你不能简单地通过观察它来告诉图像链接到维基百科)。选项C没有提供对该功能的充分描述,特别是在上下文之外。。

通过将图像和文本标题放在一个链接中,整个示例也可以做得更好:

在这种情况下,链接和图像的内容和功能都在链接中呈现,因此可以给出图像ALT =”““避免任何冗余。。

如果可能,请避免使用“链接到。。。“要么”单击此图像到。。。“或类似的措辞ALT属性。链接被屏幕阅读器识别为链接,对于有视力的用户而言应该是视觉上明显的。。

示例4

示例图片

在这幅画中,艺术家伊曼纽尔Leutze使用光、颜色、形式、角度来看,比例,和运动创建组合。。

什么是最合适的ALT图像的属性示例4 ??

  1. “乔治华盛顿”“
  2. “乔治华盛顿的绘画““
  3. “乔治·华盛顿穿越特拉华河的画作““
  4. “一幅经典的绘画,展示了使用光线和色彩来创作构图。““
  5. “穿过特拉华河的乔治·华盛顿绘画。旋转波环绕的船雄伟的乔治·华盛顿期待的风暴和光线过河,他让他担心军队战斗。““

和以前一样,我们应该确定图像的内容是否在周围环境中呈现。在这种情况下,它不是(至少不完全)。图像不是在一个链接,所以没有功能。但是这个图像提供了一个更加困难的检查,并且最好的答案可能无法通过我们给出的有限背景来充分确定。无论如何,让我们来看看可能的选择。。

选项A(“乔治华盛顿”)可能没有充分描述图像的内容。在这幅画中,乔治·华盛顿的事实可能不一定与此相关。选项B(“乔治华盛顿的绘画“)可能足够,但不提供额外的内容。然而,将图像描述为绘画可能是合适的,而不是照片或其他图像类型。选项C提供了更多的信息,可以帮助用户识别内容本身。请记住,替代文字不仅适用于盲人。鉴于此描述,许多有视力的用户将能够识别所讨论的特定绘画,而“乔治华盛顿”单独就不够描述了。如果图像的目的是呈现特定的艺术技术并且图像本身的内容不重要,则选项D可能是合适的。如果对绘画的详细检查是有序的,选项E也可能是一个合适的选择,但是太长而且冗长有用 - 这样的文本可以更好地用作网页中的文本。。

如你所见,没有正确答案在这里。最佳替代文本将取决于图像的上下文和预期内容。。

功能图像

图像通常不仅用于提供内容,还用于提供重要功能,例如导航。。

例5

示例图片

该”产品”图像是导航栏的一部分。。

什么是最合适的ALT属性为“产品”例5中的导航图像??

  1. “产品”“
  2. “链接到产品”“
  3. 图像不传达内容,(ALT =”““)就足够了。。

在这种情况下,选项A是最佳答案。它提供了图像的内容和功能。图像显示单词“产品”并且还是网站上产品页面的链接。图像将被识别为在链接中,因此“链接”没有必要,选项B是一个糟糕的选择。因为图像是链接中唯一的对象,所以为nullALT文字永远不合适。。当图像仅包含文本时,显示的文本通常可用作替代文本。。

例子6

继续阅读下一页,了解乔治华盛顿的总统职位。。

示例图片

什么是最合适的ALT例6中蓝色箭头图像的属性??

  1. “下一个”“
  2. “下一页”“
  3. “乔治华盛顿总统任期““
  4. “继续乔治·华盛顿的总统职位““

同样,这是一个没有明确最佳答案的例子。事实上,在这个例子中,任何选项都可能是合适的。选项A和B可能会足够在大多数情况下,只要是用户明白文章中有多个页面。选项C非常清楚地表示链接的功能,但没有表明链接进入系列的下一页。选择D可能是最好的解决方案,因为它提供的功能链接,传达它的页面是一个系列的一部分。如前所述,确定最合适的替代文本由个人解释基于图像的大背景。这张图片的描述(“箭头”)不合适。也许更好的解决方案是让文本“下一页”或者与图像相邻并且在链接内,在这种情况下,图像可以被赋予空的替代文本。。

例7

什么是最合适的ALT例7中图标图像的属性?请注意,图标位于链接中。。

  1. “就业应用程序”“
  2. “PDF档案““
  3. “PDF图标““
  4. 图像的内容在上下文中呈现,因此(ALT =”““)是合适的。。

请注意,图像位于链接中。如果它不在链接内,那么ALT文字可能会有所不同。在这种情况下,因为图像提供了额外的信息关于链接的功能,是非常重要的,它是在链接本身和阅读链接。这一点至关重要,因为链接通常是从周围环境中脱离上下文访问的。。

选项A(“就业应用程序”)与周围的文本是多余的,所以它不是最好的选择。选项B是最佳选择(尽管可能更简洁“PDF”这就足够了 - 它清楚地提供了图像呈现的内容 - 链接是PDF文件。功能 (”下载就业申请表“)在链接的文本中显示,因此不需要再次包含在链接中ALT属性。选项C(“PDF图标“)真正描述图像本身,因此它不适合这种情况。在另一个上下文中,用户知道该图像确实是图标可能是重要的。选项D(空或空ALT文本)不会提供图像呈现的重要信息。。

这里需要注意的是,如果图标本身是文档的链接,则替代文本应该提供链接/图像组合的内容和功能的完全替代。类似的,”下载PDF格式的就业申请表“。“PDF格式“本身是不够的,特别是如果有多个文件都有这种性质的链接。在这种情况下,屏幕阅读器用户浏览页面上的链接会听到,“PDF格式,PDF格式,PDF格式。。。“作为一般规则,如果多次使用相同的图像在页面链接到不同的位置,选择文本中的链接应该识别差异。。

装饰图像

装饰图像不会显示重要内容,用于布局或非信息目的,并且不会出现在链接中。在几乎所有情况下,垫片和装饰图片应该为空ALT文字(ALT =”““)。。

例8

内容文字在这里。。

示例图片

页脚文字在这里。。

什么是合适的ALT例8中水平分隔符图像的属性??

  1. “装饰线”“
  2. “页脚开头““
  3. “分隔器”“
  4. ALT =”““就足够了

由于图像不传达内容且不在链接中,因此选项D是最合适的选择。图像的描述不合适。。

注意

当一个图像仅用于装饰目的,最好是把图像从页面内容并添加它使用CSS背景图像。这将根本不需要替代文本,并将从页面的语义和结构流中删除图像。。

例9

示例图片我们的业务承诺您将在这个星球上找到最好的服务。我们的团队经过专业培训,在整个合同谈判过程中提供卓越的客户服务。。

客户满意度是我们的首要任务,保证或退款。。

什么是合适的ALT例9中的图像属性??

  1. “握手”“
  2. “商人握手完成合同““
  3. ALT =”““就足够了
  4. “我们保证我们的专业万博体育苹果““

分析此示例时,确定图像是否呈现重要内容。在这种情况下,我认为并非如此。在网上的当前实践中,给出了许多这样的图像描述的替代文本,即使图像似乎没有提供有用的内容。选项C (ALT =”““)在这种情况下可能是最合适的,因为图像不传达相关或重要的内容。选项A和B描述了图像,但没有表达图像本身传达的东西 - 在这种情况下,它不是什么,或者可能只是一种情绪化的情绪或感觉。换句话说,图像大多是装饰性的。选择D显然是不正确的,不过值得注意的是,通常是注入的额外信息ALT用于提供其他信息或向搜索引擎提供其他关键字的文字。这种做法不适合使用替代文本。。

注意

在许多情况下,你可以问这个问题“如果我不能使用这张图片,我会把它放在哪里?“确定适当的替代文字。。

在上面的示例中,它是不可能握手的照片将被替换为文本,因此ALT =”““可能就足够了。。

高级图像

在某些情况下,确定替代文本可能更困难。对于所有图像,用户在屏幕阅读器和纯文本浏览器中进行测试和测试可以帮助您确定实现替代文本的最合适方法。。

图像按钮的表单

必须有一个形式图像按钮ALT描述按钮功能的属性。图像按钮通常用于提供更具视觉吸引力或更小版本的标准表单按钮。替代文本应该描述这个按钮会产生什么选择,如“搜索””提交””寄存器””下订单“等例如,可能适合网站搜索表单上的图像按钮。。

图像地图

使用客户端图像映射时,主映像必须具有ALT属性。该ALT属性应显示与图像一起显示的任何内容,但不会显示图像映射热点。例如,如果你有纽约州地图,每个地区都有热点,那么图像可能有一个ALT属性值“纽约地区“。如果主图像不传达内容,但主要只是热点的容器(例如,G。,导航栏),然后ALT =”““是合适的。。

每个图像映射热点(区域element)必须有一个等价物ALT属性。由于热点是可点击的,因此每个热点必须具有描述该热点功能的替代文本。。

因为服务器端图像映射的热点不能给出替代文本,并且因为它们不是键盘,所以不应该使用它们。。

图像切片

有时为了设计目的,在网站上将大图像切成多个图像。当多个图像切片一起传达内容时,必须将该内容呈现给用户。通常,这是通过提供替代文本来完成的ALT最大或最突出的形象片的属性。不适当的重复不必要的替代文本,打破跨多个图像替代文本ALT属性,或提供任何替代。如果图像切片在链接内,则必须在图像中提供描述链接功能的替代文本ALT属性,在ALT同一链接中的另一个图像的属性,或同一链接中的文本内的属性。每个链接必须包含功能文本描述链接功能。。

背景图片

无法直接向CSS或其他背景图像添加替代文本。传达内容的图像通常不应放在页面或元素背景中。。

不过,背景图像可以被用于装饰图像,从而把图像从页面的内容流和删除一个空的必要性ALT属性。。

有时,图像精灵或其他背景图像用于呈现内容。虽然通常应避免这些,但如果使用它们,则必须在页面标记内制作通过背景图像传送的任何内容。如果上面的示例7中的PDF图标图像是通过CSS背景图像呈现的,则可以使用文本替换技术在链接中显示内容:

就业应用程序下载(PDF)

然后你会使用CSS定位“(PDF)”文字(span class =“pdficon”“屏幕外。看到CSS in Action:屏幕阅读器用户的隐形内容更多细节。有视力的用户会看到PDF背景图像和屏幕阅读器用户会听到屏幕外的声音“(PDF)”文本。。

徽标

在网络上通常的做法是将主站点徽标也链接到站点主页。因为这是相当标准的做法,所以为图像提供替代文本,例如您的公司名称(ALT =”Acme公司),通常会足够了。将徽标识别为实际徽标(ALT =”Acme公司标志““)通常不是必需的。内容和功能不是“商标”。开发人员通常会将图像标识为主页(ALT =”Acme公司主页),但如果图像始终位于页面的开头并且替代文本是合适的,则不应该需要此附加信息。。

复杂的图像

当复杂图像的等效替代方案(例如图表,图形或地图)不能限于简洁的alt属性(可能是几个句子的长度)时,应该在其他地方提供替代方案。替代内容通常可以在页面的上下文中呈现,例如在相邻的数据表中。也可以通过链接到提供复杂图像的更长描述的单独网页来提供替代文本。链接可以与图像相邻,或者图像本身可以链接到长描述页面。图像的替代文本仍应描述图像的一般内容。。

年度销售数据折线图

查看销售数据

关于longdesc的注意事项

LONGDESCattribute旨在提供对长描述页面的引用。的价值LONGDESC的属性IMGelement将包含长描述页面的URL,长描述文本本身。然而,LONGDESC仅适用于某些屏幕阅读器。此外,有视力的用户通常不会意识到描述页面可用。而且,LONGDESC属性不是HTML5的一部分。出于这些原因,建议使用LONGDESC 不应该被指望来提供对这个长描述页面的访问。。

我们提供了longdesc支持概述(2015年9月进行)。。

图和figcaption

HTML5介绍了元素,它被定义为:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document's meaning.。

图和图形允许图像和图像标题之间的语义关联。但是,图像必须仍然有ALT提供图像的替代文本的属性,除非没有替代方案。。

结论

尽管是影响Web可访问性的最大问题,但仍然存在实现替代文本的不同和不正确的方法。通过遵循此处概述的基本原则,Web开发人员可以将他们的Web内容更多地提供给残障人士。。

  • 为图像添加替代文本是最容易学习的可访问性原则之一,也是最难掌握的原则之一。。
  • 可以提供替代文本ALT属性或在图像的周围上下文中。。
  • 每张图片都必须有ALT属性。。
  • 替代文字应该
    • 显示图像的内容和功能。。
    • 简洁。。
  • 替代文字不应该
    • 冗余(与相邻或正文相同)。。
    • 用这句话“......的形象要么”......的图形。。
  • 适当的替代文本在很大程度上取决于图像的上下文。。
  • 功能图像的替换文字(例如G。,链接中的图像)应描述功能和内容。。
  • 装饰图像仍然需要ALT属性,但它应该为null(ALT =”““)。。

网络的可访问性通常会显著增加正确如果能够和实施提供替代文本。。