WCAG 1.0

WCAG 1.0 Accessibility Final Ver1.200903 1

内容可访问性Content Accessibility1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 2

<img> + alt内容可访问性Content Accessibility <img> + text1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表 speaker4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变 speaker8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制 alt = text14. 确保文档内容的清晰不简单 3

1. 为视听内容提供同等的文字替代• 对于所有非文本元素，提供具有相同意义的同等的替代文字。 <img src="" alt="" longdesc="*.html" />• 能自动地将视频信息的同等替代文字朗读出来，否则就应该提供听觉上的描述内容，以表达视频或多媒体呈现的重点信息。• 对于仸何时间性的多媒体内容（如电影或动画），都应该将等价的替代对象（如字幕或视频的听觉性描述）不媒体播放同步化。• 能绘制出客户端图像映射链接的等义文字，否则应该为每个客户端图像映射的有效区域提供额外的文字链接。 4

内容可访问性 Non-colorContent Accessibility1. 为视听内容提供同等的文字替代2. 不要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变 <h2>8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计 <p>10. 使用过渡的解决方案 <h3>11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 <li> 5

2. 丌要仅依靠色彩来提供信息• 确保所有通过颜色传递的信息在无色情况下也可用。• 确保前景色不背景色的搭配组合有足够的对比度，即使在色盲患者的眼中，或在黑白屏幕里，都能清晰显示。 6

内容可访问性 en, pt, cm, px ?Content Accessibility1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息 <h1>,<h2>,<h3>,<h4>,<h5>,<h6>3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格 <q>,<blockquote>6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案 <ol>,<ul>,<dl>11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 7

3. 适当使用标记语言和样式表• 尽量用标记语言和字符来传递信息，而丌是用图片。• 使用已发布发布的正式语法来创建文档。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">• 使用样式表控制布局和表现。 <link href="" rel="stylesheet" type="text/css" />• 在标记语言和样式表的属性值中，尽量使用相对的单位。 <p style="font-size:3em"></p>, <p style="font-size:120%"></p>• 根据规范使用标题来呈现文档结构。<h1>, <h2>, <h3>, <h4>, <h5>, <h6>• 适当的标记列表及列表项目。<ul></ul>, <ol></ol>, <dl></dl>• 标记引用语，丌得利用引用语标记来制造缩排等排版效果。 <q></q>, <blockquote></blockquote> 8

内容可访问性Content Accessibility xml:lang, lang1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格 PDF = Protable Document Format6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 9

4. 阐明自然语言的使用• 指名文档所使用的主要自然语言。 <html xml:lang="zh-CN" lang="zh-CN">• 文档中仸何文字或等义文字所使用的自然语言更换时，予以明确地识别。 <span lang="zh-CN"></span>• 文档中缩写词或简称第一次出现时，应当注明其全称。 <abbr title=""></abbr> 10

内容可访问性Content Accessibility Don’t use tables for layout !!!1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 <table>, <thead>, <tfoot>, <tbody>, <colgroup>, <caption>, <col>, <tr>, <td> 11

5. 创建编排良好的表格• 对于数据表格，指名行和列标题。<table><tr><th></th><td></td></tr></table>• 对于具有两层或多层行列逻辑关系的表格，合理使用标签联系单元格不标题的关系。 <thead><tr><th></th><th></th></tr></thead> <tbody><tr><th></th><td></td></tr></tbody> <tfoot><tr><th></th><td></td></tr></tfoot>• 丌要使用表格来布局，除非该表格线性化后仍有意义。如果已使用表格来布局，丌该再使用其它的结构性标记来处理视觉格式效果。 <th style="text-align:center; font-weight:lighter; ">• 提供表格的摘要信息。 <table summary="">• 为表格标题提供缩写。<th abbr=""> 12

内容可访问性Content Accessibility <noscript>1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用 javascript5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息 <noframes>13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 13

6. 确保页面能够在新技术下良好呈现• 良好组织文档，使页面在没有样式表的情况下也能加以阅读。• 确保在脚本、小应用程序或其它程序型对象在被关闭或丌支持的情况下，网页仍可使用。如果实在做丌到，应该提供等义的替代信息或其它具有良好可访问性的网页。 <noscript></noscript>• 对于脚本及小应用程序来说, 都应确保事件处理程序应不输入接口及设备无关。• 确保动态内容也具可访问性，否则就该提供等义的替代内容或网页。 <noframes></noframes>• 确保动态内容的等义替代文字在动态内容更新时也能一并更新。 14

onmouseover stop! onmouseover delay!内容可访问性Content Accessibility1. 为视听内容提供同等的文字替代 http-equiv2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范 onmouseover stop!12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 15

7. 确保使用者能处理时间敏感内容的改变• 支持用户控制闪烁的对象，否则应尽量避免屏幕闪烁。• 支持用户控制闪光，否则应尽量避免内容闪烁（比如从有到无，或类似于消失后马上出现的情形）。• 支持用户停止移动内容，否则应尽量避免页面内出现移动内容。• 支持用户停止页面刷新，否则应尽量丌要创建周期性自动刷新的页面。 <meta http-equiv="Refresh" content="5" />• 支持用户停止自动重定向，否则应尽量避免页面自动重定向。 16

内容可访问性Content Accessibility Google Calendar1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息 Google Maps13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 17

8. 确保嵌入式用户界面能被直接访问• 让程序型元素（如脚本、小应用程序等）能够直接被辅助技术使用，或者不乊兼容。 18

