TIBCO Cloud™ Spotfire® Web Client User Guide

Designing accessible dashboards

When creating dashboards for a large audience you should be aware of how you can make your visual analytics dashboards more accessible.

Here are a number of guidelines to help you design and construct accessible dashboards.

Use colors with high contrast and be consistent

  1. Provide contrast for items in visualizations, at least 3:1.

    For colors in your visualizations and items that people will interact with, pick colors that have a contrast ratio of at least 3:1 against the background color.

  2. Provide contrast for text, at least 4.5:1.

    For colors of text elements in your dashboard, pick colors that have a contrast ratio of at least 4.5:1 against the background color.

  3. Pick colors that are color-blind-friendly.

    For colored items that will be compared, pick colors that are color blind friendly. Use color-blind-friendly palettes and avoid using red and green together.

  4. Visualizations of the same type should be consistent in a dashboard.

    If there are two or more visualizations of the same type in a dashboard (for example, two pie charts) these should be consistent. This means that they should have similar settings as well as the same "look and feel". However, they do not necessarily have to use the same colors. For example, keep the legends on the same side for visualizations of the same type.

  5. In addition to color, use other visual means to provide information.

    Avoid relying on color only to differentiate items in visualizations. Consider adding differences in size, shape and patterns, so that the items can be distinguished from one-another.

Make your content descriptive and readable

  1. Provide descriptive visualization titles.

    The title should describe the content in a visualization and introduce the consumer to the visualization.

  2. Provide descriptive legends.

    Legends in visualizations must describe the values clearly.

  3. Provide descriptive page titles.

    Page titles should describe the content that the consumer can expect on the page.

  4. Provide text alternative for visualizations.

    There should be a text alternative present for all visualizations to aid those that cannot see or for some other reason cannot comprehend the visualization. This should include a description of the visualization and its purpose, as well as potential generated insights.

  5. Provide an overview of the dashboard.

    Include a description of your entire analysis. What is the purpose of it, how should it be navigated and what should the consumer expect?

  6. Use sans-serif fonts.

    Pick a sans-serif font such as Roboto or Arial. Avoid fonts such as Times New Roman because it is more difficult to read for some people.

  7. Provide text larger than 16 pixels.

    If possible, use text that is at least 16 pixels tall. If smaller text is used it requires higher contrast than step 2 under "Use colors..." above suggests.

Minimize the complexity of your visualizations, and the dashboard as a whole

  1. Provide a logical structure in lists and tables.

    Tables and lists should be structured so that it is easy to navigate them. Use logical structures, such as alphabetical order, or north-south for geographical data.

  2. Minimize visual and navigational complexity in dashboards.

    Strive for a clear and simple dashboard to minimize complexity. If visualizations are meant to be viewed together, put them on the same page and in the order they are meant to be viewed.

  3. Dashboards should be constructed with a natural flow.

    Design your dashboards so that they are easy to perceive and navigate sequentially. There should be a natural flow, for example, from top-bottom and left-right. Place important information at the top of the dashboard.