Update: since this post was written Firefox and Safari included pinch zoom features on their latest versions. 

—

Picture this, you wake up in the morning as usual, get your mobile phone or tablet or laptop to google some odd fact and, surprise! The font it’s too small to read. You start squinting and go for the obvious. Zooming into the page.

This started happening to me a few months back as a result of my sight condition. Reading glasses did not help, I had to start using magnification.

Even if your sight is normal, once you get to about 40 the eyes loose the ability to focus, which is when you start needing reading glasses or varifocals if you already use specs.

Now, imagine trying to make the font bigger in a website and realising you can’t.  The  developer has decided to preserve its design by disabling pinch zoom, making it unusable for you.

When I worked doing frontend development I remember the necessary pain of browser and device testing, with subsequent fixes.  I remember cursing browsers and media queries that broke my site… how dare they?

As a visually impaired user browsing the web I started wondering.  Is there an argument here for browsers to break your website? Ironically, the answer is yes.

The practice of disabling zoom it’s so widely spread Chrome and Opera have settings to override it in Android devices.

Chrome has an accessibility setting that allows users to set the minimum text size as well as overriding pinch zoom.  However this does not solve the problem of horizontal scrolling.

To enable force pinch zoom on on Chrome go to Settings > Advance > Accessibility.

Another browser that has stepped up to the mark is Opera beta for Android, which recently introduced force pinch zoom as one of its features. Opera  also introduced a feature called force text wrap. When used together there’s almost no need for horizontal scrolling. This works for most text elements except for tables and elements with fixed with.

To enable force pinch zoom click on the Opera logo at the bottom right hand side of the screen >  select settings > enable text wrap  and force enable zoom.

Opera has been my mobile browser for the last couple of months.  These two features made things  so much easier for my eyes!

I have been struggling to find a similar feature for iPad.  In the process of writting this blog post I came across a hack to re-enable pinch zoom on Safari without relying on accessibility features.  I have to warn you, try this only if you are technically savvy.

I recently showed a good fried of mine how to activate zoom accessibility features on her iPhone. Having just turned 40, she’s found this bit of knowledge very useful.

Designers and developers, decisions such as disabling pinch zoom make the web inaccessible for everyone. When crafting a beautiful web experience please be open and respectful with your visitors, who knows, you might be in the same place  yourself one day!