月归档：十一月 2008

例7 Download the Employment Application 例7图片的最合适“alt”属性是什么? A.“就业申请表” B.“PDF文件” C.“PDF图标” D.图片内容已经在语境中体现了，所alt=””合适。 注意，图片链接内。如果不在链接内，”alt”文字应该就不一样了。由于图片提供了有关链接功能的额外信息，它在链接内，连同链接一起被读取很重要。因为访问链接经常脱离了语境。 选项A（就业申请表）在此语境中显得多余，所以不是最合适的选择。选项B最合适—它清晰说明了图片代表的内容–这个链接是链到PDF文件。这个功能（下载就业申请表）已经在链接文字中体现出来了，所以没必要包含在“alt”属性中。选项C（PDF图标）描述了图片自身，但在此语境中不是最佳选择，在另一个语境中，让用户知道这个图片的确是一个图标，这很重要，在这种情况下，在“alt”属性中添加“图标”可能合适。选项D（空或赋予空值alt属性）没有提供图片表达的重要信息。 在这里要注意，如果图标本身链接到文档，替换文字应该包括图片（链接）功能和内容信息。类似于“下载PDF格式的就业申请书”。“PDF格式”就不够了，尤其是如果很多文件链接都是这个类型。那样的话，使用屏幕阅读器的用户在页面中浏览链接时听到的全是“PDF格式、PDF格式、PDF格式……”。一般来说，如果同一张图片在一个页面中被多次使用而链接到不同位置，链接内的替换文字应该不同。 装饰性图片Decorative Images 装饰性图片不表达重要内容，经常用于布局或非信息目的，也不在链接内显示。几乎所有情况下，空白和装饰性图片的“alt”属性应该为空。 例8 内容文字。 页脚文字。 例8水平分割线的“alt”属性应该是什么？ A.“装饰性线条” B.“页脚起点” C.“分割线” D.alt=””足够 由于图片没有表达任何内容，也不在链接内，选项D应该是最佳选择。不需要图片描述。 注意 如果图片仅仅用于装饰目的，应该将它与页面内容分开，使用Css把它作为背景图片。这样，图片就不需要替换文字了，也可以把图片与页面语义和结构流分开。 例9 我们承诺提供世界上最好的服务。我们的团队经过专业培训，在合作过程中，可以提供最优质客户服务。客户满意是我们的首要任务，并且得到保证。 例9图片的“alt”属性应该是什么？ A.“握手” B.“商人握手完成合作” C. alt=””足够。 D.“我们保证专业服务” 分析这个例子时，要确定图片是否表达了重要内容。我更赞成本例没有表达重要内容。目前网站实践中，许多此类图片都被赋予描述性替换文字，即使图片没有提供什么内容。非空白或非普通装饰性图片需要替换文字，这是错误假设。选项C（alt=””）是最佳选项，因为这个图片没有表达相关或重要信息。选项A和选项B是对图片的描述，但表达的内容和图片本身所表达的内容不等价，这个图片纯粹是装饰性。选项D明显不正确，值得注意的是，额外信息经常被添加到“alt”属性中，或为搜索引擎提供额外关键词。这类做法不是使用替换文字的合适方法。 高级图片 一些情况下，确定替换文字更难。对于所有图片，用户测试、屏幕阅读器或只读取文本的浏览器测试能帮助确定使用替换文字最合适的方法。 表单图片按钮 表单图片按钮必须有描述按钮功能的“alt”属性。图片按钮经常被用作标准格式按钮的醒目版或缩略版。替换文字应该描述选择后，按钮会做什么，如“搜索”，“提交”，“注册”，“订购”等。例如，如果图片按钮在网站搜索表单中， … 继续阅读 →

