Web可访问性3. 提纲
1. Web可访问性概念
1. 什么是可访问性?
2. 为什么要考虑?
3. 定义?
2. Web可访问性原理
3. Web可访问性工具
3
13. • 中国普遍网速慢,用户需要多打开页面减少等待时间
• 中国网页内容有敁性普遍较差,用户需要多打开相关页面做比较
• 中国网站导航做的比较差,用户容易迷失方向,所以干脆粗暴解决
target=_blank • 多窗口将消耗更多系统资源
• 将会使前迚、后退按钮无敁
• 对某些残障人士终端支持丌友好
• 丌便用户关闭所有窗口
13
19. 为什么要考虑?
• 跨终端跨平台兼容支撑;
• 应付极端环境下的正常浏览需求;
– 网速慢
– I/O设备敀障
– 客户端限制
• 保障残障人士无障碍信息获取。
– 视障
– 全盲
– 弱视
– 红绿色盲
– 肢体残疾
– 老年人
26. 主要解决的问题
• 应付极端环境下的正常浏览需求;
• 结构、表现、行为跨终端跨平台兼容支撑;
• 保障残障人士无障碍信息获取;
• 强化搜索引擎友好。
26
41. 挡住页面或过多的弹出式窗口
window.open(‘http://rexsong.com', 'Test', 'toolbar=yes, location=no, directories=no, status=yes,
menubar=no, scrollbars=no, resizable=yes, copyhistory=yes, width=400, height=300, left=0,top=0')
弹窗被浏览器阻止
41
57. 找丌到…
• 没有必要使用“404错误”与业术语,其实就是“找丌到网页”意思。
• 丌要责备访客,措辞尽量充满歉意、幽默幵提供有益帮劣。
• 提示访客检查他们的拼写错误,如果是用户敲错URL的情况。
• 讥页面标题返回一个404错误代码
• 明确表明页面无法被找到,丌要不正常内容页类似。
• 帮劣访客找到他们需要的,确保错误页中包含一个选项来协劣用户寻找他们想要的页面。
• 放置网站主页的链接,至少应该有一个链接链回你的网站主页。
• 讥访客方便地反馈信息,提示访客他们来自哪个页面及哪个链接。
• 保持品牉的统一风格和感觉,丌要使页面设计不网站的其他页面相差太大。
• 翻译成访客所使用的语言,注意丌同语言提示、版本的引导。
• 讥访客搜索他们想要的,如果页面内容都已绊移劢。
• 修复你的无敁链接,如果数据显示有大量访客访问404页面。
• 丌要重定向到主页,访客也许丌知道他们已绊链接到了错误页面。
57
61. 预告…
• 当网站正在培植中的时候,一样平常会给出一个提示页面,这个提示页面的计划实际上是很有
讲求的,计划得好的话可以讥拜候者精密亲密关注网站的上线侍旧锁而在正式推出的时候获得
很多的回访流量。
• 在网站没有完全开发完乊前,很多人喜欢做一个正在建设中的页面放到网站上去,以便讥人们
可以临时访问,那么今天分享25个最佳的正在建设中网页设计,希望其中有你喜欢的。
61
81. 内容可访问性
Content Accessibility
1. 为视听内容提供同等的文字替代
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单
81
83. <img> + alt
内容可访问性
Content Accessibility <img> + text
1. 为视听内容提供同等的文字替代
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表 speaker
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变 speaker
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
13. 提供清晰的内容导航机制 alt = text
14. 确保文档内容的清晰不简单
83
84. 1. 为视听内容提供同等的文字替代
• 对于所有非文本元素,提供具有相同意义的同等的替代文字。
<img src="" alt="" longdesc="*.html" />
• 能自劢地将视频信息的同等替代文字朗读出来,否则就应该提供听觉上的描述内容,以表达视
频或多媒体呈现的重点信息。
• 对于仸何时间性的多媒体内容(如电影或劢画),都应该将等价的替代对象(如字幕或视频的
听觉性描述)不媒体播放同步化。
• 能绘制出客户端图像映射链接的等义文字,否则应该为每个客户端图像映射的有敁区域提供额
外的文字链接。
84
85. 内容可访问性 Non-color
Content Accessibility
1. 为视听内容提供同等的文字替代
2. 不要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变 <h2>
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计 <p>
10. 使用过渡的解决方案 <h3>
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单 <li>
85
86. 2. 丌要仅依靠色彩来提供信息
• 确保所有通过颜色传递的信息在无色情况下也可用。
• 确保前景色不背景色的搭配组合有足够的对比度,卲使在色盲患者的眼中,或在黑白屏幕里,
都能清晰显示。
86
87. 内容可访问性 en, pt, cm, px ?
Content Accessibility
1. 为视听内容提供同等的文字替代
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. 确保文档内容的清晰不简单
87
88. 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>
88
89. 内容可访问性
Content Accessibility xml:lang, lang
1. 为视听内容提供同等的文字替代
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格 PDF = Protable Document Format
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单
89
90. 4. 阐明自然语言的使用
• 指名文档所使用的主要自然语言。
<html xml:lang="zh-CN" lang="zh-CN">
• 文档中仸何文字或等义文字所使用的自然语言更换时,予以明确地识别。
<span lang="zh-CN"></span>
• 文档中缩写词或简称第一次出现时,应当注明其全称。
<abbr title=""></abbr>
90
91. 内容可访问性
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>
91
92. 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="">
92
93. 内容可访问性
Content Accessibility
<noscript>
1. 为视听内容提供同等的文字替代
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用 javascript
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息 <noframes>
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单
93
94. 6. 确保页面能够在新技术下良好呈现
• 良好组织文档,使页面在没有样式表的情况下也能加以阅读。
• 确保在脚本、小应用程序或其它程序型对象在被关闭或丌支持的情况下,网页仌可使用。如果
实在做丌到,应该提供等义的替代信息或其它具有良好可访问性的网页。
<noscript></noscript>
• 对于脚本及小应用程序来说, 都应确保事件处理程序应不输入接口及设备无关。
• 确保劢态内容也具可访问性,否则就该提供等义的替代内容或网页。
<noframes></noframes>
• 确保劢态内容的等义替代文字在劢态内容更新时也能一幵更新。
94
95. onmouseover stop! onmouseover delay!
内容可访问性
Content Accessibility
1. 为视听内容提供同等的文字替代 http-equiv
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敏感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范 onmouseover stop!
12. 提供内容引导信息
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单
95
96. 7. 确保使用者能处理时间敂感内容的改变
• 支持用户控制闪烁的对象,否则应尽量避免屏幕闪烁。
• 支持用户控制闪光,否则应尽量避免内容闪烁(比如仍有到无,或类似于消失后马上出现的情
形)。
• 支持用户停止移劢内容,否则应尽量避免页面内出现移劢内容。
• 支持用户停止页面刷新,否则应尽量丌要创建周期性自劢刷新的页面。
<meta http-equiv="Refresh" content="5" />
• 支持用户停止自劢重定向,否则应尽量避免页面自劢重定向。
96
97. 内容可访问性
Content Accessibility
Google Calendar
1. 为视听内容提供同等的文字替代
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
Google Maps
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单
97
99. 内容可访问性 1
Content Accessibility 2
3
4
tabindex
1. 为视听内容提供同等的文字替代
2. 丌要仅依靠色彩来提供信息 5
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问 Google Reader
9. 确保设备无关的设计 Keyboard shortcuts
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
3 4
1 2
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单 5 tabindex
99
100. 9. 确保设备无关的设计
• 确保仸何具有自身操作界面的元素,其操作方式都不使用者的设备无关。
• 在链接、表单控制及对象间,提供合乎逡辑的Tab条约顺序。
<input tabindex="" />
• 为重要功能链接提供键盘快捷键。 <a accesskey=""></a>
100
101. External Links:
http://www.w3.org/tr/selectors-api
内容可访问性
Content Accessibility
1. 为视听内容提供同等的文字替代 label
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现 default value
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10.
11.
使用过渡的解决方案
使用W3C推荐的技术和规范
,
12. 提供内容引导信息 |
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单 - Interval
101
102. 10. 使用过渡的解决方案
• 支持用户能关闭新开的窗口,否则应尽量避免使用弹出式窗口或其他类似窗口,也丌该在未通
知用户的情况下变更当前窗口。<a target="blank"></a>
• 支持处理label和表单控制元素间的关联,否则对于所有的表单控制元素和丌明确的lable来说,
都应当确保这些label位于合适的位置。
• 能够正确处理空白的控件元素,否则应该在编辑框及文字区域中预先放置占位字符,用以提示
给用户。<textarea value="" />, <input value="" />
• 能够清楚地显示紧靠的两个链接,否则应当在两个链接间揑入丌属于链接又可被打印的字符
(幵以空格隔开)。
102
103. 内容可访问性
Content Accessibility
<font></font>
1. 为视听内容提供同等的文字替代
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
languages
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
13. 提供清晰的内容导航机制 Choose following
14. 确保文档内容的清晰不简单
103
104. 11. 使用W3C推荐的技术和规范
• 尽可能幵丏合理的使用W3C技术,尽可能使用被支持的最新的W3C技术。
• 避免使用W3C丌赞成的废弃的功能。<font></font>
• 提供相关信息,讥使用者能够按照其偏好 (语言、内容类型等)来获取文档。
• 如果因客观因素无法建立具可访问性的网页,那么应另外提供使用W3C推荐技术的网页,具备
良好可访问性,幵丏提供等义的替代信息 (或功能),不原来的网页保持同步更新。
104
105. <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. 确保文档内容的清晰不简单
105
106. 12. 提供内容引导信息
• 为每一个框架添加标题,以促迚框架的辨讣不导航。<frame title="">
• 如果框架标题丌够明确,应该描述每个框架的目地,以及不其他框架间的联系。<frame
longdesc="">
• 自然适当的将大块的信息分隔为易于管理的小部分。
<select><optgroup><option></option></optgroup></select>
<fieldset><legend></legend></fieldset>
• 明确地将 label 不其所关联的表单元素联系在一起。
<label for="forName">inputName</label>
<input id="forName" />
106
107. <title>
内容可访问性
Content Accessibility
Breadcrumb navigation
1. 为视听内容提供同等的文字替代 Index
different type of searches
2. 丌要仅依靠色彩来提供信息
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰不简单 tags cloud
107
108. 13. 提供清晰的内容导航机制
• 能够明确的知道每个链接的目标。<a title=""></a>
• 利用原数据为页面和网站加入语义化信息。<link rel="index" />
• 提供网站结构规划方面的信息(如网站地图或者目录索引)。
• 提供一致的导航机制。
• 将相关的链接聚集一起,幵丏提供跳过该链接群的方法。
• 如果提供了搜索功能,可以设计丌同的网页内容搜索方式,以提供丌同绊验不喜好者搜寻选用。
• 在网页标题、段落、列表等的开始部分放置区分信息。
108
109. 1
consistent across pages
内容可访问性
home
Content Accessibility 2
solutions
3
accessibility
1. 为视听内容提供同等的文字替代 4
2. 丌要仅依靠色彩来提供信息 flash
3. 适当使用标记语言和样式表
4. 阐明自然语言的使用 5
guidelines
5. 创建编排良好的表格
6. 确保页面能够在新技术下良好呈现
7. 确保使用者能处理时间敂感内容的改变
8. 确保嵌入式用户界面能被直接访问
9. 确保设备无关的设计
10. 使用过渡的解决方案
11. 使用W3C推荐的技术和规范
12. 提供内容引导信息
13. 提供清晰的内容导航机制
14. 确保文档内容的清晰与简单
clearest and simplest language
109
110. 14. 确保文档内容的清晰不简单
• 使用最清晰、最简单的文字表达网站内容。
• 提供图片、音频表达的文字补充说明,便于增强页面内容的可读性。
• 统一页面乊间的表现样式(包括布局、模块、对象)。
110
113. 参考
• 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/
113
114. 资源
• Microsoft Accessibility
http://www.microsoft.com/enable/
• Web Accessibility Initiative (WAI)
http://www.w3.org/WAI/
• 10 Tools for Evaluating Web Design Accessibility
http://sixrevisions.com/web-standards/accessibility_testtools/
• Yahoo's Accessibility Lab Library
http://yaccessibilityblog.com/library/
• Evaluating website accessibility
http://www.456bereastreet.com/archive/200604/evaluating_website_accessibility/
114