如何用aria-label/aria-labelledby实现读屏器读出可见+自定义内容？

当然可以实现这个需求！核心是利用aria-labelledby属性支持多个元素ID引用的特性，它会按ID的顺序依次读取对应元素的文本内容，组合成屏幕阅读器播报的标签内容。

具体实现步骤 #

• 保留可见的地址标签元素，给它设置唯一ID；
• 添加一个仅对屏幕阅读器可见的元素（视觉上隐藏），存放自定义文本“Set-address for”；
• 给输入框的aria-labelledby属性同时设置这两个元素的ID，顺序按你想要的播报逻辑排列。

修改后的代码示例 #

<!-- 第一个输入框保持原有逻辑不变 -->
<div>
    <div id="shankar">Name</div>
    <input type="text" aria-labelledby="shankar"/>
</div>
<!-- 调整后的第二个输入框 -->
<div>
    <div id="address-label">Address</div>
    <!-- 视觉隐藏的自定义描述，仅屏幕阅读器可识别 -->
    <span id="custom-address-text" class="sr-only">Set-address for</span>
    <input type="text" aria-labelledby="custom-address-text address-label"/>
</div>

关于sr-only类的说明 #

sr-only是前端开发中常用的辅助样式类，作用是让元素在视觉上隐藏，但仍能被屏幕阅读器读取。典型的样式代码如下（可根据项目需求调整）：

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

效果验证 #

修改完成后，屏幕阅读器对第二个输入框的播报内容会变为：Set-address for Address edit text，完全匹配你的需求。

额外提示 #

• 不要在同一个控件上混用aria-label和aria-labelledby，二者优先级不同（aria-labelledby优先级更高），可能导致播报内容不符合预期；
• 如果你的自定义文本需要在页面上可见，直接移除sr-only类即可，屏幕阅读器依然会按顺序读取两个可见元素的内容。

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