例4 这幅油画中，画家Emanuel Leutze运用了光线、颜色、形态、远景、比例和姿势来创作作品。 例4图片的替换文字应该是什么？ A.“乔治.华盛顿” B.“乔治.华盛顿的油画” C.“乔治.华盛顿渡特拉华河的油画” D. “展示使用光线和颜色创作的经典油画” E. “乔治.华盛顿渡特拉华河的油画，小船周围是湍湍急流，伟大的乔治.华盛顿无视风浪，领导部队奋勇斗争” 和之前一样，应该确定图片内容是否在周围语境中体现出来了。本例没有体现（至少没有完全体现）。图片也不在链接内，更难以识别，所给的有限语境不能充分决定最佳答案。来看看可能的选项。 选项A（“乔治.华盛顿”）并不能充分描述图片内容。油画中的“乔治.华盛顿”与这个语境没有必然相关性。选项B（“有关乔治.华盛顿的油画”）可能充分，但没有给出其他更多内容。然而，相对于相片或其他图片类型来说，它可能在描述作为油画的图片来说比较合适。选项C提供了更多信息帮助用户识别内容本身。请记住，替换文字不仅仅针对盲人。如果给图片添加这样的描述，许多视障用户就能识别，而仅仅只有“乔治.华盛顿”还不够。如果图片目的是展示具体美术技巧，图片本身内容并不重要，选项D合适。如果图片详细检验有序，选项E可能是合适选择，但这类文字显得太冗长，作为网页中的文字会更好。除非语境是分析这张油画的艺术技巧，大多数情况下选项C会比较合适。 总之，语境为王。确定图片表达的内容和提供的功能，需要分析周围语境，再相应提供合适的替换文字。 功能性图片 图片不仅仅用来提供内容信息，还可以用来提供重要功能，如导航。 例5 “产品”图片是导航条一部分。 例5“产品”导航图片的最合适“alt”属性是什么？ A.“产品” B.“链接到产品” C.图片没有表达内容，alt=””就足够了。 本例中，选项A是最佳答案。它不仅提供了图片内容，也说明了图片功能。图片显示的是“产品”这个词，也是链接到网站产品页面的一个链接。图片被识别为链接，所以“链接到”没有必要，选项B不合适。图片仅仅是链接的一个对象，空“alt”不合适。如果图片仅仅包含文字，这些文字常常被用作替换文字。 例6 跳到下一页，继续阅读有关乔治.华盛顿的总统生涯。 例6蓝色箭头图片的“alt”属性应该是什么？ A.“下一步” B.“下一页” C.“乔治.华盛顿的总统生涯” D.“继续阅读乔治.华盛顿的总统生涯” 这个例子不能明确给出最佳答案。事实上，本例中，任何一个选项都会是合适选项。选项A和B在多数情况下可能足够了，只要清晰告诉用户文章有多页即可。选项C清晰说明了链接功能，但没有说明链接是到连续页面的下一页。选项D可能是最佳解决办法，因为它说明了链接功能，也表达出了它链接到连续页面的一部分。确定最合适替换文字取决于个人对图片语境的理解。图片（箭头）描述可能不合适。最佳解决办法是加上“下一页”或类似文字，或者放在链接中，此时，图片“alt”属性赋空值即可。

