Accessibility

Intro

The SAP Fiori for Android design system is built to be compliant with accessibility standards. Our components and patterns meet WCAG’s POUR standards – perceivable, operable, understandable, and robust – to ensure a user-friendly experience for everyone. For standard components, we use the operating system's built-in accessibility features.

While our design system emphasizes user experience best practices, achieving full accessibility compliance relies on crafting a seamless product experience. The user flow and navigation depend on how you implement accessibility features.

SAP Fiori components come with predefined accessibility roles and labels, but their effectiveness depends on clear, specific, and localized adjustments tailored to your product's context. Deviations from the software development kit (SDK) might affect accessibility compliance, such as opting for lower contrast colors instead of default accessible ones. We recommend testing accessibility whenever custom visual or interaction designs are implemented to ensure compliance.

Color Contrast Ratio

Color contrast is the ratio measuring the difference between the color of the foreground element against the color of the background. Achieving the minimum contrast ratio ensures that all text and visual elements in our design system are legible to all users including visually impaired and/or color-blind users. If the color appears faint against the background, it may be a sign that the color has insufficient color contrast. First, determine its current contrast ratio, second, determine the target contrast ratio of the UI element (e.g., 3:1, 4.5:1, 7:1), and lastly, follow our color pairing system. To validate this, use a color contrast calculator.

Color contrast ratio examples

Color contrast ratio examples

Tonal Option Color Roles and Accessibility

The tonal option makes direct use of Material 3’s color roles, enabling you to create color combinations that meet WCAG accessibility standards. Color roles help guide in selecting colors by assigning descriptive names to tokens that indicate their intended use in the user interface. For instance, "On Primary" is specified as a foreground color for the "Primary" background. By using these descriptive names, applying color roles outside their intended purposes can be avoided to prevent creating inaccessible color combinations.

Picture 1259608573, Picture

Color contrast is achieved when using the color roles as intended

Color Contrast Modes

Horizon’s tonal option supports three levels of color contrast to accommodate the different accessibility needs of users. These different levels of color contrast include standard, medium, and high contrast modes. With each mode, color contrast is increased to meet each mode’s color contrast targets.

Picture 1126473218, Picture

Foreground color increases in contrast with each color contrast mode

Standard Contrast

Standard contrast is the default contrast mode for the SAP Fiori for Android SDK. This color contrast ratio uses different levels of contrast throughout the UI for different levels of visual emphasis.

Picture 909764686, Picture

App screen in standard contrast mode

Medium Contrast

Medium contrast increases the color contrast target to a minimum color contrast ratio of 3:1 for text, content, containers, and graphical elements. This color contrast mode ensures readability for those with moderate visual impairment at the expense of diminished visual focus.

Picture 456117477, Picture

App screen in medium contrast mode

High Contrast

High contrast increases the minimum color contrast ratio to 7:1 for text, content, containers, and graphical elements. This ensures the highest possible color contrast for people with visual impairments and emphasizes all important visual elements across the UI.

Picture 96220574, Picture

App screen in high contrast mode

Text Scaling

If users have difficulty reading small text, they can increase their font size by accessing their device’s Font Size Accessibility Settings. Toggling this mode allows users to fine-tune their font to their preferred size by increasing or decreasing the font size.

Image showing text scaling and wrapping

Image showing text scaling and wrapping

Android Accessibility Features

In addition to color contrast ratio, increase contrast and dynamic type, there are more ways to ensure that your app is accessible to everyone. IOS/Android provides guidance on how to enable accessibility features such as voice-over, reading support, switch control, dictation, increase contrast, and more. See (Accessibility on iOS / Accessibility on Android) for more information.

See Accessibility on Android for more information.

Android accessibility features

Android accessibility features

Focus Indicator

The focus indicator is an outline used around the perimeter of a component that indicates the focused state when using the keyboard controls. As of now, the focus indicator is only used in custom components because of the implementation challenges needed when implementing the native components. The following parameters are used to define the focus indicator visuals.

Color

The focus indicator color uses the brand color (Primary) for high contrast and visual emphasis. This helps users distinguish between UI elements. In instances the UI element displays a negative semantic color, the focus indicator should reflect that it’s semantic color.

Stroke

The focus indicator consists of a 2dp border stroke that surrounds the container and matches its shape. For example, in instances where the container is an oval, the focus indicator matches that shape.

State Layer

A state layer is used to supplement the focus indicator, which provides an additional visual cue for interactivity.

Shape

The focus indicator should match the touch target area size and shape.

Focus indicator in tint and negative

Resources

SAP Fiori for iOS: Accessibility

Accessibility at SAP: Guidelines

Material Design: Accessibility

Related Foundations: Colors, Typography