进步博客

键盘可访问性

Jace

一些思考

键盘辅助功能是残疾访问的一个重要方面。盲人通常不能使用鼠标，因为他们看不到点击的地方。他们几乎完全依靠键盘。（一些有有限残余视力的法定盲，在页面被放大和高对比度下可以使用鼠标。）（注：法定盲(legal blind)法律上对视觉障碍的界定。目的是为教育、福利或其他方面的工作提供统计标准和确定的依据。在美国为优眼最佳矫正视力在20/200以下，或中心视野直径在20°以下者。在中国则为优眼最佳矫正视力在0.5以下或视野半径小于10°者。大部分仍有一些残余视力，完全看不见的只占少部分。）

一些有神经肌肉障碍的用户也不能使用鼠标。震颤麻痹的用户不能很好的控制肌肉，还有一些很少或者从没使用过他们的双手，由于脊髓损伤、脑损伤或者其他一些原因。有些人根本就没有手，无论是由于出生缺陷、事故或截肢。总之，有很多种情况导致使用鼠标困难或者根本无法使用鼠标。

无法使用鼠标的人可能也不能使用键盘。一些人使用”puff and sip”（吹吸）设备，这种设备通过口腔气流来控制鼠标。（译者注：puff and sip设备是一种为有行动障碍的人提供辅助的计算机技术，是一种替代鼠标的头戴式设备，用户可以在不使用手的情况的下通过向管子内吹气来控制鼠标的指针移动。）

有些人使用单一开关设备（single-switch devices）——只有一个可以按的按钮。这些设备有时可以配置成解释莫尔斯电码（Morse code），用户在设备上轻敲即可操作。所有这些设备的一个共同点是它们与计算机交互的方式是模拟键盘的功能。如果一个网站的键盘易用性不好的话，会将很多用户拒之门外。

潜在问题

JavaScript DHTML菜单。尽管其外观华丽，但dynamic HTML (DHTML) 的键盘易用性很差。DHTML的一个流行应用是创建鼠标滑过时展现下拉菜单（参考http://www.microsoft.com/windows/）。

这种菜单使界面保持简洁整齐，而且用户使用较少的点击就可快速找到所需的内容。不利的一面是，如果不使用鼠标的话菜单将无法使用。当前技术下DHTML菜单无法直接（通过键盘）访问，但也有变通的办法。

微软提供了一个有效的变通策略。微软的DHTML菜单仅在Windows下的IE中使用。据推测微软这样做是为了使IE看起来比竞争对手更好。程序员知道，不是每个人都访问他们的网站都使用IE浏览器，可能会使用Firefox, Opera, Lynx等。程序员意识到他们需要提供一个冗余的菜单系统为非微软的浏览器来访问。他们的解决方案是在含有与DHTML菜单相同的菜单项的目标页面中设置纯文本链接。只要链接和功能，无需额外的困难产生同样的结果，这是从一个辅助的角度接受的办法。有些人会使用DHTML菜单，有些人会用多余的文字链接。

WYSIWYG绝对定位。一些所见即所得的编辑器，如Dreamweaver和GoLive，使Web设计人员可以轻松地创建绝对定位的div或span元素，这些元素可以使用鼠标拖动和重新定位。重新定位的过程，改变了视觉布局，但不会改变元素在代码中的顺序。其结果可能是结构上的阅读顺序、tab顺序与视觉上的阅读顺序不一致。当用户使用键盘来浏览网页上的链接时（在大多数浏览器，这是Tab键），tab顺序通常是无组织的并与视觉序不一致。

增强键盘易用性

规范tab顺序。在大多数情况下，Web开发人员不必担心指定网页上元素的tab顺序。精心设计的网页和/或表格通常有一个内在的逻辑Tab键顺序。为页面中的表单控件或链接指定tab顺序是大有裨益的。要指定一个元素的tab顺序，添加一个tabindex属性即可。例如，TabIndex =“1”，TabIndex =“2”等。

提供键盘快捷键。

使用accesskey提供键盘快捷键

accesskey属性

从HTML4.0开始，accesskey属性可添加到以下HTML元素：

好主意实施不佳

规范对于如何更好地实施键盘快捷键说的相当模糊。浏览器开发者、辅助技术开发者和Web内容开发者为了各自目的各自规划一套方案。虽然用心良苦，但在过去的web开发实践中结果不尽人意。

浏览器实施

不同品牌和操作系统的浏览器在实施accesskey上差别很大。不过，accesskey快捷键背后的基本思想是一致，即使实施不尽相同。用户可能熟知他们喜爱的浏览器处理accesskey快捷键的方式，但如果他们改用其他浏览器的话，可能要学习新的方法。

按键组合：不同的浏览器使用不同的按键来激活accesskey快捷键。

