如何将基于div实现的自定义Radio/Checkbox设置为表单必填项？

我明白你用W3C的div模拟单选按钮的思路——外观和可访问性都做得不错，但因为没用到原生input，没法直接用required属性对吧？别担心，咱们可以通过可访问性标识+手动JS校验来实现必填功能，完全符合无障碍规范：

1. 先给单选组加上必填的可访问性标记 #

首先要让屏幕阅读器知道这个单选组是必填的，给radiogroup元素加上aria-required="true"属性，同时视觉上也可以加上必填提示（比如*），确保两类用户都能感知：

<div role="radiogroup" aria-labelledby="group_label_1" id="rg1" aria-required="true">
  <h3 id="group_label_1">Label <span style="color:red;">*</span></h3>
  <div role="radio" aria-checked="false" tabindex="0">选项1</div>
  <div role="radio" aria-checked="false" tabindex="0">选项2</div>
</div>
<!-- 可选：添加错误提示区域，用于实时反馈 -->
<div id="radio_error" aria-live="polite" aria-hidden="true" style="color: red; margin-top: 8px;"></div>

2. 手动实现表单提交校验 #

因为没有原生input，浏览器不会自动做必填校验，所以需要用JavaScript来检查用户是否选中了选项：

// 获取表单、单选组和所有单选按钮
const form = document.querySelector('form');
const radioGroup = document.getElementById('rg1');
const radios = radioGroup.querySelectorAll('[role="radio"]');
const errorElement = document.getElementById('radio_error');

// 监听表单提交事件
form.addEventListener('submit', (e) => {
  // 检查是否有单选按钮被选中（aria-checked为true）
  const hasSelectedOption = Array.from(radios).some(radio => radio.getAttribute('aria-checked') === 'true');
  
  if (!hasSelectedOption) {
    // 阻止表单提交
    e.preventDefault();
    // 显示错误提示，屏幕阅读器会通过aria-live读取
    errorElement.textContent = '请选择一个选项';
    errorElement.setAttribute('aria-hidden', 'false');
    // 把焦点移到第一个单选按钮，方便用户直接操作
    radios[0].focus();
  } else {
    // 如果已选中，清空错误提示
    errorElement.setAttribute('aria-hidden', 'true');
    errorElement.textContent = '';
  }
});

3. 额外优化：确保交互符合无障碍规范 #

记得你的自定义单选按钮要支持键盘操作（比如方向键切换选中项、空格键确认选中），这个W3C的示例里应该已经实现了，但如果没有的话，一定要补上——这是可访问性的核心要求之一。

这样一来，既满足了必填字段的功能，又完全符合无障碍设计的规范，不管是视觉用户还是屏幕阅读器用户都能获得清晰的反馈～

内容的提问来源于stack exchange，提问作者Franz Schünzel