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

本文详解如何通过 `

html-deploy

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

下载

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

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

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

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

<table class="rating-grid">
  <thead>
    <tr>
      <th scope="col"> </th>
      <th scope="col" id="col-minus2">−2</th>
      <th scope="col" id="col-minus1">−1</th>
      <th scope="col" id="col-zero">0</th>
      <th scope="col" id="col-plus1">+1</th>
      <th scope="col" id="col-plus2">+2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="q1">Question 1</th>
      <td><input type="radio" name="question1" value="-2" id="q1-m2" aria-labelledby="q1 col-minus2"></td>
      <td><input type="radio" name="question1" value="-1" id="q1-m1" aria-labelledby="q1 col-minus1"></td>
      <td><input type="radio" name="question1" value="0"  id="q1-z0" aria-labelledby="q1 col-zero"></td>
      <td><input type="radio" name="question1" value="1"  id="q1-p1" aria-labelledby="q1 col-plus1"></td>
      <td><input type="radio" name="question1" value="2"  id="q1-p2" aria-labelledby="q1 col-plus2"></td>
    </tr>
    <tr>
      <th scope="row" id="q2">Question 2</th>
      <td><input type="radio" name="question2" value="-2" id="q2-m2" aria-labelledby="q2 col-minus2"></td>
      <td><input type="radio" name="question2" value="-1" id="q2-m1" aria-labelledby="q2 col-minus1"></td>
      <td><input type="radio" name="question2" value="0"  id="q2-z0" aria-labelledby="q2 col-zero"></td>
      <td><input type="radio" name="question2" value="1"  id="q2-p1" aria-labelledby="q2 col-plus1"></td>
      <td><input type="radio" name="question2" value="2"  id="q2-p2" aria-labelledby="q2 col-plus2"></td>
    </tr>
  </tbody>
</table>

✅ 关键要点说明：

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

⚠️ 不推荐的替代方案：

立即学习“前端免费学习笔记（深入）”；

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

? 样式兼容提示：
现代 CSS 完全支持对 <table> 进行精细化控制。可通过以下方式保持设计灵活性：

.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 布局一致的视觉效果。

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