基于 Web 2.0 开发无障碍访问 Web 应用的最佳实践（1）
|
- UID
- 1066743
|
基于 Web 2.0 开发无障碍访问 Web 应用的最佳实践（1）
目前有很多用于测试无障碍访问（AVT，Accessibility Verification Test）Web 应用的工具，较为常用的有 WebKing 和 JAWS。JAWS 是由 Freedom Scientific 发布的一款屏幕阅读器， 它通过阅读页面的文字帮助使用者快速了解页面功能，完成相关操作。WebKing 是由 Parasoft 发布的一款静态扫描工具，用户可以在该工具中指定需要扫描的 web 页面文件的目录实现批量扫描。Web 开发人员可以借助这两种工具验证所开发的 Web 页面是否可以实现无障碍访问。
页面头部必须包含的内容为了保证页面的无障碍访问，首先需要在页面的头部加上 DTD 的声明以及页面默认的语言。清单 1 列出了如何在 HTML 页面中加入 DTD 声明及默认语言属性，清单 2 列出了如何在 XHTML 页面中加入 DTD 声明及默认语言属性。
清单 1. HTML 页面中加入 DTD 声明及默认语言属性1
2
3
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
|
清单 2. XML 页面中加入 DTD 声明及默认语言属性1
2
3
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
此外，页面的 title 属性值也是必须的，如清单 3 所示。
清单 3. 设置 title 属性1
2
| <head>
<title><bean:message key="createFolder.title" /></title>
|
快速链接到主要内容为了使屏幕阅读器可以略过页面中的一些普通元素快速跳到页面的功能区域，开发人员需要在页面中添加一些链接。在下面的页面中，主要内容即为左侧的导航栏，用户可以通过点击导航栏中的链接打开相应的页面。清单 4 和清单 5 列出的代码可以帮助有视力障碍的用户快速定位到导航栏。
图 1. 示例页面 清单 4. HTML 代码片段1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="ibm-access"><a href="#ibm-content">Skip to main content</a></div>
...
<!-- CONTENT_BEGIN -->
<div id="ibm-content">
<!-- TITLE_BEGIN -->
<div id="ibm-content-head" class="ibm-content-subtitle">
<ul id="ibm-navigation-trail">
<li><a href="/able/index.html">
Human Ability and Accessibility Center</a></li>
<li><a href="/able/guidelines/index.html">Developer guidelines</a></li>
</ul>
<h1>Web checklist</h1><br />
</div>
.....
|
清单 5. CSS 代码片段1
2
3
| div.ibm-access {
position: absolute; margin-top: -9999px;
}
|
无障碍访问的表单控件在 Web 页面中经常会用到表单进行信息的录入与更新。大部分的表单控件可以自动与一个标签控件建立关联，使得屏幕阅读器可以将标签中的文字内容作为表单录入控件的说明信息，比如提交按钮。但是诸如文本框，下拉菜单，复选框以及单选按钮这样的控件则需要开发人员为其指定一个标签控件，同时设置标签控件的 for 属性值为与其建立关联的控件的 id 属性值。清单 6 与清单 7 分别列举了如何为文本框与下拉列表添加与其关联的标签控件。
清单 6. 为文本框的标签控件设置 for 属性1
| <label for="name1">Name</label><input name="name" id="name1" size="30" />
|
清单 7. 为下拉列表的标签控件设置 for 属性1
2
3
4
5
| <label for="shiptype">Select your shipping method</label><select id="shiptype"
name="ship_method" size="1"><option selected value="">
Ground – 7 business days</option><option value="air">
Air – 3 business days</option><option value="nextday">
Next day air – 1 business day</option></select>
|
然而并不是所有的表单控件都适合采用上述方式添加标签以保证其可读性，单选按钮通常是一组按钮具有同一个 id 属性值，所以我们无法通过上述方法为每一个按钮添加标签，我们可以利用 title 属性来保证其可读性。例如：
清单 8. 为复选框设置 title 属性1
| <input type="radio" id="ERP ID" title="Select All" value="defaultSectionValueAll" checked/>
|
提示：无需为隐藏控件添加与其关联的标签控件。
为了使得屏幕阅读器可以将必须输入的字段限制信息传达给用户，开发人员可以使用 WAI-ARIA 提供的属性，示例如下：
清单 9. 设置属性限制字段必须输入1
2
| <label for="phone">* Phone number:</label>
<input type="text" id="phone" name="phone" aria-required="true" >
|
但是目前 IE8 还不支持这种属性，由于屏幕阅读器可以读出用于录入信息的表单控件的 title 属性，所以我们可以将限制信息写在 title 中。如清单 10 所示：
清单 10. 利用 title 属性标识字段为必输项1
2
| <label for="phone">* Phone number:</label>
<input type="text" id="phone" name="phone" title="required" >
|
|
|
|
|
|
|
