E-mail List Archives

Search E-mail List Archives for

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

From: Ajeesh Thomas
Date: Mon, Jan 20 2025 7:46AM
Subject: Screen Reader Testing Approach for Responsive Components – WCAG Compliance
No previous message | Next message →

Dear Web AIM Community,

I am currently conducting NVDA-based screen reader testing on a web
application, specifically on laptops; mobile testing is not included in
this assignment.
I seek guidance on setting up a right testing approach from a WCAG
conformance perspective.

Could you please provide clarity on the following aspects:

1. How should screen reader testing be conducted to ensure the
accessibility of components that change behaviour based on screen size
adjustments? For example, Navigation Links /Site Map may become the
Navigation Menu once the Screen size is modified.
2. Is it necessary to perform screen reader testing at 200% and 400%
zoom levels to confirm the accessibility of components that undergo changes
upon resizing?
3. What do WCAG conformance documents state regarding this topic?

Please help me with your insights. Additionally, if there are any relevant
artifacts or references, kindly share them.

Thank you for your support.




--
Thanks and regards,
Ajeesh Chacko Thomas,

Senior Engineer/S M E Web/Apps Accessibility Testing
IBM Consulting, Bangalore
Phone: 812 33 812 22, 87 220 221 21

"I have promises to Keep,
And miles to go before I sleep. "

From: Patrick H. Lauke
Date: Mon, Jan 20 2025 8:29AM
Subject: Re: Screen Reader Testing Approach for Responsive Components – WCAG Compliance
← Previous message | Next message →

On 20/01/2025 14:46, Ajeesh Thomas wrote:
[...]
> 1. How should screen reader testing be conducted to ensure the
> accessibility of components that change behaviour based on screen size
> adjustments? For example, Navigation Links /Site Map may become the
> Navigation Menu once the Screen size is modified.

Test it at all different variations, separately.

> 2. Is it necessary to perform screen reader testing at 200% and 400%
> zoom levels to confirm the accessibility of components that undergo changes
> upon resizing?

Yes. There's a whole spectrum of screen reader users. For instance,
users with low vision may use a combination of zoom/magnification (which
triggers responsive variations) and screen readers. Hence, you need to
test all variations.

> 3. What do WCAG conformance documents state regarding this topic?

Per 5.2.2 Full Pages note 3 https://www.w3.org/TR/WCAG22/#cc2 all
success criteria (unless clearly limited/marked as such) apply to
theoretically *all* possible variations based on screen sizes - so
you'll need to test all variations (generally, check what major
breakpoints a site/web app has, and test each variant).

P
--
Patrick H. Lauke

* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke

From: Ajeesh Thomas
Date: Wed, Jan 22 2025 8:11AM
Subject: Re: Screen Reader Testing Approach for Responsive Components – WCAG Compliance
← Previous message | Next message →

Excellent , Thank you very much for your detailed clarification ...

On Mon, Jan 20, 2025 at 9:07 PM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

>
>
> On 20/01/2025 14:46, Ajeesh Thomas wrote:
> [...]
> > 1. How should screen reader testing be conducted to ensure the
> > accessibility of components that change behaviour based on screen
> size
> > adjustments? For example, Navigation Links /Site Map may become the
> > Navigation Menu once the Screen size is modified.
>
> Test it at all different variations, separately.
>
> > 2. Is it necessary to perform screen reader testing at 200% and 400%
> > zoom levels to confirm the accessibility of components that undergo
> changes
> > upon resizing?
>
> Yes. There's a whole spectrum of screen reader users. For instance,
> users with low vision may use a combination of zoom/magnification (which
> triggers responsive variations) and screen readers. Hence, you need to
> test all variations.
>
> > 3. What do WCAG conformance documents state regarding this topic?
>
> Per 5.2.2 Full Pages note 3 https://www.w3.org/TR/WCAG22/#cc2 all
> success criteria (unless clearly limited/marked as such) apply to
> theoretically *all* possible variations based on screen sizes - so
> you'll need to test all variations (generally, check what major
> breakpoints a site/web app has, and test each variant).
>
> P
> --
> Patrick H. Lauke
>
> * https://www.splintered.co.uk/
> * https://github.com/patrickhlauke
> * https://flickr.com/photos/redux/
> * https://mastodon.social/@patrick_h_lauke
>
> > > > >


--
Thanks and regards,
Ajeesh Chacko Thomas,

Senior Engineer/S M E Web/Apps Accessibility Testing
IBM Consulting, Bangalore
Phone: 812 33 812 22, 87 220 221 21

"I have promises to Keep,
And miles to go before I sleep. "

From: Raghavendra Babu Siddi
Date: Fri, Jan 24 2025 12:58AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | Next message →

Hi Team,

We saw that some people were testing the application by changing the system resolution to 1280 X 1024 and scaling 100%. And a few people are testing the browser console with Console changes: Selecting Responsive design with resolutions 320 X 256 and validating the page.

