Designing Key Board Navigation Accessible Dashboards

Accessible design sits within the broader concept of universal design: the practice of building things that work for as many people as possible, regardless of ability, context, or how they're accessing your work. The principle comes from architecture, but it applies just as well to data visualization. A ramp not only helps wheelchair users, but can also someone with a stroller, a delivery worker with a cart, a person recovering from an injury. The same logic holds in Tableau. A dashboard built with accessibility in mind is easier to navigate, easier to understand, and more useful across the board.

I recently had an issue where Tableau froze and I was only able to save my progress by using key board navigation to close out the widow causing the error and navigate to the save button. Understanding accessibility features can be vital as both a developer and a user.

Accessible design goes far beyond keyboard navigation but a recent challenge from The Data School, combined with my frozen Tableau work around, inspired this post. Therefore: here is a quick introduction to key board navigation for Tableau and additional tips for accessible design.

Note: This is aimed at a Windows audience although many of the OS shortcuts are similar or possible to intuit from these.

In Tableau, the focus order determines which components get highlighted as you Tab through a dashboard. By default, it follows the order in which elements were added to the canvas.

Noted: If you publish to Tableau Public, it will automatically reorder based on the dashboard layout which can be more intuitive, but can also lose the customizations and intentionality made possible when doing it by hand.

Action	Shortcut
Move Focus	Tab (forward) / Shift + Tab (backward)
Enter a Zone or Object	Enter
Exit a Zone or Object	Esc
Move within a Zone	Arrow Keys (Up, Down, Left, Right)

Filters and Parameters

Once you've tabbed into a filter...

Open a dropdown: Enter or Alt + Down Arrow
Select or deselect an option: Spacebar
Apply selections: Enter (if there's an Apply button)
Close or cancel: Esc

Exploring Data

View underlying data: Ctrl + Shift + Enter opens the View Data window for the selected mark
Close the View Data window: Alt + F4
Download data: Tab to the Download icon in the toolbar and press Enter.

Navigating Charts (Marks)

Once you've tabbed into a worksheet:

Use Arrow Keys to move between individual data points — bars, dots, pie slices, etc.
If a screen reader is active, it will announce the values for each mark as you land on it.
Press Enter to select a mark, which will trigger any associated actions, highlights, or tooltips (which is a more recent addition)

Additional Accessibility Tips

Designing with key board navigation in mind is just one facet of what goes into an accessible product. Here are a couple more tips, but for a better understanding of accessible dashboard I recommend exploring additional resources.

You can't design for everyone so consider priorities based on your intended users even as you try to maximize accessibility.
Many keyboard users also use screen readers. Considering the intersections of users and use cases is key.
Fewer components means easier navigation. Every extra element is another thing someone has to tab through. However, for someone who needs a screen reader or other accommodations, combining too many things into one element can make it more difficult to access or understand so understanding trade offs is important as well.
Use native titles, not text boxes. The built-in title for a chart or filter is linked to that object, a separate text box doesn't have the same association that a screen reader or alt text could pick up. Additionally, text boxes add more components for your user to tab through.

My Dashboard

With these considerations in mind and only a two hours available, I built this dashboard to explore the accessibility of London Tourist Attractions. The challenge was to design for a keyboard navigation user for whom speed and quick overviews were the priority.

https://public.tableau.com/app/profile/sita.pawar/viz/AccessibilityStudy/Dashboard3