无障碍棋盘方格多状态适配：视障友好方案技术问询

针对棋盘方格的着色状态（红、绿、蓝、无），以下是几种符合WCAG标准的适配方案，解决视觉障碍用户无法识别颜色状态的问题：

方案1：扩展aria-label直接告知状态 #

最直接的方式是在aria-label中补充着色状态和操作提示，让屏幕阅读器读取单元格时同步告知关键信息：

<div role="grid" aria-colcount="8" aria-rowcount="8" aria-activedescendant="e1">
  <div id="a1" tabindex="0" role="gridcell" aria-label="a1，已选中" aria-selected="true" aria-keyshortcuts="Control+Space Space">
  </div>

  <div id="b1" tabindex="0" role="gridcell" aria-label="b1，已标记红色，按Ctrl+空格可切换为绿色" aria-selected="false" aria-keyshortcuts="Control+Space Space">
  </div>

  <div id="c1" tabindex="0" role="gridcell" aria-label="c1，已标记绿色，按Ctrl+空格可切换为蓝色" aria-selected="false" aria-keyshortcuts="Control+Space Space">
  </div>

  <div id="d1" tabindex="0" role="gridcell" aria-label="d1，已标记蓝色，按Ctrl+空格可清除颜色" aria-selected="false" aria-keyshortcuts="Control+Space Space">
  </div>

  <div id="e1" tabindex="0" role="gridcell" aria-label="e1，未标记颜色，按Ctrl+空格可标记为红色" aria-selected="false" aria-keyshortcuts="Control+Space Space">
  </div>
</div>

这种方案无需额外DOM元素，实现成本低，适合简单场景。

方案2：视觉隐藏的状态提示文本 #

如果不想过度扩展aria-label，可以在单元格内添加视觉隐藏的文本节点，仅提供给屏幕阅读器：

首先定义视觉隐藏的CSS类：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

然后修改HTML：

<div role="grid" aria-colcount="8" aria-rowcount="8" aria-activedescendant="e1">
  <div id="a1" tabindex="0" role="gridcell" aria-label="a1" aria-selected="true" aria-keyshortcuts="Control+Space Space">
    <span class="sr-only">已选中</span>
  </div>

  <div id="b1" tabindex="0" role="gridcell" aria-label="b1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <span class="sr-only">已标记红色，按Ctrl+空格可切换为绿色</span>
  </div>

  <div id="c1" tabindex="0" role="gridcell" aria-label="c1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <span class="sr-only">已标记绿色，按Ctrl+空格可切换为蓝色</span>
  </div>

  <div id="d1" tabindex="0" role="gridcell" aria-label="d1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <span class="sr-only">已标记蓝色，按Ctrl+空格可清除颜色</span>
  </div>

  <div id="e1" tabindex="0" role="gridcell" aria-label="e1" aria-selected="false" aria-keyshortcuts="Control+Space Space">
    <span class="sr-only">未标记颜色，按Ctrl+空格可标记为红色</span>
  </div>
</div>

这种方案保持aria-label简洁，状态信息独立管理，适合复杂场景。

方案3：优化视觉隐藏单选按钮组 #

如果倾向于用单选按钮组标识颜色状态，需要确保按钮组与单元格关联，且状态同步：

<div role="grid" aria-colcount="8" aria-rowcount="8" aria-activedescendant="e1">
  <div id="a1" tabindex="0" role="gridcell" aria-label="a1" aria-selected="true" aria-keyshortcuts="Control+Space Space" aria-controls="a1-color-group">
    <!-- 视觉隐藏的颜色单选组 -->
    <div class="sr-only" role="radiogroup" aria-label="a1的标记颜色">
      <input type="radio" id="a1-none" name="a1-color" checked>
      <label for="a1-none">无颜色</label>
      <input type="radio" id="a1-red" name="a1-color">
      <label for="a1-red">红色</label>
      <input type="radio" id="a1-green" name="a1-color">
      <label for="a1-green">绿色</label>
      <input type="radio" id="a1-blue" name="a1-color">
      <label for="a1-blue">蓝色</label>
    </div>
    <span class="sr-only">已选中</span>
  </div>

  <div id="b1" tabindex="0" role="gridcell" aria-label="b1" aria-selected="false" aria-keyshortcuts="Control+Space Space" aria-controls="b1-color-group">
    <div class="sr-only" role="radiogroup" aria-label="b1的标记颜色">
      <input type="radio" id="b1-none" name="b1-color">
      <label for="b1-none">无颜色</label>
      <input type="radio" id="b1-red" name="b1-color" checked>
      <label for="b1-red">红色</label>
      <input type="radio" id="b1-green" name="b1-color">
      <label for="b1-green">绿色</label>
      <input type="radio" id="b1-blue" name="b1-color">
      <label for="b1-blue">蓝色</label>
    </div>
    <span class="sr-only">已标记红色，按Ctrl+空格可切换为绿色</span>
  </div>
  <!-- 其余单元格类似 -->
</div>

需要注意：

• 每个单元格的单选组name属性必须唯一，避免组间干扰
• 通过JavaScript同步键盘操作（Ctrl+空格）与单选按钮的选中状态
• aria-controls关联单元格与对应的颜色选择组，帮助屏幕阅读器理解元素间关系

内容的提问来源于stack exchange，提问作者Jeroen