The CSS background image conveys information and is missing text alternative for assistive technology users.
The alternative text for informative or actionable CSS images MUST be available as programmatically-discernible text in the HTML content.
HOW TO FIX:
Fix this issue by using ONE of the following techniques:
1. Use an aria-label or aria-labelledby attribute to provide alternative text.
<a href="http://www.facebook.com/dequesystems" class="fb" aria-label="Deque's Facebook page"></a>
<span class="fbicon" role="img" aria-label="Facebook"></span>
2. Use CSS clipped text to provide screen reader accessible (non-visible) alternative text.
<a href="https://www.facebook.com/dequesystems" class="fb">
<span class="sr-text">Deque's Facebook page</span>
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%) ;
Deque University: https://dequeuniversity.com/class/images2/alt-text/background
W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/images/
People who are blind cannot see images on a page. In order to give people who cannot see an image access to the information conveyed by the image, it must have a text alternative. The text alternative must describe the information or function represented by the image. Screen readers can then use the alternative text to convey that information to the screen reader user.
It is not possible to provide alternative text by adding an alt attribute directly to CSS background images. Images that convey content should not generally be placed in CSS. However, if it is necessary to do so, you can add alternative text to informative and actionable CSS images using other methods.
Usage described in documentation
Demonstration of all states
Interactive state (screen readers)
Visual regression tests
Navigation (only keyboard / only mouse)
Component render legibly
Element status (At Rest/Pressed/Selected/Read Only/Disabled)
It turns out it’s not obvious how to fix that problem and if it is problem at all. We can proceed after feedback from our a11y consultants.