语境为王 为图片提供合适替换文字时，语境为王。不同语境中，图片的替换文字会完全不一样。以乔治.华盛顿图片为例： 在不同语境中，该图片替换文字会需要很大调整。如下所示。 注意 为了更好说明替换文字原则，本文讨论的大部分图片都是“实例图片”。但是图片内容通常由网页语境说明。 例1 由于担任美国独立战争总司令，然后又成为美国第一任总统，乔治.华盛顿常被称为“国父”。 例1图片的替换文字应该是什么？ A.“乔治.华盛顿图片” B.“乔治.华盛顿，美国第一任总统” C.空“alt”属性（alt=””）就足够。 D.“乔治.华盛顿” 确定图片的合适替换文字时，首先要确定图片代表内容还是某种功能。大多数情况下，如果图片包含在某个链接内，它可能只有功能作用。确定图片是否代表内容、代表的内容是什么会更难。如果图片所表达的内容包含在图片周围文本内，那么空“alt”属性就足够。上例中，这张图片所代表的内容告诉用户这是乔治.华盛顿。这个图片没有功能作用，因为不是链接，也不可点击。 来看一些有关“alt”属性的重要原则。 重要 “alt”属性应该： 准确、等价显示图片所代表的相同内容和功能； 简洁。图片的正确内容（如果是内容）和功能（如果是功能）应该尽可能简洁表达。通常情况下，几个词即可，但有时一两个短句也可以。 不要多余，提供的信息和图片语境文字完全一样。 不要使用“…图片”这类短语描述图片。对于用户来说，很明显，它就是图片。如果图片表达的是内容，与正文相比，通常没必要让用户知道这就是表达内容的图片。 根据以上原则，选项D (乔治.华盛顿)是本例最佳答案。选项A多余说明图片是图片。选项B 过多介绍了图片本身不包含的内容，同时多余提供了文本内容。选项C (空alt 属性)不合适，因为图片传答的内容周围文字没有直接提供。 例2 乔治.华盛顿 由于担任美国独立战争总司令，然后又成为美国第一任总统，乔治.华盛顿常被称为“国父”。 例2图片的替换文字应该是什么？ A.“乔治.华盛顿” B.空“alt”属性 (alt=””)就足够了 C.“图片” D.不需要“alt”属性。 本例中，图片内容在周围内容中显示，所以选项B（alt=“”）是最好选项。选项A有点冗余。选项C提供了无关信息。选项D根本就不正确—-每张图片都必须有“alt”属性。 例3 乔治.华盛顿 例3图片的替换文字应该是什么？ A.空“alt” (alt=””)就足够了 … 继续阅读 →

原文：Appropriate Use of Alternative Text 翻译：xueshijun 简介 为图片添加替换文字（alternative text 或alt text）是网站可达性首要原则，也最难恰当应用。互联网充满没有替换文字、文字很差、甚至错误的图片。与网站可达性众多问题一样，判断替换文字是否合适，个人因素起着决定作用。这篇文章通过一些例子来说明我们对恰当使用替换文字的经验。 替换文字基础 替换文字对网页中的非文本内容替换为文本。为了讨论方便，我们只讨论图片的替换文字，当然这些原则也适用于多媒体、applets和其他非文本网页内容。 替换文字有多种功能： 替换文字可以被屏幕阅读器读取，方便有视障或认知障碍的用户浏览图片内容，或者执行图片提供的功能。 如果用户代理（浏览器）不支持图片显示，或者用户设置浏览器不显示图片，替换文字会合适显示图片。 替换文字对图片提供语义含义和描述，这些文字被搜索引擎读取，或者被用来从页面语境来确定图片内容。 电脑和屏幕阅读器不能分析和确定图片表达的意思，这是关键问题。开发人员必须从网站内容给用户提供代表图片内容和功能的文字。 替换文字能够通过两种方式显示： 在“img”元素的“alt”属性内； 在图片自身语境或其周围语境。 这说明， “alt”属性（有时称为“alt”标签，虽然从技术上来说不正确）在提供图片内容和功能方面并不是唯一方法。这种信息还可以通过图片邻近的文本或图片页面体现出来。某些情况下，如果不能简洁显示这些同等信息，可以用链接或（和）“longdesc”属性表达，“longdesc”属性可以链接到包含较长图片文字描述的单独页面。 重要 本文使用的术语“替换文字”指与图片等同的文字，无论文字显示在哪里，它不仅限指图片标签的“alt”属性。提到属性本身，“alt”属性就派上用场了，它经常包含“替换文字”（但不是绝对的）。 每张图片都必须有“alt”属性。这是HTML标准的要求。没有“alt”属性的图片不可达。遇到没有“alt”属性的图片，屏幕阅读器从页面内容读取内容（例如文件名、页面中的位置），摘录信息，尽量给用户提供对等内容。很多情况下，图片“alt”属性可能为空或被赋空值（例如alt=“”）。