Web snippet: Ignoring decorative images

Not every image on a website needs an alt text.

Decorative images are purely visual elements such as icons, spacers, or background graphics that do not add meaningful content. According to the W3C Web Accessibility guidelines, these images should be ignored by screen readers and should not have an alt attribute.

The AltTextLab Web Snippet makes it easy to skip decorative images so that AI-generated alt text is applied only to meaningful visuals.

There are two ways to ignore images:

Ignore individual images

You can explicitly mark an image to be skipped by adding either a CSS class or a data attribute.

Option A: CSS Class

Add the atlab-ignore class to the <img> tag:

<img class="icon atlab-ignore" src="icon.svg" />

Option B: Data Attribute

Add the data-atlab-ignore attribute:

<img class="icon" src="icon.svg" data-atlab-ignore />

In both cases, the Web Snippet will not generate alt text for the image.

If an alt text was already generated earlier, the image will still be ignored and will remain without alt text.

Ignore images by size

Small images (like 24×24 px or 32×32 px icons) are typically decorative.

By default, the Web Snippet automatically skips all images smaller than 50 px in either width or height.

You can customize this minimum size by using the data-min-natural-size parameter when embedding the Web Snippet.

For advanced configuration details, see the Web Snippet Installation & Configuration guide.

Summary

• Use atlab-ignore or data-atlab-ignore to skip specific images.
• Use data-min-natural-size to control or disable automatic size-based ignoring.