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>。两者缺一不可，且顺序影响播报先后（通常行在前、列在后更符合自然语言习惯）。
立即学习“前端免费学习笔记（深入）”；
- 列标题必须带
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”。 
