WebAIM-考虑到Web可访问性

替代文本

介绍

添加图像的替代文本是Web可访问性的第一个原则。它也是最困难的妥善实施之一。Web与丢失,不正确或替代文本不佳的图像。与Web可访问性的许多东西一样,确定适当的,等同,替代文本通常是个人解释问题。通过使用示例,本文将展示我们经验丰富的替代文本使用的解释。

重要

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

替代文本基础知识

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

替代文本服务多个功能:

  • 它是由屏幕阅读器代替图像来读取的,允许那些有视觉或某些认知障碍的人访问图像的内容和功能。万博体育官网网址
  • 如果未加载图像文件或用户选择不查看图像,则会在浏览器中显示它来代替图像。
  • 它提供了图像的语义和描述,这些语义和描述可以被搜索引擎读取,也可以用于以后仅从页面上下文确定图像的内容。

关键原理是计算机和屏幕阅读器不能分析图像并确定图像显示的内容。作为开发人员,必须将文本提供给呈现内容功能您的web内容中的图像。

备选文本可通过两种方式呈现:

  • alt.的属性IMG.元素。
  • 在图像本身的上下文或环境中。

这意味着alt.属性(有时称为alt.标签,尽管技术上这是不正确的)并不是提供图像内容和功能的唯一机制。此信息也可以在图像附近的文本中或包含图像的页面中提供。在某些情况下,如果无法简洁地呈现等效内容,则可以提供指向单独页面的链接,该页面包含图像内容的较长描述。

重要

术语替代文本如本文所使用的,指的是图像等同于图像的文本,无论该文本所在的位置如何。它没有仅引用alt.图像标记的属性。Alt属性将在引用属性本身时使用,属性本身通常包含替代文本

每个图像都必须有一个alt.属性。这是HTML标准的要求(HTML5中可能有一些例外)。不带alt.属性可能无法访问。在某些情况下,图像可能会被赋万博体育官网网址予一个空的alt.属性值(例如,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=“”)是最好的选择。选项a将是冗余的。选项C提供无关和无用的信息。选项d(否alt.属性)从来都不是正确的选择-每个图像都必须有一个alt.属性。

例3

示例映像
乔治华盛顿

合适的方法是什么alt.示例3中图像的属性?

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

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

选择A是不够的。是链接内部唯一缺失或空的图像alt.属性。这是因为屏幕阅读器必须读取某些东西以识别链接。屏幕读者可能会读取图像文件名或页面的网址链接到,可能会或可能无用。并记住,可以读出周围文本的上下文的链接,例如当用户通过页面内的链接导航时。选项B提供单独图像不可用的内容(即,您无法通过查看它来告诉图像链接到Wikipedia)。选项C不提供函数的足够描述,特别是在上下文之外。

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

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

尽可能避免使用“链接到...”或“点击此图像到...”或类似的措辞alt.属性。链接被屏幕阅读器识别为链接,对于有视力的用户来说应该是可见的。

例4

示例映像

在这幅画中,画家伊曼纽尔·鲁兹运用光、色彩、形式、透视、比例和动作来创作构图。

什么是最合适的alt.示例4中图像的属性?

  1. “乔治华盛顿”
  2. 《乔治华盛顿画报》
  3. 《乔治华盛顿横渡特拉华河图》
  4. “经典绘画,展示了光和颜色的使用来创造成分。”
  5. “乔治华盛顿绘制了特拉华河的绘画。旋转的波浪围绕着雄伟的乔治华盛顿在那里看着暴风雨的船,因为他领导他警惕战斗的河流过往河流的光线。”

和以前一样,我们应该确定图像的内容是否在周围的上下文中呈现。在这种情况下,情况并非如此(至少不是完全如此)。图像不在链接中,因此没有函数。但这张图片提供了一个更困难的检查,最好的答案可能不能充分地由有限的上下文,我们已经给出了决定。不管怎样,让我们看看可能的选择。

选项A(“乔治华盛顿”)可能没有充分描述图像的内容。事实上,这幅画中的乔治华盛顿未必与此相关。备选方案B(“乔治·华盛顿画作”)可能足够了,但没有提供太多额外的内容。然而,将图像描述为绘画可能是合适的,而不是照片或其他图像类型。选项C提供了更多信息,可以帮助用户识别内容本身。记住,另类文本不仅仅适用于盲人。许多有远见的用户将能够识别出特定的绘画问题给予这种描述,而“乔治华盛顿”本身就不够描述性。如果图像的目的是呈现一种特定的艺术技巧,而图像本身的内容并不重要,则选项D可能是合适的。如果对绘画进行详细检查,但篇幅太长、太冗长而没有多大用处,则备选方案E也可能是一个适当的备选方案——这种文本最好作为网页内的文本。

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

功能图像

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

例5

示例映像

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

什么是最合适的alt.在示例5中的“产品”导航图像的属性?

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

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

