如何为非文本内容添加合适的替代信息
Upcoming SlideShare
Loading in...5
×
 

如何为非文本内容添加合适的替代信息

on

  • 389 views

 

Statistics

Views

Total Views
389
Views on SlideShare
386
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 3

http://wiki.ued.taobao.net 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

如何为非文本内容添加合适的替代信息 如何为非文本内容添加合适的替代信息 Document Transcript

  • 如何为非文本内容添加合适的替代 信息为非文本内容添加替代信息是无障碍的第一准则,但也是最难把握的一个准则,因为添加不是目的,目的是适当的添加。目前网络中到处充斥着不正确、不妥当的内容,因为内容的设置和负责人自身的意识有很大关联。今天我们的目的就是介绍下如何为图片添加恰当的替代信息。今天我们只是讨论为图片添加信息,这些方法同样适用与其它非文本内容。替代信息作用: •为读屏软件提供信息(视觉障碍、某一特点缺陷用户) •不支持图片显示的代理软件(浏览器) •为搜索引擎提供有意义、描述的内容 •纯文本浏览要添加替代信息的原因:读屏软件和代理软件无法分析图片,了解图片展示的信息。所以,我们必须为用户提供此图片在当前页面中所呈现出的内容和功能 。用户使用读屏软件定位到页面的图片时,读屏软件将读出 alt 属性的内容,如果此图片没有设置 alt 属性,读屏软件就会独处此图片或这个页面的文件名(不同读屏软件处理方式不同)。所以,务必谨记的前提的前提:任何图片必须包含 alt 属性两种途径提供替代信息: •img 标签的 alt 属性 •当前页面中已有的内容,图片周边信息也就是说 alt 属性不是提供替代信息的唯一途径。还可以提供图片周边的和图片所在页面的信息。必要的情况下还可以使用 longdesc 属性链接到一个独立的页面,提供更长更全面的帮助信息。什么样的替代信息才合适?上下文关联当考虑为图片添加替代信息时,必须立足于图片所在的上下文。一张相同的图片放到不同的上下文中,所添加的替代内容很有可能是不一样的。alt 内容的一些准则: •精确展现图片所体现的信息或功能 •简洁明了
  • •重要的内容要先说(由页面上下文确定哪些内容时重点) •不累赘,不提供和周围信息重复的内容 •不要使用“图片..”之类语句描述图片:用户没有必要知道这个信息是图片展示出来的 例一 他通称为本· 拉登或本· 拉丹,是基地组织的首领,现被指为美国 2001 年“9 · 11”袭击事件 的幕后总策划人,并被放在美国联邦调查局通缉名单的首位,被广泛认为是“世界上最大的 通缉犯”。 此图可选描述:1.本拉登图片2.本拉登,美国联邦调查俱首位通缉犯3.alt=“”4.本拉登 最佳答案:4。 1,无需说明是图片;2,仔细阅读下面的内容,发现了吧--内容重复;3、少了必要的说 明。请把 4 的内容放进去整句读一读就了解。 例二
  • 本拉登 他通称为本· 拉登或本· 拉丹,是基地组织的首领,现被指为美国 2001 年“9 · 11”袭击事件 的幕后总策划人,并被放在美国联邦调查局通缉名单的首位,被广泛认为是“世界上最大的 通缉犯”。 此图可选描述:1.本拉登2.alt=“”3.图片4.无 alt 最佳答案:2。 1,信息重复; 3、无意义内容;4、如果不理解请返回上文 ^_^ 例三 本拉登 链接仅仅包含图片,文字“本拉登”在链接外。 此图可选描述:1.本拉登2.alt=“”3.更多4.本拉登百度百科 最佳答案:4,让用户清晰了解到这个链接的功能和内容。
  • 1,内容和下面的文本信息重复,并且没有说明此图片的功能;2、图片作为链接时,图片替 代信息必须体现此图所代表的功能,并且 alt 不能为空,除非在这个链接中提供了其它信息 已描述清楚此链接的功能。比如,下面的本拉登包含在链接里时,这是最佳选择;3、内容 不清晰。 当然,如果我们变换思考的方向,由图片的我们认为 alt 应该只是体现图片的意义,功能的 信息写在 title 上,那么可以选择这样: <a href="#" title=”百度百科”><img src="ladeng.jpg" alt="本拉登"></a> 所以又是那句老话,权衡再权衡。重要的是:我们是否让所有用户公平的获得信息。 如果可以,避免使用“链接到”‘点击图片’等信息,因为屏幕阅读器能分辨出这是一个链接 功能性 例四 此图 “免费注册 ”可选描述:1.免费注册2.链接到免费注册3.alt=“”4.无 alt 最佳答案:1。 我们都懂的。 例五 这个箭头是个独立链接
  • 此图可选描述:1.更多2.大家电3.alt=“”4.更多大家电 最佳答案:4。 1、想象下当你先听到大家电,接着听到更多,然后是生活电器,你能快速分辨出这里的更 多指的是大家电还是生活电器? 上图的更多,我会选择在更多所在的这个链接上添加 title=”淘宝服务” 例六 pdf 图片包含在 Download the Employment Application 这个链接中。 此图可选描述:1.Employment Application2.pdf 文件3.pdf 图标4.图片内容链接已经提供了,这里只要 alt=”” 最佳答案:2。 1、信息重复; 3、解释了图片,当这个信息更多只是让用户思考何为图标;4、回想下我 们之前一点:图片的功能。对的,我想你明白的 那么,如果这个链接中仅仅包含了 pdf 这个图片,这里的描述应该是什么呢? 对的,答案应该是:“Download the Employment Application in PDF format” 装饰性 装饰性图片指的是这个图片的存在不是用于提供内容,而仅是因为装饰页面、或修饰内容。 例七
  • 此图可选描述:1.虚线2.分割线3.alt=“” 最佳答案:3。 我们都懂的。 记住,如果这个图片仅仅是作为装饰,那么我们应该先考虑使用 css 的把 backgound 例八 此图可选描述:1.摩托罗拉手机2.摩托罗拉旗舰店开业3.alt=“” 如何判断上图,需要权衡 最佳答案: 如果,手机和下面的文字是一张图片,那么选项 2 是最佳答案; 如果,这个链接中是包含了上面这个手机图和下面这个文件,那么我们应该选择选项 3。 其它 1、图片按钮 <input type="image" alt="Submit Search"> alt 必须说明清楚,这个按钮的功能是什么,一般按图片上的文本信息写就好。
  • 2、图片地图 当使用图片地图时,主要的图片必须包含 alt 属性,area 可以使用 alt 或 title,重要是必须提 供内容 3、logo alt="Acme Company Logo" 这个 logo 是没有必要的 4、复杂的图片信息,如图表 <a href="chart_description.htm"><img src="chart.jpg" longdesc="chart_description.htm" alt="Chart showing revenue increases over the last five years with link to description of the data"></a> 总结 添加替代信息是我们最容易了解也是最难把我的一个无障碍原则,以下是之前内容的总结: •所有 img 标签必须包含 alt •替代性内容可以是 alt,也可以是周边信息 •必须供此图片在当前页面中所呈现出的 内容和功能 •简洁 •不重复,如果上下文已经有内容,无需多说一次 •不要“图片..” •依据上下文选择替代内容 •作为功能的图片必须解释清楚这个图片的功能是什么(那个 pdf) •装饰性图片必须 alt=“” •重要的内容先说←←验证是否为图片添加了适当的替代信息,最靠谱的办法就是自己用耳朵听一遍吧。firefox 中也提供了很多插件帮助我们快速验证页面是否存在无障碍 bug:←1、wave http://wave.webaim.org/?lang=en 2、Accessibility https://addons.mozilla.org/firefox/5809/