纯display: grid让屏幕阅读器“迷路”是因为grid容器无语义，被视作普通div，不暴露行列结构与单元格关系，导致辅助技术无法识别布局逻辑、缺失上下文关联且无原生方向导航支持。

为什么纯display: grid会让屏幕阅读器“迷路”

因为 CSS Grid 本身不带语义，display: grid 的容器对辅助技术完全透明——它被当成普通 div 处理，既无行列概念，也不暴露单元格关系。用户 Tab 进去后只能线性读取子元素，完全不知道“这是第几行第几列”“当前按钮对应哪个问题”。

常见错误现象包括：

• 屏幕阅读器跳过整个网格，或把所有子项读作“未命名区块”
• 键盘按 ←→ 方向键毫无反应（Grid 不提供原生方向导航）
• 多题评分表中，选中 +1 按钮时只听到“+1”，听不到“Question 3”，导致误操作

根本原因不是样式没写好，而是缺失语义锚点：没有声明角色、没有绑定上下文、没有补全键盘逻辑。

用table还是role="grid"？关键看数据本质

如果网格承载的是二维结构化数据（如课程表、销售报表、多题同选项评分表），优先用原生 table；只有当视觉布局必须脱离表格语义（比如卡片式商品陈列、非数据型仪表盘）时，才考虑 role="grid"。

选择依据很实际：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• table 自带行列头联动、Ctrl+Alt+方向键导航、自动朗读 scope 关联的表头，浏览器和屏幕阅读器支持成熟
• role="grid" 需手动实现焦点管理、方向键响应、aria-activedescendant 状态同步，且旧版 NVDA 可能忽略行列关系
• 用 role="grid" 模拟表格是退化方案——它绕过了浏览器对 table 的深度无障碍支持

例如评分表：table 中每个 td 可同时关联问题行头和选项列头，屏幕阅读器自然读出“Question 2, +0”，无需 JS 补充。

role="grid" 必须配哪些 ARIA 属性才能勉强可用

仅加 role="grid" 远不够。要让辅助技术识别为“可导航网格”，至少补全以下三项：

• 容器设 role="grid" + tabindex="-1"（禁用默认焦点，由 JS 控制）
• 每行子项设 role="row"，每个单元格设 role="gridcell"（不能混用 div 或 article）
• 含交互控件（如单选按钮）时，用 aria-labelledby 显式关联问题 ID 和选项 ID，例如：aria-labelledby="q3 opt-plus1"

漏掉任意一项，都会导致部分用户无法理解上下文。特别注意：grid-template-areas 命名区域（如 "header main"）完全无语义，不能替代 role 或 aria-label。

键盘导航必须手写 JS，且不能只处理 Tab

CSS Grid 不提供方向键、Home/End、Ctrl+Home 等原生导航能力。用 role="grid" 时，这部分必须自己实现，且逻辑比想象中复杂：

• 方向键需按行列索引移动焦点，还要处理换行、边界截断、跳过不可见单元格
• Home/End 应跳到行首/行尾，Ctrl+Home/Ctrl+End 跳到网格首/尾单元格
• 焦点变更后需同步更新 aria-activedescendant 指向当前激活项 ID
• 动态更新内容（如 AJAX 加载新行）后，要重置焦点索引并触发 aria-live 通知

最容易被忽略的是：没处理 Shift+Tab 反向遍历时的行列逻辑，导致用户从最后一行倒着 Tab 会直接跳出网格，而非向上一单元格移动。

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