让 Web 页面更易于访问
发布日期： 12/17/2004 | 更新日期： 12/17/2004
Daniel Odievich
Microsoft Corporation
摘要：本文提供了使 Web 页面更易于访问的实用提示，包括适应那些不能使用或难以使用鼠标的用户。
本页内容
简介
鼠标出什么问题了？
定义
使用本地 HTML 3.2 元素
使用 LABEL 对象
使用 TITLE 属性
使用 DHTML 元素和事件
示例应用程序：计算器
简介
在当今的 Web 世界里，为大量增长的每天联机的用户提供清晰而又易于访问的 Web 应用程序是必要的。通过使用本文中描述的技术，您花费最小的精力就能使 Web 页面更易于残疾人访问。
我们中的大多数人还记得当图形化用户界面 (GUI) 操作系统还只是个奢望的时期。当时的世界只能使用基于文本的界面。任何您想要用计算机程序来完成的事都可以用键盘来实现，而鼠标是一个两公斤的笨重设备 — 与其说有任何实际用途，倒不如说只是一个新鲜事物。
当然，从那以后情况发生了变化。几乎每个程序都可以让您单击超级链接来连接到 Web 站点。DHTML 允许 GUI 应用程序有空前的灵活性和丰富功能。现在什么在网络上看起来都不错！
返回页首
鼠标出什么问题了？
我是一个顽固的“键盘偏好者”。如果 Microsoft® Windows® 中有一个键盘快捷键，我肯定会知道。我唯一使用鼠标的时候是玩 Half-Life 这款游戏，或者浏览对键盘不友好的 Web 站点时。我是故意选择不用鼠标的，但是对于其他上百万的人来说 — 包括我那有腕管综合症的妈妈 — 使用鼠标不是痛苦就是不可能。如果您想让这些人使用您的站点，那么让 Web 页面支持键盘是必要的。在本文中，我将解释您如何能够通过使用 Internet Explorer 和 DHTML 轻松实现这一点。
返回页首
定义
本文中将会使用下列术语：
焦点 —Web 页上的光标位置，由光标或一个浅灰色的字幕指示。
tabIndex、tabOrder—按下 TAB 键时，焦点在Web 页上元素之间移动的顺序。如果页面上的两个元素有相同的 tabIndex，那么在 HTML 源代码中最先出现的那个元素将成为焦点的第一个接收者。
访问键—与 ALT 键一起按下的按钮。当 ALT+<访问键> 组合被接收时，焦点就会移动到使用该访问键的 Web 页的元素。
返回页首
使用本地 HTML 3.2 元素
如果您的站点使用下表中列出的标准 HTML 元素，您将会节省时间和工作。这些元素是“易于访问的”，这是因为用户可以通过使用 TAB 键访问它们，而无需对您的 Web 页做任何修改。
表 1. 支持可访问性的本地 HTML 3.2 元素
名称 说明
A
IMG
定位点标记一直作为一个 TAB 停靠位。有时将<A> 标记用作按钮的替代品是有用的。要在定位点被单击时停止自动浏览器导航，请将 windows.event 对象的 returnValue 属性设置为 False。
请参见示例 1：定位点导航取消
AREA
这个标记让您能够定义在一个复杂图像映射上接收焦点的区域。
BUTTON
INPUT
SELECT
TEXTAREA
作为 TAB 停靠位的默认窗体 UI 元素。
FRAME
FRAMESET
IFRAME
框架也可以作为 TAB 停靠位。一旦焦点已经进入了框架，在退出到下一个框架前，后续的标志 (tabbing) 将枚举内容。
可以通过向 HTML 标记添加 tabIndex 和 accessKey 属性使其他标准 HTML 元素易于访问。
表 2. 可以变得易于访问的 HTML 元素
名称 说明
APPLET
EMBED
OBJECT
这些标记在 Web 页面上启用了活动内容（Microsoft ActiveX® 控件、Java 小程序）。您可以通过将tabIndex 属性分配给这些标记来启用键盘导航。但是，当某个 ActiveX 控件或 Java 小程序公开其自己的启用了 accessKey 的 UI 时，tabIndex 顺序将被更改；焦点将进入该 ActiveX 控件，并遵循由该控件的开发人员定义的顺序。
BODY
您可以给您的整个文档一个有效的 tabIndex 和 accessKey 属性。
MARQUEE
<MARQUEE>对象也可以作为一个索引的接收者，使其成为一个规则窗体INPUT 按钮的有吸引力的多媒体选择。
TABLE
TD
TH
将 accessKey 和 tabIndex 属性应用到这些标记，能够使用户通过一个像 Excel 电子表格一样的表来导航！
请参见示例 2：表单元格导航
返回页首
使用 LABEL 对象
HTML 4.0 规范引入了 LABEL 对象，您可以使用它来将文本与其他任何 HTML 对象或内部控件相关联。无论用户单击 LABEL 或者 HTML 对象，链接的 LABEL 和 HTML 对象在引发和接收事件时行为一致。要链接 LABEL 和 HTML 对象，请将 LABEL 的 FOR 属性设置为等于 HTML 对象的 ID 属性。
下列示例将 LABEL 控件与文本框相关联。当用户单击 LABEL 控件（或者按下 ALT+T 组合键）时，LABEL 控件会将焦点设置到文本框：
<LABEL FOR="txtInputBox"><U>T</U>ype value:</LABEL>
<INPUT TYPE="text" ID="txtInputBox" NAME="txtInputBox" ACCESSKEY="t">
返回页首
使用 TITLE 属性
“工具提示”有助于使 UI 对具有良好视力并能够轻松使用鼠标的人更有吸引力 — 对盲人来说也是如此。TITLE 属性标记使得教授一个复杂的用户界面变得非常简单，不会用可视文本弄乱页面。它可以由屏幕阅读软件用来提供相同的“工具提示”信息，这些信息会当鼠标悬停在任何 DHTML 对象上时出现。这为盲人启用了 Web 页导航：
<LABEL FOR="txtInputBox" TITLE="Click ALT-T to set focus to very important
text box on the right"><U>T</U>ype value:</LABEL>
<INPUT TYPE="text" ID="txtInputBox" NAME="txtInputBox" ACCESSKEY="t"
TITLE="Type some very important value in this textbox">
返回页首
使用 DHTML 元素和事件
当然，在当今的 Web 世界，仅使用基本的 HTML 3.2 元素构建一个好看的应用程序是困难的。DHTML 用在世界上的每个交互式 Web 站点中。几乎都可以通过使用 tabIndex 和 accessKey 属性为可访问性启用每个 DHTML 元素。额外的功能可以通过使用 DHTML 键盘事件（例如，onkeypress、onkeyup 和 onkeydown）获得。这些事件之间的区别可以在以下表中看到。表 3 展示了如何将 onkeypress、onkeyup 和 onkeydown 事件一起使用，以便用最小量的代码处理大部分用户输入。
表 3. DHTML 键盘事件
名称 说明
onkeypress
这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
onkeyup
这个事件在用户放开任何先前按下的键盘键时发生。
onkeydown
这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
返回页首
示例应用程序：计算器
作为阐释刚刚描述的 DHTML 键盘事件用法的一个示例，我编写了一个 Web 计算器示例应用程序。通过混合使用 accessKey 和 tabIndex 属性，onkeyup、onkeypress 和 onkeydown 事件，以及 LABEL 对象，这个程序通过键盘是完全可访问的。请参见示例 3：计算器
