WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Testing 1.4.10 Reflow

for

From: Jonathan Avila
Date: Nov 30, 2020 12:26PM

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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Mallory
Sent: Monday, November 30, 2020 2:14 PM
To: Patrick H. Lauke < <EMAIL REMOVED> >; WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Testing 1.4.10 Reflow

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


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
> > > archives at http://webaim.org/discussion/archives
> >