RE: Designing and Testing for Reflow

Ideally, you ought to test this success criterion in different browsers. Although the behaviour is usually the same, I have seen plenty of times when it wasn’t. In one bizarre instance, Internet Explorer 11 was the only browser that reflowed correctly, while the layout broke horribly in all the other browsers.

Steve

From: Sabrina Curutan <curutasv@gmail.com>
Sent: Wednesday, March 27, 2024 8:16 PM
To: Steve Green <steve.green@testpartners.co.uk>
Cc: w3c-wai-ig@w3.org
Subject: Re: Designing and Testing for Reflow

Hi Steve, thanks for your feedback. That's good info to know about the DOM Inspector.

To confirm, I used a browser extension to resize the dimensions of the window (1280 x 1024 for max height, 1280 x 720 for lower res) then I used CMD+ on my Mac until I reached 400% zoom on Chrome. Now I should be ready to test out my website to meet the Reflow SC?

Thanks again,

Sabrina



On Wed, 27 Mar 2024 at 12:41, Steve Green <steve.green@testpartners.co.uk<mailto:steve.green@testpartners.co.uk>> wrote:
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<mailto:curutasv@gmail.com>>
Sent: Wednesday, March 27, 2024 3:54 PM
To: w3c-wai-ig@w3.org<mailto: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