Force pinch zoom… the best invention!

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!

Advertisements

Some thoughts on Android accessibility

I was very proud when I bought my Sony Xperia Z3 compact.  It had a smaller screen yet it was packed up with all the features of its similar large screen version. It also looked sturdier than the Samsung (a very important feature after my disastrous experience with a Samsung Galaxy S4, which screen cracked after a minor fall).

In the last couple of months I started looking at accessibility options to make the most out of my sight. This is a transition most people living with a visual impairment that changes over time will relate to.

A few things I have found whilst experimenting with Android’s accessibility setting on the Sony Xperia Z3.

Colour inversion

Setting up the phone to read white text on black background is an awesome way to avoid issues with glare and brightness coming from the screen. I would do this on days when I am specially tired.  The downside of this approach is when taking photos or visiting to social networks all images are inverted.  Since most social networks are fairly graphic (think Instagram /Facebook / Tumblr) i end up going backwards and forwards between inverted contrast and normal colour scheme, just as I do when using my laptop/tablet.

On the Sony Xperia colour inversion works to a certain extent.  It needs more thought.  The pull down screen to access the quick settings becomes practically unreadable on high contrast (you can judge for yourself by the screenshot below, please bear in mind that a partially sighted person will be looking at that image on a smaller screen a probably experience difficulties with font size/brightness of the screen)

image

Zoom

There has been more than one occasion when I have to rely on magnification to read what is on websites I am visiting on the phone.  To begin with I started using the native zoom feature but I have to say it’s very buggy.  For starters it will affect scroll speed function when visiting web pages/social networks, to the point it will suddenly jump to the end or beginning of the content without reason.

Another annoying but is it would set itself off whilst typing a text message (confuses multiple double tapping to delete characters with magnification gestures).  At this point I end up coming out of the texting app and then out of zoom, only to have the same bug again when deleting characters whilst typing.

To remedy the issue I have basically stopped using it and instead I zoom in with my fingers when visiting a web page that is too small for me to read.

Large text

To make it easier to read small fonts I started using the large text feature under Android’s accessibility options. However this was not enough for my needs, the system font is tiny and Android does not have fine grained native ways to control the size (as opposed to Apple).

Big font – useful large text app

After doing some research on the google store I found Big Font which will enlarge the system and apps font size.  A word of warning in that the device will nee restarting after resetting the font size. Once the app it’s working it is fairly reliable.  I went for the paid version of it after using the free one for a while and have to say I am very pleased.

Screen reader

Android comes with it’s own screen reader called Google Talkback.  However after trying it for a little while I found it too invasive and almost impossible to switch off.  Once I did manage to switch it off it got so broke I’ve never been able to switch it on again (not a a great start).

Shineplus – screen reader alternative

I found a free option called Shineplus.  I really like it because it allows alternating between screen reading and magnification when setup for sight  protection.

Other available options are voice based, which makes it work as a regular screen reader and text based which will magnify items on the screen when tapping on them.

Google-Text-To-Speech

This is probably one of the few instances when I am happy with Google native option.  At first I had a bit of trouble getting on with it because of my slight Latin Spanish accent – which made life interesting.  But once I got round to those problems Google-text-to-speech would is a great little tool.  It allows me to dictate both in English and Spanish no problem at all.

Word of warning.  When inserting punctuation such as exclamation mark/question mark, etc make sure to say it as soon as possible.  If you make a pause Google-text-to-speech will write it down as a work instead of inserting the symbol.

Overall it took me a good while to be happy with the way my phone is set up.  But I have to say it took me far less time to set up my iPad in a way that was practical for me.  As a former iPhone owner who made the switch to Android (and was fairly enthusiastic about it) I am feeling let down when it comes to accessibility.  It still needs a lot of work.

Stay tuned for some thoughts on Apple accessibility…