Web无障碍设计（Accessibility in Web design，也叫网站可及性 ）是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。
为什么无障碍如此重要（帮助残障人士）
为什么不是所有网站都能无障碍访问？你可能也会问自己为什么存在“无障碍”的问题，为什么不是所有网站都能让所有用户无障碍访问？要进行无障碍设计有许多不同原因，其中包括残疾人用户的需求、不同的人访问和使用互联网的不同途径和方式。
视障用户视障用户包括色盲用户、完全失明用户（盲人）。如果图片不带有相关文字描述，则视障用户在理解图片方面会存在问题。如果图片没有文字描述，看不见图片的盲人用户就无法知道图片表达的是什么。色盲用户在识别设计元素（包括文字）方面也会存在问题，因为色盲用户所能识别的色彩不足以辨别所有的设计元素（包括背景色和页面颜色）。
所开发的网站，如果没有考虑到适应于屏幕发音阅读器（ 读屏软件 ,如JAWS ）或“非可视”浏览器（或叫声音浏览器、读屏浏览器，如 MozBraille ）。读屏浏览器是一个可以发音阅读出网站的浏览器，帮助有视觉障碍的用户访问网站。一个在可视浏览器（如IE）上看起来良好的网站，在读屏浏览器下可能听起来非常糟糕。
听障用户听障用户在听觉上存在问题。用声音传达的信息无法被听障用户所理解，简单解决方法是提供另外途径的信息传达方式，而不仅仅是声音，例如用文字描述、用图片。
残障用户（肢体伤残的用户）如果你不是残障用户，你无法想象他们（残疾人）的网络体验。例如，你曾经试过不使用鼠标去访问网站吗？除非你很幸运的遇到一个无障碍访问良好的网站，否则你肯定觉得非常困难。残障用户经常无法使用鼠标，除非创建网站的导航和输入方式的需求中就考虑残障人士的需求，否则残障人士可能完全无法使用你的网站。
认知和神经障碍用户网站往往比较复杂，要想找到我们所想要的信息经常不太容易。如果网站设计的过于复杂、导航不一致、存在让人分心（抓狂）的重复性动画，情况会更加糟糕。这些设计元素会导致认知和神经有障碍的用户的使用问题，甚至会让这些用户完全无法使用网站。
残障人士之外（所有用户都能受益）
前面我们知道如果我们存在某方面残障，使用互联网是件困难的事情。然后，web无障碍访问不仅仅帮助到残障人士，良好理解和遵循Web无障碍设计，可以让所有用户都受益、更好的服务用户。
Web无障碍设计还可以让通过以下方式使用你的网站的用户受益：
使用移动手机、Web-TV和信息岗亭的用户
低带宽的用户
在吵杂环境下使用网站的用户
容易被“屏幕眩光”伤到眼睛的用户
开车时的用户
低文化水平的用户
第二语言访问的用户（国外用户）
不同学习方式和习惯的用户
处理好Web无障碍访问问题也可以改善：
页面传输和网站维护
内容索引
内容搜索
市场机会让你的网站具有可及性还有其它原因。根据目前数据，在许多国家残疾人用户占到人口的10%~20%，如果能吸收前面提到的残障人士成为你的网站的用户，可以提高你网站的市场占有率。
许多国家的老龄化人口都在增加，年龄的增大会带来更多的无障碍访问问题，包括视觉障碍、听觉障碍、记忆力下降等。如果你的网站能吸收老年人用户，也会大大提升你网站的市场占有率。
所以，无障碍访问是可以直接带来经济效益的。
无障碍Web标准Web无障碍指南（WCAG）2.0定义了如何使残疾人士更方便地使用Web内容的方法。无障碍涉及广泛的残疾症状，包括视觉，听觉，身体，语言，认知，语言，学习以及神经残疾。尽管这些指南内容广泛，但它无法有效地满足所有类型的人群和残疾程度的人的需要。这些指南也适合老年人上网，还可让普通用户更好的使用。WCAG 2.0文档旨在满足需要稳定的，可参考的技术标准的人群。被称为支持文档的其他文档以WCAG 2.0文档为基础，可用于其他重要的用途，包括可进行更新的能力，以说明如何将WCAG用于新技术的应用。支持文档包括：
如何符合WCAG 2.0 - WCAG 2.0的可定制的快速参考，包括所有的指南、成功标准以及作者正在开发和评估网页内容时可用到的技巧。
理解WCAG 2.0 - 理解和实施WCAG 2.0的指南。对于WCAG 2.0的每一个准则和成功标准，这些主要议题都有一个简短的“理解”文档。
WCAG 2.0技巧 - -技术和常见失败集，对于每个技巧和常见失败，另附一份文档，其中包括描述，例子，代码和测试。
WCAG 2.0文档 - 对于如何关联和链接技术文档，给出 图示和说明。
参见 Web 内容无障碍指南（WCAG）概述 里关于WCAG 2.0支持材料的描述，包括WCAG 2.0相关的教育资源。附加资源包括了以下主题，Web无障碍商业案例，改善网站无障碍的规划实施，和无障碍政策。
开发无障碍可访问的 Web 网页应用
开发和测试可访问的 Web 应用主要的有以下几个步骤：
Webking 进行静态检查，通常由开发人员在单元测试时进行，检查 HTML 页面中不满足 CI162 所对应列表的项。目前由于 WebKing 不支持 ARIA，很多 ARIA 的标签不能被正确的识别，所以 WebKing 检查出的错误需要一一去检查区别是真正的违反 Checklist 还是由于 WebKing 不能识别 ARIA 的标签引起的。
键盘支持，要求所有能通过鼠标完成的操作用键盘都能达到同样的效果。
高对比度的支持：在高对比度模式下，屏幕只有黑白两色，要保证 Web 应用在这种模式下不丢失信息。
读屏软件的支持，通常由测试人员完成。测试人员模拟盲人使用读屏软件，要保证页面上的内容基本都能为读屏软件所识别，并且能完成各种操作。
页面头部必须包含的内容
为了保证页面的无障碍访问，首先需要在页面的头部加上 DTD 的声明以及页面默认的语言。清单 1 列出了如何在 HTML 页面中加入 DTD 声明及默认语言属性，清单 2 列出了如何在 XHTML 页面中加入 DTD 声明及默认语言属性。
清单 1. HTML 页面中加入 DTD 声明及默认语言属性清单 2. XML 页面中加入 DTD 声明及默认语言属性
此外，页面的 title 属性值也是必须的，如清单 3 所示。
清单 3. 设置 title 属性关于 Image
1. 图片或者动画均需提供 Alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。如图 4 所示：
图 4.Cat 图片
对应的 HTML 如下：
清单 1. Image 的 HTML2. 对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。如图 5 的用于装饰页头的图片，实际并没有传递有价值的信息。
图 5. 装饰性图片
对应的 HTML 如下：
清单 2. 装饰性 Image 的 HTML必须设置一个空 alt 属性的目的是为了能通过 Webking 的检查，并且使得读屏软件能够忽略此元素。
3. 对于图表文件，alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来。例如下面的图 6：alt 信息设置为销售额从 1996 年到 2004 年间持续稳定增长，从 400 万增长到了 1600 万。并不需要把每一年的增长额都详细得描述出来。
图 6. Image 图表
4. 对于放在链接里面的图片，如果已经有文字的说明，alt 也设置为空，这样避免读屏软件重复同样的内容。如下面的 HTML：
清单 3. 无需重复设置 alt 的 ImageApple iPhone
A 的内容已经指明了这是个苹果手机，IMG 的 alt 属性就没必要再设置一次了。否则读屏软件会连续读两次重复的内容，引起混乱。
5.CSS 将样式跟结构分离，使得 HTML 代码结构清晰。很多装饰性的图片也都放在 CSS 里面来加载，带来的一个问题就是在 CSS 里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的，还可以触发功能，那就需要从 CSS 里面拿出来，当成一个独立的 IMG 或者 INPUT 元素。例如下面的一个提示保存的图片
图 7. 保存图片
写在 CSS 里面的做法是：
清单 4. 图片写在 CSS 里面 .save_button{ background: url("images/save_button.png"); width: 33px; height: 33px; vertical-align:middle; } 这样当用户切换到高对比度模式，这个图片就是一片空白，用户无法再去点击保存。修改如下：
清单 5. 将 CSS 里面的图片拿出来6. 在一个图片列表里面选中某个图片，区别选中去否我们通常的做法是用边框的颜色来标识。如下图，选中的图片边框为蓝色
图 8. 图片被选中的正常效果图
清单 6. 图片被选中时对应的 CSS.selectedIcon{ border:5px solid #ACC6F3; } .unSelectedIcon{ border:5px solid #C0D4F7; } 但这样的一个实现实际上违反了可访问检查列表中的一项：不能仅仅通过颜色来区分不同的元素，因为在高对比度下只有黑色或白色，这样的区分在高对比度下是没有任何作用的。我们很容易想到的一种办法就是只有选中的时候才加边框，未选中时则没有边框，这样就可以区分出来了。修改如下：
清单 7. 图片被选中时修改后的 CSS.selectedIcon{ border:5px solid #ACC6F3; } .unSelectedIcon{ border:0 none; } 这样引起的问题是，图片的布局在选中的时候会浮动，增加了 5px 的边框，看起来效果就很差。那么怎么保证布局又满足可访问性的要求呢？ 可以在上面 CSS 的基础上通过 padding 属性使得布局正确：
清单 8. 图片被选中时正确的 CSS .selectedIcon {border:1px solid #ACC6F3;padding:4px;} .unSelectedIcon {border:0 none;padding:5px;} 这样保证整体的边界都是 5px，在高对比度下的效果如图 9 所示：
图 9. 图片被选中时的高对比度效果图
关于 Table
Table 分为两类：一类是做布局的 table，一类是数据 table。对于布局用的 table，读屏软件没必要知道这是一个表，可以通过设置 role=presentation 使 JAWS 忽略这个表，只关注里面的内容。对于数据表格，则需要设置 caption 属性，说明整个表是用来做什么的，使得 JAWS 可以告诉用户这个表的作用。对于每一个单元内的数据，还应该通过 th 属性使得 JAWS 能识别这个数据的表头是什么。对于复杂表，可以通过 id 和 header 属性来标识。如图 10 所示 :
图 10. 数据图表
以第一行的数字 5 为例，正常人可以很容易得看出 5 指的是一年级 Mr.Henry 老师这个班的男生有 5 个，但当 JAWS 面对这个数字 5 的时候，怎么能识别出来呢？通过 header 来标识表头，header 的值就指向对应表头的 id。对应的 HTML 如下：
清单 9. 数据图表Class Teacher #of Boys #of Girls 1st Grade Mr . Henry 5 4 Mrs . Smith 7 9 2nd Grade Mr . Jones 3 9 Mrs . Smith 4 3 Mrs . Kelly 6 9
关于 Form
Form 元素需要关联一个 label 元素，所有的 button 都已经有了一个隐含的 label，所以不再需要显示关联。对于 Input，Select， Checkbox， Radio button 则都需要显示一个 label 元素。这样 JAWS 在面对这个表单元素的时候才能告诉用户这个表单的作用。例如下面清单 10 中的 input， JAWS 会告诉用户这个是需要输入名字的一个输入框。当 label 属性不方便使用的时候，还可以通过 title 属性达到相同的效果，也可以满足 Webking 检查的需要。清单 10 中的两种写法都可以。但前提是 Name 不需要被显示出来。当 title 和 label 都设置的时候 title 会被 JAWS 忽略。
清单 10. Form 元素示例Name: 或
当一个表单元素如果前后都需要描述的时候， label 就显得力不从心了。ARIA 规范的出现解决了这一问题。aria-labelledby 属性可以设置多个值，说明这个表单元素是被那些值所描述的, aria-describedby 属性则更详细的扩展了这个描述。如图 11 所示：
图 11. 需要多个 Label 描述的输入框
当 JAWS 把焦点放在 10 上的时候，会告诉用户 10 表示的是 10 分钟刷新一次。对应的 HTML 代码如清单 11 所示。aria-required 的属性标识这个元素是必须的，JAWS 识别此元素并告知用户必须输入此元素。我们可以看到中间的 input 元素被多个元素来描述（aria-labelledby 中的几个 id 值），这样 JAWS 就能够识别这个标签，并且按照这个标签的顺序读出前后的 label， 并且提示用户如果还有更详细的描述以及如何获取这个更详细的描述。当用户需要时，aria-describedby 所对应的元素信息就会被读出来。增强了视力有障碍人士与普通人了解内容的一致性。
清单 11. 需要多个 Label 描述的输入框Refresh after minutes
查看更多关于如何开发无障碍的Web网页应用详细手册教程指南_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112176