如何为复选框组语义化处理ID以满足无障碍需求

嘿，关于无障碍场景下给复选框组关联主标签的问题，我刚好有不少实践经验，结合你用Semantic UI的情况，来拆解下你想到的三种可行方案的优劣：

方案一：使用原生<fieldset>+<legend>（最推荐） #

这是W3C无障碍指南里最推荐的方案，完全依赖原生语义，不需要额外ARIA属性，屏幕阅读器会自动识别<legend>作为<fieldset>内控件组的标题，适配性拉满。

结合Semantic UI的代码示例：

<div class="ui form">
  <fieldset>
    <legend id="fruit-group-title">你喜欢什么水果？</legend>
    <div class="grouped fields">
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="fruit-apple">
          <label for="fruit-apple">苹果</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="fruit-banana">
          <label for="fruit-banana">香蕉</label>
        </div>
      </div>
      <!-- 更多水果选项 -->
    </div>
  </fieldset>
</div>

如果觉得默认的<legend>样式不符合你的设计，只需要加几行CSS就能调整，Semantic UI不会干扰原生标签的语义功能。

方案二：用role="group"+aria-labelledby关联组容器 #

如果你的布局实在不适合用<fieldset>（比如某些特殊的样式限制），可以给复选框组的外层容器添加role="group"和aria-labelledby属性，指向主标签的ID，以此建立关联。

代码示例：

<div class="ui form">
  <label id="fruit-group-label">你喜欢什么水果？</label>
  <div class="grouped fields" role="group" aria-labelledby="fruit-group-label">
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" id="fruit-apple">
        <label for="fruit-apple">苹果</label>
      </div>
    </div>
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" id="fruit-banana">
        <label for="fruit-banana">香蕉</label>
      </div>
    </div>
  </div>
</div>

这种方案的优势是灵活性高，不需要改变HTML结构层级，屏幕阅读器会把这个容器识别为一个关联的控件组，读取每个复选框时会先提示组标题。

方案三：给每个复选框加aria-describedby（不推荐） #

这个方案是让每个复选框单独关联主标签作为描述，虽然可行，但会带来冗余体验——屏幕阅读器用户在选择每个选项时都会重复听到相同的主标签内容，不够友好。

代码示例：

<div class="ui form">
  <label id="fruit-desc">你喜欢什么水果？</label>
  <div class="grouped fields">
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" id="fruit-apple" aria-describedby="fruit-desc">
        <label for="fruit-apple">苹果</label>
      </div>
    </div>
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" id="fruit-banana" aria-describedby="fruit-desc">
        <label for="fruit-banana">香蕉</label>
      </div>
    </div>
  </div>
</div>

除非你有特殊的业务需求，否则不建议用这种方案，前两种方案的体验和语义化程度都要更好。

总的来说，优先选方案一，原生语义化是无障碍的最优解；如果布局受限，方案二是完美替代；方案三尽量避免使用。

内容的提问来源于stack exchange，提问作者elegant-solutions