Accessibility
Intro
SAP Fiori for iOS helps you create applications that can be used by a wide range of people and provides an optimal and pleasant experience for every user, including for individuals with visual, motor, auditory, speech, or cognitive disabilities. Our components are flexible, readable, adapt to different screen sizes, and support a wide range of text sizes.
To ensure that your users can easily read and make out the text and visual elements in your app, you need to employ a sufficient color contrast. When text and icons have insufficient color contrast, they may appear to blend in with the background, which can lead to usability issues. It’s recommended to strive for a 4.5:1 color contrast ratio at a minimum, though a 7:1 ratio is preferred. To determine the appropriate color contrast ratio, use an online color contrast ratio calculator.
The color palette of SAP Fiori for iOS has been validated for enough color contrast. See Colors.
Color contrast ratio examples
Built-in Text Styles
Applying iOS built-in text styles allows your app to take advantage of accessibility features, such as Dynamic Type, which provides users the flexibility of choosing their preferred text size. It also automatically adjusts tracking and leading for every font size.
SAP Fiori for iOS uses SAP 72 font, and supports dynamic type to enable accessibility features. Learn more in Typography.
Here are some examples of our components adapting to larger text sizes, and a few tips when designing a custom component.
Prioritizing Content
In this example, the description of the object cell is hidden in larger text size settings. Since object cells are typically used for previewing an object, it is reasonable to remove secondary information temporarily in order to help the user to focus on more important content.
- Text size Large (Default)
- Text size xxxLarge
- Text size AX5: The description of the object cell is hidden
Object cells with different text sizes
Rearranging Layouts
Sometimes it is necessary for a component to rearrange its layout in larger text size settings. The image and status of the object header move to the top of the component, allowing text labels below them to have more space to grow.
- Text size Large (Default)
- Text size xxxLarge
- Text size AX5: Components are rearranged
Object headers with different text sizes
Stacking Text Labels
Form cells adapt to larger text sizes by vertically stacking the key label and value. In this case, it is crucial to allow text labels to display more content instead of truncating them.
- Text size Large (Default)
- Text size xxxLarge
- Text size AX5: Form cells adapt to larger text size
Filter view with different text sizes
In addition to color contrast ratio and dynamic type, there are more ways to ensure that your app is accessible to everyone. iOS provides guidance on how to enable accessibility features such as voice over, reading support, switch control, dictation, and much more. See Accessibility on iOS for more information.
Your feedback has been sent to the SAP Fiori design team.