单选题用三颗独立按钮会多选,怎样核对 radio 的互斥和方向键

2026-10-24

单选互斥应先由同组原生 radio 的相同 name 建立,再检查方向键、checked 与提交值。三颗外观相同的普通按钮不会自动变成单选组,三个不同 name 的 radio 也不会彼此互斥。

把同组条件落实到HTML

示例选择讲解语言,三项radio共享name=language,并用fieldset和legend给出组名称。初始中文选中,真实右方向键后英文选中,脚本读取checked集合应只剩en。这里用提交值而不是中文标签判定结果,能避免界面翻译后测试脚本把文字变化误认成状态变化。

做一个确实会失败的反例

脚本把日文项name改成other,再点击日文,英文和日文会同时保持checked。它们现在属于两个组,浏览器没有违反单选规则。若业务最后只能接收一个语言码,不应等提交时随便取第一个checked来掩盖错误;应先恢复正确组关系,再核查选项值、默认值和label是否都指向预期元素。

不要把所有初始焦点细节写死

已选中项通常是Tab进入组时的重要入口;未选择任何项时,部分浏览器在反向Tab进入组的初始位置存在差异。APG说明的是交互模式,原生平台行为也需要按目标环境记录。本例明确先选中中文、再从该项执行方向键,因此断言范围清楚,不假装已经覆盖所有浏览器的无默认值情形。

从值验证走到任务验证

本地实验只验证互斥和键盘选择,没有播放任何语言音轨。真实项目应继续检查值改变后是否切对素材、是否需用户确认,以及当前焦点是否仍在组内。若设计要求多选,应该改成复选框并相应说明,不要保留radio语义再用脚本强行允许多个checked;控件语义、视觉和最终数据应表达同一任务。

用表单输出检查组值是否唯一

除读取checked数量,还可在真实表单中用FormData检查name对应的值,确保视觉选中与提交数据一致。禁用选项、默认语言和语言资源缺失也应有明确策略,不能靠隐藏radio继续提交旧值。附件没有表单提交或音轨切换,保留反例是为了说明互斥来自分组条件;业务发送哪一个语言码仍需在独立接口契约里确认。

下载并复现

下载原创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)设计规范。单选组与标签组都使用方向键,但选中和激活规则不同,可继续用展品分类标签每次要按十次 Tab,怎样验证 roving tabindex 的入口取证;相关工程入口在专题与产品对接说明。

需要展厅软硬件方案或定制开发?

加微信,把这一页发到你手机上

扫码加站长企业微信,会自动把这一页的链接发给你。问软件授权、报价,或者现场遇到问题,也可以直接聊。

去留微信

留言讨论

评论发布后会被人工复核,违规内容将被删除。

    还没有人评论,来说说你的看法

    如果发表没有反应,可以前往联系我们告诉我们。

    这个页面有问题?

    提交时会附带当前页面地址和浏览器信息,帮助我们定位问题。不填联系方式即为匿名。