E1.16.1Enter versus Space activation设计研究

链接以回车激活,按钮同时响应回车与空格

别名: 空格激活按钮 · 回车激活链接 · keyboard activation

概念解释

键盘上,链接在焦点下用回车激活,空格的默认是滚页。按钮在焦点下回车和空格都能激活,空格还按「按下时凹陷、抬起时触发」的时序走,允许在按下后滑出去取消。这套按键分工是平台契约,不是可以随便改的快捷键偏好。用 div 冒充按钮却只监听了回车,空格用户会以为控件坏了;把链接做成按钮外观却不响应空格,倒还符合链接,但若它其实是提交,空格用户就提交不了。

机制

空格在浏览里是翻页键,链接活在文档流里,空格必须继续翻页,否则读文章时焦点停在链接上就无法滚。按钮是控件,空格被让出来当激活,并且沿用实体键的按下/抬起:keydown 进入按下态,keyup 才触发,焦点若在其间离开则取消。回车对两者都是「立即触发」,没有取消手势。假控件如果在 keydown 就提交,用户无法用滑出取消;如果只绑了 click 没绑键盘,Tab 过来什么都不发生。契约错配的症状是「鼠标行、键盘不行」或「空格把页面滚走还触发了动作」。

怎么研究

用键盘协议走查:Tab 到链接,分别按空格与回车;Tab 到按钮,同样两键;再测按下空格后把焦点移走。对照原生控件与假 div。

自变量:真实角色、监听了哪些键、触发落在 keydown 还是 keyup。 因变量:是否激活、是否滚页、是否可取消、与平台原生按钮是否同构。

自动化只测 click() 会全绿。必须有真实键盘事件。

边界

自定义组合框、菜单项另有一套方向键契约,不能用按钮的空格规则去套。触屏没有这些键。有的屏幕阅读器浏览模式下空格会被阅读器吃掉,焦点模式才交给控件——测的时候要分模式。Mac 上部分控件回车不激活(回车等于点默认按钮),这是系统级默认按钮逻辑,与「链接只吃回车」同时存在。

怎么落地

  • 链接用原生 <a href>,按钮用 <button>,不要自己绑一套残缺的键。
  • 若不得不用 ARIA button,必须同时处理回车与空格,空格在 keyup 触发并可取消。
  • 不要在链接上拦截空格来当激活,那会毁掉翻页。
  • 验证:只键盘走提交。回车成功、空格成功、空格按下后 Tab 离开不提交。任一失败,激活契约就错了。

延伸

  • 同组E1.16.2 屏幕阅读器会分别播报链接与按钮的角色而非仅读文案 · E1.16.3 右键菜单中的新标签页打开选项只对链接有意义 · E1.16.4 访问过的状态只属于链接,按钮没有已访问的概念
  • 相邻E1.08 链接与按钮 · J3.01 键盘可达 · J3.02 焦点顺序与焦点陷阱
  • 站内检索Space key · Enter key · button activation

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.16.1