WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.

for

From: Mark Magennis
Date: Jan 27, 2025 2:34AM

A couple of other things to bear in mind when choosing the testing method.

If you use the browser devtools device emulator by setting width= 320px, make sure you also set Device Type=Desktop, and Zoom=100%. In Chrome detools the Device Type menu is hidden by default and is set by default to Device Type=Mobile which can give unrepresentative results depending on how the responsive design is done. When I say "unrepresentative", I mean not representing what the user would see if they zoomed to 400% in a 1280px viewport which, as Steve points out, is the main use case that this SC is intended to support.

Another way the result can be unrepresentative when using a device emulator, or when dragging the viewport down to 320px width, is that the vertical scrollbar may take up a bigger proportion of the available viewing width than they would at 1280px and 400% zoom. That's because they won't shrink in proportion to the available width. So you will find they take up 16px out of the 320px available, rather than 16px out of the 1280px available. This can make a difference for the visibility of content that is up against the right hand edge. Whether you see the scrollbars or not depends on the autohide-scrollbars setting in your OS which I believe is different by default on Windows and MacOS.

Mark


From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Steve Green < <EMAIL REMOVED> >
Sent: Friday 24 January 2025 14:46
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] Re: [WebAIM] - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.

Both approaches are wrong. The normative text includes "Vertical scrolling content at a width equivalent to 320 CSS pixels". The phrase "equivalent to 320 CSS pixels " is important because it does not say "equal to 320 CSS pixels". The second approach is wrong on this basis.

NOTE 1 says "320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom." This is not normative, but no alternatives are mentioned so you would have to have a very good reason to do anything different.

Furthermore, the Intent section of the Understanding page refers to scaling content to 400% and the page contains several other references to that zoom level. Again, the page is not normative, but you would have to have a very good reason to do anything different.

When testing content that scrolls vertically, the SC does not specify a browser window height. We have discussed this many times if you want to look at the archives. My view is that there must be no loss of information or functionality with a full height window on a 1920 x 1080px monitor because the vast majority of people will have that size or smaller.

Testing with smaller windows is more subjective. According to Statcounter, about 23% of users worldwide had screen resolutions of either 1366 x 788 or 1536 x 864 (split equally) in December 2024, so there is a strong argument for testing with window heights (including the browser chrome) as low as 788px.
https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgs.statcounter.com%2Fscreen-resolution-stats%2Fdesktop%2Fworldwide&data=05%7C02%7Cmark.magennis%40skillsoft.com%7C788843b271da4544b2e808dd3c85ead1%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638733268079286012%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=1WdXLop3%2BpDz3JYoiaz9ENuCKSbjoDYFKR18Oy8hR5U%3D&reserved=0<https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide>

Steve Green
Managing Director
Test Partners Ltd