tabindex="-1" 不能乱加在 grid 容器上，否则会阻断整个子树的默认 tab 流，导致内部可交互元素（如单选按钮）无法被键盘聚焦；正确做法是仅对纯语义性容器设 tabindex="-1"，确保内部控件保留原生聚焦能力并正确使用 aria-labelledby 关联行列标题。

tabindex="-1" 为什么不能乱加在 grid 容器上

很多开发者看到网格需要“禁用默认焦点”就直接给 div 加 tabindex="-1"，结果导致整个网格区域无法被键盘聚焦——哪怕里面嵌了按钮或单选框，也无法通过 Tab 进入。问题出在：浏览器会跳过所有 tabindex="-1" 的元素及其子树的默认 tab 顺序，除非显式调用 .focus()。而屏幕阅读器（如 NVDA、VoiceOver）依赖 DOM 顺序和可聚焦性来构建导航路径，不是靠 JS 控制。

正确做法是只对真正不需要键盘进入的容器设 tabindex="-1"，比如纯展示型 role="grid" 外层；但若内部有交互控件（如 input type="radio"），必须确保它们本身可聚焦（即不被父级阻断），且拥有明确的 tabindex="0" 或天然可聚焦属性（如 button、input）。

• role="grid" 容器应设 tabindex="-1"，仅用于语义声明，不参与 tab 流
• 每行 role="row" 不要设 tabindex，否则会干扰行内单元格聚焦顺序
• 每个 role="gridcell" 内的可交互元素（如 input、button）必须保留其原生聚焦能力，不要包裹在 tabindex="-1" 的 div 里

aria-labelledby 在多维网格中怎么配才不丢上下文

常见错误是只关联行标题或只关联列标题，导致屏幕阅读器读成“未选中单选按钮”或“+2”，完全丢失“Question 3, +2”这种组合语义。关键在于：每个单选按钮必须同时引用两个 ID —— 行头 id 和列头 id，中间用空格分隔。

例如：aria-labelledby="q3 col-plus2" 中 q3 是 <th scope="row" id="q3">Question 3</th>，col-plus2 是 <th scope="col" id="col-plus2">+2</th>。两者缺一不可，且顺序影响播报先后（通常行在前、列在后更符合自然语言习惯）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 列标题必须带 id，不能只靠 scope="col"；scope 对屏幕阅读器辅助理解有帮助，但不替代 aria-labelledby
• 避免使用动态生成但未同步更新的 ID（如 React 中 key 渲染后 ID 错位），会导致 aria-labelledby 指向失效
• 如果某列无文字（如首列空白表头），需用 aria-label 补充，否则关联后播报为空白

用 table 实现网格时 tabindex 和 aria-labelledby 能否共存

能，而且推荐共存。原生 table 不需要 role="grid"，但依然要处理键盘导航和语义播报。此时 tabindex 应用在更细粒度上：表格本身一般不设 tabindex，而是让每个 input 自然进入 tab 流（即不设 tabindex 或设为 0），再靠 aria-labelledby 补足上下文。

对比 CSS Grid 布局，table 的优势在于 DOM 结构天然匹配二维关系，无需手动维护 role 层级；劣势是灵活性低，但对评分量表这类固定结构恰恰是优点。

• table 中的 input 默认可聚焦，无需额外 tabindex="0"
• 若想让整个表格像一个“块”被跳转（比如用 skip link 直达），可在 table 上加 tabindex="-1"，再配合 JS 实现首次聚焦时自动跳转到第一个 input
• 不要给 td 或 tr 设 tabindex，这会制造冗余 tab 停留点，破坏线性导航流

键盘导航路径被意外打断的三个隐蔽原因

即使代码看起来都对，用户仍可能卡在某个单元格出不去，常见于复杂网格。根本问题往往不在标签本身，而在 DOM 结构或样式干扰。

最易忽略的是 CSS 的 visibility: hidden 或 display: none —— 它们会让元素彻底退出可访问树，即便有 aria-labelledby 也无效；其次是 pointer-events: none，虽不影响键盘，但某些屏幕阅读器会据此推断元素不可交互；最后是 JS 动态移除/插入节点后未重置焦点，导致 tab 键跳过本该存在的控件。

• 检查是否误用 display: none 隐藏了列标题或行标题——它们必须存在于 DOM 中才能被 aria-labelledby 引用
• 避免在 gridcell 上设置 outline: none 且不提供替代焦点样式，这会让键盘用户失去视觉反馈
• 动态渲染网格后（如分页加载），务必手动将焦点设到新插入的第一个可聚焦元素，否则 tab 键会从上一页末尾继续走，跳过新区

实际做时，最麻烦的从来不是写对一行 aria-labelledby，而是保证整条链路上每个 ID 都真实存在、没拼错、没重复、没被样式或脚本悄悄干掉。一旦漏掉一个环节，屏幕阅读器就只能猜，而用户只会听到“按钮”，而不是“问题5，选择+1”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！