例6.

继续下一页阅读乔治华盛顿的总统任期。

示例映像

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

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

同样,这是一个没有明确最佳答案的例子。事实上,在本例中,任何选项都可能是合适的。选项A和B在大多数情况下可能就足够了,只要用户清楚文章中有多个页面。选项C非常清楚地显示了链接的功能,但没有显示链接进入系列中的下一页。选项D可能是最好的解决方案,因为它显示了链接的功能,并表示它是一系列页面的一部分。如前所述,确定最合适的替代文本取决于基于所讨论图像的更大上下文的个人解释。对此图像的描述(“箭头”)不合适。也许一个更好的解决方案是将文本“Next Page”或类似的内容与图像相邻并在链接中,在这种情况下,可以给出图像alt=“”

例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.“纽约地区”的属性价值。如果主图像没有传达内容,但主要只是热点的容器(例如,导航栏),然后alt=“”是合适的。

每个图像映射热点(地区元素)必须具有等效物alt.属性。因为热点是可点击的,所以每个热点都必须有描述该热点功能的可选文本。

因为服务器端图像映射的热点不能提供替代文本,并且因为它们不能通过键盘访问,所以不应该使用它们。万博体育官网网址

图像切片

有时,大幅度的图像被切成网站上的多个图像以进行设计目的。当多个图像切片一起传达内容时,那么必须向用户呈现内容。通常,这是通过提供替代文本来完成的alt.最大或最突出图像切片的属性。不必要地重复替代文本是不合适的,打破多个图像的替代文本alt.属性,或者根本没有其他选择。如果图像切片位于链接内,则必须在图像中提供描述链接功能的替代文本alt.属性,在alt.同一链接中另一个图像的属性,或同一链接中文本的属性。每个链接必须包含描述链接功能的函数文本。

背景图像

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

然而,背景图像可以用于装饰图像,从而从页面的内容流中移除图像并删除空的需要alt.属性。

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

下载就业申请(PDF)

然后使用CSS定位“(PDF)”文本跨越类=“pdficon”元素)屏幕外。看到了吗CSS在行动中:仅适用于屏幕阅读器用户的隐形内容更多细节。观点的用户会看到PDF背景图像和屏幕阅读器用户会听到屏幕上的“(PDF)”文本。

徽标

它是网站上的常见做法,具有主站点标志也链接到网站主页。因为这是相当标准的做法,为图像提供替代文本,例如贵公司名称(alt=“Acme公司),通常就足够了。将徽标识别为实际的徽标(alt =“acme公司徽标”)通常不需要。内容和功能不是“logo”。开发人员通常会将图像标识为指向主页(ALT =“ACME公司主页)但是,如果图像在页面的开头并且替代文本是合适的,则不应需要此附加信息。

复杂的图像

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



查看销售数据

关于longdesc的说明

Longdesc.属性旨在提供对长描述页面的引用。价值Longdesc.的属性IMG.元素将包含长描述页面的URL,不是长描述文本本身。然而,Longdesc.仅在某些屏幕读者中使用。此外,视域用户通常不会知道描述页面是否可用。此外,Longdesc.属性不是HTML5的一部分。由于这些原因,建议Longdesc.不应该依赖于提供对这个长描述页的访问。

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

图和图图

HTML5引入了图形元素,可选地带有figcaption公司,它是自包含的,通常作为文档主流程中的单个单元引用。图形可以从文档的主流中移开,而不影响文档的含义。

图形figcaption公司允许图形和图形字幕之间的语义关联。该figcaption公司可以提供关于图的摘要或附加信息和/或将图形与包含的文档相关联。但是,图中的任何图像仍然必须具有alt.呈现图像替代文本的属性值 - 这不应该通过figcaption公司

您可以更多地了解有关人物和图图你怎么样?

结论

尽管这是影响web可访问性的最大问题,但是仍然有不同的和不正确的方法来实现替代文本。通过遵循本文概述的基本原则,web开发人员可以使残疾人更容易访问他们的web内容。万博体育官网网址

  • 向图像中添加可选文本是最容易学习的可访问性原则之一,也是最难掌握的原则之一。
  • 可在下列文件中提供备选案文:alt.属性或在图像的周围上下文中。
  • 每个图像都必须有一个alt.属性。
  • 替代文本应该
    • 呈现图像的内容和功能。
    • 是简洁的。
  • 替代文本不应该
    • 冗余(与相邻文本或正文相同)。
    • 使用“......”的短语“...”或“...”的“图形”。
  • 合适的替代文本在很大程度上取决于图像的上下文。
  • 功能图像的Alt文本(例如,链接中的图像)应描述该功能以及内容。
  • 装饰图像仍然需要一个alt.属性,但应为空(alt=“”).

如果提供并正确实施替代文本,一般来说,web的可访问性将大大增加。