E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Mark Magennis
Date: Mon, Nov 30 2020 9:38AM
Subject: Testing 1.4.10 Reflow
No previous message | Next message →

I'm having trouble understanding how to test for this. The SC says this applies to "Vertical scrolling content at a width equivalent to 320 CSS pixels" and the note says "320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom". So I assumed that either of the following approaches would be sufficient and that both would give the same results:

1. Resize the browser window to a width of 320px.
2. Resize the browser window to a width of 1280px and zoom to 400%.

But I've tested this in Chrome on bbc.com/news using the Window Resizer extension v.2.6.4 and the results aren't the same. I've tried changing the Window size and changing the Viewport size but in both cases the results aren't the same.

Can anyone tell me what I'm not understanding here and what testing process I should be following?

Thanks,
Mark

Mark Magennis
Senior Accessibility Specialist
Skillsoft | mobile: +353 87 60 60 162
www.skillsoft.com<;http://www.skillsoft.com/>;

From: Patrick H. Lauke
Date: Mon, Nov 30 2020 10:05AM
Subject: Re: Testing 1.4.10 Reflow
← Previous message | Next message →

On 30/11/2020 16:38, Mark Magennis wrote:
> I'm having trouble understanding how to test for this. The SC says this applies to "Vertical scrolling content at a width equivalent to 320 CSS pixels" and the note says "320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom". So I assumed that either of the following approaches would be sufficient and that both would give the same results:
>
> 1. Resize the browser window to a width of 320px.
> 2. Resize the browser window to a width of 1280px and zoom to 400%.
>
> But I've tested this in Chrome on bbc.com/news using the Window Resizer extension v.2.6.4 and the results aren't the same. I've tried changing the Window size and changing the Viewport size but in both cases the results aren't the same.
>
> Can anyone tell me what I'm not understanding here and what testing process I should be following?


Assuming you're doing this in Chrome, even using something like Window
Resizer extension the browser won't actually let you go below a certain
width (500px generally). So, likely, you're not comparing like for like
to being with.

Only way to do it without too much effort is to use DevTools, device
toolbar, and ideally set yourself up with a new custom profile there for
320 px width but without touch/acting like a desktop. Or, zoom to 200%
and then use Window Resizer to go to something with 640px width (which
at 200% zoom is obvs 320 CSS px).

Beyond that, just changing the width, versus doing the zoom, will result
in a difference in height, obviously. If the site also uses the height
of the viewport as a determining factor, then the results will also look
different).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Mallory
Date: Mon, Nov 30 2020 12:13PM
Subject: Re: Testing 1.4.10 Reflow
← Previous message | Next message →

The height thing is important.
Websites where someone made sure it "looks good on the old iPhone" often don't check zoomed desktop users (yay, me). The main issue is, developers assume mobile views are portrait views, but zoomed desktoppers are going to be landscape.
If you're testing with an actual phone-like device, check landscape please.

Sticky headers/footers kill me. There are websites I cannot use until I first delete the stickies in devtools. What if I was a normal person who didn't use devtools?? I'd be locked out.

cheers,
_mallory

On Mon, Nov 30, 2020, at 6:05 PM, Patrick H. Lauke wrote:
> On 30/11/2020 16:38, Mark Magennis wrote:
> > I'm having trouble understanding how to test for this. The SC says this applies to "Vertical scrolling content at a width equivalent to 320 CSS pixels" and the note says "320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom". So I assumed that either of the following approaches would be sufficient and that both would give the same results:
> >
> > 1. Resize the browser window to a width of 320px.
> > 2. Resize the browser window to a width of 1280px and zoom to 400%.
> >
> > But I've tested this in Chrome on bbc.com/news using the Window Resizer extension v.2.6.4 and the results aren't the same. I've tried changing the Window size and changing the Viewport size but in both cases the results aren't the same.
> >
> > Can anyone tell me what I'm not understanding here and what testing process I should be following?
>
>
> Assuming you're doing this in Chrome, even using something like Window
> Resizer extension the browser won't actually let you go below a certain
> width (500px generally). So, likely, you're not comparing like for like
> to being with.
>
> Only way to do it without too much effort is to use DevTools, device
> toolbar, and ideally set yourself up with a new custom profile there for
> 320 px width but without touch/acting like a desktop. Or, zoom to 200%
> and then use Window Resizer to go to something with 640px width (which
> at 200% zoom is obvs 320 CSS px).
>
> Beyond that, just changing the width, versus doing the zoom, will result
> in a difference in height, obviously. If the site also uses the height
> of the viewport as a determining factor, then the results will also look
> different).
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >

From: Jonathan Avila
Date: Mon, Nov 30 2020 12:26PM
Subject: Re: Testing 1.4.10 Reflow
← Previous message | Next message →

I agree the height makes a difference when testing SC 1.4.10. What do other folks recommend for the browser height when testing the 320CSS pixel width? 256 CSS pixel, 320CSS pixel height or something else?

Jonathan

From: Mark Magennis
Date: Wed, Dec 02 2020 3:04AM
Subject: Re: [EXTERNAL] Testing 1.4.10 Reflow
← Previous message | Next message →

Patrick Lauke wrote:
>Assuming you're doing this in Chrome, even using something like Window Resizer extension the browser won't actually let you go below a certain width (500px generally

Aha! That's what I was missing. I didn't know that and hadn't noticed. Thanks.

Also thanks to all for educating me about the importance of height.

Mark

From: Detlev Fischer
Date: Wed, Dec 02 2020 7:11AM
Subject: Re: [EXTERNAL]Testing 1.4.10 Reflow
← Previous message | Next message →

You can also open Chrome dev tools docked right and move the separator
until the viewport is 320px wide (dimensions are indicated o the fly in
top-right corner - and you may want to add the scrollbar width). This
will usually mean an aspect ratio more like a smartphone in portrait
orientation. So you won't get (much if) those issues caused by fixed
position headers/footers that blight magnification users - but my
understandung is that these issues aren't (yet) a normative failure of
1.4.10 (while clearly being a harmful practice).

Am 02.12.2020 um 11:04 schrieb Mark Magennis:
> Patrick Lauke wrote:
>> Assuming you're doing this in Chrome, even using something like Window Resizer extension the browser won't actually let you go below a certain width (500px generally
> Aha! That's what I was missing. I didn't know that and hadn't noticed. Thanks.
>
> Also thanks to all for educating me about the importance of height.
>
> Mark
> > > > --
Detlev Fischer
DIAS GmbH
(Testkreis is now part of DIAS GmbH)

Mobil +49 (0)157 57 57 57 45

http://www.dias.de
Beratung, Tests und Schulungen für barrierefreie Websites

From: glen walker
Date: Wed, Dec 02 2020 3:16PM
Subject: Re: [EXTERNAL]Testing 1.4.10 Reflow
← Previous message | No next message

I find it easier to use Firefox's and Chrome's responsive view to set the
viewport size. The shortcut key is ctrl+shift+m. For firefox, you press
the shortcut key while on the webpage. For chrome, you press the shortcut
key from devtools. Either way, it lets you set the exact size of your
viewport and makes 1.4.10 testing easy.