本文详解如何通过 结构结合 aria-labelledby 为多行多列的单选按钮网格提供完整语义关联，确保屏幕阅读器能准确播报“问题+选项”组合，兼顾可访问性、可维护性与专业表意。

本文详解如何通过 `

` 结构结合 `aria-labelledby` 为多行多列的单选按钮网格提供完整语义关联，确保屏幕阅读器能准确播报“问题+选项”组合，兼顾可访问性、可维护性与专业表意。

在构建评分型问卷（如 Likert 量表）时，常需呈现「多问题 × 同一选项集」的网格布局。单纯使用 CSS Grid 实现视觉对齐虽灵活，却会牺牲语义结构——屏幕阅读器无法理解“Question1”与第3列的 +0 按钮存在逻辑关联，导致用户仅听到孤立的“radio button not checked”，严重损害无障碍体验。

最佳实践：语义化

+ aria-labelledby 双重标注
HTML 天然表达「行（问题）× 列（选项）」的二维关系，是此类数据最恰当的语义容器。配合 aria-labelledby，可将每个单选按钮同时关联行标题（问题）与列标题（数值），实现精准播报。

以下为符合 WCAG 2.1 AA 级别的完整示例：

	−2	−1	0	+1	+2
Question 1
Question 2

✅ 关键要点说明：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 标注列头，并赋予唯一 id，供 aria-labelledby 引用；
• 标注行头（问题），同样设 id；
• 每个 的 aria-labelledby 值为两个 id 的空格分隔字符串（如 "q1 col-zero"），屏幕阅读器将按此顺序播报「Question 1, 0」；
• scope 属性确保表格结构被辅助技术正确解析，支持行列导航（如 NVDA 的「Ctrl+Alt+方向键」）；
• 避免使用 aria-label 硬编码文本（如 "Question 1 zero"），因其无法随内容动态更新，且冗余难维护。

⚠️ 不推荐的替代方案：

• 纯 CSS Grid + 视觉隐藏 ：需为每个按钮重复生成完整描述（如 Question 1 minus two），代码膨胀、易出错、难以本地化；
• +
  ：虽能语义化单行问题，但列头（−2/−1/…）仍无全局关联，高级屏幕阅读器用户无法跨行快速比对同一选项（如查看所有「+2」回答），交互效率显著下降。

? 样式兼容提示：
现代 CSS 完全支持对

进行精细化控制。可通过以下方式保持设计灵活性：

.rating-grid { display: grid; grid-template-columns: max-content repeat(5, 1fr); }
.rating-grid thead, .rating-grid tbody { display: contents; }
.rating-grid th, .rating-grid td { text-align: center; }
/* 保留语义结构，覆盖默认表格渲染 */

此举在不破坏语义的前提下，获得与原始 Grid 布局一致的视觉效果。

总结：对于「问题 × 固定选项」网格，

不是过时的布局工具，而是承载语义关系的基石。搭配 aria-labelledby 实现双向标签关联，既满足基础键盘导航用户的清晰播报需求，又赋能高级用户高效操作——这才是真正「适当」（appropriately）的无障碍实现。

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