无障碍网页设计(WCAG2.0)
无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务。无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀、有担当的互联网企业的责任,也是一个互联网从业人员应该关注到的一个方面。
无障碍化受益人群:
普通人 | 普通网站用户;文化背景和习惯与主流用户不同的用户;老年人或儿童等用户;无障碍化可使得用户更轻松地使用网站服务,降低使用、学习和理解的成本。 |
视力障碍用户 | 主要包括盲人、低视力、色盲、色弱等用户。针对这部分用户所做的信息无障碍化是最通用和最具有代表性的,尤其是盲人用户。因为这部分用户是必须依赖于辅助技术进行站点的信息阅读和交互。这也就要求被访问页面必须具备易读取,可交互,高效率等无障碍化要求。 |
听力、智力、精神、肢体障碍用户 | 可以通过视觉访问的用户,在依赖于系统的一些放大镜等工具进行正常访问(也需要一些色差等方面的网页支持);肢体障碍用户在交互方面和视力障碍用户面临的问题是类似的,都是需要通过辅助技术和网页进行交互支持。 |
一、无障碍化标准:
- 1997年2月,W3C组织成立网络无障碍推动小组(WAI),制定无障碍化规范和推动无障碍化实施。
- 1999年5月,W3C推出WCAG1.0无障碍化指导。
- 2000年7月,在日本冲绳举行的G8会议发表《实现全球信息化社会的冲绳宪章》
- 2008年3月,中国信息产业部电信研究院、中国互联网协会等单位发布《YD/T 1761-2008》标准,规定了无障碍上网的网页设计技术要求。
- 2008年12月,W3C发布了WCAG2.0最终版本。- WCAG2.0是信息无障碍化最主要的标准,英文地址:http://www.w3.org/TR/WCAG/
- HTML5 ARIA - http://www.w3.org/WAI/PF/aria/
二、辅助技术简介
放大镜
这里包括硬件上的放大镜,安置在显示器上的;也包括一些软件上放大镜,比如操作系统的放大镜工具或者第三方软件的放大镜工具。目的是文字放大,便于用户识别和阅读。这里对网页依赖较小。
盲文点字显示器
通过将文字通过凸凹的方式转化成特殊的编码,以供盲人用户使用。但这个主要是用于阅读,交互的操作还是要使用键盘类。
读屏软件
将页面信息转换成语音播放给用户。代表性的产品包括:NVDA,争渡,永德,VoiceOver等。从互联网使用的角度来看,读屏软件的使用是最为广泛的,相对盲文电子显示器可以更快捷的获取信息。大家可以安装下NVDA体验下读屏软件。NVDA下载地址:
http://sourceforge.net/projects/nvda/files/releases/2013.1/nvda_2013.1.exe/download
从上面的辅助技术的介绍,我们不难发现无障碍化的阅读和交互很大层面上依赖于键盘和网页的交互。那么我们无障碍化网页建设很大一部分工作就是用于支持键盘操作和交互。
在网上搜到的无障碍设计说明:
全网站遵循WCAG2.0进行无障碍网页设计,符合XHTML1.0技术规则,适用于盲用读屏软件。 1、全网站页面可用键盘操作,不限于鼠标。 2、网站设置导盲砖快速键(:::),使用者可快速到达各主要区块。 3、网页图片均标示文字说明。 4、所有链接均添加提示文字。 5、对于网页色调,框架、语言等提供了相应的改造办法。 无障碍功能使用说明: 网站页面分为四大区块:左侧选单区;主要选单区;右侧选单区;头部连结区。 快捷键设定如下: Alt+C :左侧选单区,此区块呈现各网页的左侧内容。 Alt+B :主要选单区,此区块呈现各网页的主要内容。 Alt+N :右侧选单区,此区块呈现各网页的右侧内容。 Alt+E :头部连结区,此区块列有本网站的首页头部连结。 方式二:采用网站自动发声技术,提供语音版网站。 将网站中英文网页文字信息直接转换成标准流畅的语音文件,用户无须安装或下载任何软件便能通过浏览器听取网页内容,并可通过键盘数字键任意选择不同频道和栏目。 方式三:提供网站浏览辅助工具,适用于视力有障碍人群、认知能力有障碍的残疾人和老年人。 1、自动朗读网页内容; 2、对网页的显示比例、文字及背景颜色进行定制; 3、支持网站的多语言版本; 4、提供语速调整、音量调整、放大显示等个性化设置。 |
总结:无障碍化设计主要内容是重新设计网页,使得屏幕读取器、语音识别软件和屏幕键盘均能通过特定的语义标识(title、button~)读取网页组件本质信息,而WAI-ARIA 角色标准在语义化标识约定方面起至关重要的作用。现在不但Firefox、Safari 4.0、Google 早已支持 WAI-ARIA,而且IE8 也开始部分支持,
三、开发和测试可访问 Web 应用的步骤
开发和测试可访问的 Web 应用主要的有以下几个步骤:
- 无障碍化网站开发检查项,
互联网行业中在无障碍化的推动和实施方面,IBM走得最为深入和彻底。IBM不但成立了全球无障碍化中心,积极推出各种无障碍化教程的同时,也给出开发者建设了一套可以一一检查的Checklist。Checklist里包括了无障碍化分类、检查项目、为什么要做这项检查以及这项检查的正面和反面的例子。这个就非常利于开发者学习和实施了。
IBM无障碍化网站开发检查项(IBM Web accessibility checklist – Version 5.2 )
详情如下: http://www-03.ibm.com/able/guidelines/web/accessweb.html
这里给出一个简化的中文checklist,其核心内容还是源自IBM(文件已经提交到SVN,后续作为新项目上线前检查项来做review)
# |
检查项 |
代码举例 |
确认 |
1 |
图片等功能性的非文本内容有文字说明。主要是:a标签title和img标签alt,但如果已经有说明了的就不需要重复提醒。 |
<img src=”ryan.jpg” alt=”imweb” <a href=”digg.html”> <img |
|
2 |
视频、语音等非文本标签有文字描述(直播类有文字直播),使得读屏软件、布莱叶盲文等工具进行处理。 |
<video ….> <p>IMWeb is …</p> <audio ….> <p>IMWeb is the web team of |
|
3 |
产品和交互设计上,网页内的所有信息有严格的逻辑性和顺序性。 |
||
4 |
给需要用户填写的form表单加上label标签和for属性。 |
<td> <label for=”reqfield”>* <td><input name=”Name” |
|
5 |
表格:用th标签定义table的头,用caption标签描述表格的总体情况;复杂的表格用id和header属性来说明归属关系。 |
<tr> <th id=”class”>Class</th> <th id=”teacher”>Teacher</th> <th id=”boys”># of Boys</th> <th id=”girls”># of <tr> <th id=”1stgrade” rowspan=”2″>1st <th id=”MrHenry” headers=”1stgrade <td headers=”1stgrade MrHenry <td headers=”1stgrade MrHenry <tr> <th id=”MrsSmith” headers=”1stgrade <td headers=”1stgrade MrsSmith <td headers=”1stgrade MrsSmith |
|
6 |
对文本描述和分布使用语义化的标签,且页面无CSS亦可正常阅读。这个是不是很熟悉~ 就不细说了。 |
||
7 |
不只用颜色传达信息,采用其他表示,提示或可辨别的元素来辅助对颜色不敏感的用户。 |
||
8 |
声音:如果页面自动播放超过3s的音频,需要提供暂停和关闭功能。背景音频对读屏软件会造成很大的干扰(eg:可以设置esc快捷键或在头部明显说明)。 |
Qzone的自动播放背景音乐就给读屏用户造成过很大的困扰,后来通过Esc停止播放解决。 |
|
9 |
对比度:文字和背景色要有一定的区分度,使得弱视用户可以分辨, |
||
10 |
键盘:所有的功能都可以通过键盘操作,使得无法依赖视觉的用户可以通过键盘或者键盘模拟器进行操作。 |
||
11 |
脚本:让脚本对键盘是可用的。不允许出现onfocus=”this.blur()”; 对事件的处理上同时支持鼠标和键盘(mousedown==keydown;mouseup==keyup;click==keypress; mouseover==focus;mouseout==blur;) |
<div id=”widget_id” tabindex=”0″ |
|
12 |
调整时间特性:给特殊需要的用户足够的时间进行操作和阅读。对于要进行的倒计时开始前,用户可以取消、调整。 |
不好的: <html xmlns=”http://www.w3.org/1999/xhtml“> <head> <title>Old page. Go to new URL</title> <meta http-equiv=”refresh” content=”3; url=http://w3-03.ibm.com/NewURL” </head> 参考: <p>“This |
|
13 |
对闪动、滚动和自动更新的内容,允许用户暂停、停止或者隐藏。 |
<input type=”button” id=”startQuotes” name=”startQuotes” value=”Start |
|
14 |
在网页里不要出现一秒钟闪动2次以上的内容,这个对正常用户也是很不舒服的,何况是读屏软件。 |
||
15 |
导航:读屏工具可以通过标签属性进行导航或略过。比如:1、可以通过h2等标签进行页面内容预览,2、使用ul和ol或map处理链接;3、对重要内容可以添加WAI-ARIA属性role说明; |
<div role=”search”> <label |
|
16 |
主要内容:提供略过导航、直接到达主要内容的方法(提高读屏效率)。 |
<a href=”#main”><img 或 <div role=”main”>Main content |
|
17 |
Frames:为iframe设置title属性和说明文本,使得读屏用户可以轻松判断该文档是否需要进行阅读。 |
<iframe src=”quizSolution.html” Alternative text for browsers that do not understand </iframe> |
|
18 |
页面标题:提供页面标题,描述页面的主题和目的,使得读屏用户可以判断自己所在的位置和页面内容对自己是否有价值。 |
<title>Human Ability and Accessibility Center | |
|
19 |
焦点:网页里保持导航的有序性且符合逻辑。比如对表单、链接、重要说明设置合理的tabindex |
<INPUT tabindex=”1″ type=”text” <INPUT tabindex=”2″ type=”text” <INPUT tabindex=”3″ type=”submit” |
|
20 |
链接;超链接需要带有相应说明,使得读屏用户可以判断链接是跳转到哪里。 |
<h2>Items on sale this week</h2> <p> <a href=”golfclubs.html”>Golf <a href=”bikes.html”>Bicycles</a> |
|
21 |
标题和标签:使用描述性标题和标签。 |
<form> <label <input name=”name1″ <label <input name=”name2″ </form> |
|
22 |
页面使用的语言:给html元素设置默认页面使用的语言lang属性,使得读屏软件可以正确阅读。 |
<html lang=”en”> |
|
23 |
页面内包含其他语言:对标签使用lang对页面内特殊语言部分进行描述。 |
<html lang=”en”> <p lang=”de”> Guten Morgen </p> </html> |
|
24 |
焦点:当焦点在任何元素上的时候,不应该改变该元素的内容。否则读屏用户就不知道该元素的作用。 |
||
25 |
输入:当用户输入内容或选择选项的时候,不自动切换内容,除非已经给用户提示。 |
||
26 |
输入错误提示:对输入错误有明确的提醒,同时为了读屏用户更便捷操作可以给input标签增加 aria-required或aria-invalid属性 |
<label for=”phone”>* Phone <input type=”text” id=”phone” |
|
27 |
对需要用户输入的地方,给出标签或说明。 |
<label for=”birthdate”>Birth date |
|
28 |
兼容性:尽可能的兼容各种浏览器,使用标准的标签,比如html定义及标签闭合。这就不多说了。 |
- 键盘支持,要求所有能通过鼠标完成的操作用键盘都能达到同样的效果。
- 高对比度的支持:在高对比度模式下,屏幕只有黑白两色,要保证 Web 应用在这种模式下不丢失信息。
- 读屏软件的支持,通常由测试人员完成。测试人员模拟盲人使用读屏软件,要保证页面上的内容基本都能为读屏软件所识别,并且能完成各种操作。
如何检查无障碍化成果:
这里推荐一个测试工具webking,它对无障碍化的实施情况有系统的分析和表报。
1、下载并安装webking(webking下载地址:http://www.crsky.com/soft/8445.html)
2、打开webking主界面,通过File–>New–>Project(或者Ctrl+N)来创建一个新的测试项目。
3、添加要测试的URL地址,这里就以google为例吧。
4、添加完URL后,webking会以爬虫的方式进行整站的扫描。这里可以通过”Stop“来停止爬虫行为即可。
5、在Tools–>Coding Standards–>Check Web Accessibility(WCAG 2.0),来执行WCAG2.0的检查。
6、查看报告,很简单吧。按照说明做具体调整就好了。
各种的JavaScript库支持WAI-ARIA
图1.0是模拟无障碍的JavaScript架构,contarct部分正是WAI-ARIA定义的API标准,通过这些标准,把信息传输到各种辅助读取和显示的AT仪器上。
图2.0当JS动态发生交互时,默认设置的语义信息已过时;此时可以通过标蓝的API进行新的语义信息传递。
四、ARIA 用法
1. ARIA API构建
以下平台均定义了类似的API接口:
- Java Accessibility API [JAPI]
- Microsoft Active Accessibility [MSAA]
- Apple Accessibility for COCOA [AAC]
- Gnome Accessibility Toolkit (ATK) [ATK]
- UI Automation for Longhorn [UIAUTOMATION]
2. 应用ARIA语境:
1、 应用无语义的XHTML 标签情况;
2、 所应用 XHTML 标签当前状态改变情况;
3、 XHTML 标签需支持键盘索引;
4、 XHTML 标签状态改变时的CSS动态支持;
3. ARIA role 属性:
ARIA允许开发者为任何HTML元素添加一个简单的属性。ARIA的role根据上下文判断某个元素的作用和性质,也就是说,比如<div>标签并不一定是<div>
<div role=”progressbar” aria-valuenow=”5” aria-valuemin=”0” aria-valuemax=”10”>进度条</div>
以上代码表示:这是一个进度条。
4. ARIA在工作中应用
ARIA通过友好易接受方式传递给正在操作或更新的用户更完整的信息,而不是等用户所有步骤都操作完毕后,才被告知此行为并未如愿执行。
如何在网页中应用ARIA ?
Ex_01:
Ex_02:
注意:
目前只在支持可扩展的网页中使用用ARIA,如果网页没有DTD声明,需要加上xmlns(XHTML namespace)命名声明,如下:
xmlns=http://www.w3.org/1999/xhtml
参考:
- http://accessibility.psu.edu/
- 开发和测试访问无障碍的 Web 应用
- WCAG 2.0 Guidelines
- WebAIM's WCAG 2.0 Checklist
- Introduction to WAI ARIA
- WAI-ARIA 介紹之一
- 开发和测试访问无障碍的 Web 应用
- 无障碍网页应用 WAI-ARIA
无障碍网页设计(WCAG2.0)的更多相关文章
- 自适应网页设计(Responsive Web Design)
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 手机web——自适应网页设计(html/css控制)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程
PS网页设计教程--30个优秀的PS网页设计教程的中文翻译教程 作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作 ...
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- 网页设计、java、Andorid资源清单整理
多学多练做笔记很重要. 赤裸裸的干货非鸡汤 网页设计的主要技术: Html, Js, Css, Ps HTML/HTML5 网页的基础Html必须知道的.但 ...
- PS网页设计教程XXIV——从头设计一个漂亮的网站
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- 如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
- 译文 对无障碍网页应用(ARIA)的选择
//本文编辑格式为Markdown,译文同时发布在众成翻译 对无障碍网页应用(ARIA)的选择 让网站对每个人都能访问是一件相当艰难的工作,尤其是在我们使用自定义标记解决方案(custom marku ...
随机推荐
- PPAS Migration Toolkit document
-----------------Migration Toolkit-----------------Migration Toolkit is a command line utility that ...
- phpstorm-----------如何激活phpstorm2016
新版激活方法: 1.在线激活 菜单help >>>> Register 选择License Server 输入 http://idea.qinxi1992.cn/ 点击ok 2 ...
- AJax 跨域问题
从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在.这似乎是一个很经典的问题了.是由于javascript的同源策略(这里不作深入探讨)所导致. 解决的办法,大概有如下 ...
- 0525 Scrum 项目7.0
一.sprint总结 本次sprint总结,本次合作每个人都完成了属于自己的任务,我觉得这是十分不错的,但是做出来的项目不够美观,内容可以更丰富一点,多样化一点,虽然每个人做出来的网页都各有各的区别, ...
- C# 数字带逗号(千分位符、金钱千分位字符)
首先要明确带了逗号之后 数字就变成字符串了 ,不再是数字了. 昨天做项目的时候需要格式化数字变成带逗号的,本来打算自己写个方法的,后来时间太紧了,就打算从网上查个,查来查去都是要对字符串的位进行操作 ...
- z/OS上Dataset 的移动
最近的一个需求,需要把大批量的Dataset移到新的Storage Class,新的Volume中去,刚开始感觉非常头疼.仔细研究后发现这个事情其实很简单.确实符合别人所说,事情的在你真正开始努力之后 ...
- python核心编程学习记录之面向对象编程
未完待续525
- Ubuntu 16.04 标题栏实时显示上下行网速、CPU及内存使用率--indicator-sysmonitor
---------------------------------------------------------------------------- 原文地址:http://blog.csdn.N ...
- 将数组里的元素拼接成sql里的in条件
/** * 将数组里的元素拼接成sql里的in条件,如'a1','a2','a3' * @param array * @returns */function makeSqlInStr(array){ ...
- Spring整合Hibernate。。。。
环境搭建,在eclipse中导入spring和hibernate框架的插件,和导入所有使用到的架包 首先,hibernate的创建: 建立两个封装类,其中封装了数据库中表的属性,这儿只写属性,gett ...