替代文本

介绍

为图像添加替代文本网页可及性的首要原则。也是一个最困难的正确实施。网络是充满图像丢失,不正确的,或可怜的替代文本。像许多事情在web可访问性,确定合适的,等价的,替代文本通常是一个个人的解释。通过使用示例,本文将提出我们的经验解释适当使用的替代文本。。

重要的

也看到我们文章图片更多信息可访问性形象。。

替代文本基础知识

替代文本提供了一个在网页文本替代非文本内容。我们将讨论替代文本,图像,尽管原则可以应用于媒体,applet,或其他非文本网页内容。。

替代文本中具有多方面的作用:

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

关键原理是计算机和屏幕阅读器不能分析图像并确定图像呈现什么。作为开发人员,文本必须提供给用户了内容函数的图片在你的web内容。。

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

  • alt的属性img元素。。
  • 在图像本身的背景或环境中。。

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

重要的

这个词替代文本,本文中使用,是指文本等效为一个图像,不管文本所在的地方。它并不仅仅指alt图像标记的属性。。Alt属性将被用来指属性本身,往往会,但不限于)包含替代文本。。

每一个图像必须有一个alt属性。。这是一个HTML标准的要求(也许在HTML5少数例外)。图片没有alt属性可能会无法访问。万博体育官网网址在某些情况下,图像可以是空的或空的。alt属性(e。g。,,alt = "““)。。

语境就是一切

在为图像确定合适的替代文本时,背景决定一切。替代文本的一个形象可能是截然不同的基于图像的背景和环境本身。以例如,乔治·华盛顿如下图:

示例图片

的替代文本图像可能会改变极大的基于上下文,如下显示。。

请注意

最好的礼物这些原则的替代文本,大多数图像在本文中得到的替代文本”例子形象”。然而,图像的内容通常呈现在页面上下文。。

示例1

示例图片

因为他的角色是美国军队的统帅在革命战争中,而且,之后,美国的第一任总统,乔治·华盛顿通常被称为“他的国家之父”。。

什么是合适的替代文本示例1的图片吗?吗?

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

第一步在确定合适的替代文本图像是决定如果图像礼物内容如果有一个形象函数。在大多数情况下,图片只会有一个函数是否包含在一个链接(或者是一个图像映射热点或一个按钮)。确定图像呈现内容和内容可以更加困难。如果图像传达的内容提出了在文本图像的周围环境,然后一个空alt属性可能就足够了。在上面的示例中,图像所呈现的内容是通知用户这是乔治·华盛顿。图像没有功能,因为它不是链接,不能点击。。

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

重要的

alt属性应该通常:

  • 是准确的,相当于呈现相同的内容函数的形象。。
  • 是简洁的。。这意味着图像的正确内容(如果有内容)和功能(如果有功能)应该尽可能简洁地呈现。通常不超过几句是必要的,虽然很少一个简短的两句话可能是合适的。。
  • 不多余或者在图像的上下文中提供与文本相同的信息。。
  • 不使用短语”的形象。。。“或“图形的。。。“来描述图像。。对用户来说,它通常是一个图像。如果图像是传递内容,用户通常不需要知道它是正在传送内容的图像,而不是文本。如果图像是照片或插图,等。是很重要的内容,这可能是有用的,包括在替代文本。。

基于这些规则,选项Dalt = "乔治·华盛顿““)可能是最好的替代文本在这个实例中。选择一个不必要的形象作为一种形象的描述。选项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)。e。,你不能告诉图像维基百科的链接仅仅通过观察)。选项C不提供函数的充分描述,尤其是断章取义。。

整个例子也可以使更好的通过将图像和文本标题在一个链接:

在这种情况下,这两个链接的内容和功能和图像呈现在链接时,所以图像可以给alt = "““为了避免任何冗余。。

在可能的情况下,避免使用“链接。。。“或“点击这张图片。。。“或类似的措辞alt属性。链接由屏幕阅读器标识为链接,并且应该对有视力的用户在视觉上显而易见。。

示例4

示例图片

在这幅画里,艺术家Emanuel Leutze用光,颜色,形式,的角度来看,比例,和运动创建组合。。

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

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

和之前一样,我们应该确定图像的内容提出了周围的环境。在这种情况下,这不是(至少不完全)。不是在一个链接的图片,所以没有功能。但是这张照片提供了一个更加困难的考试,和最好的答案可能不充分取决于给定的有限的背景下我们。无论如何,让我们看一下可能的选项。。

选择一个(“乔治·华盛顿“)可能不充分描述图像的内容。乔治·华盛顿在绘画这一事实未必是有关在这种情况下。选项B(“乔治·华盛顿绘画可能是足够的,但没有提供多少额外的内容。然而,它可能是适当的描述一幅画的形象,而不是一张照片或者其他的图片类型。选项C提供了更多的信息,可以帮助用户识别内容本身。记住,替代文本不仅仅是为盲人。许多的用户将能够识别特定的绘画问题给出描述,而“乔治·华盛顿“就会不够的。选择D可能比较合适,如果图像的目的是提供一个特定的艺术技巧和图像本身的内容并不重要。E选项也可能是一个适当的选择如果画的详细检查,但是太长和详细的使用——这样的文本将被更好的担任文本内的web页面。。

正如您可以看到的,没有一个正确的答案。最好的替代文本目的取决于上下文和内容的形象。。

功能图像

图片不仅提供内容,经常使用但提供重要的功能,比如导航。。

例5

示例图片

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

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

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

在这种情况下,选择一个是最好的答案。它提供了图像的内容和功能。图像显示“产品”也是网站上产品页面的链接。图像将被标识为链接内,所以“链接”不是必需的,选项B一个好的选择。因为图像是唯一的对象在一个链接,零alt文本是不合适的。。当图像只包含文本时,文本显示通常可以作为替代文本。。

例子6

继续下一个页面读到乔治·华盛顿总统。。

示例图片

什么是最合适的?alt例6中蓝色箭头形象属性吗?吗?

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

再一次,这是一个例子,最好没有一个明确的答案。事实上,任何可能的选项是合适的在这个例子。选项A和B可能会足够在大多数情况下,只要清楚用户有多个页面内的文章。选项C的礼物非常清楚的功能链接,但并不存在,走到下一个页面的链接在一个系列。选择D可能是最好的解决方案,因为它提供的功能链接,传达它的页面是一个系列的一部分。如前所述,确定最合适的替代文本由个人解释基于图像的大背景。这张图片的描述(“箭头”)不合适。也许一个更好的解决办法是让文本“下一页”或相似的邻近内的图像和链接,在这种情况下,图片可以给零alt文本。。

例7

什么是最合适的?alt示例7中图标图像的属性?注意,图标在链接内。。

  1. “就业应用程序”“
  2. “PDF文件”“
  3. “PDF图标”“
  4. 图像的内容提出了上下文,(alt = "““)是合适的。。

注意,链接中的图片。如果不是在链接时,然后alt文本可能有所不同。在这种情况下,因为图像提供了关于链接功能的附加信息,是非常重要的,它是在链接本身和阅读链接。这是至关重要的,因为经常访问链接的上下文环境。。

选择一个(“就业应用程序”与周围的文本是多余的,所以它不是最好的选择。选项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属性值的纽约地区”。如果主图像不传达内容,但主要是热点的一个容器(e。g。,导航栏),然后alt = "““是合适的。。

每个图像映射热点(区域元素)必须有一个等价的alt属性。因为可点击的热点,每一个必须有替代文本描述函数的热点。。

因为热点服务器端图像映射不能替代文本,因为他们没有键盘可访问,万博体育官网网址他们不应该被使用。。

图像切片

有时大图像被分割成多个图像在一个网站设计的目的。当多个图像切片一起传送内容时,然后,必须向用户提供内容。通常情况下,这是通过提供的替代文本alt最大或最突出的形象片的属性。不适当的重复不必要的替代文本,打破跨多个图像替代文本alt属性,或提供任何替代。如果一个图像块在一个链接,在图像中必须提供描述链接功能的替代文本alt属性,在alt属性的另一个图像在相同的链接,或在文本在相同的链接。每个链接必须包含功能文本描述链接功能。。

背景图像

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

背景图片,然而,被用于装饰图片,从而把图像从页面的内容流和删除一个空的必要性alt属性。。

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

就业应用程序下载(PDF)

你会使用CSS定位”(PDF)”文本(跨度类=pdficon”“元素)屏幕。看到CSS在行动:无形的内容只是屏幕阅读器用户为更多的细节。的用户会看到PDF背景图片和屏幕阅读器用户将听到离屏”(PDF)”文本。。

标志

这是常见的做法,在网站上有主网站的标志也链接到网站的主页。因为这是相当标准的实践,提供替代文本图像,如你的公司名称(alt = "埃克米公司),通常会足够了。标识标志实际上是一个标志alt = "Acme公司的标志”“)通常不是必要的。内容和功能不是“标志”。开发人员通常会将图像标识为主页。alt = "Acme公司主页),但是,如果图像始终位于页面的开头,并且备选文本是适当的,这个应该不需要的额外信息。。

复杂图像

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

年度销售数据的折线图

查看销售数据

注意在longdesc

朗迪斯属性是为了提供一个参考长描述页面。的值朗迪斯的属性img元素将包含长描述的URL的页面,,长描述文本本身。然而,,朗迪斯只在一些屏幕阅读器。此外,有远见的用户通常不会意识到描述页面是可用的。同时,的朗迪斯属性不属于HTML5。由于这些原因,建议朗迪斯 不应该被指望来提供对这个长描述页面的访问。。

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

图和figcaption

HTML5介绍了元素,这是定义为:

图元素表示一个单元的内容,选择标题,这是自包含的,通常从文档的主流作为单个单元引用,和可以从文档的主要流而不影响文档的含义。。

图和figcaption允许语义关联一个图像和图像的标题。然而,图像必须还有一个alt属性,提出了替代文本的图像,除非另一种是不可用的。。

结论

尽管是影响网页可及性的最大的问题,对于替代文本的实现,仍然存在分歧和不正确的方法。遵循的基本原则概述,web开发人员可以使残疾人的web内容更容易。万博体育官网网址。

  • 替代文本添加到图像是最容易学习的易访问性原则之一,最难大师之一。。
  • 可能提供的替代文本alt属性或在图像的周围上下文中。。
  • 每一个图像必须有一个alt属性。。
  • 替代文本应该:
    • 介绍了图像的内容和功能。。
    • 是简洁的。。
  • 替代文本不应该:
    • 是多余的(同相邻或正文)。。
    • 使用短语”“……的形象”或“图形的……”。。
  • 适当的替代文本很大程度上取决于图像的上下文。。
  • 功能图像的ALT文本(E)。g。,一个图像内链接)的含义是函数以及应该描述内容。。
  • 仍然需要一个装饰图像alt属性,但它应该是零(alt = "““)。。

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