Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Jocelyn_Dart
Product and Topic Expert
Product and Topic Expert

Ok … confession time… after over 20 years in the IT industry and with a genetic disposition for short-sightedness, recently I’ve been leaving my web browser settings defaulted to zoom = 125%... and of course I want all my Fiori apps to support zooming.  Especially when I'm using them on mobile devices where pinch-zoom is a one of my favourite features.

[Image courtesy of Stuart Miles at freedigitalphotos.net]

As a developer you might think zoom "just happens" .. and it mostly does, but there are some innocent-looking coding practices that can unintentionally disable zoom in your Fiori app.

Now 125% is quite a mild magnification, many people need to be able to zoom to much higher ratios to be able to work with the devices most of us take for granted.  Like James Caston, SAP Technical Lead at UXC Oxygen in Brisbane, Australia, who has recently set up SAP Gateway, UI components and Fiori Launchpad as a platform for UXC Oxygen's custom InStock application at a Queensland customer.

I first met James at the Sydney SAP Architect and Developer Summit in November 2015.  You wouldn’t know James was visually impaired just to look at him.  He sat at a desk pulled out his laptop and started listening to the introduction of the hands-on session like everyone else.  At these events we usually hand out paper copies of the exercises… and often digital versions as well.

When I saw James literally lift the paper all the way up to his eyeball to try and read it I realised James had a vision impairment and dashed over to show him where to find the digital – and zoomable – version.  Getting closer I saw there was big bubble of zoomed text on his laptop screen and was excited to see he was using screen magnification software.

Recently I interviewed James to get his perspective on the importance of screen magnification software:

Why does zoom matter to you

I have an eye condition which causes degeneration of the central optic nerve – similar to macular degeneration. I can’t see detail, but my peripheral vision is fine. Magnification and zooming is critical to my being able to read and work. 

I never had any ambitions to be a “geek”. I started in agriculture in South Wales, UK.  My eyesight became bad when I was around about 18. I had to change careers.  I moved into IT because magnification software meant I could get work in IT.  Using screen magnification makes me a bit slower with some tasks, and that makes me think harder about how to do things smarter and efficiently.

I’ve worked in the UK, across Europe and now live and work in Australia, working with SAP technology, reliant on magnification and reading software to be effective in everyday life. I would not be able to do what I do today without effective magnification software.

What sort of magnification levels do you use

I use 8 to 12 times magnification – which is pretty high. ZoomText and MAGic are the screen magnification software that I use on Windows computers.  I have an iPhone6+ and I use the large font and zoom features on that to be effective with mobile. 

I sometimes use text-to-speech software which generally good. For instance I might highlight a couple of sentences and ask the computer or phone to read it to me, to save straining my eyes and to improve my speed of accessibility to read the text.

I also have a 10 times magnifying lens for non-digital situations, one as a pocket lens for quick/short use, and one set in spectacle frames to allow me to use both hands, for typing or holding whatever I am looking at. The magnifier-in-glasses frames are not standard for visually impaired people but I use whatever I can to read, and be as quick as possible to access information.

Why do you have to use two lots of magnification software

It’s a competition of features sequencing thing. When Office 2013 first came out ZoomText – which I prefer – couldn’t read it.  Because Office2013 is designed to run on a tablet it doesn’t use real text – the text reforms depending on whether it’s in landscape or portrait mode.  Until ZoomText 10.1 came out I couldn’t use it with Office 2013. So I had to swap back and forth between different software to do everything I needed to do.  That happens from time to time – sometimes you just need a particular feature from the software for a specific use case. 

I’m very lucky that my employer, UXC Oxygen, has purchased both ZoomText and MAGic for me so I can pick and choose which one suits a particular situation.

What challenges do you have when apps don’t support zooming correctly

To me, zooming is just part of what an app does. Apps that don’t zoom are a struggle to read.  I end up having to put a magnifying lens over the top of the phone screen and usually need to zoom in addition to that if the text is not clear font.  Sometimes things that look like text aren’t readable as text – because the operating system doesn’t acknowledge them as text – such as text in an image. Although mail and web pages on a smartphone usually zoom, apps often do not zoom which is very frustrating to try and read (sometimes requiring both the 10x hand held magnifier and 10x glasses magnifier used in combination to read!). I need to be able to zoom to read!

