WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Safari Mobile WCAG Zoom Testing Approach

for

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

From: Justin Leasure
Date: Mon, Oct 19 2020 9:17AM
Subject: Safari Mobile WCAG Zoom Testing Approach
No previous message | Next message →

What is the appropriate way to test for WCAG 1.4.4 (resize text) and 1.4.10
(reflow) within the Safari Mobile? The resize text option in IOS only
applies to applications, not web pages. There is a zoom option within IOS
that does not allow for reflow and requires quite a bit of scrolling in
both directions. Safari also has a zoom option ("Aa" in the top left hand
corner of the browser). However, it doesn't seem to exclusively resize
text. I believe the last option is the best testing approach, but I am
wanting to confirm this is the case.

From: Patrick H. Lauke
Date: Mon, Oct 19 2020 10:02AM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | Next message →

On 19/10/2020 16:17, Justin Leasure wrote:
> What is the appropriate way to test for WCAG 1.4.4 (resize text) and 1.4.10
> (reflow) within the Safari Mobile? The resize text option in IOS only
> applies to applications, not web pages. There is a zoom option within IOS
> that does not allow for reflow and requires quite a bit of scrolling in
> both directions. Safari also has a zoom option ("Aa" in the top left hand
> corner of the browser). However, it doesn't seem to exclusively resize
> text. I believe the last option is the best testing approach, but I am
> wanting to confirm this is the case.


Browsers on mobile/tablet do not *do* traditional reflow when things are
zoomed, so 1.4.10 is not applicable there for web content. Tje
understanding doc comes shy of aknowledging this in the "Browsers on
mobile operating systems" section of
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html and blames user
agents, but in essence for an author there's no way to detect/act on/do
reflow as such, so not applicable from a web content guidelines point of
view.

As for 1.4.4, at the most basic level, you want to check that there's a
way for a user to resize content up to 200%. Unless it's somehow
blocked, being able to pinch-zoom without things cutting off/overlapping
(which generally should not be the case, since the browsers don't
reflow) satisfies this SC.


--
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: Patrick H. Lauke
Date: Mon, Oct 19 2020 10:06AM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | Next message →

On 19/10/2020 17:02, Patrick H. Lauke wrote:
[...]
> Browsers on mobile/tablet do not *do* traditional reflow when things are
> zoomed, so 1.4.10 is not applicable there for web content. Tje
> understanding doc comes shy of aknowledging this in the "Browsers on
> mobile operating systems" section of
> https://www.w3.org/WAI/WCAG21/Understanding/reflow.html and blames user
> agents, but in essence for an author there's no way to detect/act on/do
> reflow as such, so not applicable from a web content guidelines point of
> view.

FWIW filed this to ask for a more explicit clarification
https://github.com/w3c/wcag/issues/1483


--
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, Oct 19 2020 10:44AM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | Next message →

1.4.4 would apply to mobile - any option that is not assistive technology to make text bigger even if it causes other content like images to get larger to reach 200% of the default would pass. The three finger zoom is considered assistive technology - so any browser or on page controls could be used.

On the desktop the browser zoom feature is generally used to meet 1.4.4.

Jonathan

From: Weston Thayer
Date: Mon, Oct 19 2020 10:58AM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | Next message →

Patrick, I've been keeping up with how mobile browsers can do reflow,
mobile user agents have changed a bunch in the past year. Here's the
current state as I understand it:

- iOS Safari - provides browser zoom style reflow up to 300%
<https://twitter.com/WestonThayer5/status/1178717974598782977> either on
a per site basis or for all sites via Settings > Safari > Page Zoom. Not
synced with Settings > Accessibility > Display & Text Size > Larger Text
- iOS Chrome - even though it's using WebKit under the hood, it provides
a per page Zoom Text setting
<https://twitter.com/WestonThayer5/status/1281957949745836033>, which *only
scales text*. It doesn't matter if font-size is set with px, rem, or em,
but otherwise this is similar to achieving reflow by changing the base font
size. It initially was synced to the Larger Text accessibility setting,
disappeared behind a flag in Chrome 84, then reappeared, but not synced to
the Larger Text setting
- iOS Firefox - does not provide any settings, nor does it respect
Larget Text for web pages
- Android Chrome - provides its own text scaling option
<https://twitter.com/WestonThayer5/status/1131646920026337280> under
Chrome's Settings > Accessibility > Text scaling, which is similar to iOS
Chrome's approach, all text scales, regardless of unit. Includes an option
to prevent sites from disabling pinch to zoom as well
- Android Firefox - same as Android Chrome, but provides an option to
use the system text size by default
<https://twitter.com/WestonThayer5/status/1131646920026337280/photo/2>
- Android UC Browser
<https://twitter.com/WestonThayer5/status/1131646920026337280/photo/3> -
same as Android Firefox
- Samsung Internet Browser
<https://twitter.com/WestonThayer5/status/1131646920026337280/photo/4> -
allows for iOS Chrome style text scaling

