展品分类标签每次要按十次 Tab,怎样验证 roving tabindex 的入口
标签组应只保留一个常规 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 顺序取证;相关工程入口在专题与产品对接说明。
- APG标签组键盘行为及手动激活:2026-10-24已联网读取一级来源;W3C APG现行非规范性实践指导,不是跨浏览器支持保证。
留言讨论
评论发布后会被人工复核,违规内容将被删除。
如果发表没有反应,可以前往联系我们告诉我们。