Hide decorative elements from assistive technology

Screen readers announce every image and icon—decorative elements clutter the experience with meaningless 'image, decorative border, image, bullet' announcements.

Quick Reference

• Use alt='' (empty) for decorative images—not alt='image' or missing alt
• Add aria-hidden='true' to decorative SVGs and icons
• Use CSS background-image for purely decorative visuals
• Role='presentation' removes semantic meaning from elements
• Do not automatically raise performance findings on decorative micro-assets unless the snippet shows real layout instability
• Example safe pattern: <img src="/divider.svg" alt="" aria-hidden="true"> is usually a decorative no-op, not a finding by itself

Check

Verify decorative images have empty alt attributes (alt=''), decorative icons use aria-hidden='true', and background images used for decoration are not announced by screen readers. Do not report decorative images as accessibility or performance failures unless the code shows a concrete problem rather than a hypothetical optimization.

Fix