如何修复ANDI工具检测出的CSS伪元素内容注入告警？

我正在使用Accessibility Name & Description Inspector（ANDI）工具检测网页，工具报出以下隐藏内容CSS告警：

CSS Content Alerts: (1)
Content has been injected using CSS pseudo-elements ::before or ::after.

触发告警的HTML代码如下：

<i _ngcontent-nbn-c320="" role="img" class="glyphicon glyphicon-volume-off hANDI508-hasHiddenCssContent" title="alerts sounding" ng-reflect-ng-class="[object Object]">

具体触发告警的CSS类为：

glyphicon-volume-off:before{content:"\e036"}

工具不认可其中的content:"\e036"，要求移除该属性，但移除后glyphicon图标将无法正常显示。请问有什么方法可以让工具不再报此告警？

可行的解决方法 #

• 补充完整的可访问性标识：当前元素已设置role="img"，但ANDI担心CSS注入的图标内容无法被辅助技术识别。可以添加aria-label属性明确图标语义，与title属性互补：

  <i role="img" class="glyphicon glyphicon-volume-off" title="alerts sounding" aria-label="alerts sounding"></i>
  

  补充后，工具会确认元素的可访问性信息已明确，大概率会停止触发告警。

• 替换为SVG图标：放弃依赖CSS伪元素的字体图标，改用SVG图标。SVG本身是语义化图像元素，无需通过伪元素注入内容，从根源上消除告警。示例代码：

  <svg aria-label="alerts sounding" role="img" viewBox="0 0 16 16" class="icon-volume-off">
    <path d="M10.478 2.037a.75.75 0 0 0-.528-.69l-6.5-1.5a.75.75 0 0 0-.813.691l-1.5 6.5a.75.75 0 0 0 .69.813l6.5 1.5a.75.75 0 0 0 .813-.69l1.5-6.5Z"/>
    <path d="M12.963 10.478a.75.75 0 0 0-.69-.528l-6.5-1.5a.75.75 0 0 0-.813.691l-1.5 6.5a.75.75 0 0 0 .69.813l6.5 1.5a.75.75 0 0 0 .813-.69l1.5-6.5Z"/>
    <path d="M15.421 13.921a.75.75 0 0 0-.65-.97l-6.5-1.5a.75.75 0 0 0-.813.691l-1.5 6.5a.75.75 0 0 0 .69.813l6.5 1.5a.75.75 0 0 0 .813-.69l1.5-6.5Z"/>
  </svg>
  

  同时可以通过CSS调整SVG的大小、颜色，保持原图标样式。

• 临时添加ANDI例外：如果前两种方案暂时无法落地，可以在ANDI工具的设置中找到忽略规则，将glyphicon-volume-off类添加到忽略列表。但这只是临时规避，不解决本质的可访问性问题，建议优先采用前两种方法。

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