Best Practices: Accessibility for Dashboards

Accessibility is important to help make sure that your content is accessible to everyone. This best practices article will guide you through some changes that you can make to improve the accessibility of your dashboards (public, projects, and analytic visuals). Refer to the examples below, and the checklist at the very end, to help make your tools accessible to everyone.

General Guidelines

Here are some general guidelines that can be applied anywhere:

• Use Clear Language and High Contrast: Use simple, direct language. Always make sure your text is easy to read by choosing colors with high contrast (for example, dark text on a light background). See Color and Design Rules below.
• Name Everything Clearly: Interactive parts (links, buttons, etc), should have clear, unique, and descriptive names. See Naming Conventions below.
• Arrange Content Logically: When you design a dashboard, arrange the items in a way that makes sense when reading—usually from top-to-bottom, and left-to-right. Place the most important information in the top-left corner so users navigating with a keyboard or screen reader find it first.

 

Naming Conventions

Always focus on what an item is and why it exists when naming areas, projects, plans, or charts. Never use generic or vague names.

• Titles: Use specific language that explains the scope or goal of the item.
  • Correct: Q3 Marketing Spend Analysis - 2026
    • This tells the audience the timeframe and the subject/content
  • Incorrect : Dashboard 2026
    • This tells the audience only the timeframe and the content is unclear
• Charts and Data Visuals: The title should summarize the main point or the information being measured or displayed.
  • Correct: Weekly User Sign-Ups by Region
    • This informs the audience what each axis is measuring, or what is being compared
  • Incorrect: Weekly Sign-Ups
    • This only tells the audience one of the data points being compared
• Labels and Descriptions: Keep them short but fully descriptive. Avoid abbreviations.
  • Correct: Status: Completed
    • This clearly communicates what the status is
  • Incorrect: St: Cmpltd
    • This leaves ambiguity around what the acronyms stand for

Tip:
Give your dashboards meaningful names. Even if you don't see the name displayed on the dashboard, screen readers will use this name to tell users what the content is about. Do not use internal or technical notes in the publicly visible name.

 

Color and Design Rules

Visual choices are critical for users with low vision or color blindness. When deciding which colors to use, a color contrast selector, such as https://webaim.org/resources/contrastchecker/ can help. 

Contrast ratios are a score that measures how much text stands out from the background it's on. The higher the ratio, the easier it is to read. A lower ratio indicates that the text color is too similar to the background and can pose challenges when reading.

• Use High Contrast: For all text, ensure your color choices meet minimum standards:
  • 4.5:1 for normal text or your main content.
  • 3:1 for large text or your headings/titles. Big, bold letters are easier to see and do not need as high of a contrast as normal text does.
• Non-Text Elements: Icons, buttons, and chart lines must also have sufficient contrast (3:1 minimum). 
  • Contrast checker tools aren’t just for text boxes! Use them to double check any buttons, lines, etc., that you use.
• Don't Rely on Color Alone: Never use color as the only way to explain an item or status.
  • We have added an Enhanced Accessibility toggle on the Public Dashboard settings to help distinguish status colors. See “Public Dashboards” down below for more information.
• Complex Backgrounds: If your text must be on a busy background, use the provided styling options (like adding a slight background box behind the text) to ensure readability.

Examples

Black text on a white background has a high ratio of 21:1. This ratio is compliant with all levels of WCAG or ADA and is a classic example of accessible text.

The text below has a low ratio of 1.46:1. The combination of the grey with the light purple background does not have a high enough ratio and can be hard for users to read.

 

Working with Text Editors

When you add or paste text into the rich text editor (the box where you type content), follow these steps to keep the content clean and accessible:

• Set Font Size and Color: Use a minimum font size of 14px (16px is better) and ensure text color has enough contrast.
• Use Headings Correctly: Only use heading styles (Heading 1, Heading 2, etc.) to structure your content logically.
  • Bolding text might make it look like a heading but it can be confusing when using a screen reader. Use headings to properly structure your content so screen readers can navigate your content easily.
