Accessibility tips and tricks

Accessibility tips and tricks

Making our content accessible benefits everyone. It allows a wider audience to reach our content. This is especially crucial for users who surf web through assistive technology.

Beside that, it is a compliance matter and by law, electronic content must be available for all audience. You can read more on section 508 here: https://www.section508.gov/manage/laws-and-policies

The Web Content Accessibility Guidelines (WCAG) is a globally used source for compliance. It has been developed and maintained by Web Accessibility Initiative. These guidelines help developers implement accessibility into their electronic content.

Although Tableau is not fully accessible at the moment, but the company has started implementing accessibility features and started rolling out accessibility in their visual components. As developers, we need to do our best to make our visuals accessible to all audience. This document is meant to serve as a helping guide to implement accessibility in our workbooks. Here are some tips and tricks that can help us with that.

Alternative texts

Adding alternative texts to images will help screen readers to interpret the image correctly. All images on workbooks must have an alternative text. A simple, to the point text that describes the image.

Color-blind friendly content

Contrast ratio

A contrast ratio of at least 3:1 between adjacent colors is required. This contrast ratio must be maintained regardless of what color palette is used. Here are the related guidelines:

https://www.w3.org/TR/WCAG21/#non-text-contrast

Don’t rely on color only

Do not use color as the only means for distinguishing data.

Use labels, shapes, borders.

More accessible chart

How to test contrast

There are several tools that you can use to test the color contrast. The rule of thumb is that adjacent colors should still be distinguishable on a gray scale.

There are several tools that can be used for testing the contrast:

High contrast chrome extension

The High contrast chrome extension shows the page on a grayscale. The extension can be found here:

https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en

WebAim Contrast Checker

This contrast checker takes two colors and compares them. It will provide the contrast ratio. One of the good features of this tool is that it also has an API that is free to use:

https://webaim.org/resources/contrastchecker/

A sample API call (all you need to do is to replace the values for fcolor and bcolor):

https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF&api

Other tips

It is advised to avoid using the following color combinations: Green – Red; Blue – Yellow.

UW-Madison color palettes

There is a cheat sheet of color combinations contrast ratio for UW-Madison’s categorical color palette.

You can download it here.

https://kb.wisc.edu/msndata/113177

Provide context

There should be sufficient description and caption on the viz to help everyone perceive the content. Use labels as much as you can.

https://help.tableau.com/current/pro/desktop/en-us/accessibility_best_practice.htm




Keywords:Accessibility, Tableau   Doc ID:111708
Owner:Mehrnaz A.Group:Data, Academic Planning & Institutional Research
Created:2021-06-16 09:11 CSTUpdated:2022-12-19 09:36 CST
Sites:Data, Academic Planning & Institutional Research
Feedback:  0   0