展品分类标签每次要按十次 Tab,怎样验证 roving tabindex 的入口

2026-10-24

标签组应只保留一个常规 Tab 入口,组内用方向键移动。本例选择手动激活:方向键先改焦点,Enter 或 Space 才切面板,因此 aria-selected 与当前焦点允许短暂不同。

先选定激活模型再测

附件有历史、工艺、人物三项分类,历史初始选中。键盘Tab进入历史,右方向键移到工艺,此时面板仍是历史;按Enter后才显示工艺。自动激活模式则会在焦点移动时同步切换,二者都是需要明确约定的设计选择。不能拿手动模式的期望去判自动模式错误,也不能只看到高亮就假定内容已经切换。

把三个关联关系写完整

tablist说明这是一组标签,tab的aria-controls指向自己的tabpanel,面板的aria-labelledby反向指向对应标签。选中状态用aria-selected表示,tabindex控制组内哪个元素进入顺序导航。夹具每次方向移动把所有标签设为-1,再把目标设为0并focus,避免三项全部占用Tab入口,后续分类越多导航越费力。

脚本逐条断言行为

程序不只检查属性存在,还实际按Tab、ArrowRight、Enter和Tab,断言焦点、selected及可见面板。最后Tab应离开标签组到后续动作,而不是进入下一项标签。原生button已经提供Enter与Space的click激活,代码不再额外写一套重复键盘动作。若改成自定义元素,就需要重新承担激活责任。

性能与辅助技术仍需另验

面板需要远程加载或复杂三维初始化时,自动激活可能让方向键导航不断触发耗时工作,手动模式通常更容易表达等待边界。本例没有网络和业务服务,只证实局部交互。真实页面还要核对隐藏面板里的控件是否真的不可达、标签删除后焦点去哪,以及目标读屏组合能否正确识别标签名和选中状态。

移焦点后再进入组的入口约定

手动模型中可能存在焦点落在未选标签、用户又离开组的情况,需决定再次Tab进入时回当前选项还是上次焦点。夹具用于展示组内移动与手动激活,只断言当前这条任务。生产控件应把重入、Home/End、垂直布局与删除标签后的目标写进交互说明,并与ARIA状态一起测试,不能仅靠一段roving代码覆盖全部变体。

下载并复现

下载原创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)设计规范。组内roving不能替代整个页面的DOM焦点顺序,可继续用查询页 Tab 顺序跳到屏幕角落,怎样核对 tabindex 与 DOM 顺序取证;相关工程入口在专题与产品对接说明。

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

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

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

去留微信

留言讨论

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

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

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

    这个页面有问题?

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