Tag: Web development

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…

To screen read or not to screen read

In the last few days I have been pondering about starting to rely more on screen readers.  My initial reaction was not to, didn’t see the point since my sight is still there, admittedly not as good as it was but, hey… its still there!

However in the last couple of months I have been struggling with headaches and eye strain.  Initially I thought magnification and breaking often were the obvious answer but it’s not quite the trick if you are going to spend the whole working day in front of the computer.

Luckily I recently met with another person who has the same eye condition as myself and have been using assistive technology for longer. After looking at a few of the gadgets and adjustments they are using it dawned on me that alternating between screen readers and magnification will be the answer on the way forward.  I can split the tasks.  Simple things like reading email and basic documentation can be done through the screen reader and the more visual technical work can be done through magnification.

I have been giving this a go for simple personal things like texting and emailing. It is helping a lot and it makes a lot more sense.

Since my sight loss journey has turned out to be a bit more of a roller coaster ride lately, it is small victories like this one that fill me with hope in continuing to do the things that I love.

As I delve deeper in my new approach to navigating the web and using computers as a visually impaired web developer, I also feel responsible for creating accessible experiences for others.

More on screen readers and gadgets on an upcoming post…

My personal experience with accessibility

For the last 13 years I have been living with an eye condition which slowly eats away bits of peripheral vision causing what is known as tunnel vision.

In the last year sight started getting a bit wonkier so I began looking into things that would allow me to stay independent like mobility training and using a cane.   It has not been an easy decision to make but it has allowed me realise so many things about life with a visual impairment I decided to start blogging.

In the past 3 months I have learned that less than 10% of people registered blind in the UK have got no light perception – i.e live in total black. This means that about 90% of people preserve different levels of vision and live in a world between sight and blindness called low vision (more information on the NHS Choices website).

This figures are not so different world wide.  According to the World Health Organisation there are 285 million people are estimated to be visually impaired (39 million are blind and 246 have low vision).

This news came in weeks before I was registered blind (aka. severely visually impaired). 

There are many medical conditions that cause low vision, like glaucoma, macular degeneration or in my case retinitis pigmentosa. I am not planning to cover this in detail on this blog. What I do want to highlight is the fact that a significant number of us live in the world of low vision for a good number of years (depending on the condition it might even be a good part of our lives).

As a web developer and a keen photographer this has come as a big realisation of my own misconceptions about blindness and visual impairment.

With a few special adaptations I am perfectly able to use computers and mobiles phones through relying on a mix of magnification and special screen setup.  Occasionally I would also use dictation and screen readers to reduce eye strain but this is not the main way I interact with technology.

Through this blog I hope to be able to share how I experience the web and use mobile devices in the hope that other people working in the industry gain deeper understanding of visual impairment and the need to design with this in mind.

I also hope to share some of my photography and the motivation behind it, as well as useful tools and tips for the visually impaired.

A few things I started looking into in the last few weeks were ways to reduce eye strain.

High contrast

Depending on specific circumstances people with low vision might be highly sensitive to light and glare. Reading black text on a white background can cause eye fatigue and headaches.

Best way to remedy this is changing settings on the computer to read white or yellow text on black background. This is easily done on Apple operating system through accessibility settings. Windows has got a few high contrast themes too.

The obvious draw back to using hight contrast is it inverts colours on photos and videos. Not great when it comes to editing images, using specific applications / websites and watching movies.

I use high contrast for a vast majority of tasks but have to revert back occasionally (mostly because applications are not very accessible).

Chrome high contrast extension

For my particular eye condition I tend to have to reduce the brightness of the computer monitor. However this might make it difficult to read text.

This extension allows increasing the contrast of black text on white screen. It is also possible to invert colours / invert grayscale and set up a default appearance for different websites.

High contrast is available for download completely free on the link below:

Download chrome high contrast extension

i.Flux

Ideal for managing exposure to blue light from computer screens. Useful for anyone working long hours with computers but specially for those with light sensitivity. Available for download totally free from the link below:

Download i.Flux

Magnification

People living with low vision often struggle to read small text. This is when magnification software comes in very handy.

Zoom works brilliantly on my MacbookPro and it comes as part of the operating system (high five to Apple). However I wish there was more flexibility to customise text size across the operating system (it can only be increased to 16pt).

Windows offers more flexibility in customising text size across the operating system through display settings. Not very familiar with similar technology available for Windows. More on this in future posts.

The obvious drawback of magnification is working space, and the quickest way around it is a big screen – or in some cases a set of screens. But more on this another time.

Also keep an eye out for more insight on accessibility tips and apps for mobile phones (Android is turning out to be disappointing in this front).

Thanks for reading. Feel free to share and comment.