Tableau Style Guide

Accessibility

• Follow Tableau accessibility best practices:
  • Best practices for designing accessible views
  • Author views for accessibility
• Check Layout -> Item Hierarchy to make sure the parent/child relationship makes sense, as this is the order that people using a keyboard and/or screen reader will take in the information.
• Use titles, captions, and helpful but concise text.
• Update the alt text for objects where someone using a screen reader might need more context.
• Make sure that all items/controls are accessible and usable by keyboard.
• Use colors with adequate contrast. Here’s a contrast checker.
• Whenever possible/practical, use more than just color to differentiate between datasets.
• Don’t use tiny text.
• Don’t use images to display text.
• Links should include the context of the thing they are linking to in the text.
  • Not good: To learn how this data was processed, click here.
  • Good: Learn how this data was processed.

Usability

Desktop View

• Dashboard size: consider the location where the dashboard will be embedded.
• Is it a fixed-width, or is the width customizable?
• For stlouis-mo.gov embeds, choose the “automatic” size.

Mobile View

Tableau does a pretty good job of automatically creating a mobile layout for you, provided that the item hierarchy is set up well. It’s best to preview it just in case.

Everything one can do and see  on the desktop view should be doable and visible on the mobile view.

Charts and Graphs

• Avoid using pie and donut charts, especially for comparing more than two numbers.
• Charts and graphs should not be so cluttered that they are difficult to read.
• Labels, titles, and other attributes should be easy to read and understand.
• Ensure adequate spacing between dashboard items so it doesn’t feel cluttered and each section is in its own discernable area.

Data Access

Enable the ability to download the dashboard’s data for both people who can’t view the charts and those who want to work with the data.

Branding/Standardization

Typography

• Do not use more than two fonts.
• The title level hierarchy should have distinct sizes that are easy to discern at a glance.
• Links should be obviously links at a glance (color, underline).

Header, Logo, and Footer

For dashboards that are meant to be embedded on stlouis-mo.gov, a logo and header/footer is not necessary.