![External User - Kelly Gupton (she/her) (null)](https://community.tableau.com/img/userprofile/default_profile_45_v2.png)
Kelly Gupton (she/her) (Tableau) asked a question.
Important Update for Tableau 2021.3!!!!
New dashboards created in Tableau 2021.3 and later now have a default top-to-bottom, left-to-right focus order. If this focus order is appropriate for your dashboard, there is no longer any need to edit the workbook XML to set the focus order. If you have an existing dashboard for which you have already edited the workbook XML to set the focus order, the focus order will remain the same even after saving the workbook in the new version of Tableau.
What is a “new dashboard”?
Any dashboard created in a new or existing workbook using Tableau 2021.3 or later is considered a “new dashboard”. A new duplicate of an existing dashboard is also a “new dashboard”. Therefore, if you have a dashboard for which you’ve edited the workbook XML to set the focus order and want to leverage the new default focus order behavior, you can duplicate the dashboard by right clicking on the dashboard tab in Tableau Desktop or web authoring and selecting “Duplicate”. The new duplicate dashboard will have the new focus order behavior.
What if the new behavior isn’t appropriate for my dashboard? Can I still edit the workbook XML to set a custom focus order?
Yes! New dashboards contain a new XML attribute that controls whether the new default focus order behavior applies to the dashboard. You can find this new attribute in the
<dashboard> element that contains the <zones> element where you will make the modifications described below. For example, for a new dashboard named “My New Dashboard”, the <dashboard> element will look like:
- <dashboard _.fcp.AccessibleZoneTabOrder.true...enable-sort-zone-taborder='true' name='My New Dashboard'>
The value of the _.fcp.AccessibleZoneTabOrder.true...enable-sort-zone-taborder attribute controls whether the dashboard has the new default focus order behavior. If you still need to edit the XML to set the focus order for a new dashboard, you will also need to change the value of this attribute to false:
- <dashboard _.fcp.AccessibleZoneTabOrder.true...enable-sort-zone-taborder='false' name='My New Dashboard'>
After making that change you can make the other modifications in the <zones> element as necessary to set the focus order as desired.
_______________________________________________________________________
Guideline 2.4.3 (Focus Order) of the Web Content Accessibility Guidelines requires that “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.”
In Tableau the focus order of the zones (view and objects) in a dashboard is set by the order in which they are added to the dashboard during authoring. The result is often a focus order that isn’t logical and doesn’t meet the requirement of the WCAG Focus Order guideline. To explicitly control the focus order of the zones, you have two options:
- Ensure you add the zones to the dashboard in the desired focus order.
- Edit the XML of the Tableau workbook (.twb) file to set the focus order.
Since adding the zones to the dashboard in the desired focus order can be inconvenient, editing the XML of the Tableau workbook file is usually the best choice. So how to do you do this?
Let’s start by looking at an example dashboard with six zones:
The zones are arranged with Vertical and Horizontal containers, resulting in the following hierarchy:
Notice also that I renamed each dashboard item so that it has what is called a "friendly name". As you'll see, this will make finding the items in the XML file much easier.
A good focus order for this dashboard is top-to-bottom, left-to-right:
- Dashboard Title
- Text Object
- View: Sales
- Filter: Category
- View: Profit
- Filter: Sub-Category
Tableau doesn’t (currently) offer a way to set the focus order when creating the dashboard, but since a Tableau workbook file (.twb) is actually an XML document, you can edit the workbook file in a text editor like Notepad (Windows) or TextEdit (MacOS) to set the order manually.
Note: A Tableau Packaged Workbook (.twbx) is a .zip file that contains the .twb (Tableau Workbook) and any external resources like data files, images used in Image Objects, and so on. If you're starting from a .twbx file, you can change the extension of the file to .zip and then unzip it. Inside of the resulting directory/folder you will find the .twb file as well as the other external files. The .twb file (which is an XML file) is what you should open in the text editor. After making the changes described below, you can reopen the .twb in Tableau Desktop and re-export/save it as a Tableau Packaged Workbook (.twbx).
Tableau workbooks that contain dashboards have a <zones> element that contains all of the information regarding the zones, including their focus order. Within the <zones> element is hierarchy of <zone> elements, one for each zone in the dashboard. Below is a screenshot of a text editor (Visual Studio Code in this case, which gives the helpful text coloring) showing the <zones> element of the dashboard above. It's a bit small, so feel free to open the workbook attached to this discussion in your own text editor to see it better. I've put a white box around the friendly name attribute for each zone to make them easier to identify:
The id attribute for each <zone> element is a number and controls the focus order of the zones. Focus order goes from lowest to highest id value. To set the focus order of the zones, you edit each <zone> element’s id attribute value to be in the order you desire. To obtain the zone order I want for this particular dashboard, I used the following id values:
- Dashboard Title - 10
- Text Object - 20
- View: Sales - 30
- Filter: Category - 40
- View: Profit - 50
- Filter: Sub-Category - 60
The Vertical and Horizontal container zones also have id attributes, but these are irrelevant to the focus order. For this example, I just set the id attributes for the container zones to start at 70, after the last zone in the focus order. You’ll also notice that I spaced out the id values to increase by 10. That’s not necessary (it doesn’t actually matter what the numbers are, so long as they are in the right order and that there are no duplicates), but it’s helpful in case you need to add additional zones in the future. That way you won’t have to renumber all of the existing zones. It’s much like line numbers in AppleSoft BASIC, the first programming language I ever learned!
If your dashboard has multiple layouts, you'll need to make these edits for each layout. The zone IDs need to be unique within each layout, but you can use the same IDs across different layouts.
Once you’ve edited the workbook file in your text editor, the focus order of your zones is correct. Further editing of the dashboard in Tableau doesn’t change the zone id values that you set. Upgrading the workbook to a newer version of Tableau (or exporting it as an older version) likewise doesn’t change the values.
We understand that this is (obviously) an inconvenient way to get a good focus order for a dashboard, and we’re looking at how to do it well by default. But for now, this method is the best way to achieve a result that will meet the WCAG Focus Order guideline.
This is great. Thank you for sharing Kyle. I have added this to the featured content as well.
Thank you for sharing the information....Really the article is awesome.
Good stuff, thanks for sharing this Kyle.
Thank you so much for sharing this. It's very helpful.
Thanks for sharing this information. Great stuff.
Thank you for sharing this
Awesome stuff.. Thanks,
Very informative
Thank you for sharing such wonderful information with us.
Thank you Kyle for sharing this information ,actually it is very informative.