正在加载...

前言:


无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务。无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀、有担当的互联网企业的责任,也是一个互联网从业人员应该关注到的一个方面。在此我分享下我个人对无障碍化网站开发的理解。

061813_1458_1.png

无障碍化受益人群:

普通人 普通网站用户;文化背景和习惯与主流用户不同的用户;老年人或儿童等用户;无障碍化可使得用户更轻松地使用网站服务,降低使用、学习和理解的成本。
视力障碍用户 主要包括盲人、低视力、色盲、色弱等用户。针对这部分用户所做的信息无障碍化是最通用和最具有代表性的,尤其是盲人用户。因为这部分用户是必须依赖于辅助技术进行站点的信息阅读和交互。这也就要求被访问页面必须具备易读取,可交互,高效率等无障碍化要求。
听力、智力、精神、肢体障碍用户 可以通过视觉访问的用户,在依赖于系统的一些放大镜等工具进行正常访问(也需要一些色差等方面的网页支持);肢体障碍用户在交互方面和视力障碍用户面临的问题是类似的,都是需要通过辅助技术和网页进行交互支持。
061813_1458_2.png

 

辅助技术简介:

放大镜 这里包括硬件上的放大镜,安置在显示器上的;也包括一些软件上放大镜,比如操作系统的放大镜工具或者第三方软件的放大镜工具。目的是文字放大,便于用户识别和阅读。这里对网页依赖较小。
盲文点字显示器 通过将文字通过凸凹的方式转化成特殊的编码,以供盲人用户使用。但这个主要是用于阅读,交互的操作还是要使用键盘类。
读屏软件 将页面信息转换成语音播放给用户。代表性的产品包括:NVDA,争渡,永德,VoiceOver等。从互联网使用的角度来看,读屏软件的使用是最为广泛的,相对盲文电子显示器可以更快捷的获取信息。大家可以安装下NVDA体验下读屏软件。NVDA下载地址:
http://sourceforge.net/projects/nvda/files/releases/2013.1/nvda_2013.1.exe/download

从上面的辅助技术的介绍,我们不难发现无障碍化的阅读和交互很大层面上依赖于键盘和网页的交互。那么我们无障碍化网页建设很大一部分工作就是用于支持键盘操作和交互。

 061813_1458_3.png

无障碍化标准:

19972月,W3C组织成立网络无障碍推动小组(WAI),制定无障碍化规范和推动无障碍化实施。

19995月,W3C推出WCAG1.0无障碍化指导。

20007月,在日本冲绳举行的G8会议发表《实现全球信息化社会的冲绳宪章》

20083月,中国信息产业部电信研究院、中国互联网协会等单位发布《YD/T 1761-2008》标准,规定了无障碍上网的网页设计技术要求。

200812月,W3C发布了WCAG2.0最终版本。

综合来看WCAG2.0是信息无障碍化最主要的标准,英文地址:http://www.w3.org/TR/WCAG/
,中文翻译地址:http://andtoo.net/wcag20zh.htm

061813_1458_4.png

 

开发者需要做什么:

刚开始接触无障碍化的时候,面对一堆的文档和标准说明,开发者很容易觉得无从下手。直到有一次参加了公司的无障碍化体验后,一切就都豁然开朗了。当你要为用户做一些事情的时候,最好的办法就是把自己当作用户。

1、安装并打开NVDA,然后启动浏览器并输入你的站点URL

2、闭上眼睛,开始通过键盘和读屏软件来使用你的站点,你会发现一些致命的问题。

3、解决你所不能接受的问题。

4、对照无障碍化检查项review你的站点设计。

5、使用工具检查你的站点的无障碍化实施情况和报告,并做新的调整。

无障碍化网站开发检查项:

互联网行业中在无障碍化的推动和实施方面,IBM走得最为深入和彻底。IBM不但成立了全球无障碍化中心,积极推出各种无障碍化教程的同时,也给出开发者建设了一套可以一一检查的ChecklistChecklist里包括了无障碍化分类、检查项目、为什么要做这项检查以及这项检查的正面和反面的例子。这个就非常利于开发者学习和实施了。

             IBM无障碍化网站开发检查项(IBM Web accessibility checklist – Version 5.2 )
          详情如下: http://www-03.ibm.com/able/guidelines/web/accessweb.htmlhttp://www-03.ibm.com/able/guidelines/web/accessweb.html

