根据 WCAG 2.0 使用空格键

Spacebar usage according to WCAG 2.0

我想知道,根据 WCAG 2.0,空格键在哪些情况下用于在页面内进行交互。

和回车键的用法一样吗?

我应该为回车键和空格键提供相同的功能吗?

就 WCAG 2.0 而言,它明确表示仅在 3 种情况下使用 space 栏:

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

  1. 检查具有键盘焦点的单选按钮(这是使用选项卡且没有单选按钮被标记为选中时的特殊情况 (https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#kbd_general_ex)。
  2. 建议使用 space 栏选择拖放支持(https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#dragdrop)
  3. 复选框 - Space 栏切换复选框,如果列表项是可检查的 (https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#listbox)

WCAG 只提到了一个指南:

"The TAB key moves keyboard focus to the widget, and other keys operate the features of the widget, typically cursor keys, Enter key and Spacebar. The actual keys are up to the developer, but best practices recommend using the same key bindings that are used to control similar widgets in common GUI operating systems like Microsoft Windows®, Apple OSX® and UNIX Desktops like GNOME and GTK."

坦率地说,它留给了用户的解释,并且根据您要实现的内容,您可能必须查看流行的 tools/web 站点/浏览器行为上类似组件的现有行为,并做出合乎逻辑的决定。

不要更改控件的本机行为。这可能会扰乱用户。

可以通过按回车键来触发超链接。但是可以通过按回车键或 space 栏来触发真正的按钮。当超链接获得焦点并且用户按下 space 栏时,页面将滚动一屏。如果没有更多内容可以滚动,那么用户什么也不会体验到。

我认为还值得一提的是,由 space 条触发的事件仅在释放按键时触发,而使用 Enter 键会在您按下按键时立即触发事件(在释放它)。

我有一个来自另一个示例的 CodePen,它显示了这一点:http://s.codepen.io/aardrian/debug/PZQJyd

如果您正在制作类似 <div> 的可点击内容并尝试添加键盘交互,则不要使用 <div>。为此目的使用正确的元素,我将其简要概述为:

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