Is the image correctly implemented as a foreground image or background CSS attribute?

Goal

When adding an image to a page, you have many options for implementation, including embedded SVGs, image elements, picture elements, font icons, and CSS background attributes.

When it comes to making the images accessible, however, we can group these implementations into two groups: foreground implementations and background implementations.

If the image is embedded in the HTML as an SVG element, or an image element, we’ll call it a foreground image.

If the image is implemented using CSS background attributes, we’ll call this a background image.

See Identifying Image Types to determine whether the implementation should use a foreground or a background image.

Why this matters

Screen readers and other non-visual presentation of content need to know what an image means if it’s meaningful, but if the image is just a decoration or repeats the content next to it, it’s just noise to a screen reader user. Ensuring that the image uses the right implementation makes our pages easier for everyone to understand. 

There are a wide range of ways to implement icons and images on the web. The recommendations below represent the simplest implementations that are accessible, and I recommend them precisely because they are simple. Don’t make your job harder than it has to be!

How to implement a foreground image

Foreground images provide information or content to the page, so they should appear in the HTML.

To implement a foreground icon, you can:

• Put it in the HTML as an <img> or <svg> element .
• Give the font icon’s parent element a role="img" attribute

How to implement a background icon

Background icons are used for decorative or redundant information that would distract a user of assistive technology if it was provided.

To implement a background icon, you should:

• Put it in the CSS as a background or background-image attribute.

How to test

Manual testing

1. See Identifying Image Types to determine whether the implementation should use a foreground or a background image.
2. Right-click the icon on the page and check to see how it’s implemented. 
   1. Foreground images will display as <svg> or <img> elements in the HTML
   2. Background images will not display in the HTML. They will be listed as background or background-image attributes in the CSS of the container displaying the icon.

Automated testing

HTML and CSS validators can identify if the implementation method you used is not written semantically, but cannot identify if the method you used is appropriate for the context.