推荐所有想深入了解无障碍化网站建设的同学,深入细读这个checklist,一定会受益匪浅。当然也考虑到团队同学们的快速接收和我们无障碍化的快速实施和落地,这里给出一个简化的中文checklist,其核心内容还是源自IBM(文件已经提交到SVN,后续作为新项目上线前检查项来做review)。

#

检查项

代码举例

确认

1

图片等功能性的非文本内容有文字说明。主要是:a标签titleimg标签alt,但如果已经有说明了的就不需要重复提醒。

<img src=”ryan.jpg” alt=”imweb”
width=”150″ height=”175″ />

 

<a href=”digg.html”> <img
src=”digg.gif” alt=”” /> Digg This </a>

 

2

视频、语音等非文本标签有文字描述(直播类有文字直播),使得读屏软件、布莱叶盲文等工具进行处理。

<video ….> <p>IMWeb is …</p>
</video>

<audio ….> <p>IMWeb is the web team of
Tencent…</p> </audio>

 

3

产品和交互设计上,网页内的所有信息有严格的逻辑性和顺序性。

061813_1458_5.png

 

4

给需要用户填写的form表单加上label标签和for属性。

<td> <label for=”reqfield”>*
Name:</label></td><br />

<td><input name=”Name”
id=”reqfield” type=”text” /></td><br />

 

5

表格:用th标签定义table的头,用caption标签描述表格的总体情况;复杂的表格用idheader属性来说明归属关系。

<tr>

<th id=”class”>Class</th>

<th id=”teacher”>Teacher</th>

<th id=”boys”># of Boys</th>

<th id=”girls”># of
Girls</th></tr>

<tr>

<th id=”1stgrade” rowspan=”2″>1st
Grade</th>

<th id=”MrHenry” headers=”1stgrade
teacher”>Mr. Henry</th>

<td headers=”1stgrade MrHenry
boys”>5</td>

<td headers=”1stgrade MrHenry
girls”>4</td></tr>

<tr>

<th id=”MrsSmith” headers=”1stgrade
teacher”>Mrs. Smith</th>

<td headers=”1stgrade MrsSmith
boys”>7</td>

<td headers=”1stgrade MrsSmith
girls”>9</td></tr>

 

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″
onClick=”return confirm(‘Clicking OK will take you to the next
paragraph’);” onKeyPress=”return confirm(‘Clicking OK will take you
to the next paragraph’);”></div>

 

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
page has been moved to a new location: <a href=
url=http://w3.03.ibm.com/NewURL>New URL</a></p>

 

13

 

对闪动、滚动和自动更新的内容,允许用户暂停、停止或者隐藏。

061813_1458_6.png

<input type=”button”

id=”startQuotes” name=”startQuotes” value=”Start
stock ticker” onclick=”showQuotes();”> <input
type=”checkbox” id=”tickerOff” name=”tickerOff”
onclick=”toggleTicker(this)”> <label for=”startQuotes”>Pause
ticker</label> <fieldset id=”quote”
aria-live=”polite”><legend>Stock Quotes</legend></fieldset>

 

14

在网页里不要出现一秒钟闪动2次以上的内容,这个对正常用户也是很不舒服的,何况是读屏软件。

 

 

15

 

导航:读屏工具可以通过标签属性进行导航或略过。比如:1、可以通过h2等标签进行页面内容预览,2、使用ulolmap处理链接;3、对重要内容可以添加WAI-ARIA属性role说明;

 

<div role=”search”> <label
for=”search”>Search</label><input type=”text”
id=”search” name=”search” /> </div>

 

16

 

主要内容:提供略过导航、直接到达主要内容的方法(提高读屏效率)。

<a href=”#main”><img
src=”c.gif”alt=”Skip to main content”></a><br
/> …<br /> <a name=”main”
id=”main”></a><br /> <h1>Human Ability and
Accessibility Center</h1>

