How to fix ANDI css content alert

I'm running the Accessibility Name & Description Inspector tool against my web page and it is reporting this hidden content CSS alert:

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

This is the part of the HTML that is causing the error:

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

Specifically, this is the CSS class that is causing it:

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

It doesn't like the content:"\e036".

It wants me to not have it, but if I do, my glyphicon won't show on the page.

What can I do so it doesn't report it? Is there a way?

Solution

You cannot disable the warning, because content in pseudo-elements is an inherent accessibility failure:

The CSS :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted. For users who need to customize or turn off style information in order to view content according to their needs, assistive technologies may not be able to access the information that is inserted using CSS. Therefore, it is a failure to use these properties to insert non-decorative content.

You can, however, ignore the warning if the content is decorative, or if you include the substance of the inserted content elsewhere in a location that is accessible via a screen reader or other assistive technology. You can do that via title or aria-label attributes in the element, or depending on the situation, use the .sr-only class on a descriptive text element if you're using Bootstrap.

Keep in mind ANDI states that an alert is not necessarily a problem:

It's up to a human to evaluate ANDI's results and make the final decision on whether or not there is an accessibility issue.

See ANDI's guidance on how to handle this from their Alerts documentation:

Why is this an accessibility concern?

Depending on the browser being used, Content injected using this technique may not recognized by screen readers, therefore, the text may not be communicated to individuals using assistive technologies. Specifically, in Internet Explorer screen readers will not detect recognize CSS pseudo-element content.

What should be done?

If the content is meaningful or important, it should be made apparent to a blind individual using a screen reader.

If the meaning of the injected content is available elsewhere on the page, no change is needed. Otherwise, remediation options are as follows:

Abandon the CSS content injection technique and place text directly on the screen or use inline images.

Properly name and describe elements with which the injected css content associates.