Build Accessible Dashboards

If you want to make your dashboards accessible to as many people as possible, or if you work in an environment that is subject to US Section 508 requirements, other accessibility-related laws and regulations, you can use Tableau to create dashboards that conform to the Web Content Accessibility guidelines (WCAG 2.0 AA).

To make an accessible dashboard:

  1. Create a dashboard in either Tableau Desktop or in web authoring on Tableau Server or Tableau Cloud

  2. Publish and embed that dashboard into a web page that conforms to Web Content Accessibility guidelines (WCAG 2.0 AA)

This topic explains how screen readers help users to navigate dashboards, the order that screen readers read objects or views in a dashboard, what items in a dashboard are accessible, and how to take an existing dashboard and make it more accessible for all users.

Dashboard keyboard navigation and focus order

Tableau contains keyboard shortcuts that helps users navigate using only a keyboard. For more information, see Keyboard Accessibility for Tableau on the Web.

When creating a dashboard, note that screen readers read views or objects in a dashboard in the order in which they were added. For example, if your dashboard contains a text object containing information that helps explain the dashboard, add this object to your dashboard first.

You can also edit the dashboard hierarchy directly by editing the XML directly. For more information, see the Tableau community post How can I set the focus order of the views and objects in a dashboard?(Link opens in a new window)

Create accessible dashboards

Many items and objects in the Tableau workspace support keyboard navigation and are compatible with assistive technologies like screen reading software. You can use the following items on a dashboard you want to be accessible:

Note: Interactivity within a view (mark selection, tooltips, etc) is not accessible.

Walkthrough: make existing dashboards more accessible

Let’s start with a finished workbook and work backward to make it more accessible.

A time-series bar chart displays superstore sales by product category and region, with interactive checkboxes for filtering by category and year.

For this workbook to be more accessible, we will:

  1. Format for accessibility at the dashboard and workbook level

  2. Aggregate and reduce marks

  3. Eliminate redundant information

  4. Use color and shape to differentiate marks

  5. Use filters to reduce the number of marks in a view

  6. Add captions and legends

This dashboard is designed to show total sales for each sales region and product type. The line chart at the bottom shows monthly sales by product type. The author of this dashboard wanted to use color to brand the dashboard in the Superstore company's colors of green and gray.

Unfortunately, this dashboard has several features that pose accessibility problems for users, including the company color scheme. The steps that follow show a few ways to make this dashboard more accessible.

Format for accessibility at the dashboard and workbook level

The green text on a gray background does not have a high enough contrast ratio to work for users with visual contrast sensitivity loss. To make this workbook accessible to all users and make the contrast ratio as high as possible, we're going to make the background white and change the text colors on our chart to black.

To update the dashboard shading color, change Dashboard Shading in the Format>Dashboard menu to None.

The Format Dashboard dialog box offering a range of options to customize the dashboard's appearance, including shading, font, alignment, and more.

For text formatting changes, we could manually change the formatting on each worksheet. But that will take a lot of time. This dashboard only has two views, but dashboards often contain more.

To update the text on our dashboard to black, select Format>Workbook and change Fonts>All to Black.

A dialog box displaying a range of font colors in the Tableau Light palette.

This changes the font color in every sheet of our workbook to black, which is then applied to the views included in the dashboard. For external information on color contrast, see Color Contrast and Why You Should Rethink It.

Less accessible - low contrast More accessible - higher contrast
A time-series bar chart displays superstore sales across product categories and regions, with color coding for each product. A time-series line chart displays the monthly sales of ten products over a four-year period, while a bar chart provides a comprehensive view of sales by product category and region.

For more information about adding background colors around items, see Add padding, borders, and background colors around items.

Aggregate and reduce marks

You might have a lot of information that you want to communicate with your dashboard or view. However, a dense view with a lot of marks, like the bar chart at the top of our view, can be difficult to understand using a screen reader or keyboard.

