使用aria-describedby时内容重复朗读问题及屏幕阅读器类处理咨询

使用aria-describedby关联屏幕阅读器专属文本时，出现内容重复朗读的问题：按钮的<p>描述文本被屏幕阅读器朗读两次，且通过Option+Control+箭头导航时，该<p>标签仍会被单独聚焦朗读。现有代码如下：

HTML代码 #

<button class="button1 " type="button" id="refresh" aria-label="Refresh QR" aria-describedby="refreshDesc"> </button> 
<p id="refreshDesc" class="screenreader-only">Refreshing will generate a new QR code.</p>

CSS代码（存在类名错误） #

screenreader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: 0;  
}

一、解决重复朗读问题 #

重复朗读的核心原因是：<p>是语义化段落标签，即使视觉隐藏，屏幕阅读器的逐元素导航模式仍会识别并读取它；同时按钮通过aria-describedby再次调用该文本内容，导致两次播报。解决方法如下：

• 替换语义容器为非语义元素：将<p>改为<span>，避免屏幕阅读器将其识别为独立的可浏览元素，仅作为aria-describedby的文本来源存在。修改后HTML：

<button class="button1" type="button" id="refresh" aria-label="Refresh QR" aria-describedby="refreshDesc"> </button> 
<span id="refreshDesc" class="screenreader-only">Refreshing will generate a new QR code.</span>

• 保留语义容器的替代方案：若必须使用<p>，可添加role="presentation"（或role="none"）让屏幕阅读器忽略其段落语义，仅保留文本内容供aria-describedby调用：

<p id="refreshDesc" class="screenreader-only" role="presentation">Refreshing will generate a new QR code.</p>

二、正确处理屏幕阅读器专属类 #

原CSS存在类名错误（HTML用screenreader-only，CSS写screenreader），且缺少关键属性。正确的类需满足：视觉完全隐藏、不干扰交互、仍能被辅助技术读取。修正后的CSS：

.screenreader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%); /* 兼容现代浏览器 */
  white-space: nowrap; /* 防止文本截断 */
  border: 0;
  pointer-events: none; /* 禁止鼠标点击 */
}

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