首页 > 代码库 > 无障碍网页设计（WCAG2.0）

无障碍网页设计（WCAG2.0）

2024-07-31 23:00:35   225人阅读

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

无障碍化受益人群：

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

一、无障碍化标准：

  • 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=http://www.mamicode.com/”ryan.jpg” alt=”imweb”
width=”150″ height=”175″ />

 

<a href=http://www.mamicode.com/”digg.html”>
src=http://www.mamicode.com/”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

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

 

 

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标签描述表格的总体情况；复杂的表格用id和header属性来说明归属关系。

<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=http://www.mamicode.com/”url=http://w3.03.ibm.com/NewURL”>New URL

 

13

 

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

 

<input type=”button”

id=”startQuotes” name=”startQuotes” value=http://www.mamicode.com/”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、使用ul和ol或map处理链接；3、对重要内容可以添加WAI-ARIA属性role说明；

 

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

 

16

 

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

<a href=http://www.mamicode.com/”#main”>
src=http://www.mamicode.com/”c.gif”alt=”Skip to main content”>
/> …<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=http://www.mamicode.com/”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=http://www.mamicode.com/”golfclubs.html”>Golf
clubs</a>

<a href=http://www.mamicode.com/”bikes.html”>Bicycles
</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-required或aria-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定义及标签闭合。这就不多说了。

 

 

 

  • 键盘支持，要求所有能通过鼠标完成的操作用键盘都能达到同样的效果。
  • 高对比度的支持：在高对比度模式下，屏幕只有黑白两色，要保证 Web 应用在这种模式下不丢失信息。
  • 读屏软件的支持，通常由测试人员完成。测试人员模拟盲人使用读屏软件，要保证页面上的内容基本都能为读屏软件所识别，并且能完成各种操作。

如何检查无障碍化成果：

这里推荐一个测试工具webking，它对无障碍化的实施情况有系统的分析和表报。

1、下载并安装webking（webking下载地址：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

各种的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

参考： 

  • 开发和测试访问无障碍的 Web 应用
  • WCAG 2.0 Guidelines
  • WebAIM‘s WCAG 2.0 Checklist
  • Introduction to WAI ARIA
  • WAI-ARIA 介紹之一
  • 开发和测试访问无障碍的 Web 应用

  • 无障碍化网站开发建议书

  • 无障碍网页应用 WAI-ARIA

 

 

无障碍网页设计（WCAG2.0）


联系
我们