仅含SVG的无文本按钮无障碍优化咨询：替代aria-labelledby方案

你的问题本质是伪元素的内容无法被屏幕阅读器等辅助技术识别，所以必须给按钮本身添加可被读取的语义标签，下面是具体的解决方案和解释：

• 为什么不推荐仅用img的alt属性？
  你的结构是button包裹img，屏幕阅读器会优先识别按钮的语义标签，而非内部img的alt。即使给img设置了alt，当用户通过键盘聚焦到按钮时，辅助技术还是会以按钮的语义为主，容易造成信息混乱或缺失。

• 最优方案：给button添加aria-label
  直接在button元素上设置aria-label是最直接有效的方式，屏幕阅读器会直接读取该属性的内容，完全满足无障碍要求，同时不影响原有的视觉hover提示。

  修正后的HTML代码：

  <button aria-label="Delete entity">
    <img src="unsplash.it/200/200" width="20" class="delete action-icon" alt=""/>
  </button>
  

  这里把img的alt设为空字符串，是为了避免屏幕阅读器重复读取内容（按钮已经通过aria-label明确了功能）。如果你的图标是内联SVG，还可以给SVG加上aria-hidden="true"，让辅助技术忽略图标本身。

• 保留hover伪元素提示
  你原来的CSS伪元素提示可以继续保留，它是给视觉用户的友好补充，只要保证aria-label的内容和伪元素的content一致即可，确保视觉和无障碍信息的统一性。

• 为什么aria-labelledby不可行？
  正如你所说，伪元素不属于DOM中的真实节点，无法设置id，因此没法通过aria-labelledby关联到它的内容，所以aria-label是更适合的选择。

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