如何让屏幕阅读器完整读取role为button的div标签内容

当前屏幕阅读器只读出“open button”，是因为aria-label属性的优先级高于内部文本和title属性，它会直接定义按钮的朗读内容，再加上role="button"的标识。要实现读出“open button go to file”，可以用以下几种方法：

方法1：直接修改aria-label内容 #

这是最简单直接的方式，把aria-label的值改成包含所有需要朗读的文本：

<div role="button" aria-label="Open go to file" tabindex="0">
   <span title="open file">go to file</span>
</div>

修改后，屏幕阅读器会读出“Open go to file button”（不同阅读器的朗读顺序可能略有差异，但会包含所有目标内容）。

方法2：用aria-labelledby合并多元素文本 #

如果需要保留视觉显示的文本与朗读文本分离（比如视觉只显示“go to file”，但需要额外读出“Open”），可以使用aria-labelledby关联多个元素的内容：

<style>
/* 视觉隐藏但屏幕阅读器可见的样式 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>

<div role="button" aria-labelledby="btn-label btn-text" tabindex="0">
   <span id="btn-label" class="sr-only">Open</span>
   <span id="btn-text" title="open file">go to file</span>
</div>

这里sr-only类的元素会被视觉隐藏，但屏幕阅读器会读取它的内容，再结合可见的span文本，最终读出“Open go to file button”。

优化建议：优先使用原生<button>元素 #

用div模拟按钮需要手动处理键盘交互（回车、空格触发点击），而原生<button>自带无障碍支持和键盘交互，更符合无障碍标准：

<button aria-label="Open go to file" title="open file">
   go to file
</button>

这个写法不需要额外添加tabindex和键盘事件，屏幕阅读器也能正确读出目标内容。

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