I’ve tried using screen readers in constant speech mode but it doesn’t work too well for me – it can be a bit garbled and the reading order can be read by the software in a different sequence to that which you would naturally read it due to column layout rather than row by row.

My expectations of accessibility aren’t that high, but there’s always room for improvement, and the basics are key to my being effective in life.  Scrolling and highlighting to enable speech can be fiddly sometimes.  Websites with too much information and stuff all over the place are not friendly to people with vision impairment – too much visual noise.

Do you have any funny experiences to share

Lots of people know me because I say hello to everyone.  My kids get embarrassed because they think dad says hello to too many people… even total strangers or people trying to talk to someone else.  When I meet people I can’t see who they are exactly, or if they are looking and talking to me or not, so I am friendly to everyone… just in case.

I even sometimes greets objects which aren’t people - it can be hard to tell the difference - much to the amusement of others around me! You have to be able to laugh at yourself too - it’s easier and more fun that way.

What would like every software developer or designer to know about why accessibility is important?

Accessibility is important not just for people with vision impairment… if an app is easier for everyone to use, then it’s easier for people with vision impairment to use as well. 

It’s great when developers use colours and layouts to highlight what’s important.  Good contrast is essential for easy and fast reading. Most magnification software will highlight where the cursor is – so it helps if you put the cursor where you want someone to look – finding the one field in error out of 20 fields is time-consuming.  Make it easy!

Everyone has some sort of challenge in their lives… vision impairment is just another on that list. I try to see myself as just having a different challenge to other people. I don’t see myself as a special case… it’s just sometimes I need a little help. But I’m not unique in that requirement – we all need help sometimes. A sore back is just a sore back… but it can be quite debilitating.  It’s funny how society has categorised and stereotyped particular conditions such as vision impairment. 

I consider myself lucky that people have seen a reason (and a market) for helping people in my situation.


Who benefits from Zoom

You do!  Ok so unlike me you may not often zoom on your desktop, but if you own a tablet or smartphone sometime somewhere you will already have used the zoom - if only to see a photo better, or the details of a map, or to make it easier to read that urgent document.

Pinch zoom on mobile devices became popular so quickly that lawsuits were fought over it.

You have probably also seen and used targeted zooming features to see the fine details of those gorgeous images in your shopping sites

What happens when your app doesn’t zoom or zooms poorly?  We’ve all seen those apps… you spend an excessive amount of time playing with landscape/portrait mode and vertical/horizontal scrolling to try and see it better, peer at the screen… and then give up and go elsewhere.

If you really need zoom then the consequences of poor zooming are worse - and occasionally hilarious... as a couple of visually impaired people explain.

Who really needs Zoom

People with low vision can’t see text and other content that is too small.  Most of us have experienced that problem when a font size is sufficiently small.  Being able to enlarge text enables them to adjust the text size to optimize what they can see.  In other words, being able to magnify makes the difference between a usable and an unusable app.  Low vision may involve additional complications such as:

  • Macular Degeneration – loss of central vision
  • Glaucoma – loss of peripheral vision
  • Diabetic Retinopathy – dark patches in the field of vision
  • Cataracts – blurred vision

James’ condition is Leber’s Hereditary Optic Neuropathy which is quite rare.

Many low vision conditions are more prevalent with age.  Few of us like to admit we are getting older.   Zoom is one of those features that lets us age gracefully.

And one more that is not so obvious:

Such people may find seeing too much on the screen at one time is confusing.  Zoom is a simple and effective way to reduce how much is in view at any one time.

A Glance at Screen Magnifiers

Like James, some users need more than the built-in zoom, and that’s where specific screen magnifier software is beneficial.  A screen magnifier is software that interfaces with a computer's graphical output to present enlarged screen content. The simplest form of magnification presents an enlarged portion of the original screen content, the focus, so that it covers some or all of the full screen. Ranges of 1- to 16-times magnification are common. The greater the magnification the smaller the proportion of the original screen content that can be viewed, so users will tend to use the lowest magnification they can manage.

Some of the most common screen magnifier software solutions include the two that James uses:

ZoomText by AI Squared

MAGic by Freedom Scientific

Magnifiers are also often bundled with screen readers and vice versa.

