Accessibility & Fiori – High Contrast Black theme
Imagine you are sitting quietly at the back of a large presentation theatre at a conference, Teched for instance. The presenters are far away at the front of the room, and the whole theatre is in night-black darkness so that everyone can see what’s happening at the front. You’ve been there for almost an hour, and your eyes have adjusted to the gloom.
Suddenly the person next to you pulls out their smartphone and its bright white screen springs to life. All around you people are making howls of protest, and you are so blinded by the light you have to avert your eyes for a second. When you glance back, you try to see the screen to see what could be so important that it couldn’t wait until the end of the presentation. You have to squint, and even then you can barely make out any of the symbols on the screen. And now your head is starting to ache.
You’ve just experienced a tiny taste of what it is to be light sensitive. And you’ve discovered why people need High Contrast Black theme.
What is High Contrast Black Theme
The High-Contrast Black (HCB) theme for SAPUI5 controls is a predefined theme that supports people with visual impairments, especially those with light sensitivity. It’s one of the many features that are needed to provide digital Accessibility for all. Like most Accessibility features, High Contrast Black benefits not just those who can’t work without it, it makes for a better user experience for everyone.
What does High Contrast Black look like? Compare these screens. Here’s the Fiori Launchpad with the standard sap_bluecrystal theme followed by the High Contrast Black equivalent.
And here’s one of the standard Fiori apps, My Inbox, in the default sap_bluecrystal theme followed by the High Contrast Black theme.
You might notice that it’s not just the colours that have been changed, the font size has been adjusted slightly as well. More about that later.
It’s also worth knowing that International Accessibility standards – (for the United States of America) US-508, (for Germany) BITV 2.0, (for rest of the world) WCAG 2.0 AA + AAA – require not only options to adjust colour and contrast settings, but also certain minimum contrast ratios between foreground (text) and background colours. These minimum contrast ratios have already been considered and checked in the SAP High Contrast Black theme.
Who really needs this
High Contrast Black helps users who are extremely light sensitive (also known as Photophobia) and also many users with severe visual impairments, as it enables them to see the text and UI elements better and faster.
Photophobia, or light sensitivity, is an intolerance of light. Sources such as sunlight, fluorescent light and incandescent light all can cause discomfort, along with a need to squint or close your eyes. Headaches also often accompany light sensitivity. The degree of light sensitivity varies – some people are only bothered by bright lights, for others almost any light is irritating. Light sensitivity is a part of a variety of conditions such as conjunctivitis, corneal abrasions, detached retina, refractive surgery, albinism, colour blindness, and some people are just unlucky enough to be born with enlarged pupils.
Now think about most user interfaces you see on your smartphone, tablet, laptop, desktop or other device. Often these user interfaces are primarily dark text on a light background. For people with light sensitivity, looking at a screen which is mostly light feels something like staring into a dazzling spotlight. It can physically hurt, and it’s hard to make out anything much on the screen.
But there’s an answer – provide an option to set the screen to mostly dark background with light text. In other words, we need a theme. SAP Fiori provides the standard High Contrast Black theme for this purpose. In fact, SAP has a long history of providing accessible software in its user interface technologies, and even as far back as SAPGUI, the High Contrast Black theme was well known.
Who else can benefit from High Contrast Black theme
Just about everybody at some time or another. Ever had to work after a hard night out? Or after staying up half the night with a crying child? Or suffering a bad headache or migraine? Or just suffering from eye strain from looking at too many screens all day? Temporary light sensitivity can also be caused by a variety of temporary conditions such as contact lens irritation, sunburn, and certain medications.
Statistics on people suffering light sensitivity vary widely. One of the standout statistics where light sensitivity is a factor is digital eye strain, also known as Computer Vision Syndrome (CVS), from spending too much time looking at computer screens. In their 2015 Digital Eye Strain report the Vision Council of America estimates over 60% of all American adults suffer from it. And its estimated that people who spend more than 2 hours per day in front of digital screens have a 90% likelihood of suffering from it.
So before you turn off your screen… one of the ways to minimize eye strain is to adjust the colour and contrast of your display.
Now at this point some of you may have heard of colour inversion settings that are often provided as part of device and browser settings. So why don’t we just use those? Colour inversion settings don’t necessarily provide optimal readability – it’s not sufficient to just adjust the colour only, font size and contrast needs to be adjusted as well. Not to mention the results of colour inversion can be a little bizarre. Here’s the Fiori My Inbox screen using Google Chrome colour inversion … blue turns to orange and various browns; the dark footer becomes an undesirably light footer; and the bright green Approve and red Reject buttons take on some very unexpected hues.
As an end user, how do I turn on the High Contrast Black theme
It’s as simple as choosing the theme in your user preferences.
Or if you launch your app via a URL, just add the parameter sap-ui-theme=sap_hcb
As a developer, how do I include this in my custom Fiori app
The good news for Fiori (SAPUI5) developers is most of the time there’s really nothing much you need to do…except permit your users to choose the High Contrast Black theme by making sure it’s one of the supported themes for your app.
It’s a good idea to include High Contrast Black “sap_hcb” in the list of supported themes area of your App Descriptor file, e.g.
It pays to be considerate in your choice of SAPUI5 libraries. These are the SAPUI5 libraries that support High Contrast Black:
Don’t forget to consider the images you are using as well. You might notice in the screeenshot of the FioriLaunchpad with High Contrast Black the customize and extend is an image which remains bright white, so perhaps try to limit the number of bright images on any one screen.
Finally you can also provide links to your app with the High Contrast Black theme preset by setting the parameter sap-ui-theme=sap_hcb
And lastly… one from the left field
Next time you go to conference, wouldn’t it be great if your annoying neighbour’s device used it’s ambient light sensor to automatically set an appropriate theme? I posed this challenge to a colleague, Thorsten Frietag (of IoT toy train fame), and he managed to get an example up and running in under an hour in a specific browser. However what we did discover was that currently the limiting factor is not Fiori, but the availability of APIs for ambient light sensors on many devices. Something both Google and Microsoft are working on – so maybe we’ll be able to use those sorts of smarts at next year’s Teched?
Interested in more about Accessibility?
More blogs on accessibility and user experience published by members of SAP’s dedicated Accessibility team can be found on experience.sap.com including:
Accessibility and User Experience
Accessible Rich Internet Applications ARIA Part 1: Introduction
Accessible Rich Internet Applications ARIA Part 2: ARIA
For a general discussion of accessibility and the design implications Accessibility #GAAD & Fiori – Beyond High Contrast Black
Be aware that:
- As of Build 1.28 Fiori provides Keyboard Handling
- As of Build 1.30 Fiori provides support for Screen Readers
“Light Bulb” Image courtesy of Naypong at FreeDigitalPhotos.net
Other images were taken from screenshots using http://sapfioritrial.com
Great post Jocelyn.
I like how you really put me into the shoes of someone who suffers from light sensitivity. Walking in the shoes of our users is a key part to good UX Design. Also nice thinking on the ambient light sensor to detect and change the theme based on the current context/setting... another great UX Design principle (consider the context of the user).
Glad to see screen reader support available in 1.30
P.s. on a side note it is disappointing to see that after over 500 views (563 as I write this) only I have taken the time to comment and rate your post. Whatever happened to "paying it forward" 🙁 Pay it Forward. Pay it Back!
Thanks for your feedback - appreciate you taking the time.
Unfortunately I think too many people still accessibility as something to worry about when they are explicitly asked for it, instead of recognizing that:
The message that we need to get across is that Accessibility improves the user experience for everyone and that's the journey that we need to take both designers and developers on to understand the importance of including these features as a matter of habit, rather than only on special request.
The aim of these blogs is to try to not only make the case for considering accessibility but to help designers and developers understand what's involved in making it happen.
I just incorporated the blog into the Fiori space and added the broadcast comment on the All Things SAP Fiori page, so hopefully it will bring more attention to the cause (and not just more page views).
Thanks Jeremy! Appreciated.
SAP impacts so many people's lives - want Fiori to be a positive impact - not just easier/simpler but actually better for all.
Coincidentally last night was watching Graeme Innes - a visually impaired lawyer who advocates for people with disabilities describe the failure to include accessibility as "the soft bigotry of low expectations". Including accessibility basics like this should be a no-brainer.
Such a small amount of effort to give a better UX for everyone.
Nice document Dart .. l
It's Jocelyn - but thanks!
I'd like to change the SAP logo to our client's logo in the sap_hcb theme but it does not have the same options as the other themes. Is this normal?
Has anyone been able to modify the logo in that particular theme?
Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question. The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable. Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem. If a blog or document is related, put in a link. Read the Getting Started documents (link at the top right) including the Rules of Engagement.
NOTE: Getting the link is easy enough for both the author and Blog. Simply MouseOver the item, Right Click, and select Copy Shortcut. Paste it into your Discussion. You can also click on the url after pasting. Click on the A to expand the options and select T (on the right) to Auto-Title the url.
Thanks, Mike (Moderator)
SAP Technology RIG
Thanks Mike.. Hadi - please do raise the question.
There are some restrictions and these are deliberate (otherwise the value of High Contrast Black would be lost).
For those following this thread, here is the link to the discussion:
Jocelyn, it would be great if you can post a video navigating the SAP Fiori Launchpad using NVDA/JAWS and with your monitor switched off...
May be you never notice but pre FES3.0, users cannot even Tab through the application, even if they use the Arrow Keys to traverse the application nothing is announced by the screen readers, because the tiles don't have the required attributes (accessibility related) and Divs are set to tabindex -1.
If you are using a specific version of screen reader, that actually reads the HTML correctly please write another Blog about it and the world will appreciate it. Most screen readers seem to interfere with Keyboard Event handling.
Do your blogs mean UI5 applications are accessible but Fiori Launchpad is not?