A Tableau Accessibility Journey - Part II - Focus Order

/

This post is a continuation of A Tableau Accessibility Journey - Part I, which outlines the scope of the work to be covered in this series. The first part of this series includes a number of accessibility issues that were identified in our case study visualization, and this post will focus on trying to address this issue of Focus Order.

Focus Order

First, let’s get the definition of it. According to WCAG 2.1, the success criteria (Level A) for focus order is:

“If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.”

When looking at my visualization, and all the things I need to address, focus order probably stands out the most to me. When I published this visualization, the lack of attention that I paid to this, the fact that I didn’t even really know what focus order was, how Tableau applies it, and the adverse impact it could have on a screen reader user; all of these aspects have led to what is a nightmare scenario for anyone trying to navigate without a mouse. I am a visual learner, so I went ahead and mapped out the containers of my visualization and then also overlaid the path I would want a user to take versus the path they actually do if they are keyboard navigating through the visual. 

Here are those three images side by side:

This image is explained in detail by the following section.

This image is explained in detail by the following section.

In this image, from left to right, we have the container layout of the visualization first, then the ideal path I would like the user to take second and the actual path a screen reader user will take third. And in case anyone is reading this article on a screen reader here is a text comparison as well of the ideal vs actual order encountered. 

Ideal order: 

  • 1 - Title of visualization
  • 2 - Subtitle and additional context for visualization
  • 3 - Caption describing the first group of charts
  • 4 - Games won line chart
  • 5 - Coin flip totals bar chart
  • 6 - Coin flip whisker plot
  • 7 - Subtitle describing the small multiple layout
  • 8, 9, … - Small multiple line charts, one per game, with ability to view each chart within it, 20 charts in total.
  • 11 - Footer, data source footnote
  • 12 - Footer, author twitter handle

Actual order: 

  • 1 - Coin flip whisker plot, Dad, should be 6th.
  • 2 - Coin flip totals bar chart, Dad, should be 5th.
  • 3 - Small multiple charts, one per game, no ability to view each chart within it, 20 charts in total. Should be 8th.
  • 4 - Games won line chart. Should be 4th.
  • 5 - Coin flip whisker plot, Daughter. Should be 6th.
  • 6 - Coin flip totals bar chart, Daughter. Should be 5th.
  • 7 - Title of visualization. Should be 1st.
  • 8 - Subtitle and additional context for visualization. Should be 2nd.
  • 9 - Caption describing the first group of charts. Should be 3rd.
  • 10 - Subtitle describing the small multiple layout. Should be 7th.
  • 11 - Footer, data source footnote. Should be 11th.
  • 12 - Footer, author twitter handle. Should be 12th.

In summary, yikes! You have to navigate seven objects on the view before you get to the Title of the visualization. Also, Tableau’s applied focus order leads us directly to one of the most dense and uncommon visualizations on the dashboard, with zero explanation given by me of what you are focused on and how to understand and/or navigate it. I am not sure how anybody could make sense of this visual based on this experience. 

Addressing Focus Order in Tableau

Now that we are well versed on what the Focus Order issue is, I am willing to wager this is running absolutely rampant across Tableau Public. For example, I checked a few of mine and some friends visualizations as well, picking published views with very high view counts and noted this issue in all cases. Admittedly this is a very, very small sample size, just a handful of visualizations I knew off the top of my head, but so far running at a 100% unsuccessful rate in terms of these samples having a meaningful focus order for a screen reader user. The fact is, if you have not specifically tried to address this in your public visualization(s), it is likely you have an issue similar to what I have walked through above. You are at the mercy of whatever order you dropped those objects onto the dashboard in, and, I am pretty sure I have never dropped objects in the exact right order on any visualization I have ever built.

The good news. Luckily for us, Kelly Gupton at Tableau, has identified this issue and provided a detailed walkthrough of how to address it on the Tableau Accessibility FAQ she maintains on Tableau’s Forums.

The bad news. Her solution, the only solution I have found thus far, requires a lot of manual effort for a Tableau Dashboard developer. As she describes in her well documented article, you have to name all of your objects well enough so you know what is what and then literally go into the XML of the Tableau workbook and assign an order to your dashboard zones based on each zone’s ID attribute. Going through this process on a simple viz was pretty cumbersome and took a good amount of trial and error and testing with a screen reader.

This image displays the XML of a Tableau workbook and highlights the ID attribute which must be updated for each “zone” to enable the correct focus order for a published Tableau Dashboard.

This image displays the XML of a Tableau workbook and highlights the ID attribute which must be updated for each “zone” to enable the correct focus order for a published Tableau Dashboard.

Based on this approach your process would need to look like this: 

  1. Build your dashboard, be sure to name objects well enough so you know which is which.

  2. Map the focus order you want the end user to have for each dashboard object/zone. I would write this down and/or document it so you can assign an ID order to update in the xml.

  3. Save a backup of your workbook, the next steps are not supported by Tableau and they will not help you recover any corruption you cause in the workbook by doing this.

  4. Save your (backed up) .twbx as a .twb, open the .twb in a text editor and search for “<zones”.

  5. Update all of your dashboard “zone” xml objects to have their “ID” attributes in the order you want the user to experience, you also must be sure there they are unique. You should follow your focus order map you made in step 2 here.

  6. Reopen the .twb in Tableau and make sure you didn’t break anything. Then you can repackage to .twbx if you need to.

  7. Publish to server and test your focus order, it will now be fixed.

  8. Repeat as needed until you have the focus order the way you want.

Obviously, this developer experience could be much improved. Here is a quick wish list that could make this easier and thus more likely to be done by those who are building dashboards. 

  1. The ability to assign the focus order to objects on the dashboard via Tableau’s UI.

  2. The ability to group objects into containers and skip over entire containers of objects if they are not of value to a screen reader user.

  3. The ability to opt out of a zone being included in keyboard (e.g., a decorative image may not need to be navigated through by a screen reader user).

  4. I am sure there are more than what I have listed here.

For starters, please upvote this idea to help push this feature request on Tableau’s roadmap. 

Here is an updated copy of my dashboard with the focus order provided in a much more sensible way. Further, below is a video of the updated screen reader experience which is already much improved just by ensuring the user is navigating from object to object in the order we want. Disclaimer though, there is still much more to do on this project and there is more coming on that front on future posts in this series. 

In closing, Focus Order is a key component of ensuring that all users can navigate your content in a meaningful way. While there is a lot of manual work needed here, we can at least apply (most of) the focus order we want to our Tableau visualizations. My challenge to you (and me!) is whether or not you will take the time and do the due diligence necessary to ensure this non visual behavior of your published workbook(s) can help screen reader users navigate your visualization.