Re: Designing and Testing for Reflow

Hi,

Can we not just go to the Windows settings>Display>Display resolution and set to a value that is suggested which I believe is 1280 for the width or a value that is 1024 for the height?
I typically use the 1280 x 1024 option which gets both at one time.


Alan Smith
________________________________
From: Steve Green <steve.green@testpartners.co.uk>
Sent: Thursday, March 28, 2024 1:21 PM
To: Sabrina Curutan <curutasv@gmail.com>; Schafer, Carmen <schafercg@missouri.edu>
Cc: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: RE: Designing and Testing for Reflow


I have used the 'Window Resizer' extension, but it sets the window size incorrectly (for me) when the browser window has a vertical scrollbar, in which case the actual window width is always 16px less than it should be. It sets the window width correctly if there is no vertical scrollbar. This is precisely why I always set the width manually.



The “Width and Height Display” extension just displays the window size and is accurate.

https://chromewebstore.google.com/detail/width-and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo



The “Viewport Dimensions” extension also displays the window size. It displays both the inner and outer dimensions. The inner dimensions match the sizes reported by other tools. The outer dimensions are weird – I know what they are supposed to measure, but they don’t and I can’t tell what they are measuring.

https://chromewebstore.google.com/detail/viewport-dimensions/kchdfagjljmhgapoonapmfngpadcjkhk



I mostly just rely on the dimensions that are displayed when the developer tools are open – I had forgotten that this is built-in to Chrome and is not an extension.



All the tools above give the same measurements except for the 'Window Resizer' extension, so I really wouldn’t recommend using that.



Steve





From: Sabrina Curutan <curutasv@gmail.com>
Sent: Thursday, March 28, 2024 4:39 PM
To: Schafer, Carmen <schafercg@missouri.edu>
Cc: w3c-wai-ig@w3.org
Subject: Re: Designing and Testing for Reflow



I have been using the Chrome 'Window Resizer' extension (https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) which has a large number of good reviews.



My project's Statement of Work specifies Google Chrome as the sole browser to be used so I haven't been testing other browsers like IE or FF.



On Thu, 28 Mar 2024 at 12:35, Schafer, Carmen <schafercg@missouri.edu<mailto:schafercg@missouri.edu>> wrote:

We have been getting different outcomes testing for Success Criterion 1.4.10 Reflow (Level AA). What browser extension are you using? We have tried a few different ones including this one https://whatismyviewport.com/. We since went back to using the built in browser tools to resize the viewport before testing at 400%.



From: Steve Green <steve.green@testpartners.co.uk<mailto:steve.green@testpartners.co.uk>>
Sent: Wednesday, March 27, 2024 11:42 AM
To: Sabrina Curutan <curutasv@gmail.com<mailto:curutasv@gmail.com>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: RE: Designing and Testing for Reflow



WARNING: This message has originated from an External Source. This may be a phishing expedition that can result in unauthorized access to our IT System. Please use proper judgment and caution when opening attachments, clicking links, or responding to this email.

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