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.

Who Do These Guidelines Apply To?
  • 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 Start of the navigation pathFormat Next navigation step Device PreviewEnd of the navigation path 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.

Return to topic list

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

Return to topic list

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.

  1. Create a story and then select Start of the navigation pathFile Next navigation step Edit Story Next navigation step PreferencesEnd of the navigation path.

  2. 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%

  3. 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

    Tip

    At 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.

  4. Once the settings have been configured, apply them to all pages, lanes, and widgets.

Return to topic list

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.

Note

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.

Example

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.

High-Contrast Black

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

High-Contrast White

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.

Return to topic list

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.

Note

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.

Return to topic list

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.

Note

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.

Return to topic list

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.

Note

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.

Return to topic list

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.

Note

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.

Return to topic list

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.

Return to topic list

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.

Return to topic list

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.

Return to topic list