如何正确为组合框（输入框+自动补全列表）使用aria-labelledby属性？

嘿，我来帮你搞定这个aria-labelledby的疑问！你提到的W3C示例其实有个隐含前提——ex1-label肯定是页面上某个已经存在的、带有文本内容的元素ID，比如可能是一个标题或者标签，只是示例里没写全。咱们一步步拆解你的问题：

为什么你会觉得“描述性不足”？ #

示例里只引用了单个ID，确实可能显得单薄，但aria-labelledby的强大之处在于它支持多个ID组合，用空格分隔就行。读屏器会按顺序读取每个ID对应元素的文本，组合成更完整、更有描述性的可访问名称。

比如你可以给输入框同时关联主标签和提示文本：

<!-- 先定义带有ID的描述元素 -->
<h3 id="fruit-select-label">选择你的水果</h3>
<span id="fruit-select-hint">输入名称快速筛选选项</span>

<!-- 组合组件引用多个ID -->
<div class="combobox-wrapper">
  <div>
    <input type="text" aria-labelledby="fruit-select-label fruit-select-hint">
  </div>
  <ul aria-labelledby="fruit-select-label"></ul>
</div>

这样读屏器会读出“选择你的水果，输入名称快速筛选选项”，比单个标签的描述性强太多。

关于aria-labelledby取值的关键规则 #

• 必须引用现有元素的ID：取值只能是页面中已经存在的元素ID，不能直接写文本（直接写文本用aria-label）。
• 支持多ID组合：多个ID用空格分隔，读屏器会按顺序拼接文本，适合需要多层描述的场景。
• 优先级高于aria-label：如果一个元素同时设置了aria-labelledby和aria-label，读屏器会优先采用前者的内容。
• 组合组件共享标签合理：像示例里的输入框和下拉列表共享同一个标签是符合规范的，因为它们属于同一个功能组（下拉是输入框的选项列表），这样用户能清晰感知到两者的关联。

额外注意点 #

• 被引用的元素最好是可见的文本元素，不要用隐藏的无意义元素，否则会误导辅助技术用户。
• 如果是自定义组件（比如combobox），除了aria-labelledby，还要配合其他ARIA属性（比如aria-autocomplete、aria-expanded）来完善可访问性。

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