按WCAG2.0标准使用空格键

Question

我想知道，根据WCAG2.0，在这种情况下，空格将用于页面内的交互。

它是否在与enter键相同的情况下使用？

我应该为enter键和空格提供相同的功能吗？

Answer 1

就WCAG2.0而言，它具体规定只在3种情况下使用空格键：

https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/

1. 检查带有键盘焦点的单选按钮(这是使用选项卡时的特例，没有将单选按钮标记为ex)。
2. 建议使用空格键来选择拖放支架(https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#dragdrop)。
3. 复选框-空格键切换复选框，如果列表项是可选中的(https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#listbox)

WCAG只提到了一条准则：

“TAB键将键盘焦点移到小部件上，其他键操作小部件的功能，通常是光标键，输入键和空格键。实际键由开发人员决定，但最佳实践建议使用相同的键绑定，用于控制常见GUI操作系统(如Microsoft Windows、Apple OSX以及GNOME和GTK等UNIX桌面系统中的类似小部件)。”

坦率地说，这取决于用户的解释，并且根据您试图实现的内容，您可能不得不在流行的工具/网站/浏览器行为上看到类似组件的现有行为，并做出合理的决定。

Answer 2

不要更改控件的本机行为。这会给用户带来麻烦。

可以通过按enter键触发超链接。但是一个真正的按钮可以通过按回车键或空格键来触发。当超链接有焦点，用户按下空格键时，页面将滚动一个屏幕。如果没有更多的滚动，那么用户只是没有任何体验。

我认为还值得一提的是，空格键触发的事件只有在键释放时才会触发，而使用Enter键会在您按下键后(在释放之前)立即触发事件。

我从另一个示例中获得了一个CodePen，它显示了以下内容：http://s.codepen.io/aardrian/debug/PZQJyd

如果您正在制作类似于<div>的可点击并试图添加键盘交互的内容，则不要使用<div>。为此目的使用正确的元素，我简要地概述如下：

• 控件会带我到另一页吗？使用锚(<a href>)。
• 控件是否更改了当前页面上的某些内容？使用<button>。
• 控件是否提交表单字段？使用<input type=submit>或<button type=submit>。