The top view in our dashboard displays over 5000 marks because each bar in the chart contains the name of each product in that category. If a view uses more than 1000 marks, it causes the view to be rendered on the server instead of the browser, and server-rendered views are not supported for WCAG conformance. Limit the number of marks to only those that emphasize the most important data points.

To make this view more accessible, make the stacked bar chart into a bar chart by removing the field Product Name from Details in the Marks card. This reduced the number of marks in the view from over 5000 to 68.

Less accessible - too many marks More accessible - aggregated view
A horizontal stacked bar chart displaying sales data by region and product category, with color coding for each product's sales.

 

A horizontal stacked bar chart displaying sales data by region and product category, with color coding for each product's sales.

Users can also access the View Data window (enabled by default) to review the underlying data for the marks or can download the data from that page to an accessible application to view it that way.

To reduce cognitive overload and reduce the numbers of marks in our field even further, we can create groups of related members in a field. To create a group of similar products:

  1. Right click on the field and select Create > Group.
    A field in the data pane with a context menu showing where to group fields or create a calculated field.
  2. In the Create Group dialog box, select several members that you want to group, and then click Group.

For more information on grouping, see Group Your Data. Here's what the view looked like before grouping and aggregating, compared to after:

Less accessible - too many marks More accessible - aggregated and grouped view
A horizontal stacked bar chart displaying sales data by region and product category, with color coding for each product's sales. A horizontal stacked bar chart displays sales data by region and product category, with color-coded segments for each product.

For information and examples about how to build this type of view, see Keep it simple in Author Views for Accessibility.

Eliminate redundant information

The aggregated and grouped bar chart reduces cognitive overload for users, but still uses color to convey meaning when color isn't necessary. Since the size of each bar already represents sales numbers, color can be removed from the chart by removing the sales field from Color in the Marks card. Removing color also removes the color legend that the screen reader reads.

Less accessible - unnecessary marks More accessible - unnecessary marks removed
A horizontal stacked bar chart displays sales data by region and product category, with color-coded segments for each product. A horizontal bar chart illustrates sales by product category across four regions.

Use color and shape to differentiate marks

The line chart in this dashboard contains marks that are only distinguished by color, which makes it impossible or nearly impossible for people with colorblindness to distinguish marks from one another. The line path provides helpful position information, but the colors do not provide clear distinction between the line marks.

A line chart is used to display the monthly sales of various product types.

Make this line chart more accessible by applying the Color Blind palette and adding shapes to reinforce what is being shown in color.

To apply the Color Blind palette:

  1. Select Color on the Marks card.

  2. Select Color Blind from the Color Palette menu.

    An edit colors dialog box with the color blind palette selected, allowing you to choose a data item and a color to be applied to the selected data item.

  3. Select Assign Palette and Apply to apply it to the view.

To add shapes in addition to color to your line chart, create a combination chart, or dual axis chart:

  1. Control-drag (command-drag on a Mac) the field in the Rows shelf to copy it and place it to the right of the first field. This creates two tabs in your Marks card, one for each field in the Rows shelf.
  2. On the marks card, select the bottom tab, titled [Field Name (2)]. Select Shape from the drop down menu in the Marks card.
    Marks card dropdown with mark type options, including shape, bar, line, area, square, circle, text, map, pie, Gantt bar, polygon, and density.
  3. Select the Color mark to the right of the field name and select Shape.
  4. Marks card encoding options, including shape, color, size, label, detail, and tooltip.

This creates separate shapes for each of the marks in the field. At this point, there are two different charts; one a line chart of colors, another a scatter plot with shapes.

To merge these two charts together into a dual axis chart, in the Rows shelf, select the field on the right and select Dual Axis. For more information on combination charts, see Build a Combination Chart.

Not easily accessible More accessible - Color Blind palette and shapes
Line chart displaying monthly sales by product category. Line chart displaying monthly sales by product type, with distinct lines for each product category.

The chart is improved, but the line colors and shapes have started repeating after the 10th mark applied. This makes the view look busy and hard to make sense of, leading to cognitive overload. Let's fix it by adding filters and legends.

Use filters to reduce the number of marks in a view

