Accessibility - Best Practices for Making Stories Accessible
Use these guidelines to help make the SAP Analytics Cloud stories and visualizations that you create accessible for everyone.
You can make your stories more accessible with changes to contrast and colors, text and font, chart design, and table formatting.
- These guidelines are intended for story designers who have a good understanding of SAP Analytics Cloud features.
These best practices are recommendations and not strict guidelines.
Viewing
Encourage your story viewers to maximize their browser and select full screen in the tool bar to get a better view.
If individual widgets are too small, viewers can also select full screen mode from each widget.
To display the menu, in the widget either right-click or select 
(More Actions), and then select 
Fullscreen.
Accessibility Testing
To ensure that your story is accessible to all audiences, here are some options to test the clarity of your visualizations.
-
Low light test: Turn the screen brightness down on your device and try to view the charts in your story.
-
Squint test: Squint your eyes and read your story to see what your visualizations might look like out of focus.
-
Contrast Checker: Use a contrast-checking tool to ensure that you are meeting the minimum contrast ratio requirements.
-
Contrast Settings: Enable high-contrast display settings in your operating system to confirm if your content and charts are still visible.
To update your display settings, refer to the Apple and Windows support guides.
-
Ask a colleague: Ask a colleague to critique the readability of your story.
Getting a second opinion can help identify potential improvements.
-
Device Preview (Only available for Responsive pages.): Navigate to the toolbar and select
Format 
Device Preview
to see how your story might look on different devices.Try a variety of device types to ensure that clarity is not compromised.
You can also customize the font scaling for specific platforms (iOS small phone, iOS tablet, and so on) to better fit smaller screen sizes.
High-Contrast Themes and Templates
As a story designer, you need to pay careful attention to color choices to ensure that your visualizations can be easily read.
You can use global standards such as the Web Content Accessibility Guidelines (WCAG) to help determine the contrast ratio between the object and the background.
| Object | Contrast Ratio |
|---|---|
|
Images, shapes, and large text (18pt or 14pt bold and larger) |
Minimum contrast ratio of 4.5:1 |
|
Small text (smaller than 18pt or 14pt bold) |
Contrast ratio of 7:1 |
Create Your Own High-Contrast Template
To create your own design, use story preferences to configure colors and apply them to the entire story.
Many of these changes can also be applied at the chart or table level, however, it is best practice to apply them all at once using story preferences.
Use the following process to create a simple high-contrast black story template.
-
Create a story and then select
File Edit Story Preferences. -
In the story preferences panel, update the page settings by changing the background color and opacity.
Page Settings Element Option Color Setting Responsive Pages
Page Background
Black (000000), with opacity set to 100%
Lane Background
Canvas Pages
Page Background
Black (000000), with opacity set to 100%
-
Update the tile settings to ensure high contrast between the background and font colors.
For a high-contrast ratio of 21:1, use a black (000000) background with white (FFFFFF) text.
Tile Settings Object Element Color Setting Chart/Geo
Tile background
Black (000000), with opacity set to 100%
Font color
White (FFFFFF)
Axis Line color
Tile border
All borders, white, width 2
Tables
Tile background
Black (000000), with opacity set to 100%
Font color
White (FFFFFF)
Tile border
All borders, white, width 2
Text
Tile background
Black (000000), with opacity set to 100%
Font color
White (FFFFFF)
Tile border
All borders, white, width 2
Header
Tile background
Black (000000), with opacity set to 100%
Font color
White (FFFFFF)
Tile border
All borders, white, width 2
Shapes
Tile background
Black (000000), with opacity set to 100%
Tile border
All borders, white, width 2
Collapsed and Expanded Input Control
Tile background
No tile backgrounds
Font color
White (FFFFFF)
Tile borders
All borders, white, width 2
Others
Tile background
Black (000000), with opacity set to 100%
Font color
White (FFFFFF)
Tile border
All borders, white, width 2
TipAt this point, you may want to set border colors and thickness for specific tiles to increase contrast. However, this can also be completed at an individual widget level in the styling panel.
-
Once the settings have been configured, apply them to all pages, lanes, and widgets.
Color Palettes: High-Contrast
For some individuals, certain color combinations make it difficult to understand visualizations. They need visualizations that are created from a color palette that guarantees the minimum color contrast to the background.
You can use story preferences in SAP Analytics Cloud to create your own personalized color palettes to meet your accessibility requirements.
For a high-contrast black theme, avoid using any dark shades which do not fulfill the 4.5 contrast ratio when creating a story with a black background. Use nine distinct light colors with a minimum color contrast of 4.5 to black.
For a high-contrast white theme, all chart elements can be set to black by choosing a color palette and then either setting all nine color selectors in the palette to black, or deleting all but one color selector.
You can use the following examples to create a high-contrast black or white color palette. The tables include a color swatch, the associated hex code, and the contrast ratio for each color.
The typical color palette in SAP Analytics Cloud contains 9 colors; these examples have 10 colors.
|
Color |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Hex value |
FFC847 |
ED884A |
DB9292 |
E269C9 |
8CA7D5 |
6BD3FF |
7FC6C6 |
B2E484 |
B995E0 |
B0BCC5 |
|
Ratio |
13.6:1 |
8.2:1 |
8.5:1 |
7.1:1 |
8.6:1 |
12.4:1 |
10.8:1 |
14.3:1 |
8.4:1 |
10.8:1 |
|
Color |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Hex value |
5F5800 |
5E4101 |
973333 |
961D7C |
365892 |
004CCB |
105B5B |
26340B |
6C32A9 |
4A5964 |
|
Ratio |
7.3:1 |
9.4:1 |
7.4:1 |
7.6:1 |
7.1:1 |
7.3:1 |
7.9:1 |
13.3:1 |
7.9:1 |
7.2:1 |
SAP Analytics Cloud has four different color palettes, but three of them use colors scales with subtle color differences that are difficult for visually impaired users to perceive.
Whenever possible, use the Standard color palette. However, if you need to use one of the other palettes, make sure that there is a good contrast between the background and chart colors.
For information about the color palettes, see Story Preferences and Details.
Font Size and Style
While titles and explanations may be provided to support visual elements, those descriptive texts may also need to be changed so that they are readable.
To improve readability, maximize font size as much as you can without compromising story spacing. Set the header text font to be at least size 18, and the descriptive text font to be at least size 14.
Because every story is different, you'll need to consider the consumption device (monitor, mobile device) as well as design themes.
Avoid any decorative or script font styles as they may be difficult to read. Instead, use simple sans serif typefaces for improved legibility (for example, use 72-Web/Default and Arial).
You can update font styles and sizes for your entire story in the story preferences or at an individual widget level in the styling panel.
Text Labels and Titles
Titles and labels provide key context to help viewers understand visualizations. Including dynamic text in your story will ensure that titles remain up-to-date regardless of filters or linked analysis.
Whether using text labels or dynamic text, it's important to avoid using any unnecessary jargon or acronyms that may confuse your audience.
To add dynamic text in SAP Analytics Cloud, select the
chart title text or some other text element, and then right-click and select 
Dynamic Text.
Alternative Text Descriptions for Charts
To help viewers who use screen readers, add an alternative text description.
Alternative text descriptions are short labels that describe the context of visual elements, allowing you to describe key information to your audience. They can be put in a text box above your chart visualization or in the chart footer.
These text boxes and footers need to be updated when your data changes.
You could also use smart insights to provide supplementary contextual descriptions and insights into your data; the smart insights adapt as your data changes.
Currently, there are several limitations with what screen readers can read. Microsoft's Narrator extension can have some difficulty identifying text boxes. However, Google Chrome's screen reader works fairly well.
Chart Design
Charts can become complex and difficult to understand, especially for individuals who cannot distinguish between fine details or colors. When designing charts, your formatting plays a crucial role in presenting information in an easily digestible manner.
Patterns
Combining colors and patterns in your charts can help users with color vision deficiencies differentiate between various measures. This conveys information through two distinguishable sensory characteristics.
In SAP Analytics Cloud, you can apply patterns to measures, but not to dimensions.
In the Builder panel, you can select different pattern types that can be synchronized throughout your entire story for improved consistency.
For example, if you set sales revenue to an orange striped pattern, that setting will be applied to all charts with the sales revenue measure.
Sorting and Ranking
Sorting or ranking your data helps to ensure that your visualizations are simple and easy to understand.
For example, when you apply a sort, you can quickly determine the worst- or best-performing sales managers.
Number Formatting
In some cases, less is more. With number formatting, changing your scaling or decimal places may help limit complexity. You can format individual calculated measures from the Builder panel, or you can use the Styling panel to format numbers for the entire widget.
For specific chart types, you can also format the X and Y axis scale in the Styling panel.
Show/Hide Settings
The Show/Hide settings give you the choice to present only the most relevant information.
Consider your audience and if a widget is too busy, consider hiding some information.
Data Labels
Data labels can be formatted in the Styling panel to maintain contrast levels and reduce overlap.
For charts with data labels inside of bars, you may need to enable data label background colors and select the avoid overlap and round values check boxes.
Spacing
The size of your chart plays a crucial role in showing all relevant details. If a chart is too small, certain details may be distorted or automatically hidden.
Try to maximize chart size while balancing the spacing between other visualizations to avoid overlap.
When possible, limit the number of dimensions and measures in a single chart to avoid overcrowding.
Chart Components
Adding reference lines, thresholds, or variances to your visualizations can provide valuable information to your audience. It is essential to format these components to maintain a high-contrast ratio to improve visibility.
Reference Lines
When adding a reference line, alter the label and line color to maximize contrast for your theme.
Thresholds
Threshold ranges can be configured with a variety of shapes and custom colors that allow for unique combinations to help distinguish them from one another.
For threshold styles for tables, the Styling panel has a default symbol option as well as several color styles.
Choose colors that fulfill the minimum contrast to your background. If the threshold is shown as a symbol, it would be 4.5:1; if it is shown as the text color, it can be up to 7:1.
Variances
Variances that are added to charts will be shown as a separate bar, an integrated bar, or a data label.
To add or edit a variance, navigate to the context menu, select Compare To and open the variance panel to edit the display options.
The separate bar display is easier to see than the other two options. However, even that display can cause problems because the bar's default red and green colors can't be changed.
The default colors may not work for high-contrast white or other templates with light backgrounds, but they are acceptable for a high-contrast black template.
Input Controls
Interactive elements like input controls need to be consistent and easily identifiable.
Specific input control elements like button content and border colors can be updated in the styling panel.
To remain consistent, the input control should be positioned in the same location throughout all your pages.
Table Design
In addition to configuring table styling and font colors in story preferences, you can take other steps to improve the clarity of your tables.
-
When inserting a table, ensure that it is large enough to limit any horizontal scrolling so that all columns are visible.
-
In new stories, Optimized Presentation is the default table type for all tables. Continue to use this option as it will help with pixel-level resizing of columns and rows.
-
If the ability to resize rows is needed, you can set the row heights automatically by using the styling panel, or manually by dragging and dropping.