SlideShare une entreprise Scribd logo
1  sur  32
WCAG 1.0
 Accessibility

    Final Ver1.200903




                        1
内容可访问性
Content Accessibility




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


                          2
<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.   确保文档内容的清晰不简单


                                                             3
1. 为视听内容提供同等的文字替代


•   对于所有非文本元素,提供具有相同意义的同等的替代文字。
    <img src="" alt="" longdesc="*.html" />

•   能自动地将视频信息的同等替代文字朗读出来,否则就应该提供听觉上的描述内容,以表达视
    频或多媒体呈现的重点信息。

•   对于仸何时间性的多媒体内容(如电影或动画),都应该将等价的替代对象(如字幕或视频的
    听觉性描述)不媒体播放同步化。

•   能绘制出客户端图像映射链接的等义文字,否则应该为每个客户端图像映射的有效区域提供额
    外的文字链接。




                                                4
内容可访问性                              Non-color
Content Accessibility




1.    为视听内容提供同等的文字替代
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 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.   确保文档内容的清晰不简单


                                                                 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, lang




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


                                                     13
6. 确保页面能够在新技术下良好呈现


•   良好组织文档,使页面在没有样式表的情况下也能加以阅读。

•   确保在脚本、小应用程序或其它程序型对象在被关闭或丌支持的情况下,网页仍可使用。如果
    实在做丌到,应该提供等义的替代信息或其它具有良好可访问性的网页。
    <noscript></noscript>

•   对于脚本及小应用程序来说, 都应确保事件处理程序应不输入接口及设备无关。

•   确保动态内容也具可访问性,否则就该提供等义的替代内容或网页。
    <noframes></noframes>

•   确保动态内容的等义替代文字在动态内容更新时也能一并更新。




                                                14
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.   确保文档内容的清晰不简单


                                                                         15
7. 确保使用者能处理时间敏感内容的改变


•   支持用户控制闪烁的对象,否则应尽量避免屏幕闪烁。

•   支持用户控制闪光,否则应尽量避免内容闪烁(比如从有到无,或类似于消失后马上出现的情
    形)。

•   支持用户停止移动内容,否则应尽量避免页面内出现移动内容。

•   支持用户停止页面刷新,否则应尽量丌要创建周期性自动刷新的页面。
    <meta http-equiv="Refresh" content="5" />

•   支持用户停止自动重定向,否则应尽量避免页面自动重定向。




                                                16
内容可访问性
Content Accessibility
                          Google Calendar



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


                                               17
8. 确保嵌入式用户界面能被直接访问


•   让程序型元素(如脚本、小应用程序等)能够直接被辅助技术使用,或者不乊兼容。




                                            18
内容可访问性                                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

                                                                            19
9. 确保设备无关的设计


•   确保仸何具有自身操作界面的元素,其操作方式都不使用者的设备无关。

•   在链接、表单控制及对象间,提供合乎逻辑的Tab条约顺序。
    <input tabindex="" />

•   为重要功能链接提供键盘快捷键。 <a accesskey=""></a>




                                           20
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

                                                                     21
10. 使用过渡的解决方案


•   支持用户能关闭新开的窗口,否则应尽量避免使用弹出式窗口或其他类似窗口,也丌该在未通
    知用户的情况下变更当前窗口。<a target="blank"></a>

•   支持处理label和表单控制元素间的关联,否则对于所有的表单控制元素和丌明确的lable来说,
    都应当确保这些label位于合适的位置。

•   能够正确处理空白的控件元素,否则应该在编辑框及文字区域中预先放置占位字符,用以提示
    给用户。<textarea value="" />, <input value="" />

•   能够清楚地显示紧靠的两个链接,否则应当在两个链接间揑入丌属于链接又可被打印的字符
    (并以空格隔开)。




                                                      22
内容可访问性
Content Accessibility
                          <font></font>




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


                                                          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 navigation



1.    为视听内容提供同等的文字替代                                          Index
                          different type of searches
2.    丌要仅依靠色彩来提供信息
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
内容可访问性
                                      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

                                                                                              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

Contenu connexe

En vedette

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