Using filters helps to focus the number of marks in the view to only what you want users to see.

You can show the following filter modes to allow users to control what data is in the view. The filter modes that Tableau currently supports for WCAG conformance are:

  • Single Value (list): a filter with radio buttons. Only one item can be selected at a time. Giving your users single-value filters is a great way to reduce the number of marks in the view.

  • Multiple Values (list): a filter with a list of items (with check boxes) that can be selected at the same time. Multiple-value filters will allow more marks to be shown at the same time.

    Two dropdown menus; the first a single value list for product category, and the the second a multi-values list for product order date.

  • Single Value (drop-down): a filter with a dropdown list of items. Only one item can be selected at a time. Giving your users single-value filters is a great way to reduce the number of marks in the view.

  • Multiple Values (drop-down): a filter with a dropdown list of items that can be selected at the same time. Multiple-value filters will allow more marks to be shown at the same time.

    Two dropdowns, one a single value dropdown for product category and the other a multiple values dropdown for the order date year.

To show a filter, right-click the field you want to use as a filter, and then select Show Filter.

Context menu for a field in the Data Pane with "Add to sheet" selected.

To select the filter mode, in the drop-down menu for a filter, select a Single Value (list), Single Value (dropdown), Multiple Values (list), or Multiple Values (dropdown) filter.

Filter context menu with a list of filter options, including single value, multiple values, only relevant values, all values in database, include values, and exclude values.

Because the line chart is a Single Value list, we can remove the All option from the filter. In the drop-down menu for the filter, select Customize and then clear the Show "All" Value option.

A filter context menu with the option "Show 'All' Value" selected.

This reduces the level of marks in the view to prevent cognitive overload for dashboard consumers.

Less accessible - too many marks More accessible - less marks in the view
Line chart displaying monthly sales by product type, with distinct lines for each product category. Line chart displaying monthly sales trends by product category, featuring distinct lines for Accessories, Copiers, Machines, Phones, and Technology.

To learn more, see Use filters to reduce the number of marks in a view.

Another way to make the viz easier to consume is to

Add captions and legends

To add clarity for our users, we can add a Text object with a description of the dashboard and instructions about how to filter and use each view in the dashboard, including how to use the filters and categorical legends that we've added. To add a text object:

  1. Grab Text from the Objects menu and drag it onto the dashboard.
    A variety of dashboard objects, including text, images, web pages, buttons, and extensions.
  2. Use Edit Text window to add text that explains the dashboard's purpose and how to use it.

You can also add chart captions to the dashboard. The default caption text gives a summary of what is shown in the view, but you can add or edit this text to provide better context. To do this, click on a chart in the dashboard and select Caption from the More Options drop-down menu.

A comprehensive list of actions that can be performed on a sheet within a dashboard, such as navigating to the sheet, duplicating it, adjusting its display, adding titles, legends, filters, or highlighters, displaying the page control or view toolbar, using the sheet as a filter, disregarding actions, configuring it as floating, selecting the layout container, or removing it from the dashboard.

Last, we can update the titles of our legends to reference their associated charts and reduce the amount of redundant text that screen readers consume. To do this, double-click on the legend title, or right-click and select Edit Title to add or edit text in the Edit Filter Title window.

The result is a dashboard that includes an explanation of the dashboard and chart captions and eliminates redundant text for users.

A bar chart and line graph display Superstore sales by product category and region, and monthly sales by product type, respectively.

Publish and embed the dashboard

After you create your views, to make them WCAG-conformant, you must:

  • Publish views to Tableau Server or Tableau Cloud, and then embed the view in a WCAG-compliant web page. For information about how to publish a view, see Comprehensive Steps to Publish a Workbook.

  • Web editing is not supported in WCAG-conformant views, so Web Edit permissions must be turned off in the published workbook.

  • In the embedded views, hide the Custom Views, Subscriptions, and Alerts buttons in the toolbar.

  • Make sure users have permissions to access to the embedded views and are able to view the underlying data in the View Data window.

For information about each of these steps, see Publish and embed the view in Author Views for Accessibility.