accesskey值重复：大多数浏览器不支持重复的快捷键值，即一个页面中两个accesskey的值不能相同，多数浏览器会忽略其中一个，有的浏览器会忽略第一个，有的会忽略第二个。只有windows下的IE支持重复accesskey值，这是因为IE处理accesskey的方法与其他浏览器不同。

超链接（<a>元素）：accesskey的功能在不同浏览器下不同，即标准浏览器下，触发超链接的快捷键即可到达链接的目标地址，但在IE下，只是将浏览器的焦点移至链接，只有在按下enter键后才打开链接。这种两步处理方式稍微削弱了accesskey的实用性。

图像映射热点（<AREA>元素）：与<a>元素相同，只有IE只将焦点移至链接

表单元素：

屏幕阅读器实施

由于屏幕阅读器依赖于浏览器的功能，所以读屏软件对于ACCESSKEY的支持很大程度上取决于所使用的浏览器。大多数的屏幕阅读器与IE一起工作，所以其行为与IE一致。
NVDA：设置了accesskey的链接会被NVDA读为：链接 ALT 1 首页

<a href="/" accesskey="1">首页</a>

浏览器冲突

ACCESSKEY的一个问题是用户代理（浏览器）的键盘快捷键与WEB内容快捷键之间的冲突，比如在WINDOWS下ALT+F会激活文件（FILE）菜单。如果WEB开发者使用相同的组合键来访问WEB页面区块，将会出现什么状况呢？如何管理这种冲突同样取决于浏览器。

WINDOWS下的IE、FIREFOX以及大多数其他基于WINDOWS的浏览器，WEB页面的ACCESSKEY的优先级高于用户代理的键盘快捷键，但OPERA除外。这有可能引起用户的困惑和沮丧。如果用户想访问文件菜单，但由于页面中使用了值为F的ACCESSKEY，会导致失败。事实证明，还是有办法访问IE文件菜单的，即使accesskey使用了F键。解决的办法是按下Alt键，松开，然后再按F键，但是没有几个用户知道可以这样做。

Web开发人员不能想当然地认为用户知道如何使用accesskey快捷键或知道Internet Explorer菜单的键盘快捷键激活方式之间的细微差别。再比如，accessky “Alt+D”会完全覆盖IE下组合键“Alt+D”的功能，以致于无法将焦点移至地址栏。

如何让用户知道我们提供了快捷键？

理想的方式由用户代理为用户识别快捷键。

方式一：用下划线标注用于激活accesskey的字母, 如 NEXT PAGE。
优点：易于实现，部分用户理解这种表达方式。
缺点：并非所有用户都理解这种方式，并非所有用户都知道激活快捷键的按键组合。（Alt键，Ctrl键，shift键？）

方式二：将accesskey放在括号内，如NEXT PAGE（accesskey: N）。
优点：易于实现，所有用户都能够读取文本。
缺点：改变了web内容的布局和外观，并非所有用户都理解这种方式，并非所有用户都知道激活快捷键的按键组合（Alt键，Ctrl键，shift键？）。

方式三：将确切的按键组合放在括号内，取决于用户的浏览器，如: Next Page (Alt + N)。
优点：告诉了用户按键组合 。
缺点：需要浏览器检测脚本，JavaScript或服务器端脚本 ，改变了web内容的布局和外观。

方式四：创建一个单独页面列出快捷键，并与设置快捷键的所有页面链接。例如，链接可以命名为“键盘快捷键列表”，把用户带到一个网页，一一列举。
优点：将所有快捷键放在一起，便于参考 。缺点：用户需跳转到另外一个页面 ，每个页面上增加了一个额外链接，用户可能仍不知道该使用哪个按键组合，过于详细则使文档变得冗长，令用户感到不安。

方式五：使用更复杂的CSS和/或浏览器检测方法，当元素获得焦点或鼠标悬停在他们上面时，展示快捷键。
优点：不干扰视觉布局，如果同时使用CSS和浏览器检测，用户可以获得确切的按键组合 。
缺点：需要浏览器检测。

标准化accesskey 快捷键尝试

英国和加拿大政府制定了一个标准的accesskey快捷键集，后来由于实施问题，加拿大政府放弃支持该标准。几乎所有的英国政府网站都实施了这些快捷键，澳大利亚和欧洲联盟的一些网站实施了相同的快捷方式 。英国的这个快捷键列表是被最广泛采用的标准化accesskey快捷键。

键盘快捷键设置案例

facebook

0 – 帮助中心
1 – 主页
2 – 个人档案
3 – 朋友
4 – 收件匣
5 – 通知
6 – 账户设定
7 – 私隐
8 – 关于
9 – 条款

twitter (? 显示键盘快捷键帮助)

orkut

参考：keyboard accessibility(有删节)