So except for iOS Firefox, the major mobile browsers all provide a way to
enlarge and reflow text (iOS Safari being the outlier that also enlarges
images, etc). I'm not sure what that means for
https://github.com/w3c/wcag/issues/1483, but I've been testing for
compatibility with these settings.

Weston
https://assistivlabs.com

On Mon, Oct 19, 2020 at 9:45 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> 1.4.4 would apply to mobile - any option that is not assistive technology
> to make text bigger even if it causes other content like images to get
> larger to reach 200% of the default would pass. The three finger zoom is
> considered assistive technology - so any browser or on page controls could
> be used.
>
> On the desktop the browser zoom feature is generally used to meet 1.4.4.
>
> Jonathan
>
>

From: Patrick H. Lauke
Date: Mon, Oct 19 2020 2:56PM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | Next message →

On 19/10/2020 17:58, Weston Thayer wrote:
> Patrick, I've been keeping up with how mobile browsers can do reflow,
> mobile user agents have changed a bunch in the past year. Here's the
> current state as I understand it:

Interesting to see the interplay there with text sizing while keeping
viewport width same.

Somehow when firing off my answer and github issue there earlier i
completely forgot that in the end, the SC is currently scoped to just
the exact viewport width/height of 320px / 256px respectively, and
there's no normative requirement there about being able to resize
text/content per se, so this brings up some weird extra edge cases I
think that don't quite gel/fall in line with the normative SC wording.
For instance, I assume that the iOS text sizing doesn't actually change
the viewport width per se, just makes text bigger and reflow within
that. So if the site was not responsive and not adapting correctly to
320 CSS px width, say, then this wouldn't help either. Nor would
problems that happen when resizing text this way be normatively covered,
as the viewport size itself remains at whatever it is (say 320 CSS px,
though on more modern phones it'll be marginally higher by default).

Sorry, long story short: probably relevant for text resizing
discussions, possibly less so for reflow per se...at least in the way
that it's currently worded normatively.

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: Patrick H. Lauke
Date: Mon, Oct 19 2020 2:58PM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | Next message →

...and to make this even shorter: none of those new options to resize
text/content, with or without reflow, change the actual CSS px
dimensions of the viewport (nor does pinch-zooming) in the same way that
full-page zooming on desktop/laptop browsers does, and 1.4.10 SC is set
out to cover the latter case normatively.

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: Weston Thayer
Date: Mon, Oct 19 2020 3:18PM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | Next message →

Makes sense, thanks for the detailed explanation.

> none of those new options to resize text/content, with or without reflow,
change the actual CSS px dimensions of the viewport

Except for iOS Safari right? It's updating the base CSS px size, so
everything grows larger, including viewport width.

On Mon, Oct 19, 2020 at 1:58 PM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> ...and to make this even shorter: none of those new options to resize
> text/content, with or without reflow, change the actual CSS px
> dimensions of the viewport (nor does pinch-zooming) in the same way that
> full-page zooming on desktop/laptop browsers does, and 1.4.10 SC is set
> out to cover the latter case normatively.
>
> 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: Patrick H. Lauke
Date: Mon, Oct 19 2020 3:27PM
Subject: Re: Safari Mobile WCAG Zoom Testing Approach
← Previous message | No next message

On 19/10/2020 22:18, Weston Thayer wrote:
> Makes sense, thanks for the detailed explanation.
>
>> none of those new options to resize text/content, with or without reflow,
> change the actual CSS px dimensions of the viewport
>
> Except for iOS Safari right? It's updating the base CSS px size, so
> everything grows larger, including viewport width.

Oh, right you are. Had to go back and double-check, and indeed this does
change the reported viewport width. Interesting. I stand corrected on
that one.

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