为设置输入框值的按钮/标签配置正确的ARIA属性与角色

当一组按钮（或标签）可分别为输入框设置不同值，且输入框支持用户手动编辑时（类似带“其他，自行输入”选项的单选按钮组），这些元素应具备何种ARIA属性与角色？

当前使用的方案1 #

用户给出的第一个实现代码：

JavaScript #

$("label").on("click", (event) => {
  const text = event.target.textContent;
  $("#text").val(text);
});

CSS #

label {
  display: block;
  cursor: pointer;
}

HTML #

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

<form action="javascript:void(0)">
  <label for="text">Text A</label>
  <label for="text">Text B</label>
  <label for="text">Text C</label>
  <input type="text" id="text" />
</form>

用户疑问：此处使用label关联输入框，是否应添加aria-controls属性、改用button元素或修改role属性？

考虑的方案2 #

用户给出的第二个备选实现代码：

JavaScript #

$("label:not(#text-label)").on("click", (event) => {
  const text = event.target.textContent;
  $("#text-label").text(text);
  $("#text-label").focus();
});

CSS #

label {
  display: block;
  cursor: pointer;
}

input[type="radio"] {
  display: none;
}

label[contenteditable],
label[contenteditable="true"] {
  border: 1px solid black;
  display: inline-block;
  min-width: 12rem;
  padding: 0.25rem;
  white-space: nowrap;
}

label[contenteditable],
label[contenteditable="true"] br {
  display: none;
}

label[contenteditable],
label[contenteditable="true"] * {
  display: inline-block;
  white-space: nowrap;
}

HTML #

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

<form action="javascript:void(0)">
  <input id="a" type="radio" name="text" />
  <label for="a">Text A</label>
  <input id="b" type="radio" name="text" />
  <label for="b">Text B</label>
  <input id="c" type="radio" name="text" />
  <label for="c">Text C</label>
  <input id="text" type="radio" name="text" />
  <label id="text-label" for="text" contenteditable="true"></label>
</form>

用户疑问：该方案是否比方案1更优？

方案1的问题与优化建议 #

方案1中多个label绑定同一个input的做法不符合HTML规范——一个input只能对应一个label，多标签绑定会导致屏幕阅读器解读混乱，无法正确建立语义关联。

正确优化方向： #

1. 改用button替代多余label
   这些元素的核心功能是“触发设置输入框值的动作”，而非“标注输入框”，用button更符合语义，屏幕阅读器能直接识别其可交互性，无需额外设置role。
2. 添加aria-controls明确关联
   给每个按钮加上aria-controls="text"，告知辅助技术该按钮控制的是ID为text的输入框。
3. 保留单个真实label标注输入框
   给输入框添加一个描述性label，比如<label for="text">自定义文本</label>，确保输入框的语义标注清晰。

优化后代码示例：

<form action="javascript:void(0)">
  <label for="text">自定义文本</label>
  <button type="button" aria-controls="text">Text A</button>
  <button type="button" aria-controls="text">Text B</button>
  <button type="button" aria-controls="text">Text C</button>
  <input type="text" id="text" />
</form>

$("button").on("click", (event) => {
  const text = event.target.textContent;
  $("#text").val(text);
  // 可选：让输入框获得焦点，提升操作流畅度
  $("#text").focus();
});

方案2的问题分析 #

方案2试图用单选组模拟场景，但存在多处无障碍缺陷：

1. 隐藏单选按钮的问题：display: none会让屏幕阅读器完全忽略这些单选按钮，破坏了单选组的互斥语义结构，辅助技术无法识别这是一组选项。
2. contenteditable标签的语义混淆：label的核心作用是关联表单控件，将其设为可编辑会让屏幕阅读器无法区分它是“标签”还是“输入区域”，语义逻辑混乱。
3. 状态不同步：用户编辑可编辑标签时，无法同步更新单选按钮的选中状态，逻辑上不匹配“互斥选择+自定义输入”的需求。

推荐的标准实现方案 #

对于“预设选项+自定义输入”的经典场景，正确的无障碍实现应遵循以下规则：

1. 使用单选按钮组承载预设选项，若要自定义样式，使用视觉隐藏技巧（如position: absolute; clip: rect(0,0,0,0);）而非display: none，保留辅助技术的识别能力。
2. 添加“其他（自行输入）”单选选项，选中时显示对应的文本输入框。
3. 用aria-expanded或aria-hidden控制输入框的显示状态，确保辅助技术能感知可见性变化。
4. 给自定义输入框添加aria-describedby，关联到“其他”选项的标签，明确语义关系。

示例代码：

<form action="javascript:void(0)">
  <fieldset>
    <legend>选择或输入文本</legend>
    <div>
      <input type="radio" id="option-a" name="text-option" checked>
      <label for="option-a">Text A</label>
    </div>
    <div>
      <input type="radio" id="option-b" name="text-option">
      <label for="option-b">Text B</label>
    </div>
    <div>
      <input type="radio" id="option-other" name="text-option">
      <label for="option-other">其他</label>
      <input type="text" id="custom-text" aria-describedby="option-other" hidden>
    </div>
  </fieldset>
</form>

$('input[name="text-option"]').on('change', function() {
  const isOtherSelected = $(this).attr('id') === 'option-other';
  $('#custom-text').toggle(!isOtherSelected);
  if (isOtherSelected) {
    $('#custom-text').focus();
  }
});

/* 视觉隐藏但保留无障碍识别的样式 */
.hidden-visually {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

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