There’s a thin line between accessibility and usability: Accessibility means usability for any user, anywhere and anytime. True accessibility is about the technology as well as about the design, without loss of content, functionality and efficiency.
We’ve counted down the top seven ways how SAP Fiori’s approach to simplicity achieves a beautifully accessible design. But before, quickly watch our video about SAP Fiori and accessibility.
#1 Color and contrast*
SAP Fiori widely follows international accessibility standards which require minimum contrast ratios between text and background. Besides its standard Belize theme, SAP Fiori offers predefined minimum and high contrast themes that operate under a wide range of light conditions, such as sunlight hitting the screen and window reflections.
SAP Fiori’s High Contrast Black (HCB) theme ensures the screen is easily readable in light sensitive situations. Here, the background of the user interface is primarily black. The foreground elements, such as text, icons, and the outline of UI elements, are primarily white. Hight Contrast White (HCW) works the opposite way: White is the canvas and standard fill color, whereas foreground elements are black.
For more info, have a look at Olga's blog about color and contrast in SAP Fiori.
#2 Zoom*
In SAP Fiori, you can zoom up to 200 percent without assistive technology. This helps people with visual impairments to read screen text more easily. As well, both non-text content and text-based controls scale accordingly: text elements and images can automatically double in width and height.
Since SAP Fiori apps are responsive, layout and structure are retained when zooming. When you zoom in, you can reach all the buttons and features of popups or dropdowns. Naturally, scrollbars also appear whenever data appears below the edge of the screen.
The first screenshots shows the standard zoom, whereas the second screen zooms in 200 per cent.
#3 Tooltips and labels*
SAP Fiori offers an icon library containing 600 unique icons with defined meanings and consistent design. If you hover over an icon, a fully visible tooltip or label appears. This is also true for buttons, images, and input fields as well as for a sequence of input fields, such as street and number.
#4 Keyboard support*
A lot of users prefer to navigate a screen using the keyboard instead of mouse since it is faster and more accurate.
Keyboard users must be able to activate the functionality of all active elements. In SAP Fiori, buttons, form elements, drop-down menus, dialog boxes, and other widgets are operable by tabbing through the user interface. A logical reading order and a subtle dotted line around the control in use facilitate efficient keyboard navigation.
In SAP Fiori, all available features can be accessed by using [TAB], arrows, [ENTER] and [SPACE]. For example, in the SAP Fiori Launchpad, you can navigate between the tiles in a catalog category with the arrow [LEFT, RIGHT, UP, DOWN] keys. With [SPACE) you can enter a tile, and you can navigate between controls by pressing [TAB].
For faster keyboard navigation, SAP Fiori can group UI elements so that you can bypass them, for example, all elements in the header of an application or adjacent controls.
For more info, have a look at the blog about keyboard interaction.
#5 Screen reader support*
There are two ways a screen reader can provide feedback to the user: speech and braille.
The conversion from the text on the screen to speech enables users to multitask. If you can interact with your device in situations when you can‘t look at the screen, more fits in your busy day. Sketch a prototype for your new app, look out of the window to relax your eyes or stir your coffee while your screen reader reads to you.
Often, screen reader software comes with the operating system. Coupled to keyboard navigation, they can take advantage of the best coding practices found in SAP Fiori, such as clear control roles, states and identifiers.
When you start a screen reader, you will be informed about all visible user interface elements: each element’s role, name, state, label, tooltip, further information for interactive elements (errors, usage hints), including screen updates like application messages and popups. As you can see in the screenshot, the tile which is being read, is surrounded by a box.
For more info, have a look at the blog about screen readers.
#6 Orientation*
For easy orientation, meeting the user’s expectation is key. SAP Fiori follows the same intuitive navigation paradigms of various web applications. Repeated navigation areas are placed in the same location and follow the same order across all screens, whether you fulfill a sales order, review your latest KPIs, or manage leave requests.
Here, the initial focus is on the element that is most likely to be edited or interacted with first, such as mandatory fields on a form. When opening or closing a dialog or navigating between pages, the focus stays persistent. For example, if the control was inside an action sheet, the focus stays on the button that opened the action sheet.
Also, SAP Fiori avoids unexpected changes, flickering, and flashing content for more than twice a second. This is to prevent distraction and possible seizure-inducing effects.
#7 Transparency*
SAP Fiori always strives for compliance with accessibility regulations. SAP Accessibility Status Documents describe product-specific accessibility features, the testing environment, as well as the state of standards, guidelines and requirements. Consult the help documentation about parameters that might need to be configured to enable specific features.
SAP Fiori’s design philosophy is based on five core principles: role-based, adaptive, simple, coherent, and delightful. Sounds familiar to the Top 7 you have just read? It’s no coincidence: Instead of being a resource costly afterthought, SAP Fiori considers accessibility from the very beginning while improving usability for everybody.
*All accessibility features described in this article refer to SAP Fiori Design realized with SAP UI5’s technical prerequisites for accessibility support. This article does not give a statement on the accessibility support of any SAP product. The realized implementation within an individual SAP Fiori application or an SAP UI5 control might differ. Please contact accessibility@sap.com to learn about the accessibility support of a certain SAP application by requesting an Accessibility Status Document.
- SAP Managed Tags:
1 Comment