Can someone give me an idea about which approach is the best one to perform to test 1.4.10 Reflow success criteria.

Thanks,
Raghavendra.
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Hayman, Douglass < = EMAIL ADDRESS REMOVED = >
Sent: Friday, January 10, 2025 9:31 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.

Raghavendra,

I can imagine a user who uses something like ZoomText Magnifier/Reader or Fusion with the screen magnified and making use of text to speech simultaneously as a likely user experience.

Are you saying that you're just testing these separately to first, see if upon being zoomed the reflow is working properly. And they testing the screen reader experience but not both at the same time? Or did you encounter an issue while zoomed in that the screen reading function failed?

I test each separately myself I must admit and have assume that the zoomed and properly reflowing content would also work correctly with a screen reader.

Doug Hayman
IT Accessibility Coordinator
Information Technology
Olympic College
= EMAIL ADDRESS REMOVED =
(360) 475-7632

From: Steve Green
Date: Fri, Jan 24 2025 7:46AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | Next message →

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://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

Steve Green
Managing Director
Test Partners Ltd

From: Patrick H. Lauke
Date: Fri, Jan 24 2025 7:58AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | Next message →

320 CSS pixels is 320 CSS pixels ... how you resize/get the viewport to
that particular width is irrelevant (zooming, resizing, using some
"mobile view" or similar ... or even a combination of these somehow ...
doesn't really matter)

Ditto for the 256 CSS pixels.

It's "equivalent" because some environments may not use CSS pixels, but
some other density-independent measure.

P
--
Patrick H. Lauke

* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke

From: Steve Green
Date: Fri, Jan 24 2025 8:20AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | Next message →

If it's irrelevant (which I don't accept), why do NOTE 1 and the Understanding page make numerous references to 400% zoom and no reference to any other method of achieving 320 CSS pixels? And why does almost everything in the Understanding page refer to zooming, whereas I think there is only one reference to viewing on a narrow screen (and that reference is incidental). For instance:

"Goal: Content can be enlarged without increasing line length."
"Why it's important: People who need bigger text..."
"The intent of this Success Criterion is to support people with low vision who need to enlarge text"
"The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions."
"Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%."

Steve

From: Patrick H. Lauke
Date: Fri, Jan 24 2025 8:30AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | Next message →

On 24/01/2025 15:20, Steve Green wrote:
> If it's irrelevant (which I don't accept)

Hah

> why do NOTE 1 and the Understanding page make numerous references to 400% zoom and no reference to any other method of achieving 320 CSS pixels? And why does almost everything in the Understanding page refer to zooming, whereas I think there is only one reference to viewing on a narrow screen (and that reference is incidental). [...]

Because the question here is about testing. The understanding talks
about the actual reason why users need things to happen when they
enlarge content to a high magnification. If you want to test it in
exactly the same way, feel free, but there is NO difference between, say
a window that was set to 1280 by 1024 pixels and then zoomed to 400% (it
has a reported CSS viewport of 320 by 256 CSS pixels), or a window set
to 640 by 512 zoomed to 200%, or a window set to 320 by 256 at 100%.
That's how CSS pixels work.

P
--
Patrick H. Lauke

* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke

From: Steve Green
Date: Fri, Jan 24 2025 8:36AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | Next message →

Yes, there is a huge difference. If a website has floating elements such as a sticky header or footer, it will potentially (and often does) overlay much or all of the content in a 1280px wide window at 400% zoom. It won't overlay anywhere near as much content in a 320px wide window at 100% zoom.

You know this, so why are you pretending not to?

Steve

From: Mark Magennis
Date: Mon, Jan 27 2025 2:34AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | Next message →

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 ADDRESS REMOVED = > on behalf of Steve Green < = EMAIL ADDRESS REMOVED = >
Sent: Friday 24 January 2025 14:46
To: WebAIM Discussion List < = EMAIL ADDRESS 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

From: Raghavendra Babu Siddi
Date: Wed, Jan 29 2025 1:17AM
Subject: Re: - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.
← Previous message | No next message

Hi Team,

Can someone help me best approach to perform reflow testing and is there is any Plug-in which gives us an accurate result.

Thanks,
Raghavendra
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
Sent: Friday, January 24, 2025 8:28 PM
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] Re: [WebAIM] - Reg: Screen reader testing when screen Resized or Reflow settings applied on the page.

320 CSS pixels is 320 CSS pixels ... how you resize/get the viewport to
that particular width is irrelevant (zooming, resizing, using some
"mobile view" or similar ... or even a combination of these somehow ...
doesn't really matter)

Ditto for the 256 CSS pixels.

It's "equivalent" because some environments may not use CSS pixels, but
some other density-independent measure.

P
--
Patrick H. Lauke

* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke