5 Replies Latest reply on Nov 23, 2018 1:49 AM by Preethi John

    How can I set the focus order of the views and objects in a dashboard?

    Kyle Gupton

      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:

       

      1. Ensure you add the zones to the dashboard in the desired focus order.
      2. 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:

      Dashboard Image.png

       

      The zones are arranged with Vertical and Horizontal containers, resulting in the following hierarchy:

      Item Hierarchy Image.png

       

      A good focus order for this dashboard is top-to-bottom, left-to-right:

       

      1. Dashboard Title
      2. Text Object
      3. View (Sales)
      4. Filter (Category)
      5. View (Profit)
      6. 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.

       

      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.

      Zones Element Image.png

      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:

       

      Zone

      id Attribute Value

      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!

       

      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.