如何正确让屏幕阅读器将<span>内的特殊字符读取为指定内容（规避aria-label误用问题）

嘿，这个问题我之前也踩过坑！W3C validator的提示确实没毛病，普通<span>用aria-label确实属于误用，毕竟MDN也说了，这个属性只在交互式元素、组件、地标、图片、iframe这类元素上才被规范支持。别担心，给你两个靠谱的解决方案：

• 方案一：视觉隐藏文本+隐藏特殊字符
  这个方法兼容性拉满，几乎所有屏幕阅读器都能完美识别。思路是用aria-hidden="true"让屏幕阅读器忽略掉♥，同时添加一段视觉上看不见但阅读器能读到的“love”文本。代码示例：

  <p>Coded with <span aria-hidden="true">♥</span><span class="visually-hidden">love</span> by Haley Halcyon</p>
  

  对应的视觉隐藏CSS要这么写（这是行业通用的标准写法，不会影响页面布局）：

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  

• 方案二：给span添加img角色
  如果觉得方案一的CSS有点麻烦，也可以给<span>加上role="img"，这样它就符合MDN里提到的“图片类元素”范畴，用aria-label就合法了，validator也不会再报错。代码示例：

  <p>Coded with <span role="img" aria-label="love">♥</span> by Haley Halcyon</p>
  

  这个方法代码更简洁，适合现代浏览器和屏幕阅读器环境。

你可以根据自己的需求选，我个人更推荐方案一，毕竟兼容性没话说～

内容来源于stack exchange