Back to Guidelines
- Perceivable
- WCAG 1.1.1
- Level A
What Are Decorative Background Images?
Decorative backgrounds improve the visual feel of a page, but they should not carry meaning or interrupt the accessibility tree.
Use CSS backgrounds, hidden wrappers, or purely visual elements when the image exists only for style.
- Screen reader users who should not hear decorative visuals.
- Keyboard users who need a stable, predictable tab order.
- Everyone who benefits from a cleaner content hierarchy.
- Improves Accessibility
- Keeps Content Clear
- Better User Experience
- Supports Compliance
Good vs Bad Background Image Examples
Use the tabs to compare silent decorative backgrounds with exposed decorative backgrounds.
CSS decorative background hidden from assistive tech
html live code
<div class="decorative-banner" aria-hidden="true"></div>
<style>
.decorative-banner {
background-image: url('/images/waves-bg.svg');
background-size: cover;
background-repeat: no-repeat;
}
</style>Why this is correct:
- Uses CSS for purely visual decoration.
- Hides the element from assistive technologies.
- Keeps the page semantics focused on real content.
Background art skipped by screen readers
html live code
<div class="decorative-banner" aria-hidden="true"></div>Why this is correct:
- Decorative art stays visual only.
- Does not add noise to screen reader output.
- Lets users focus on meaningful content.
Implementation Checklist
Progress0 / 6 completed (0%)
Knowledge Check
Answer Yes or No to test your understanding of decorative backgrounds.
Score: 0 / 5 · Answered: 0 / 5