WebAIM - Web Accessibility In Mind

E-mail List Archives

CSS background image: MS A11y Insights for Web question


From: Micky Hulse
Date: Feb 21, 2020 4:36PM


I have an HTML element that has a CSS class applied which uses a background SVG.

<header class="heroheader hexagonsbackground hexagonsbackground-secondary">
... content ...

When running an assessment using Microsoft's Chrome browser a11y
Insights plugin, it's telling me:

Image type: CSS background-image
Coded as: (no value)
Accessible name: (no value)

Out of curiosity, is there a way for me to mark this image as
decorative? Or, do I just ignore this Accessibility Insights result
and move on with my life? :D

For future reference, am I doing anything wrong in terms of a11y and
decorative background imagery? Is there a better way to do this in
terms of a11y?

Many thanks in advance!