Hey, everyone! Let’s talk a little bit about pinch to zoom on a mobile device. A key feature of mobile browsing is being able to zoom in to read content and then to zoom out to locate content on the page. Sadly, there is a misconception among responsive developers and designers that a properly implemented responsive web design site doesn’t need to allow zooming.
I want to dive into the accessibility effects of what happens when you disable pinch to zoom. I will discuss the different examples of what happens when developers and designers disable this feature on both iOS and Android devices and ultimately why they should not disable pinch to zoom.
Follow along here in my recorded walkthrough if you’d like:
WCAG 2.0 and Pinch to Zoom
Pinch to zoom is when a user zooms in on a mobile device by pinching the screen, allowing you to zoom in and out. Sometimes designers and developers decide that they want to disable that feature. Let’s explore what happens to the code when this feature is disabled. For example, an important bit of code under Meta Tag is called Viewport. I’m going to discuss the good and the bad about disabling this bit of code.
Under the World Wide Web Consortium’s (W3C) web content accessibility guidelines (WCAG), is success criteria 1.4.4, which is titled “resize text”. It reads, “Except for captions and images of text, text can be resized without assistive technology up to 200% without loss of content or functionality. “This success criterion is Level AA, which is the middle level of conformance, meaning the web page satisfies all the Level A and AA success criteria. If developers and designers disable and prevent pinch to zoom from happening, we’re actually failing this success criterion.
Pinch to Zoom on iOS Devices
The first example I’m going to provide illustrates the best practice behind the code for pinch to zoom. This code is responsive design, the code is actually in the head and is meta name viewport. The name viewport is the location where pinch to zoom could be disabled and there are two ways to disable pinch to zoom in this meta tag. Let’s look at this a little closer, you’re going to see a content and there are two things you will want to pay close attention to.
First, is user-scalable=no and maximum-scale=1.0. These tags are the ones that will turn pinch to zoom shut off, disabling the feature. Now, by removing these tags, you fix this issue. Additionally, Apple and iOS devices, recently updated their new versions so that this is not possible, which is a great win for accessibility. Even if someone tried to put this snippet of code in it would not disable touch to zoom.
Pinch to Zoom on Android Devices
However, this is not the case with the Android device. With an Android device, the device will still recognize this meta tag. Unfortunately, allowing developers or designers to disable pinch to zoom.
The best rule of thumb is that if you’re unsure of something empathetically think of what the end user is doing. Consider the contrast issues with using a phone in sunlight or you’re a person with low vision. Imagine you are someone with limited fine motor control. Or even the developer did a poor job with responsive design and having zoom enabled is necessary to just use the page (yes, this happens). Go to the device and test it with these constraints and design with accessibility in mind. Leave your comments and questions below!