Not forgetting Open Source alternatives such as Zoom Lens

Here you can see a person with visual impairment demonstrating how they use screen magnification an introduction to ZoomText Magnification Software

What Providing Zoom Means in Practice

So what do you actually need to provide in terms of zooming. Especially given some devices can zoom up to 1500%!   The WCAG 2.0 guideline states you should be able to zoom the application to 200% without using any special assistive technology and everything should still be visible and work correctly.


1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)


http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html















What does that actually mean?  Firstly the guideline only asks you to use ordinary zoom capabilities used by all users, such as web browser zoom and pinch zoom on mobile devices, to zoom up to 200%.  Why 200%? That was chosen by the WCAG working group.  The thinking is that while it’s possible and often desirable to provide more than 200% the UI trade-offs do get increasingly difficult.  So above 200% assistive technology may be more appropriate.

Once you have zoomed to 200% you need to make sure that text and text based controls are scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier.  Now of course users may benefit from scaling other content, but text is considered the most critical.

Here’s an example showing Fiori My Inbox at the normal 100% zoom

And the same app shown at 200% zoom.  Notice how the vertical scrollbar has appeared on the right as we now need to scroll just to see the detail within each tab.


Importantly you do not need to provide a mechanism for activating the zoom. That’s already well covered – most operating systems, web browsers, and devices offer built-in zoom capabilities for all users.  You don’t need to build special cursors, or line by line readers, or partial screen magnifiers either – those are some of the features that screen magnification software provide such as zoom in the usual web browsers:

Don't forget devices… as a good Fiori app is typically a responsive app. On devices such as tablets and smartphones as accessibility features are often built-in e.g. pinch zoom.

Apple Accessibility applies fairly consistently to iPhones, iPads, and Macs.  Apple zoom allows you to adjust the magnification between 100 and 1500% (yes that’s 2 zeroes).  Similar capabilities can be found on Android devices such as Android Large Text and Android Magnification Gestures

For other devices, check their websites for accessibility information.

How to include this in my Fiori app

This is another of the accessibility features where there’s not much you need to do. As with many accessibility features it’s largely about what you should avoid doing.

These are the rules of thumb to keep in mind:

  • Don’t restrict the zoom unnecessarily
  • Especially don’t restrict text size – fixed height or width should not be used
  • Be careful in your choice of fonts - particularly don’t use fixed size fonts
  • Be careful when adding or adjusting CSS styles

In particular do not limit the zoom to maximum 200%  - just because that’s the maximum asked for under the WCAG guidelines doesn’t mean that’s the maximum anyone will need without screen magnification software.  WCAG just asks you to make sure your app zooms gracefully to 200%, and if the display starts to get a little awkward above that, it’s up to the individual user to decide how much awkwardness they can manage.

Controlling Zoom in the Meta Viewport tag

Be very careful when setting the following properties that belong to the HTML5 meta viewport tag.

Property

What it does

user-scalable

Allows the device to zoom in and out. Values are yes or no.

user-scalable = no does not zoom

initial-scale

The initial zoom when visiting the page.

initial-scale = 1 does not zoom

maximum-scale

The maximum amount the visitor can zoom on the page. 1.0 does not zoom.

maximum-scale = 1 does not zoom

minimum-scale

The minimum amount the visitor can zoom on the page.

minimum-scale = 1 does not zoom.

width

The width of the virtual viewport of the device in pixels.

  1. e.g. width = device-width sets the height to the physical width of the device

height

The height of the "virtual viewport" of the device in pixels.

  1. e.g. height = device-height sets the height to the physical height of the device

target-densitydpi

Permits customization of scaling for high resolution (HDPI) screens, i.e. high pixel density.

  1. e.g. target-densitydpi = device-densitydpi sets the height to the physical height of the device

Setting inappropriate values for these properties can completely disable the zooming of an application. 

This is an example of what NOT to do:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,

minimum-scale=1, width=device-width, height=device-height,

target-densitydpi=device-dpi" />


This blog gives a more detailed comparison of user-scalable on or off … and concludes that user-scalable is not a good idea.

Controlling Zoom in CSS

It’s also possible to make zoom adjustments or disable zoom completely in CSS.

For example:

zoom {

   zoom: 150%;

}

Or…

