带组合框的单选按钮的合规WCAG标记及键盘导航问题咨询

1. 为什么radiogroup内不能放组合框？ #

根据WCAG规范，radiogroup（无论是原生<fieldset>还是带role="radiogroup"的容器）的语义是一组互斥的单选按钮，只能包含<input type="radio">控件。如果在其中放入组合框、日期选择器等其他交互式元素，会破坏控件组的语义结构，导致屏幕阅读器等辅助技术无法正确识别分组关系，因此检测工具会报错。

2. 用fieldset替换radiogroup是否合适？ #

完全合适。<fieldset>+<legend>是HTML原生的表单分组控件，用来包裹单选按钮组是符合WCAG规范的最佳实践，比自定义role="radiogroup"更可靠，原生就支持辅助技术识别。

你之前丢失键盘导航，大概率是结构问题（比如单选按钮的name属性不统一，或者嵌套层级错误），而非<fieldset>本身的问题。原生单选按钮只要name属性相同，即使放在<fieldset>里，也默认支持Tab/Shift+Tab进出组、方向键切换选项的键盘导航。

3. 是否需要保留该键盘导航？ #

必须保留！WCAG 2.1.1「键盘操作」和2.1.2「无键盘陷阱」明确要求：所有交互功能都必须能通过键盘操作完成。原生单选按钮组的方向键切换是用户（尤其是依赖键盘的用户）的标准操作习惯，丢失这个功能会严重影响可访问性。

4. 符合WCAG规范的UI标记写法 #

核心优化点： #

• 将单选按钮组单独用<fieldset>包裹，明确分组语义
• 用aria-controls将单选按钮与对应的字段集关联，让辅助技术知道控件间的关联关系
• 添加ARIA实时区域（live region），通知用户字段集的禁用/启用状态变化
• 确保单选按钮的name统一，维持原生键盘导航功能

修改后的代码示例： #

CSS

/* 单选按钮与对应字段集的布局 */
.radio-option {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.radio-option label {
  margin-right: 0.5rem;
}
.radio-option .field-group {
  display: inline;
}

/* 禁用状态样式 */
[disabled] {
  filter: grayscale(100%) opacity(.4);
}

/* ARIA实时区域隐藏（仅屏幕阅读器可见） */
.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

HTML

<form>
  <!-- 外层fieldset：整个"我要换出"区域 -->
  <fieldset>
    <legend>我要换出</legend>

    <!-- ARIA实时区域：通知状态变化 -->
    <div class="sr-live" aria-live="polite"></div>

    <!-- 单选按钮组：单独用fieldset包裹，明确分组语义 -->
    <fieldset>
      <legend>选择班次类型</legend>

      <!-- 完整班次选项 -->
      <div class="radio-option">
        <label>
          <input type="radio" name="give-type" checked aria-controls="entire-shift-group">
          完整班次
        </label>
        <fieldset id="entire-shift-group" class="field-group">
          <legend>班次日期</legend>
          <label>
            日期
            <input type="date">
          </label>
        </fieldset>
      </div>

      <!-- 部分班次选项 -->
      <div class="radio-option">
        <label>
          <input type="radio" name="give-type" aria-controls="partial-shift-group">
          部分班次
        </label>
        <fieldset id="partial-shift-group" class="field-group" disabled>
          <legend>班次时间范围</legend>
          <label>
            从
            <input type="datetime-local">
          </label>
          <label>
            到
            <input type="datetime-local">
          </label>
        </fieldset>
      </div>
    </fieldset>
  </fieldset>
</form>

JavaScript

const form = document.querySelector('form');
const liveRegion = form.querySelector('.sr-live');

form.addEventListener('change', (e) => {
  if (e.target.type !== 'radio') return;

  const radioName = e.target.name;
  const allRadios = form.querySelectorAll(`input[name="${radioName}"]`);
  
  allRadios.forEach(radio => {
    const targetGroup = document.getElementById(radio.getAttribute('aria-controls'));
    const isChecked = radio === e.target;
    
    targetGroup.disabled = !isChecked;
    
    // 通知屏幕阅读器状态变化
    if (isChecked) {
      liveRegion.textContent = `${radio.nextSibling.textContent.trim()}已选中，对应的字段集已启用`;
    }
  });
});

关键说明： #

• aria-controls：建立单选按钮与对应字段集的关联，辅助技术会告知用户“此单选按钮控制某个区域”
• ARIA实时区域：当字段集启用/禁用时，屏幕阅读器会朗读通知内容，解决原实现中状态变化无提示的问题
• 单选按钮组的<fieldset>+<legend>：明确告知辅助技术这是一组互斥选项，强化语义
• 原生键盘导航：只要单选按钮name统一，方向键切换、Tab进出的功能会自动保留，无需额外实现

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