相信多数公司都买不起眼动仪,曾碰到个厂商,报价40万!
风鬼提供了一种廉价方式。风鬼,原名,Feng GUI,意思是Feng Shui for Graphic User Interfaces。实际上,风水(Feng Shui)在国外非常热门,也并非我想的就是封建迷信,风水的实质是人与自然的关系。
很简单,上传一张网页截图,网站就会模拟出用户眼球的运动轨迹和热点区域。
这种技术,根据网站自己的说法,来源于神经科学研究的多种算法,例如特征整合理论(Feature integration theory),显著(Salience),视觉注意,眼动追踪, 人类感知和认知。够复杂的!
毕竟是基于算法模拟真实情况,跟实际访问会有差距,网站声称准确率达70%。如果买不起眼动仪,用这个做做廉价的可用性测试已经相当不错。
我拿公司的首页看了,结果出乎预料,跟我想象中的完全不一样!

例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”属性。图片按钮经常被用作标准格式按钮的醒目版或缩略版。替换文字应该描述选择后,按钮会做什么,如“搜索”,“提交”,“注册”,“订购”等。例如,如果图片按钮在网站搜索表单中,是合适写法。
图片地图
使用客户端图片地图时,主要图片必须有“alt”属性。“alt”属性应该表达出图片所传达的任何内容,但不是表达所有图片地图热点。例如,有张图片地图包含纽约州每个区域热点,图片“alt”属性应该是“纽约州”。如果主要图片没有表达内容,而主要是容器(如,导航条),那么alt=”” 是合适的。
每个图片地图热点(区域元素)必须有同等“alt”属性。因为热点可点击,每个热点都需要有替换文字来描述热点功能。服务器端的图片地图中热点不能赋予替换文字,它们也不可以通过键盘操作,不需要“alt”属性。
图片切片
有时为了方便网站设计,大图片被切割成许多小图片。许多图片切片在一起来表达内容时,内容必须展示给用户。一般通过在最大图片或最突出=的图片的“alt”属性中添加替换文字来表达内容。重复替换文字,把替换文字分散在许多图片的“alt”属性或根本没有替换文字,这都不合适。如果图片切片在链接内,描述链接的替换文字必须在图片的“alt”属性 中、同一链接内的另一图片的“alt”属性中或在同一链接内的文本中。每个链接都要包含功能性文字来描述这些链接功能。
背景图片
不可能直接在背景图片中添加替换文字。图片所表达的内容不应该被放置在页面内或元素背景中。然而,背景图片可以用作装饰性图片,把图片从页面内容流中分离开,“alt”属性变为空。
商标
网站上放置能够链接到网站首页的商标是普遍做法。由于这是常规做法,为图片提供替换文字,如公司名称(alt=”Acme Company)就足够了。把真实商标识别为商标(alt=”Acme Company Logo”)没有必要。内容和功能不是“商标”。开发人员经常把图片“alt”属性设为“首页”(alt=”Acme Company – home),即使图片都一致放在页面顶部,替换内容合适,这些额外信息也没有必要。
综合图片
如果综合图片的同等替换文字,如图表,不能只使用一两个短句,又不能通过页面语境表达,这些替换需要在别的地方提供。通过链接到单独网页来提供较长描述,“longdesc”属性也可以在图片中使用,即使还没有获得广泛支持。图片替换文字仍然应该描述图片整体内容。如果图片链接到较长描述,这些信息也可以在“alt”属性中提供。Chart showing revenue increases over the last five years with link to description of the data
虽然稍微有点长,但这些替换文字表达了图片整体内容,告诉用户描述信息可用。
总结
虽然替换文字是影响网站可达性的重要问题,但目前还存在错误使用替换文字的现象。网站人员根据下列基本原则设置“alt”属性,可以使视障用户更容易访问网站内容。图片加入替换文字是最容易的可达性原则之一,也最难掌握。
替换文字一般在“alt”属性中或在图片周围语境中提供。
每张图片必须有“alt”属性。
替换文字应具备以下两点:
表达图片内容和功能
充足
替换文字不应该:
冗余(与相邻或正文文字相同)
使用“……图片”之类短语
合适的替换文字更依赖于图片语境。
功能性图片的“alt”文字应该描述其功能和内容。
装饰性图片仍然需要“alt”属性,但值是空值(alt=””)
如果能够合理使用替换文字,网站可达性会有明显提高。

例4
这幅油画中,画家Emanuel Leutze运用了光线、颜色、形态、远景、比例和姿势来创作作品。
例4图片的替换文字应该是什么?
A.“乔治.华盛顿”
B.“乔治.华盛顿的油画”
C.“乔治.华盛顿渡特拉华河的油画”
D. “展示使用光线]]>

语境为王
为图片提供合适替换文字时,语境为王。不同语境中,图片的替换文字会完全不一样。以乔治.华盛顿图片为例:
在不同语境中,该图片替换文字会需要很大调整。如下所示。
注意
为了更好说明替换文字原则,本文讨论的大部分图片都是“实例图片”。但是图片内容通常由网页语境说明。
例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=””)就足够了
B. “乔治.华盛顿的维基百科条目”
C.“查看更多”
“乔治.华盛顿”这种情况下,图片还是链接。图片包含在链接的情况下,图片的链接功能必须体现在替换文字中,同时,这些替换文字也包含在链接内。本例中,链接内没有邻近文字来描述链接功能,它就必须在“alt”属性中体现出来。选项B是最佳选择。而“alt”属性中的“乔治.华盛顿”这个词就显得多余,小冗余是充分描述功能的关键。也可以(也可能应该)通过把文本标题作为链接一部分来减少冗余。
选项A不充足。带链接的图片的“alt”属性不能为空或被赋予空值,除非链接功能通过文本提供了相同链接。这是因为屏幕阅读器必须读取信息识别链接。请记住,屏幕阅读器读取的信息会脱离周围语境。选项C没有充分描述功能,特别是脱离了语境。对于周围文本,选项D多余,也没有描述链接功能。
如有可能,“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=“”)。

