看起来像按钮的 div 按空格没反应,怎样对照原生 button 激活
需要执行动作时优先使用原生 button。给 div 写 role=button 和 tabindex=0,只会补角色与焦点入口,不会自动补 Enter、Space 激活;自定义控件还得自行实现对应键盘行为。
把视觉相似缩成两种元素
附件并排放一块有边框的div和一颗button,两者都只有click回调,也都能获得焦点。脚本分别聚焦后输入Enter与Space。原生button会由浏览器激活并产生两次本地回调,而div仍为空。这个对照的目标是元素自带的行为责任,不是比较pointerdown和click双绑定导致的重复次数。
角色不会替开发者写事件
role给辅助技术提供控件语义,tabindex让元素进入键盘导航,但它们没有承诺替div处理按键。若确实需要自定义按钮,应实现按下与释放、阻止Space滚动、禁用状态、焦点样式以及点击和键盘共享动作入口。只添加一条keydown后发现能动,并不说明长按、重复键或鼠标取消都已经正确;应有对应交互规格。
原生元素也要选对类型
button放在表单里时默认可能是提交按钮;与提交无关的展品详情动作应明确type=button,避免按键触发表单导航。若实际任务是跳转到另一份页面,链接通常比按钮更符合语义。选择元素应从用户要执行的任务出发,不是因为设计图画了一个圆角矩形就统一用div,再逐层补脚本。
如何交付给项目团队
记录元素类型、可访问名称、焦点入口、Enter结果和Space结果五项,比写“支持键盘”更可复核。附件只改变本地数组,没有发送控制指令;实际工程还需检查按钮禁用、加载等待及动作完成后焦点位置。读屏宣告和触摸辅助技术没有在这里实测,不能把原生元素选择正确直接写成整套无障碍验收通过。
在表单中增加一次回车任务
测试按钮放进表单时,应明确是否提交。附件的元素不在表单中,因此两次键盘输入只写本地数组;真实界面若一按Enter就跳页,先检查button类型和表单默认提交,而不是给整个document禁止回车。需要保留原生激活、禁用和名称,同时避免无关提交,这几个条件可以同时满足,没有必要为了绕开提交行为重新用div造一颗按钮。
下载并复现
下载原创HTML夹具、独立验证程序、本次执行记录和依赖与运行说明,放在同一目录。安装Playwright 1.58.0及其Chromium后运行 python verify.py;程序使用两个随机本地端口,自动关闭浏览器与服务,不请求外网或业务接口。
本次实际环境为Python 3.12.4、Playwright 1.58.0、Chromium 145.0.7632.6。Playwright浏览器鼠标/键盘与页面API实跑;无实体硬件或业务控制。断言已通过;完整事件和数值保留在执行记录,不能把它改名后当目标展项测量。
自动化只检查焦点、控件行为和可查询语义,没有实际运行屏幕阅读器,也没有招募参与者。朗读顺序、触摸辅助技术和目标终端可用性需要另外验证。
继续核查与一级出处
基础背景见中控触摸界面(UI)设计规范。原生激活明确后,还要验证禁用状态是否真的阻止动作,可继续用按钮标了 aria-disabled 仍能点,怎样区分语义禁用与原生 disabled取证;相关工程入口在专题与产品对接说明。
- 按钮键盘激活约定与角色语义:2026-10-24已联网读取一级来源;W3C APG现行非规范性实践指导,不是跨浏览器支持保证。
留言讨论
评论发布后会被人工复核,违规内容将被删除。
如果发表没有反应,可以前往联系我们告诉我们。