RE: Designing and Testing for Reflow

If the content is designed to scroll vertically, you set the browser window width to 1280px then set the zoom level to 400%. WCAG does not specify what the browser window height should be. We choose to test at the maximum height our monitor allows (usually 1080px) and at reduced heights to simulate lower resolution monitors. The reduced height reveals or exacerbates any issues caused by sticky headers, footers and other floating elements.

In the rare case of content designed to scroll horizontally, you set the browser window height to 1024px then set the zoom level to 400%.

We don’t use the DOM Inspector to set the browser window size, mainly because we don’t know exactly what it’s doing. Instead, we have a browser extension that displays the window size, and we set the width or height manually.

Steve Green
Managing Director
Test Partners Ltd


From: Sabrina Curutan <curutasv@gmail.com>
Sent: Wednesday, March 27, 2024 3:54 PM
To: w3c-wai-ig@w3.org
Subject: Designing and Testing for Reflow

Hi W3 Community,

Inquiring how others test their web pages to meet Success Criterion 1.4.10 Reflow (Level AA). I tried zooming in a Chrome window on my large-screen monitor to 400%, a Chrome window on my laptop monitor to 400%, and used inspect to resize the window size to 320px wide. Unfortunately, all have produced different results.

Looking to see if anyone can provide the most correct/proper way to test out a website in Chrome.

Thanks for your help!

Sabrina