可访问性优化：Yes/No单选按钮动态显隐表单字段的最佳方案

我正在维护一个老旧站点，需对其进行可访问性改造以适配屏幕阅读器用户。目前我正在探索如何以最佳方式编写Yes/No单选按钮代码，使其能根据选中状态条件显示其他表单字段。我制作了一个原型，当“Yes”单选按钮被选中时应显示额外表单字段，选中“No”时则隐藏这些字段。

我为“Yes”单选按钮添加了aria-expanded="false"和aria-controls="SpouseYesFields"属性，对应额外字段包裹在<div id="SpouseYesFields" role="region" aria-labelledby="SpouseYes" class="spouse-fields" hidden>中。站点已使用jQuery，我通过以下代码切换单选按钮的aria-expanded属性及额外字段容器的hidden属性实现功能：

实现代码 #

JavaScript #

$(function() {
  var $radios = $('[name=spouse]');

  $radios.click(function() {
    if (this.value === 'true') {
      $('#SpouseYes').attr('aria-expanded', true);
      $('#SpouseYesFields').attr('hidden', false);
    } else {
      $('#SpouseYes').attr('aria-expanded', false);
      $('#SpouseYesFields').attr('hidden', true);
    }
  });
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <fieldset>
    <legend>step 5</legend>
    <p>Are you applying with your spouse?</p>

    <ol role="radiogroup" aria-required="true">
      <li>
        <label for="SpouseYes">
          <input id="SpouseYes"
            name="spouse"
            type="radio"
            value="true"
            aria-describedby="error-subscriber-applying-with-spouse"
            
            aria-expanded="false"
            aria-controls="SpouseYesFields">
          Yes
        </label>
      </li>
      <li>
        <label for="SpouseNo">
          <input id="SpouseNo" name="spouse" type="radio" value="false" aria-describedby="error-subscriber-applying-with-spouse">
          No
        </label>
      </li>

      <div id="error-subscriber-applying-with-spouse" class="intake-error-message" hidden>
        Please select one.
      </div>

      <!--spouse progressive disclosure-->
      <div id="SpouseYesFields" role="region" aria-labelledby="SpouseYes" class="spouse-fields" hidden>
        <li>
          <label for="label1">some label</label>
          <input id="label1" type="text">
        </li>
        <li>
          <label for="label2">some label2</label>
          <input id="label2" type="text">
        </li>
        <li>
          <label for="label3">some label3</label>
          <input id="label3" type="text">
        </li>
      </div>
    </ol>
  </fieldset>
</form>

请问这种渐进式披露的实现方式是否为适配屏幕阅读器的最佳可访问方案？有无更优的实现方法？

你的实现方向是对的，但有几个可优化的点，能让方案更贴合WCAG（Web内容无障碍指南）标准：

一、当前实现的可取之处 #

• 使用hidden属性：这是隐藏内容的标准方式，屏幕阅读器会自动忽略带有该属性的元素，比仅用CSS隐藏更可靠。
• 搭配aria-controls与aria-expanded：明确关联了单选按钮和受控区域，让屏幕阅读器用户知晓该控件具备展开/折叠的交互能力。
• 为展开区域设置role="region"和aria-labelledby：给动态显示的区域提供了清晰的标识，帮助用户理解区域用途。

二、可优化的细节 #

1. 修正HTML语义错误 #

你将<div id="SpouseYesFields">嵌套在<ol>内部，但其内部包含的<li>元素只能作为<ol>/<ul>的直接子元素，这种嵌套违反了HTML语义规范。建议调整结构：

<ol role="radiogroup" aria-required="true">
  <li>...</li>
  <li>...</li>
  <li id="error-subscriber-applying-with-spouse" class="intake-error-message" hidden>
    Please select one.
  </li>
</ol>

<!-- 将展开区域移到ol外部，内部用ol包裹列表项 -->
<div id="SpouseYesFields" role="region" aria-labelledby="SpouseYes" class="spouse-fields" hidden>
  <ol>
    <li>
      <label for="label1">some label</label>
      <input id="label1" type="text">
    </li>
    <li>
      <label for="label2">some label2</label>
      <input id="label2" type="text">
    </li>
    <li>
      <label for="label3">some label3</label>
      <input id="label3" type="text">
    </li>
  </ol>
</div>

2. 改用prop()操作布尔属性 #

在jQuery中，操作hidden、aria-expanded这类布尔属性时，prop()比attr()更准确——prop()直接操作DOM元素的属性状态，而attr()仅修改HTML属性。修正后的JS代码：

$(function() {
  var $radios = $('[name=spouse]');

  $radios.on('change', function() {
    const isYesSelected = this.value === 'true';
    $('#SpouseYes').prop('aria-expanded', isYesSelected);
    $('#SpouseYesFields').prop('hidden', !isYesSelected);
  });
});

3. 切换为change事件监听 #

用户可能通过键盘（Tab+空格/回车）选择单选按钮，click事件无法响应键盘操作，而change事件会在单选按钮状态改变时触发，无论用户用鼠标还是键盘，能保证交互的完整性。

4. 保证初始状态一致性 #

如果页面加载时默认选中了某个单选按钮（比如“No”），要同步设置对应的aria-expanded和hidden属性，避免初始状态不匹配的问题。

5. 调整错误提示的位置 #

当前错误提示放在<ol>内部不符合语义，建议将其移到<fieldset>内、<ol>之后，或者作为<ol>的一个<li>子元素。

三、优化后方案总结 #

1. 确保HTML语义合法，避免非法嵌套。
2. 使用change事件监听状态变化，支持键盘操作。
3. 用prop()操作布尔属性，保证状态准确。
4. 维持aria-controls、aria-expanded、role="region"的正确关联，帮助屏幕阅读器理解交互逻辑。
5. 同步初始状态与默认选中项。

优化后的方案完全符合WCAG标准，能很好地适配屏幕阅读器用户，同时兼顾普通用户的交互体验。

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