WCAG 3.2.2 输入时问题：如何提前告知下拉选单的字段显示与焦点跳转行为？

针对选择下拉选单选项后无预警显示额外字段、对视障及认知障碍用户造成困扰的问题，可从提前告知用户和明确焦点行为两方面优化，具体方案如下：

一、提前向用户提供说明 #

需同时覆盖视觉用户与屏幕阅读器用户：

• 视觉提示：在下拉选单上方或紧邻位置添加清晰提示文字，比如：
  选择账户类型后，将自动显示对应必填字段，焦点会跳转至第一个新增字段
• 屏幕阅读器专属提示：通过ARIA属性补充详细行为说明，确保视障用户提前知晓不同选项对应的字段变化和焦点移动逻辑。

二、明确焦点移动行为的告知与实现 #

1. 行为规则：
   • 选择「国内账户」时，自动将焦点移至「排序码」输入框
   • 选择「国际账户」时，自动将焦点移至「账户号码」输入框
2. 代码实现示例：

HTML结构（含无障碍提示） #

<!-- 视觉可见的通用提示 -->
<p class="field-hint">选择账户类型后，将自动显示对应必填字段，焦点会跳转至第一个新增字段</p>

<!-- 下拉选单 -->
<label for="account-type">账户类型</label>
<select id="account-type" aria-describedby="account-type-detail-hint">
  <option value="">请选择账户类型</option>
  <option value="domestic">国内账户</option>
  <option value="international">国际账户</option>
</select>

<!-- 屏幕阅读器专属的详细提示 -->
<p id="account-type-detail-hint" class="visually-hidden">
  选择国内账户将显示排序码和账户号码字段，焦点移至排序码；选择国际账户将显示账户号码和币种字段，焦点移至账户号码
</p>

<!-- 动态显示的字段容器 -->
<div id="domestic-fields" class="hidden">
  <label for="sort-code">排序码</label>
  <input type="text" id="sort-code" name="sort-code" required>
  
  <label for="domestic-acc-number">账户号码</label>
  <input type="text" id="domestic-acc-number" name="domestic-acc-number" required>
</div>

<div id="international-fields" class="hidden">
  <label for="international-acc-number">账户号码</label>
  <input type="text" id="international-acc-number" name="international-acc-number" required>
  
  <label for="currency">币种</label>
  <input type="text" id="currency" name="currency" required>
</div>

辅助样式（视觉隐藏但屏幕阅读器可读取） #

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hidden {
  display: none;
}

.field-hint {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 8px;
}

JavaScript逻辑（处理字段显示与焦点移动） #

const accountSelect = document.getElementById('account-type');
const domesticFields = document.getElementById('domestic-fields');
const internationalFields = document.getElementById('international-fields');

accountSelect.addEventListener('change', function() {
  // 先隐藏所有动态字段
  domesticFields.classList.add('hidden');
  internationalFields.classList.add('hidden');

  // 根据选择显示对应字段并移动焦点
  switch(this.value) {
    case 'domestic':
      domesticFields.classList.remove('hidden');
      document.getElementById('sort-code').focus();
      break;
    case 'international':
      internationalFields.classList.remove('hidden');
      document.getElementById('international-acc-number').focus();
      break;
  }
});

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