• Add Alternative Text for Images: Every image must have a descriptive alternative text (see image below). This text is read aloud by screen readers so users who can't see the image clearly can still understand what it is. Alternative text does not need to detail everything in the image, instead provide context to what the image is trying to communicate.
  • Insert an image into the text editor, then click on the image to pull up it’s menu, here you can access the alt text setting.

• Clean Up Pasted Text: If you copy and paste text from another source, it can bring 'hidden' formatting. Use the Code View </> option to remove any unwanted hidden formatting. To avoid any hidden formatting, you can paste as plain text by using this shortcut: Ctrl + Shift + v (on Windows) or Cmd + Shift + v (on Mac).

 

Public Dashboards

In addition to the general guidelines, there a few Public Dashboard specific settings that can help with creating accessible content:

• Site Settings: In the Public Dashboard Site Settings, set the default font size to at least 14px (16px or higher is recommended). Also, make sure the Browser Tab Title is clear and descriptive so users always know which page they are viewing.

• Enhanced Accessibility Setting: Look for and enable the 'Enhanced Accessibility' setting in System Settings. This feature adds patterns and a legend to the status component, which helps users who cannot distinguish status by color alone.

 

Projects Dashboards

When setting up your Projects Dashboard, you can add captions to help with any additional content you add.

• Alternative Text for Project Images: All project images must have descriptive alternative text (caption) so screen readers can describe the image to users.

 

Analytics Visuals

Our Analytics module has a lot of customization that can help with making your visuals more accessible for everyone. 

• Label Charts Clearly: Every chart needs a clear, descriptive title and labeled axes. Ensure all data (bars, lines, or points) is clearly linked to its label, either through a legend or direct note.
• Provide Context: If your chart data is complex, add a short summary or key takeaway text to explain the main point.
  • See Chart Comment for more details on adding descriptions to your visuals.
• Define Data Format: Always make sure units are clear (e.g., %, $, etc.) and consistent across the chart.
• Use Accessible Colors: When choosing or customizing chart colors in the Analytics module, select palettes that are easy to distinguish and safe for color-blind users. Depending on your specific color combinations and background choices, a Color Contrast Checker should be used to confirm accessibility.
  • Use the properties tab in your visual to update/change colors as needed.
• For Embedded Visuals: If you are embedding a chart or visual, you must include a descriptive title in the code. Embedding or inserting an iframe is like pasting one window into another and is difficult to navigate with a screen reader if there isn’t a title to help contextualize this new element. The title should clearly reflect what the visual is showing and not be generic.
  • Implementation Detail: When you copy the embed code, look for the word title and add a description: <iframe src="..." title="Interactive dashboard showing conversion rate and user engagement metrics"></iframe>

 

---

 

Accessibility Checklist

Use this checklist to ensure your content is accessible before you finalize or publish it.

General Usability

• Can a user quickly understand the purpose of the content without additional explanation?

Naming and Clarity

• Does every visual, project, and plan have a unique, descriptive name?
• Are chart titles clear and meaningful, describing what is being shown?
• Are generic or ambiguous labels avoided (e.g., “Click here”, “Item 1”)?

Text and Readability

• Is all text written in clear, simple language?
• Is body text at least 14px (16px recommended)?
• Does text have sufficient color contrast (minimum 4.5:1 for normal text and 3:1 for large text)? Use online tools such as https://webaim.org/resources/contrastchecker/ to double check.

Structure and Semantics

• Is the content logically structured and easy to scan?
• Has any pasted content been reviewed to remove unwanted formatting or HTML?

Images and Media

• Do all images include meaningful alternative text (alt attribute)?
• Do embedded visuals (iframes) include a descriptive title attribute?

Color and Visual Communication

• Does the color contrast meet minimum accessibility standards?
• Is information conveyed using more than just color (e.g., text, labels, icons)?

Charts and Data Visualization

• Does every chart include a clear title and context?
• Are data points distinguishable without relying on color alone (labels, legend)?
• Are units and values (e.g., %, $, etc.) clearly defined and consistent?
• Do your visuals use accessible color palettes?