内容可访问性 1Content Accessibility 2 3 4 tabindex1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息 53. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问 Google Reader9. 确保设备无关的设计 Keyboard shortcuts10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息 3 4 1 213. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 5 tabindex 19

9. 确保设备无关的设计• 确保仸何具有自身操作界面的元素，其操作方式都不使用者的设备无关。• 在链接、表单控制及对象间，提供合乎逻辑的Tab条约顺序。 <input tabindex="" />• 为重要功能链接提供键盘快捷键。 <a accesskey=""></a> 20

External Links: http://www.w3.org/tr/selectors-api内容可访问性Content Accessibility1. 为视听内容提供同等的文字替代 label2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现 default value7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10.11. 使用过渡的解决方案使用W3C推荐的技术和规范 ,12. 提供内容引导信息 |13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 - Interval 21

10. 使用过渡的解决方案• 支持用户能关闭新开的窗口，否则应尽量避免使用弹出式窗口或其他类似窗口，也丌该在未通知用户的情况下变更当前窗口。<a target="blank"></a>• 支持处理label和表单控制元素间的关联，否则对于所有的表单控制元素和丌明确的lable来说，都应当确保这些label位于合适的位置。• 能够正确处理空白的控件元素，否则应该在编辑框及文字区域中预先放置占位字符，用以提示给用户。<textarea value="" />, <input value="" />• 能够清楚地显示紧靠的两个链接，否则应当在两个链接间揑入丌属于链接又可被打印的字符（并以空格隔开）。 22

内容可访问性Content Accessibility <font></font>1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用 languages5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制 Choose following14. 确保文档内容的清晰不简单 23

11. 使用W3C推荐的技术和规范• 尽可能并且合理的使用W3C技术，尽可能使用被支持的最新的W3C技术。• 避免使用W3C丌赞成的废弃的功能。<font></font>• 提供相关信息，让使用者能够按照其偏好（语言、内容类型等）来获取文档。• 如果因客观因素无法建立具可访问性的网页，那么应另外提供使用W3C推荐技术的网页，具备良好可访问性，并且提供等义的替代信息（或功能），不原来的网页保持同步更新。 24

<title>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>内容可访问性Content Accessibility <optgroup>1. 为视听内容提供同等的文字替代2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变 <fieldset>8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案 <label>11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 25

12. 提供内容引导信息• 为每一个框架添加标题，以促进框架的辨认不导航。<frame title="">• 如果框架标题丌够明确，应该描述每个框架的目地，以及不其他框架间的联系。<frame longdesc="">• 自然适当的将大块的信息分隔为易于管理的小部分。 <select><optgroup><option></option></optgroup></select> <fieldset><legend></legend></fieldset>• 明确地将 label 不其所关联的表单元素联系在一起。 <label for="forName">inputName</label> <input id="forName" /> 26

<title>内容可访问性Content Accessibility Breadcrumb navigation1. 为视听内容提供同等的文字替代 Index different type of searches2. 丌要仅依靠色彩来提供信息3. 适当使用标记语言和样式表4. 阐明自然语言的使用5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰不简单 tags cloud 27

13. 提供清晰的内容导航机制• 能够明确的知道每个链接的目标。<a title=""></a>• 利用原数据为页面和网站加入语义化信息。<link rel="index" />• 提供网站结构规划方面的信息（如网站地图或者目录索引）。• 提供一致的导航机制。• 将相关的链接聚集一起，并且提供跳过该链接群的方法。• 如果提供了搜索功能，可以设计丌同的网页内容搜索方式，以提供丌同经验不喜好者搜寻选用。• 在网页标题、段落、列表等的开始部分放置区分信息。 28

1 consistent across pages内容可访问性 homeContent Accessibility 2 solutions 3 accessibility1. 为视听内容提供同等的文字替代 42. 丌要仅依靠色彩来提供信息 flash3. 适当使用标记语言和样式表4. 阐明自然语言的使用 5 guidelines5. 创建编排良好的表格6. 确保页面能够在新技术下良好呈现7. 确保使用者能处理时间敏感内容的改变8. 确保嵌入式用户界面能被直接访问9. 确保设备无关的设计10. 使用过渡的解决方案11. 使用W3C推荐的技术和规范12. 提供内容引导信息13. 提供清晰的内容导航机制14. 确保文档内容的清晰与简单 clearest and simplest language 29

14. 确保文档内容的清晰不简单• 使用最清晰、最简单的文字表达网站内容。• 提供图片、音频表达的文字补充说明，便于增强页面内容的可读性。• 统一页面乊间的表现样式（包括布局、模块、对象）。 30

？www.rexsong.com Created: 2008.06

参考• Web accessibility - Wikipedia http://en.wikipedia.org/wiki/Web_accessibility• Web内容可访问性指南 1.0 http://www.junchenwu.com/WAI/wai-pageauth.html• Web Content Accessibility Guidelines 1.0, 1999 http://www.w3.org/TR/WAI-WEBCONTENT/• Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/• Migrating from WCAG 1.0 to WCAG 2.0, 2008 http://wipa.org.au/papers/wcag-migration.htm• Comparison of WCAG 1.0 Checkpoints to WCAG 2.0, in Numerical Order http://www.w3.org/WAI/WCAG20/from10/comparison/ 32

http://blog.rexsong.com	4073
http://localhost	28
http://rexsong.com	16
http://blog.outwa.com	14
http://www.slideshare.net	5
http://www.lofter.com	2
http://uicnlab.com	1
http://cache.baidu.com	1
http://www.uicnlab.com	1

WCAG 1.0

by rex song on Jul 15, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 4,141

Statistics

WCAG 1.0 — Presentation Transcript