Re: Designing and Testing for Reflow

Thank you for all of the feedback! I am on a project that deals with very
complex UI's (including visuals like https://www.tiki-toki.com/) and need
to meet the Reflow SC.

Does anyone have examples of websites with large data charts,
images/diagrams/graphs, and scrollable UI like the link above that meet
WCAG 2.0-2.2 Level AA compliance?

I would love to be able to test out the webpages at 400% zoom now that I'm
equipped with the proper technique!

On Wed, 27 Mar 2024 at 17:29, Steve Green <steve.green@testpartners.co.uk>
wrote:

> 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>
> 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
>
>
>
>
>
>