En vedette (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

WCAG 1.0

  • 1. WCAG 1.0 Accessibility Final Ver1.200903 1
  • 2. 内容可访问性 Content Accessibility 1. 为视听内容提供同等的文字替代 2. 丌要仅依靠色彩来提供信息 3. 适当使用标记语言和样式表 4. 阐明自然语言的使用 5. 创建编排良好的表格 6. 确保页面能够在新技术下良好呈现 7. 确保使用者能处理时间敏感内容的改变 8. 确保嵌入式用户界面能被直接访问 9. 确保设备无关的设计 10. 使用过渡的解决方案 11. 使用W3C推荐的技术和规范 12. 提供内容引导信息 13. 提供清晰的内容导航机制 14. 确保文档内容的清晰不简单 2
  • 3. <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. 确保文档内容的清晰不简单 3
  • 4. 1. 为视听内容提供同等的文字替代 • 对于所有非文本元素,提供具有相同意义的同等的替代文字。 <img src="" alt="" longdesc="*.html" /> • 能自动地将视频信息的同等替代文字朗读出来,否则就应该提供听觉上的描述内容,以表达视 频或多媒体呈现的重点信息。 • 对于仸何时间性的多媒体内容(如电影或动画),都应该将等价的替代对象(如字幕或视频的 听觉性描述)不媒体播放同步化。 • 能绘制出客户端图像映射链接的等义文字,否则应该为每个客户端图像映射的有效区域提供额 外的文字链接。 4
  • 5. 内容可访问性 Non-color Content Accessibility 1. 为视听内容提供同等的文字替代 2. 不要仅依靠色彩来提供信息 3. 适当使用标记语言和样式表 4. 阐明自然语言的使用 5. 创建编排良好的表格 6. 确保页面能够在新技术下良好呈现 7. 确保使用者能处理时间敏感内容的改变 <h2> 8. 确保嵌入式用户界面能被直接访问 9. 确保设备无关的设计 <p> 10. 使用过渡的解决方案 <h3> 11. 使用W3C推荐的技术和规范 12. 提供内容引导信息 13. 提供清晰的内容导航机制 14. 确保文档内容的清晰不简单 <li> 5
  • 6. 2. 丌要仅依靠色彩来提供信息 • 确保所有通过颜色传递的信息在无色情况下也可用。 • 确保前景色不背景色的搭配组合有足够的对比度,即使在色盲患者的眼中,或在黑白屏幕里, 都能清晰显示。 6
  • 7. 内容可访问性 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. 确保文档内容的清晰不简单 7
  • 8. 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
  • 9. 内容可访问性 Content Accessibility xml:lang, lang 1. 为视听内容提供同等的文字替代 2. 丌要仅依靠色彩来提供信息 3. 适当使用标记语言和样式表 4. 阐明自然语言的使用 5. 创建编排良好的表格 PDF = Protable Document Format 6. 确保页面能够在新技术下良好呈现 7. 确保使用者能处理时间敏感内容的改变 8. 确保嵌入式用户界面能被直接访问 9. 确保设备无关的设计 10. 使用过渡的解决方案 11. 使用W3C推荐的技术和规范 12. 提供内容引导信息 13. 提供清晰的内容导航机制 14. 确保文档内容的清晰不简单 9
  • 10. 4. 阐明自然语言的使用 • 指名文档所使用的主要自然语言。 <html xml:lang="zh-CN" lang="zh-CN"> • 文档中仸何文字或等义文字所使用的自然语言更换时,予以明确地识别。 <span lang="zh-CN"></span> • 文档中缩写词或简称第一次出现时,应当注明其全称。 <abbr title=""></abbr> 10
  • 11. 内容可访问性 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
  • 12. 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
  • 13. 内容可访问性 Content Accessibility <noscript> 1. 为视听内容提供同等的文字替代 2. 丌要仅依靠色彩来提供信息 3. 适当使用标记语言和样式表 4. 阐明自然语言的使用 javascript 5. 创建编排良好的表格 6. 确保页面能够在新技术下良好呈现 7. 确保使用者能处理时间敏感内容的改变 8. 确保嵌入式用户界面能被直接访问 9. 确保设备无关的设计 10. 使用过渡的解决方案 11. 使用W3C推荐的技术和规范 12. 提供内容引导信息 <noframes> 13. 提供清晰的内容导航机制 14. 确保文档内容的清晰不简单 13
  • 14. 6. 确保页面能够在新技术下良好呈现 • 良好组织文档,使页面在没有样式表的情况下也能加以阅读。 • 确保在脚本、小应用程序或其它程序型对象在被关闭或丌支持的情况下,网页仍可使用。如果 实在做丌到,应该提供等义的替代信息或其它具有良好可访问性的网页。 <noscript></noscript> • 对于脚本及小应用程序来说, 都应确保事件处理程序应不输入接口及设备无关。 • 确保动态内容也具可访问性,否则就该提供等义的替代内容或网页。 <noframes></noframes> • 确保动态内容的等义替代文字在动态内容更新时也能一并更新。 14
  • 15. 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. 确保文档内容的清晰不简单 15
  • 16. 7. 确保使用者能处理时间敏感内容的改变 • 支持用户控制闪烁的对象,否则应尽量避免屏幕闪烁。 • 支持用户控制闪光,否则应尽量避免内容闪烁(比如从有到无,或类似于消失后马上出现的情 形)。 • 支持用户停止移动内容,否则应尽量避免页面内出现移动内容。 • 支持用户停止页面刷新,否则应尽量丌要创建周期性自动刷新的页面。 <meta http-equiv="Refresh" content="5" /> • 支持用户停止自动重定向,否则应尽量避免页面自动重定向。 16
  • 17. 内容可访问性 Content Accessibility Google Calendar 1. 为视听内容提供同等的文字替代 2. 丌要仅依靠色彩来提供信息 3. 适当使用标记语言和样式表 4. 阐明自然语言的使用 5. 创建编排良好的表格 6. 确保页面能够在新技术下良好呈现 7. 确保使用者能处理时间敏感内容的改变 8. 确保嵌入式用户界面能被直接访问 9. 确保设备无关的设计 10. 使用过渡的解决方案 11. 使用W3C推荐的技术和规范 12. 提供内容引导信息 Google Maps 13. 提供清晰的内容导航机制 14. 确保文档内容的清晰不简单 17
  • 18. 8. 确保嵌入式用户界面能被直接访问 • 让程序型元素(如脚本、小应用程序等)能够直接被辅助技术使用,或者不乊兼容。 18
  • 19. 内容可访问性 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 19
  • 20. 9. 确保设备无关的设计 • 确保仸何具有自身操作界面的元素,其操作方式都不使用者的设备无关。 • 在链接、表单控制及对象间,提供合乎逻辑的Tab条约顺序。 <input tabindex="" /> • 为重要功能链接提供键盘快捷键。 <a accesskey=""></a> 20
  • 21. 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 21
  • 22. 10. 使用过渡的解决方案 • 支持用户能关闭新开的窗口,否则应尽量避免使用弹出式窗口或其他类似窗口,也丌该在未通 知用户的情况下变更当前窗口。<a target="blank"></a> • 支持处理label和表单控制元素间的关联,否则对于所有的表单控制元素和丌明确的lable来说, 都应当确保这些label位于合适的位置。 • 能够正确处理空白的控件元素,否则应该在编辑框及文字区域中预先放置占位字符,用以提示 给用户。<textarea value="" />, <input value="" /> • 能够清楚地显示紧靠的两个链接,否则应当在两个链接间揑入丌属于链接又可被打印的字符 (并以空格隔开)。 22
  • 23. 内容可访问性 Content Accessibility <font></font> 1. 为视听内容提供同等的文字替代 2. 丌要仅依靠色彩来提供信息 3. 适当使用标记语言和样式表 4. 阐明自然语言的使用 languages 5. 创建编排良好的表格 6. 确保页面能够在新技术下良好呈现 7. 确保使用者能处理时间敏感内容的改变 8. 确保嵌入式用户界面能被直接访问 9. 确保设备无关的设计 10. 使用过渡的解决方案 11. 使用W3C推荐的技术和规范 12. 提供内容引导信息 13. 提供清晰的内容导航机制 Choose following 14. 确保文档内容的清晰不简单 23
  • 24. 11. 使用W3C推荐的技术和规范 • 尽可能并且合理的使用W3C技术,尽可能使用被支持的最新的W3C技术。 • 避免使用W3C丌赞成的废弃的功能。<font></font> • 提供相关信息,让使用者能够按照其偏好 (语言、内容类型等)来获取文档。 • 如果因客观因素无法建立具可访问性的网页,那么应另外提供使用W3C推荐技术的网页,具备 良好可访问性,并且提供等义的替代信息 (或功能),不原来的网页保持同步更新。 24
  • 25. <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
  • 26. 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
  • 27. <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 27
  • 28. 13. 提供清晰的内容导航机制 • 能够明确的知道每个链接的目标。<a title=""></a> • 利用原数据为页面和网站加入语义化信息。<link rel="index" /> • 提供网站结构规划方面的信息(如网站地图或者目录索引)。 • 提供一致的导航机制。 • 将相关的链接聚集一起,并且提供跳过该链接群的方法。 • 如果提供了搜索功能,可以设计丌同的网页内容搜索方式,以提供丌同经验不喜好者搜寻选用。 • 在网页标题、段落、列表等的开始部分放置区分信息。 28
  • 29. 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 29
  • 30. 14. 确保文档内容的清晰不简单 • 使用最清晰、最简单的文字表达网站内容。 • 提供图片、音频表达的文字补充说明,便于增强页面内容的可读性。 • 统一页面乊间的表现样式(包括布局、模块、对象)。 30
  • 31. ? www.rexsong.com Created: 2008.06
  • 32. 参考 • 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