Designing for accessibility: Easy steps to make your Tableau visualizations more screen reader-friendly

An estimated 4.4 million people in the United States use a screen reader when they access the internet.

Many data visualizations available online lack basic accessibility and screen reader access. This has become especially apparent as the COVID-19 pandemic has introduced millions of people to interactive charts and graphs. There are hundreds, if not thousands, of beautiful visualizations on Tableau Public alone that are not easily accessible to a decent number of internet users.

Addressing general accessibility is a huge task and I don’t consider myself an expert on that massive topic, so I’ll be focusing specifically on making Tableau visualizations more screen reader-friendly.

Before we get into the steps, I think it’s important to provide a general overview of how screen readers work and how they interact with webpages and those webpage structures.

Understanding webpage structure

In general, all webpages have a hierarchy of the elements on the page that guide a screen reader user through it, usually using the TAB key on a keyboard. For example: The header above this paragraph is coded as “H2,” meaning it’s the second highest level heading (under the title of this post, which is H1). You can see that by right-clicking on the text and selecting “Inspect” in Chrome. This is important because a screen reader will cycle through headings different from regular paragraphs and other elements. There are many other elements to a webpage, but this is one of the main ones that Tableau uses in its visualizations.

Accessibility steps

1. Use baked-in titles

Almost every element in Tableau (worksheets, dashboards, filters, legends, etc.) have a “title” associated with them. I know it’s tempting to hide titles and add a text box to your dashboard (because maybe you want some extra padding between the title and the chart, or you want to make a special title that’s actually a worksheet so some element of it changes with filters), but I strongly recommend using the titles that Tableau bakes in for you (for dashboards as well!) to improve accessibility.

We’ll use this visualization as an example. The title of the worksheet in this simple dashboard is “LeBron James: Speed vs. overall impact.” A screen reader is able to identify that text as a header and can relay that information back to the user who may not be able to see it themselves. The same goes for titles on legends, filters, parameter controls, etc. If you find that using titles clutters up your dashboard and you think they aren’t truly necessary (think carefully about what is necessary and what isn’t), you can try changing the font color so that it blends in with your visualization background. This way, the information is still accessible to a screen reader but people who can see your visualization don’t have any unnecessary clutter*.

2. Allow data to be downloaded

This might be the most important part of making a data visualization accessible. If a screen reader encounters a worksheet and the underlying data has not been set to allow downloading, the user who can’t see your visualization can’t hear your data either. When a screen reader encounters a visualization where the data has been set to allow downloading, it will prompt the user to press a few keys on their keyboard to open a plain text table that can be read back to them.

Not only should data be downloadable, it should be clean and concise. Many more advanced charts in Tableau require complicated calculations and the data that results isn’t usually easy to understand as plain text. You can see what your data looks like by selecting your marks on the sheet and clicking the “View data” button.

3. Use Navigation buttons instead of making custom worksheet buttons

Something I see a lot, and I’ve done a lot to be honest, is to create custom buttons to navigate through dashboards. All worksheets in Tableau are considered a data visualization to a screen reader, regardless of what type of mark it is or what it looks like. It might look like a button to someone who can see it, but to a screen reader, it will appear as a chart and the interactivity of the “button” won’t be readily apparent to the user. Navigation buttons (one of the Dashboard objects) however, are not only usable by a screen reader user, they have great descriptions that are read aloud to the user.

4. Alt text on images

This is one of the most basic pieces of web accessibility but it’s important to reiterate. Writing alt text can be tricky but it’s important to be able to convey information that might be not be able to be seen by a screen reader user. I recommend adding alt text to images within your data visualization, but also add alt text to static images of your data visualization when you share them on social media.

Basics of writing alt text:

• Be descriptive but not wordy
• Don’t start it with “image of…” (the screen reader will do that)
• Type out any text that you have embedded in the image

Example:

Alt text: Yellow fall foliage in foreground with a vibrant blue lake below a couple of tree-covered mountains in the background.

5. The order in which you add things to your dashboard matters

Typically on a webpage, the tab order — or the sequence in which using your TAB key on your keyboard cycles through content — goes from top to bottom. In a Tableau dashboard, the tab order is set by the order in which you add objects to your dashboard. For example: If you add your main element first and then add some KPIs to the top of it later, the tab order that the screen reader will cycle through will go to your main element and then to the KPIs.

This is something I often forget about and then I don’t remember how I added things to the dashboard, so unless I want to completely re-create my dashboard, the order has been fixed. Even though it’s a frustrating process, if you know your audience is going to include a diverse population of people needing accessible accommodations, I highly recommend keeping this in mind when you’re creating a dashboard.

Chris DeMartini explains tab order, or focus order, in detail in this blog post.

Final thoughts

It’s important to keep in mind the built-in accessible features of Tableau when creating data visualizations. It’s also important to weigh whether you really need a fancy chart type or a hacky workaround for something if it means isolating a section of your audience.

In my opinion, Tableau still has a long ways to go to be truly accessible to all, but practicing some of these steps in your data visualization work can greatly improve the experience that screen reader users have when interacting with data in general. Doing so also creates a more welcoming environment to a large group of people.

Additional resources

• Frank Elavsky‘s Chartability audit tool
• Enjoy this tweet thread from Frank on disability, race and patriarchy in data viz
• Emily Kund‘s podcast episode with Frank (^) on accessibility in DataViz
• Beyond Tableau: Highcharts guidelines for DataViz accessibility
• Keyboard navigation in Tableau

---

*Be careful not to strip away too much of your visualization so that the end user, whether they are using a screen reader or not, gets lost. A lot of times, legend titles and filter titles are absolutely necessary.