浪漫瓜地

让 Web 页面更易于访问

Daniel Odievich
Microsoft Corporation

摘要：本文提供了使 Web 页面更易于访问实用提示，包括适应那些不能使用或难以使用鼠标的用户。
*
本页内容
简介 简介
鼠标出什么问题了？ 鼠标出什么问题了？
定义 定义
使用本机 HTML 3.2 元素 使用本机 HTML 3.2 元素
使用 LABEL 对象 使用 LABEL 对象
使用 TITLE 属性 使用 TITLE 属性
使用 DHTML 元素和事件 使用 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 元素
名称 说明

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 对象，这个程序是可以通过键盘完全可访问的。