Foundation Accessibility in SAP Fiori

Updated: August 25, 2020
SAPUI5 Version 1.80

Accessibility in SAP Fiori

Intro

Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.

Accessibility support is incorporated at two levels:

  • Framework level: Many fundamental accessibility features are built into the core design elements up front and are available to app teams out of the box. This ensures consistency across all products.
  • App level: Some accessibility features need to be added or adapted to reflect app-specific context. These need to be considered whenever you design an app.

This article outlines how accessibility requirements are handled in the SAPUI5 reference framework:

Accessibility Provided at Framework Level

Visualization

Minimum contrast: Following the requirements of the international Web Content Accessibility Guidelines WCAG 2.1 (see References), SAP Fiori’s default theme was designed to fulfill the requirements for minimum color contrast. In addition, we provide high-contrast themes that support the required contrast ratio of 7:1 for texts. They can be chosen in the user settings. The individual theme choice is saved as a preference until the user changes it again.

More information:

Consistency of icons: A comprehensive icon library ensures consistent icon usage within a product and also across products. The icon library includes predefined descriptions. This enables the development teams not only to use consistent icons, but also to implement meaningful descriptions for tooltips as a textual alternative for graphical representation. However, in some cases you may need to adapt these descriptions to the specific use case.

For more information, see Iconography.

Keyboard focus visualization design: Focus visualization is very important for user efficiency. SAP Fiori uses a contrast ratio that makes the current focus stand out in all themes.

Layout adaptation for different devices: Since SAP Fiori can run on various devices, it comes with a responsive layout that adapts to the display resolution parameters of the individual device.

For more information, see Multi-Device Support: Responsive vs. Adaptive.

Support for text resizing: Users can adjust the font size themselves using the browser zoom. The responsive layout adapts to these manual adjustments automatically.

For more information, see Multi-Device Support: Responsive vs. Adaptive.

 

Keyboard

Keyboard navigation and control interaction: All standard UI elements and controls are designed to be keyboard-enabled. All suitable input channels (such as mouse, keyboard, or touch) are treated equally according to the capabilities of the device or the individual preferences of the user. For example, some users may prefer using the keyboard instead of a mouse, which lets them work faster.

For more information, see SAPUI5 keyboard support on SAP Help Portal.

Tab order of controls: According to the placement of controls on the screen, SAPUI5 supports keyboard navigation with a predefined tab order sequence. This includes the tab order for the floorplan, the sequence of accessing individual applications, and the navigation in the application itself. According to control containers and layout, the application needs to be designed to support this order (left-right-top-bottom for western languages, for example).

 

Messaging

Standard messaging patterns (busy, errors, notifications): In SAP Fiori, a message system is implemented. This ensures that system messages appear at predefined locations with a consistent design.

For more information, see Message Handing.

Supporting Accessibility at App Level

Many requirements are already covered by the technology framework, but design aspects that are related to the individual purpose of the application still need to be implemented by the individual design teams. Here are some examples:

Initial focus position: To enable users to work through a task efficiently, always set an initial focus for the task. Set the focus to either the first logical interaction element or the first element in the task.

Error handling: Although the shape and appearance of system messages is predefined, ensure the message content is clear and easy to understand.

Fast navigation: Ensure that the navigation within your application is logical and follows the task structure for the intended purpose. To enable faster navigation, SAPUI5 allows users to skip groups (with F6 or Shift + F6). When designing apps with a large set of functions or information blocks, always form logical groups to help users navigate efficiently. You can form logical groups using a container, a toolbar, or other grouping elements.

Screen reader support: Although screen reader support is technically prepared at framework level, it is still the developer’s task to arrange the individual UI elements in relationships that are needed for a screen reader. Also, the default texts for icons, image placeholders, and other graphical elements may not be available or suitable for your application use case. Always review these texts and replace or redefine them where necessary.

Changes That Impair Accessibility

Be aware that any changes in the framework definitions can impair accessibility support.

Custom controls: SAP Fiori and SAPUI5 comprise an extensive set of controls. These controls come with numerous features that support accessible implementation, including keyboard enablement, resizing behavior, or support for theme changes. If you think that your use case requires a custom control, think twice. A custom control needs to fit into the interaction concept, and all the features must be coded by the app team. This includes accessibility requirements, but also many other aspects, such as globalization and writing modes (left-to-right or right-to-left), security, performance, maintenance, or documentation. Before developing a custom control, always check if your use case can be handled by existing controls. However, it is important to use controls only for their intended purpose.

For more information, see the SAPUI5 documentation.

Custom colors: Change individual colors only in exceptional cases and after very careful consideration. Bear in mind that any color changes must also be applied to the different UI element states (such as active, hovered, or inactive buttons). Additionally, these changes may not work with theme changes or high-contrast modes of the underlying operating system. When changing a single color, you may need to create an entirely new theme to ensure that the appearance of your app remains coherent and consistent.

Fixed width or height:  If you set a fixed width or height, your app will no longer be responsive and adaptive. Information might get lost if the user resizes the application window, zooms, or changes the device, for example.

Related Links