如何修复ANDI CSS内容警报

rdrgkggo  于 2023-03-25  发布在  其他
关注(0)|答案(1)|浏览(107)

我正在对我的网页运行Accessibility Name & Description Inspector工具,它报告了此隐藏内容CSS警报:
CSS内容警报:(1)内容已使用CSS伪元素::before或::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"
它希望我不要拥有它,但如果我拥有它,我的象形文字就不会显示在页面上。
我该怎么做才能不让它上报呢?有办法吗?

qhhrdooz

qhhrdooz1#

不能禁用该警告,因为伪元素中的内容是inherent accessibility failure
CSS :before:after伪元素指定内容在元素的文档树内容之前和之后的位置。content属性与这些伪元素一起指定插入的内容。对于需要自定义或关闭样式信息以便根据需要查看内容的用户,辅助技术可能无法访问使用CSS插入的信息。因此,使用这些属性插入非装饰性内容是失败的。
但是,如果内容是装饰性的,或者如果您将插入内容的内容包含在可通过屏幕阅读器或其他辅助技术访问的位置,则可以忽略警告。您可以通过元素中的titlearia-label属性来执行此操作,或者根据情况,如果使用Bootstrap,请在描述性文本元素上使用.sr-only类。
请记住,ANDI指出,警报不一定是问题:
评估ANDI的结果并做出是否存在可访问性问题的最终决定是由人来完成的。
请参阅ANDI关于如何从their Alerts documentation处理此问题的指导:

为什么这是一个可访问性问题?

根据所使用的浏览器,使用此技术注入的内容可能无法被屏幕阅读器识别,因此,文本可能无法与使用辅助技术的个人进行通信。具体而言,在Internet Explorer中,屏幕阅读器将无法检测识别CSS伪元素内容。

应该怎么做?

如果内容是有意义的或重要的,它应该是显而易见的盲人使用屏幕阅读器。
如果注入内容的含义在页上的其他位置可用,则无需更改。否则,修正选项如下所示:

  • 放弃CSS内容注入技术,将文本直接放置在屏幕上或使用内联图像。
  • 正确命名和描述注入的css内容关联的元素。

相关问题