使用<figure>创建按钮组是否符合WCAG规范？求最优方案

1. <figure> 用法是否正确？ #

从HTML语义化角度来说，这种用法不合适。正如MDN描述的，<figure> 标签的设计初衷是包裹图像、插图、代码片段、图表这类独立的、可被引用的内容块，而你这里的按钮组是交互控件集合，不属于<figure>的适用场景。虽然语法上不会报错，但违背了HTML语义化的原则，会让浏览器和屏幕阅读器对内容的理解产生偏差。

2. 是否符合WCAG规范？ #

当前代码本身没有直接违反WCAG核心准则，但存在可访问性关联缺陷：

• <figcaption> 的语义是描述<figure>内的内容，屏幕阅读器不会自动将它作为按钮组的标签关联起来，使用辅助技术的用户可能无法理解"Sort By:"和后续按钮的关系。
• 按钮仅依赖aria-label提供文本说明，没有可见文本，对于部分禁用屏幕阅读器但需要视觉提示的用户（比如认知障碍用户）不友好。

3. 更优的代码实现方式 #

推荐两种符合语义化和WCAG规范的方案：

方案一：使用<fieldset> + <legend>（推荐） #

<fieldset> 原生用于分组表单控件，<legend> 作为组的标签，屏幕阅读器会自动关联两者，是处理这类互斥选择组的最佳实践：

<fieldset class="toggler-widget">
  <legend class="toggler-label">Sort By:</legend>
  <div class="button-togglers">
    <button type="button" class="choice-selected" aria-pressed="true">
      <span class="sr-only">Sort by title</span>
      <!-- 此处添加排序标题的图标 -->
    </button>
    <button type="button" aria-pressed="false">
      <span class="sr-only">Sort by date</span>
      <!-- 此处添加排序日期的图标 -->
    </button>
  </div>
</fieldset>

注：.sr-only 是视觉隐藏类，样式如下（确保文本仅对屏幕阅读器可见）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

方案二：使用<div> + role="group" #

如果不想用<fieldset>，可以用普通容器配合ARIA属性实现标签与控件组的关联：

<div class="toggler-widget">
  <h2 id="sort-group-label" class="toggler-label">Sort By:</h2>
  <div class="button-togglers" role="group" aria-labelledby="sort-group-label">
    <button type="button" class="choice-selected" aria-pressed="true">
      <span class="sr-only">Sort by title</span>
      <!-- 图标 -->
    </button>
    <button type="button" aria-pressed="false">
      <span class="sr-only">Sort by date</span>
      <!-- 图标 -->
    </button>
  </div>
</div>

额外优化点 #

• 移除冗余的title属性：aria-label和屏幕阅读器可见的文本已经足够，title对辅助技术的支持不一致，没必要重复添加。
• 保持aria-pressed状态正确切换：交互时要同步更新选中按钮的aria-pressed值，确保状态的可访问性。

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