FeaturesPricingAudit GuideFree StatementDashboard →

Prevent Unexpected Content Movement

Learn how to prevent unexpected content shifts and layout changes that disorient users.

6 min read
moderate severityWCAG Level AWCAG 2.1 Success Criterion 2.4.4 (motion) and 2.3.3 (flashing)Auto-detectable

What Is It?

Unexpected content movement includes: ads loading and shifting layout, modal dialogs appearing without warning, images or videos resizing, infinite scroll jumping. Layout shifts frustrate all users.

Affected users: Users with vestibular disorders (BPPV, Meniere's disease), users with ADHD, users with cognitive disabilities, motion-sensitive users, mobile users

Why It Matters

Users with vestibular disorders (affecting balance) suffer vertigo from unexpected movement. Users with ADHD lose focus when content shifts. Poor Core Web Vitals metric (CLS). Mobile users especially affected.

Good news: Automated tools like Lighthouse measure Cumulative Layout Shift (CLS). Fixing requires code changes: setting dimensions, reserving space, lazy loading properly.

How to Detect This Issue

Load page and watch for layout shifts. Disable ads blockers and watch for ad shifts. Check DevTools Core Web Vitals metrics. Test on slow network (ads load slowly).

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<img src="product.jpg"> <!-- no dimensions, loads and shifts -->
After (accessible)
<img src="product.jpg" width="600" height="400" alt="Product"> <!-- dimensions set, no shift -->

Always set width and height on <img> tags. This reserves space before image loads, preventing layout shifts.

React / Next.js

Before
Ads loaded dynamically without space reserved, pushing content down
After
<div style={{minHeight: "250px", backgroundColor: "#eee"}}>
  {adLoaded && <Ad />}
</div>

Reserve space for dynamic content like ads. Use min-height or aspect-ratio to prevent shifts when content loads.

WordPress

Before
Sidebar ads loaded after page render, pushing content
After
Configure WordPress theme to reserve ad space (min-height, flex basis) before ads load

In WordPress theme, ensure ad spaces have minimum dimensions. Use CSS flexbox or grid to maintain layout while loading.

Shopify Liquid

Before
Product images load without aspect ratio, layouts shift
After
<img src="product.jpg" style={{aspectRatio: "1 / 1"}} alt="Product name">

Use CSS aspect-ratio or reserve padding-bottom to maintain space. Shopify product images should have consistent dimensions.

Common Mistakes

✗

Images without width and height attributes (loads slowly, shifts)

✗

Ads or popups appearing suddenly without layout adjustment

✗

Infinite scroll adding content without smooth transitions

✗

Modals appearing with :focus trapped, causing unexpected visual shift

✗

Animations that exceed 3 seconds (too long, distracting)

Frequently Asked Questions

What's Cumulative Layout Shift (CLS)?
CLS measures unexpected layout shifts. Target: <0.1. Avoid shifts by setting dimensions on images/videos, reserving space for dynamic content, and avoiding animations.
How do I reserve space for ads that load late?
Set min-height on ad container: <div style={{minHeight: "250px"}}>Ad loads here</div> Or use aspect-ratio: aspect-ratio: 300 / 250;
Are animations OK if they don't shift layout?
Animations (movement, scaling) are generally OK but avoid: sudden motion, flashing (3+ flashes per second), animations longer than needed. Respect prefers-reduced-motion.
Should I disable ads for accessibility?
No, but reserve space for ads and load them properly. Lazy load ads below fold so they don't shift top content. Use intersection observer for smart loading.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides