Re: Designing and Testing for Reflow

Hi Sabrina!

A co-worker of me gave the following note on zoom-based testing of 
reflow a while ago: is not a valid alternative because it does not 
reliably lead to the same results. Same goes for ARC Toolkit’s “Check 
Page Reflow” test.

He advised the following:

Use the add-on Chris Pederick’s Web Developer extension, you can define 
window sizes in the Web Developer extension as follows:

1. In the extension, go to the “Resize” tab and select “Edit Resize 
Dimensions …”
2. Select “Add …” and enter the following dimensions:
3. For the 320px width test, enter 334 for width (i.e. 320 px for the 
content plus 14 px for the scrollbar that almost always appears) and 800 
for height (the exact height is not critical). Add something like “320 
px wide (334)” as a description; you can add the SC number or “Reflow” 
as an additional clue).
4. Select “Add” to save the dimensions.
5. For the 256px height test, enter 256 for height and a much higher 
number for width. Add something like “256 px high” as a description; you 
can add the SC number or “Reflow” as an additional clue). Select “Add” 
to save the dimensions.

 From now on, you can simply test the success criterion by going to 
“Resize” and then using both window sizes.


Op 27-03-2024 om 21:16 schreef Sabrina Curutan:
> 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> 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>
>     *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
>