<div role=”main”>Main content
heading</div>

 

17

 

Frames:iframe设置title属性和说明文本,使得读屏用户可以轻松判断该文档是否需要进行阅读。

<iframe src=”quizSolution.html”
height=”100px” title=”quiz solution”>

Alternative text for browsers that do not understand
iframes.

</iframe>

 

18

 

页面标题:提供页面标题,描述页面的主题和目的,使得读屏用户可以判断自己所在的位置和页面内容对自己是否有价值。

<title>Human Ability and Accessibility Center |
Developers testers</title>

 

19

 

焦点:网页里保持导航的有序性且符合逻辑。比如对表单、链接、重要说明设置合理的tabindex

<INPUT tabindex=”1″ type=”text”
name=”field1″>

<INPUT tabindex=”2″ type=”text”
name=”field2″>

<INPUT tabindex=”3″ type=”submit”
name=”submit”>

 

20

 

链接;超链接需要带有相应说明,使得读屏用户可以判断链接是跳转到哪里。

<h2>Items on sale this week</h2>

<p> <a href=”golfclubs.html”>Golf
clubs</a>

<a href=”bikes.html”>Bicycles</a>
</p>

 

21

 

标题和标签:使用描述性标题和标签。

<form>

     <label
for=”name1″>First name</label>

     <input name=”name1″
id=”name1″ size=”30″ />

     <label
for=”name2″>Last name</label>

     <input name=”name2″
id=”name2″ size=”30″ />

</form>

 

22

页面使用的语言:给html元素设置默认页面使用的语言lang属性,使得读屏软件可以正确阅读。

<html lang=”en”>

 

23

页面内包含其他语言:对标签使用lang对页面内特殊语言部分进行描述。

<html lang=”en”>

<p lang=”de”>

Guten Morgen

</p>

</html>

 

24

焦点:当焦点在任何元素上的时候,不应该改变该元素的内容。否则读屏用户就不知道该元素的作用。

 

 

25

 

输入:当用户输入内容或选择选项的时候,不自动切换内容,除非已经给用户提示。

 

 

26

 

输入错误提示:对输入错误有明确的提醒,同时为了读屏用户更便捷操作可以给input标签增加 aria-requiredaria-invalid属性

 

<label for=”phone”>* Phone
number:</label>

<input type=”text” id=”phone”
name=”phone” aria-required=”true” >

 

27

 

对需要用户输入的地方,给出标签或说明。

<label for=”birthdate”>Birth date
(dd-mm-yyyy):</label><input type=”text”
name=”birthdate” id=”birthdate”>

 

28

兼容性:尽可能的兼容各种浏览器,使用标准的标签,比如html定义及标签闭合。这就不多说了。

 

 

如何检查无障碍化成果:

当我们已经做了一些无障碍化的工作,怎么去做验收和报告呢?
这里推荐一个测试工具webking,它对无障碍化的实施情况有系统的分析和表报。

1、下载并安装webkingwebking下载地址:http://www.crsky.com/soft/8445.html

2、打开webking主界面,通过File–>New–>Project(或者Ctrl+N)来创建一个新的测试项目。

061813_1458_7.png

3、添加要测试的URL地址,这里就以google为例吧。

061813_1458_8.png

4、添加完URL后,webking会以爬虫的方式进行整站的扫描。这里可以通过”Stop“来停止爬虫行为即可。

5、在Tools–>Coding Standards–>Check Web Accessibility(WCAG 2.0),来执行WCAG2.0的检查。

061813_1458_9.png

6、查看报告,很简单吧。按照说明做具体调整就好了。

061813_1458_10.png

OK,无障碍化网站开发建议书就写到这里,很多实例还没有和大家分享,也会有诸多纰漏,欢迎大家积极讨论和交流,让无障碍化成为我们互联网从业人员都关注的地带,也照亮更多人的生活。


: http://www.webryan.net/2013/06/web-development-based-on-accessibility/

本文相关评论 - 1条评论都没有呢

No comments yet.