html {

   -ms-content-zoom-limit-min: 1;

   -ms-content-zoom-limit-max: 1;

}

Again be very careful not to disable zooming. Especially make sure you can still zoom text and text-based controls to 200%.

There are some changes happening in CSS that will make zooming easier so if you like to adjust CSS it’s worth watching those.

Further instructions for developers can be found in the SAPUI5: UI Development Toolkit for HTML5, in the section:

Developing Apps > Accessibility > Text Size and Fonts


As usual if you are using OpenUI5 rather than SAPUI5 the documentation, links, and considerations are the same as for SAPUI5, at least for controls delivered by SAP.  That’s because accessibility is part of SAPUI5’s control Product Standard and Acceptance Criteria.  Of course, for controls contributed to OpenUI5 by other sources, encourage them to include accessibility aspects such as zoom.








Good reasons for restricting zoom

Certain images may need special handling.  For instance QR Codes may not be useful if zoomed past a certain size or off the page.  Similarly a decorative image may become unacceptably pixelated.

Maps may zoom too large or too small to be usable.  Sometimes the zoom can kick in too quickly on embedded maps, especially on smaller devices.  It can be useful to set minimum and maximum zooms to prevent the map becoming unusable.

Bad reasons for restricting zoom

Aesthetics

Better option: Recognize that aesthetics are subjective. Leave zoom on. If the aesthetics are poor, rethink your responsive design.  Perhaps it’s only your decorative background image that doesn’t need to zoom past a certain point.

Here’s an example of the kind of developer thinking we probably do NOT want to see these days... https://css-tricks.com/zooming-squishes/  In the writer’s defence this is over 2 years old so hopefully he’s moved on from this stance … but note particularly the stated lack of empathy for real user needs.  In User Experience it’s worth remembering that the user should have the final say on what they actually want to use.  And it’s also worth remembering as a developer that just because you can do it, doesn’t mean you should do it.

Zoom annoys you

Zoom does annoy some people … especially when they tend to activate it accidentally.

Better option: Learn how to turn zoom on and off for yourself.  Leave zoom on for others.

Turning off zooming makes navigation faster

True – depending on the device specifics and complexities of focus. Even so don’t disable zoom.

Better option: Recognize that navigation speed is not the only or most important consideration for many users.  In fact people with motor impairments may deliberately reduce the speed of navigation anyway.

Zoom can make my content go off screen

True.  Even so don’t disable zoom.

Better option: Rethink your responsive design.

And a couple of final blogs on why you should not disable zoom:

Don’t forget other tech integrated in your Fiori app

Any good developer will always consider the whole solution, not just the code they are working on.

If you have integrated images, video, maps, charts, or other technologies in your app, make sure they also zoom appropriately.

Testing Zoom

Make sure you know how to set your web browser zoom.

Make sure you know the zooming options specific to the device you are using.

Ask your users what screen magnifiers they are using and if you can test with those also.

Better yet – get a couple of users who are used to using screen magnifiers to test your app.


Here's a few quick tests you can do to check your Fiori app is zooming correctly:

  1. Enlarge the application UI text by zooming up to 200%
  2. Is each text element and each image enlarged to double width and double height?
  3. Is the text still readable (no overlaps)?
  4. Are text alternatives for non-text content magnified in the same way?
  5. Is the full content and functionality still available? Can you physically get to everything you need to on the screen?  Especially check any dialog (popup) boxes. For instance: do scrollbars appear when the zoom size means the box is not fully visible on the screen?
  6. Does the layout still look OK?  Be careful here… this is never about personal aesthetic preferences.

Don't be afraid to go a little further. For instance at 200% zoom the My Inbox filter pop-up is tantalizingly close to filling up the screen.  So if you have a pop-up like this one you might want to try 250% and just double-check the vertical scroll appears when you go above 200%.

And a few final blogs on the subject of zoom testing…

Because while some believe that the web browser zoom is great for accessibility

Others warn that web browser zooming may not be enough for a true test

So you might want to consider additional tools for more rigorous testing


If you liked this blog

You might also like to read…

Keyboard Navigation enables the cool toys - Accessibility & Fiori

Accessibility & Fiori - High Contrast Black theme

Accessibility #GAAD & Fiori - Beyond High Contrast Black

8 Comments