无障碍问题：带role=button的空元素hover时aria-label不读屏

当鼠标悬停在带有aria-label="someText"和role="button"的<a>或<span>空元素上时，屏幕阅读器不会读取标签内容。这些元素特意设为空，因为是通过CSS生成形状/图像来实现按钮样式的。

当前示例代码 #

CSS 样式 #

[role="button"] {
  display: block;
  width: 4rem;
  height: 1rem;
  margin: .5rem 0;
  background-color: grey;
  cursor: pointer;
}

[role="button"]:hover {
  background-color: lightgrey
}

HTML 结构 #

<a href="javascript:void(0)" aria-label="Return to Top" tabindex="0" role="button"></a>

<div>
 <span id="acc-prev-page" aria-label="Previous Page Button"></span>
 <span tabindex="0" aria-labelledby="acc-prev-page" role="button"></span>
</div>

已尝试的方案及痛点 #

将role改为role="img"后，悬停时屏幕阅读器可以正常读取内容，但元素会被识别为「图形」（桌面端Chrome搭配NVDA）或「图像」（移动端Safari搭配VoiceOver），不符合需求——我们需要元素被识别为按钮。

更新于2022年1月11日：
找到一种可行但不够优雅的方案：使用带有role=tooltip的元素与目标<span>或<a>重叠，并设置opacity: 0，此时屏幕阅读器会读取该tooltip元素的内容。

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