WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: zooming font size on phone displays

for

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

From: Sandy Feldman
Date: Thu, Jan 17 2019 7:43AM
Subject: zooming font size on phone displays
No previous message | Next message →

hey all,

Some time ago Matt Brett came up with these really simple instructions
for zooming text in a desktop/laptop browser

https://www.balancefba.org/how-to-zoom/

Is there something like that out there for phones? Or are they all
different?

thanks!

--
Sandy
sandyfeldman.com

From: Jonathan Avila
Date: Thu, Jan 17 2019 7:53AM
Subject: Re: zooming font size on phone displays
← Previous message | Next message →

> Is there something like that out there for phones? Or are they all different?

I generally pinch zoom and that works across platforms. If you are looking for keyboard commands that work on mobile then I'd imagine they would be similar to the ones on desktop but I haven't checked recently.

To add to the list -- on the desktop many users I know use control plus scrolling the wheel too zoom-in on Windows based browsers.

Jonathan

From: glen walker
Date: Thu, Jan 17 2019 8:16AM
Subject: Re: zooming font size on phone displays
← Previous message | Next message →

The problem I have with pinch/zoom on mobile is that I then have to
pan/scroll to see everything.

For websites, I like to use a bookmarklet to increase (or decrease) the
fontsize of the page. It's not as straightforward as ctrl++ or cmd++ on a
desktop/laptop, and it's a little more work to set up, but it works well
enough. You have to add a bookmark to your browser then use the following
bookmarklets:

To increase the font size:
javascript:var
p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var
s=parseInt(p[i].style.fontSize.replace("px",""));}else{var
s=12;}s+=2;p[i].style.fontSize=s+"px"}

To decrease the font size:
javascript:var
p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var
s=parseInt(p[i].style.fontSize.replace("px",""));}else{var
s=12;}s-=2;p[i].style.fontSize=s+"px"}

I named my two bookmarklets "+++" and "---" and put them at the top of my
favorites. Having them be one character, just + or -, made the touch
target too small.

It doesn't work as well on my iphone because I can't see my favorite
bookmarks at the same time as the webpage. On my ipad, I went to safari
settings and enabled "show favorites bar". That way I can see "+++" while
on a website and can bump up the font pretty easily. On the iphone,
turning it landscape and touching the bookmarks icon will slide the
favorites menu from the left so it (cognitively) feels easier to use than
when in portrait mode.

I don't have an android phone but suspect its browser has a favorites
toolbar too.

Glen


On Thu, Jan 17, 2019 at 7:53 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > Is there something like that out there for phones? Or are they all
> different?
>
> I generally pinch zoom and that works across platforms. If you are
> looking for keyboard commands that work on mobile then I'd imagine they
> would be similar to the ones on desktop but I haven't checked recently.
>
> To add to the list -- on the desktop many users I know use control plus
> scrolling the wheel too zoom-in on Windows based browsers.
>
> Jonathan
>
>

From: glen walker
Date: Thu, Jan 17 2019 8:34AM
Subject: Re: zooming font size on phone displays
← Previous message | Next message →

However, that being said, I usually pinch/zoom as Jonathan said if it's
just a small part of the website I'm trying to read. If I have to read the
entire page, then I'll use the bookmarklet to bump up the font so that I
don't have to pan left/right.

I also use 3-finger double tap on the iphone to zoom the entire display.
This works no matter what app is running. You pan around by dragging 3
fingers. You'll have to enable enable zoom in settings > general >
accessibility > zoom. I have my zoom region set to "full screen zoom".
You can set your zoom magnification amount in that dialog as well, but I
usually set it by doing a 3-finger double tap and on the second tap, leave
my 3 fingers on the screen and drag up or down to change the magnification.


Glen

From: Jonathan Avila
Date: Thu, Jan 17 2019 8:40AM
Subject: Re: zooming font size on phone displays
← Previous message | Next message →

> I also use 3-finger double tap on the iphone to zoom the entire display.

As a point of clarification -- three finger zoom on iOS (and it's equivalent on Android) is an assistive technology -- SC 1.4.4 requires resize of text without use of assistive technology. Browser zoom is generally what is used to meet the success criteria but there could be other methods such as supporting the large text settings at the OS level by referring to Apple system fonts or by using an on page controls. As a note -- in some browser combos meta tag viewport restrictions can block the user from pinch zooming -- so this is always a good automatic or manual test to check.

Jonathan

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office

Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog

Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Sandy Feldman
Date: Thu, Jan 17 2019 8:48AM
Subject: Re: zooming font size on phone displays
← Previous message | Next message →

Glen, you totally win the geek prize for this! I am impressed (and not
being sarcastic).

What I am looking for is a really basic "how to use your phone" on a
reputable web site.

cheers, Sandy

On 2019-01-17 10:16 a.m., glen walker wrote:
> The problem I have with pinch/zoom on mobile is that I then have to
> pan/scroll to see everything.
>
> For websites, I like to use a bookmarklet to increase (or decrease) the
> fontsize of the page. It's not as straightforward as ctrl++ or cmd++ on a
> desktop/laptop, and it's a little more work to set up, but it works well
> enough. You have to add a bookmark to your browser then use the following
> bookmarklets:
>
> To increase the font size:
> javascript:var
> p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var
> s=parseInt(p[i].style.fontSize.replace("px",""));}else{var
> s=12;}s+=2;p[i].style.fontSize=s+"px"}
>
> To decrease the font size:
> javascript:var
> p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var
> s=parseInt(p[i].style.fontSize.replace("px",""));}else{var
> s=12;}s-=2;p[i].style.fontSize=s+"px"}
>
> I named my two bookmarklets "+++" and "---" and put them at the top of my
> favorites. Having them be one character, just + or -, made the touch
> target too small.
>
> It doesn't work as well on my iphone because I can't see my favorite
> bookmarks at the same time as the webpage. On my ipad, I went to safari
> settings and enabled "show favorites bar". That way I can see "+++" while
> on a website and can bump up the font pretty easily. On the iphone,
> turning it landscape and touching the bookmarks icon will slide the
> favorites menu from the left so it (cognitively) feels easier to use than
> when in portrait mode.
>
> I don't have an android phone but suspect its browser has a favorites
> toolbar too.
>
> Glen
>
>
> On Thu, Jan 17, 2019 at 7:53 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>>> Is there something like that out there for phones? Or are they all
>> different?
>>
>> I generally pinch zoom and that works across platforms. If you are
>> looking for keyboard commands that work on mobile then I'd imagine they
>> would be similar to the ones on desktop but I haven't checked recently.
>>
>> To add to the list -- on the desktop many users I know use control plus
>> scrolling the wheel too zoom-in on Windows based browsers.
>>
>> Jonathan
>>
>>

From: glen walker
Date: Thu, Jan 17 2019 11:30AM
Subject: Re: zooming font size on phone displays
← Previous message | No next message

On Thu, Jan 17, 2019 at 8:41 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > I also use 3-finger double tap on the iphone to zoom the entire display.
>
> As a point of clarification -- three finger zoom on iOS (and it's
> equivalent on Android) is an assistive technology -- SC 1.4.4 requires
> resize of text without use of assistive technology.
>

Yes, absolutely. But I didn't think this conversation was about WCAG
criteria. I thought the OP was just asking about how to zoom, whether via
AT or built-in features.