纯 css grid 容器对屏幕阅读器“不可见”是因为 display: grid 无语义，仅作布局；需显式添加 role="grid"、tabindex="-1" 及 row/cell 角色，并配合 aria-labelledby 等属性才能正确传达行列结构与上下文。
为什么纯 CSS Grid 容器对屏幕阅读器“不可见”
因为 display: grid 只是布局声明，不携带任何语义。屏幕阅读器把它当普通 div 处理——线性读取子元素，完全丢失行列关系、标题关联和上下文逻辑。用户听到的只是“单选按钮 未选中”“单选按钮 未选中”，根本不知道这是“Question 3 的 +1 选项”。
常见错误现象：
- 用
grid-template-areas命名区域（如"header main"），以为能被朗读——实际完全静默 - 给整个网格容器加
role="grid"却漏掉tabindex="-1"，导致它意外进入 Tab 流，干扰后续焦点顺序 - 把
<table> 当“过时写法”弃用，改用 <code>div+role="grid"，结果失去浏览器原生表格导航支持（如 Ctrl+Alt+方向键跳行列）table vs role="grid"：什么场景该用哪个
本质是数据类型决定结构选择：二维结构化数据（如评分表、课程表、销售报表）必须用
<table>；仅需视觉对齐、无明确行列语义的卡片流（如商品列表、文章摘要）才考虑 <code>role="grid"。用
<table> 的硬性要求： <ul><li><code><th scope="row"> 和 <code><th scope="col"> 必须配 <code>id，不能只靠scope属性——aria-labelledby依赖 ID 绑定 - 多级表头必须用
headers属性显式关联，例如<td headers="q1 col-plus2"> <li>首列若为空白表头（如仅作行序号），需补 <code>aria-label，否则aria-labelledby关联后播报为空 - 容器设
tabindex="-1"，仅作语义声明，不参与 Tab 流 - 子项统一用
role="row"和role="gridcell"，禁用div或article混用 - 必须手写 JS 实现方向键导航（←→↑↓）、Home/End 跳转，CSS Grid 不提供原生支持
- 列标题必须带
id，例如<th scope="col" id="col-plus1">+1</th>；仅写scope="col"不足以支撑aria-labelledby - React 等框架动态渲染时，确保 ID 与 DOM 实际位置严格对应——key 渲染错位会导致
aria-labelledby指向失效 - 避免用同一 ID 多次绑定，或让多个元素共用一个 ID，这会破坏关联唯一性
- 如果某列标题是图标（如 ⬆️），必须配
aria-label或可见文本，否则屏幕阅读器播报为空白 -
role="grid"容器 →tabindex="-1"✅（仅语义，不参与 tab 流） -
role="row"元素 → 不设tabindex❌（设了会干扰行内单元格聚焦顺序） -
role="gridcell"内部 → 可交互元素（input、button）必须保留天然可聚焦性，不能被tabindex="-1"的父div包裹 - 纯展示型外层容器（如无交互的
role="grid"包裹器）→ 可设tabindex="-1"，但内部控件仍需独立可聚焦
用 role="grid" 的前提：
aria-labelledby 怎么配才不丢“问题+选项”双上下文
每个单选按钮必须同时引用行头 ID 和列头 ID，中间用空格分隔，顺序影响播报先后——通常行在前、列在后更自然（“Question 3, +1” 而非 “+1, Question 3”）。
关键细节：
tabindex="-1" 加在哪一层最容易踩坑
加在 role="grid" 容器上没问题，但加在包裹单选按钮的 div 或 td 内层就致命——它会阻断内部 input 的原生聚焦能力，哪怕按钮本身有 tabindex="0" 也无效。
正确层级约束：
最常被忽略的一点：屏幕阅读器依赖 DOM 顺序和可聚焦性构建导航路径，不是靠 JS 控制。一旦父级用 tabindex="-1" 错误阻断子树，手动 .focus() 也无法恢复默认 Tab 流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