原文:Common Visual Design Misconceptions
翻译:luyi
最近,我有机会研究对视觉设计作用的常见误解,这些误解仍然盛行于行政主管、产品主管,工程经理和市场专家中。设计团队成员如何说明这些认识是错误的?又该如何向同事和老板展示视觉设计真相?
视觉设计师在特定产品领域或职业生涯中会面对各种困难,但有三种误解频繁发生:
视觉设计是美化产品;
突出显示能改善视觉设计;
可以分割评估视觉设计。
视觉设计是美化产品
这种信条可能起源于工业时代的设计理念引入。从那时起,产品以前所未有的方式进行设计,并形成风格。Raymond Lowey等工业设计师对呆板产品进行美学设计,而声名大噪。
视觉设计固然能美化产品,但其与人交互的潜能早已超越美丽外观。通过组织视觉元素,设计师可以传达回答关键问题的核心信息:
* 这是什么?
* 怎么使用?
* 为什么要使用?
回答这些问题是功能和可用性的关键组成部分,尤其是对于交互产品。举些例子来说明:
图1到图3,某个网络应用工具,相同基本设置的三种表现方式,字体、颜色、渐变和图片都相同。三者主要区别是页面元素组织方式不同。这种区别表明该网络应用工具存在三种主要使用方法。
图1——网络应用工具设计示例
web application 1
图1,表现方式清晰显示出主要功能——查找客户联系信息;其次,用户可以编辑、删除或者增加备注。图2,重点是顾客和公司之间的交流;其次,用户可以查看、编辑和删除联系人信息。
图2—相同网络应用工具,不同视觉组织
web application 2
图3,关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。
图3—另一种视觉组织
web application 3
相同应用工具,三种不同视觉组织,三种不同主操作:查找联系人信息、管理客户交流以及维护客户记录。每个例子中,影响视觉设计的因素大体一致:颜色、字体、渐变和图片。
显而易见,视觉设计不仅是美化此工具。它传达工具的核心功能:它是什么?如何使用?为什么要使用?,而同时有美化了界面。
能让这个更突出吗?
很多网站都喜欢把logo做得比较大,客户和老板常要求视觉设计师着重强调页面上某些元素。这类评论有时可以帮助我们发现设计中的最重要元素,但也常引发视觉设计的另一常见误解:改善网站视觉设计,通过加大、加粗、变红或同时使用三种方法来实现!
页面任何元素的相对重要性都是由其周边元素决定。白色页面放上红色圆圈,会吸引很多注意力。但把红圈放在10个粉色圆圈旁就不会吸引那么多注意力。突出重要元素是整体设计的一个过程,并不是改变任何单一元素。给予单个元素额外视觉权重会破坏布局平衡,搅乱相关元素、主操作等之间的关系。
要是满足客户和老板每个强化某些功能的需求,页面所有元素都会去抢着吸引用户注意—结果就是都得不到注意。图4和图5,两个互联网浏览器下载页面。Firefox页面,下载浏览器号召很明显,页面其他元素—-Thunderbird、 Mozilla商店和最新内容—–没有干扰。
图4—Firefox下载页
firefox
图5,Flock下载页面强调了许多不同元素,设计团队决定提供四个下载入口——右上角、左侧菜单底部、新闻面板右上角和页脚。如果页面上没强调那么多其他元素,Flock下载页面或许可以和Firefox一样只用一个下载按钮。
图 5—Flock下载页
flock
可以分割评估视觉设计
没有从设计整体考虑,而强调单个元素会非常困难,同样做出孤立改变也很难。但是视觉设计师收到的大部分反馈集中在孤立元素上:可以把Logo做大点吗?能改变标题颜色吗?这里可以换张图吗?
这些的确帮助设计师明白用户和老板想要的东西,但他们没有考虑优秀设计必需的整体分析。改变颜色需要反复思考整体配色,因为设计师必须确保颜色对比明显,才能突出关键操作。改变图片意味着同时要改变周边元素,因为原图片形成的焦点可能已不存在。诸如此类。
产品总体视觉设计源于谨慎平衡页面元素——传达产品功能、可用性和优势的关键信息。如果要调整一项元素,设计师需要重组全局,重归平衡。孤立设计决策无法保持修改前后整体一致。
孤立评估基于互联网的产品特别脆弱。单个产品可以进行独立测试,所以产品团队就会假设”这些产品结合在一起也会很好”, 而常常把单独表现良好的产品组合起来。图6,孤立决策的后果。
在这个eBay页面,页头水桶测试(bucket testing)表现良好,PayPal保护机制的logo在焦点小组(focus group)中获得好分数,摄影物品宣传也获得不错点击流,但把三个元素综合到一个页面上,并没有形成有效设计。事实上,页面上很多元素似乎互相竞争,互相干扰。
图6—eBay意大利主页
ebay
希望这些例子能解释对视觉设计角色的一些常见误解。只有同事和老板能直接体验视觉设计潜能,他们才会相信视觉设计绝不仅仅是设计样式、显化元素或做出孤立决定。