WCAG 2.2合规实现：表单字段组至少填一项的方法问询

一、语义化标记与规则提示（核心可访问性基础） #

WCAG要求表单组的规则必须清晰传达给所有用户（包括屏幕阅读器使用者），你需要补充和优化以下内容：

• 给<fieldset>添加<legend>，明确说明字段组的填写规则，这是屏幕阅读器识别组逻辑的关键：

  <fieldset id="contact-group">
    <legend>联系方式（至少填写一项）</legend>
    <!-- 原有输入框组 -->
  </fieldset>
  

• 在字段组上方添加可视化提示文本，用强调样式突出规则，确保视觉用户一眼捕捉到要求：

  <p class="form-hint">*请填写住宅、工作、移动电话中的至少一项</p>
  

• 优化输入框的语义属性：
  • 将纯数字的id/name改为语义化名称（比如home-tel），方便维护和辅助工具识别
  • 把type="text"改为type="tel"，让辅助工具识别为电话输入类型；开启autocomplete并设置对应值（WCAG鼓励使用自动完成提升用户体验）：

    <input type="tel" id="home-tel" name="home-tel" maxlength="16" autocomplete="tel-home">
    

二、客户端验证与可访问错误反馈 #

验证逻辑要同时满足视觉用户和屏幕阅读器用户的需求：

1. 提交时验证 #

• 给表单添加提交事件监听，检查三个输入框是否至少有一个非空
• 验证失败时：
  • 在字段组附近显示明确的错误提示，用aria-describedby关联到<fieldset>，同时设置aria-invalid="true"标记字段组无效
  • 使用aria-live="polite"区域确保屏幕阅读器能实时读取错误信息

示例代码：

<!-- 添加错误提示区域 -->
<div id="contact-error" aria-live="polite" class="form-error" style="display:none;color:red;"></div>

<fieldset id="contact-group" aria-describedby="contact-error form-hint">
  <legend>联系方式（至少填写一项）</legend>
  <div class="control-group">
    <label class="control-label" for="home-tel">Home</label>
    <div class="controls">
      <input type="tel" id="home-tel" name="home-tel" maxlength="16" autocomplete="tel-home">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="work-tel">Work</label>
    <div class="controls">
      <input type="tel" id="work-tel" name="work-tel" maxlength="16" autocomplete="tel-work">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="mobile-tel">Mobile</label>
    <div class="controls">
      <input type="tel" id="mobile-tel" name="mobile-tel" maxlength="16" autocomplete="tel-mobile">
    </div>
  </div>
</fieldset>

const form = document.querySelector('form');
const contactGroup = document.getElementById('contact-group');
const contactInputs = contactGroup.querySelectorAll('input[type="tel"]');
const errorElement = document.getElementById('contact-error');

form.addEventListener('submit', (e) => {
  const hasFilled = Array.from(contactInputs).some(input => input.value.trim() !== '');
  
  if (!hasFilled) {
    e.preventDefault();
    contactGroup.setAttribute('aria-invalid', 'true');
    errorElement.textContent = '请至少填写一个联系方式（住宅、工作或移动电话）';
    errorElement.style.display = 'block';
    // 聚焦到第一个输入框，方便键盘用户快速修正
    contactInputs[0].focus();
  } else {
    contactGroup.removeAttribute('aria-invalid');
    errorElement.textContent = '';
    errorElement.style.display = 'none';
  }
});

2. 实时验证（提升用户体验） #

监听输入框的input事件，当用户填写任意一个输入框后，自动清除错误提示：

contactInputs.forEach(input => {
  input.addEventListener('input', () => {
    const hasFilled = Array.from(contactInputs).some(i => i.value.trim() !== '');
    if (hasFilled) {
      contactGroup.removeAttribute('aria-invalid');
      errorElement.textContent = '';
      errorElement.style.display = 'none';
    }
  });
});

三、后端验证（不可缺少的安全保障） #

客户端验证仅为用户体验优化，必须在后端重复验证逻辑：

• 接收表单数据时，检查三个电话号码字段是否至少有一个非空且格式合法
• 若验证失败，返回错误信息，并在页面渲染时遵循客户端的可访问性规则显示提示

四、符合的WCAG 2.2核心准则 #

• 1.3.1 信息和关系：通过<fieldset>+<legend>明确字段组的关联与规则
• 3.3.1 错误识别：清晰提示错误内容，帮助用户修正
• 3.3.2 标签或说明：提前告知用户填写规则
• 4.1.2 名称、角色、值：语义化属性、aria-invalid和aria-live确保辅助工具正确识别状态
• 2.4.7 焦点可见：验证失败时聚焦到输入框，确保键盘用户快速定位修正

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