如何让button获焦时朗读指定input的描述？无障碍技术咨询

问题原因 #

你当前的代码中，即便给button设置了aria-labelledby="inputid"，屏幕阅读器仍会朗读按钮自身文本，核心原因是：按钮的可见文本默认会被屏幕阅读器纳入朗读内容，部分阅读器会同时读取aria-labelledby关联的内容与按钮自身文本；另外，关联的input是单选框类型，屏幕阅读器会额外朗读“单选按钮”的控件类型描述，这可能也不是你想要的结果。

可行方案 #

方案1：隐藏按钮自身文本的可访问性，保留关联Input的描述 #

通过aria-hidden="true"包裹按钮的可见文本，阻止屏幕阅读器读取它，同时保留aria-labelledby关联input的设置。如果可以接受朗读内容包含“单选按钮”的控件说明，这个方案最直接：

<fieldset>
    <!-- 视觉隐藏单选框 -->
    <input type="radio" id="inputid" aria-label="read me" style="position: absolute; left: -10000px;">
    <button aria-labelledby="inputid">
        <span aria-hidden="true">don't read me</span>
    </button>
</fieldset>

方案2：使用独立的辅助文本元素（推荐） #

如果不需要朗读“单选按钮”的控件类型，或者希望更灵活地控制朗读内容，可以创建一个视觉隐藏的辅助文本元素，让按钮和单选框都关联这个元素：

<fieldset>
    <!-- 视觉隐藏的辅助描述文本 -->
    <span id="input-desc" class="sr-only">read me</span>
    
    <!-- 视觉隐藏单选框，并关联辅助文本 -->
    <input type="radio" id="inputid" aria-labelledby="input-desc" style="position: absolute; left: -10000px;">
    
    <!-- 按钮关联辅助文本，同时隐藏自身可见文本 -->
    <button aria-labelledby="input-desc">
        <span aria-hidden="true">don't read me</span>
    </button>
</fieldset>

<!-- 标准的视觉隐藏样式（建议放在CSS文件中） -->
<style>
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
</style>

这个方案的优势是：

• 完全控制朗读内容，不会混入控件类型描述
• 单选框和按钮共享同一描述，保证无障碍体验的一致性
• 使用标准的sr-only类，比left: -10000px更可靠，避免因页面滚动等问题导致元素意外显示

关键注意事项 #

• 不要直接移除按钮的可见文本，否则视觉用户无法理解按钮功能，无障碍设计需要兼顾视觉与屏幕阅读器用户
• 视觉隐藏表单控件时，优先使用标准的sr-only类，确保在所有屏幕阅读器和浏览器中都能正确识别

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