Embedded Files
Grand Challenges Home > Drive Innovation > Data Visualization Toolkit > Accessibility > Operable
Operable
Operable
Ensure users can navigate and interact with your visualizations and dashboards.
Accessible visualizations should be usable with a variety of devices, input methods, and assistive technologies. Users should be able to navigate content, access controls, and interact with dashboards without unnecessary barriers, whether they are using a mouse, keyboard, touch screen, screen reader, or other assistive technology.
The guidance in this section focuses on three key aspects of operability: Keyboard Accessibility, Interactive Elements, and Zoom, Mobile, & Responsive Design. Together, these practices help ensure users can access and interact with dashboards effectively across a range of devices, viewing conditions, and accessibility needs.
Keyboard Accessibility
Keyboard Accessibility
Why It Matters
Why It Matters
Many users cannot rely on a mouse and instead navigate dashboards using a keyboard, screen reader, voice input, or other assistive technology. When keyboard accessibility is not considered, users may be unable to access filters, navigate between visualizations, or interact with dashboard content. Supporting keyboard navigation helps ensure users can explore and interpret information independently.
What to Avoid
What to Avoid
Requiring a mouse to access filters, controls, or visualizations.
Missing or unclear keyboard focus indicators.
Illogical tab order that jumps unpredictably around the dashboard.
Small interactive elements that are difficult to locate and activate.
Important information that is available only through hover interactions.
What Good Looks Like
What Good Looks Like
All interactive elements can be accessed using a keyboard.
Visible focus indicators show users where they are on the page.
Tab order follows a logical reading and navigation sequence.
Filters, slicers, and controls are clearly labeled and easy to identify.
Important information is available without requiring hover actions.
Example: Improving Keyboard Accessibility
Example: Improving Keyboard Accessibility
The example below demonstrates how visible focus indicators, navigation guidance, and a logical tab order can make a dashboard easier to navigate without a mouse.
Before: Less Accessible Dashboard
Accessibility Challenges
Keyboard focus is not visible, making it difficult to determine which element is active.
Users may need to navigate through numerous filters before reaching dashboard content.
The dashboard provides no visual indication of navigation order.
Interactive elements such as tabs, slicers, and drill-down controls are difficult to distinguish when using only a keyboard.
Users may not know which controls can be activated or modified without a mouse.
Important interactions require discovery rather than clear guidance.
After: More Accessible Dashboard
Accessibility Improvements
Visible focus indicators clearly identify the active element.
Keyboard users can navigate the dashboard in a predictable sequence.
Tabs, filters, and visualizations can be accessed without a mouse.
Interactive elements are easier to identify and activate.
Content is organized in a logical navigation order.
Users can move efficiently between filters and dashboard content.
Quick Test: Disconnect your mouse and navigate the dashboard using only Tab, Shift+Tab, Enter, and the arrow keys. Can you access all filters, controls, and visualizations? Is it always clear where keyboard focus is located?
Resources: Keyboard Accessibility
Resources: Keyboard Accessibility
These tools and resources can help you improve keyboard navigation, focus management, tab order, and accessibility for interactive dashboard elements.
General Guidance
Highcharts: 10 Guidelines for Data Visualization Accessibility: Practical guidance on keyboard navigation, accessible controls, and inclusive interaction design.
Boise State: Creating More Accessible Data Visualizations and Dashboards: Includes recommendations for keyboard-friendly design, reading order, labels, and accessible interaction patterns.
PowerBI
Microsoft: Design Power BI Reports for Accessibility: Best practices for creating reports that support keyboard users, screen readers, and assistive technologies.
Accessibility in Power BI Reports – Using the Tab Order: Demonstrates how tab order affects navigation and how to configure it in Power BI.
MoonStory: Accessibility Features in Power BI You Probably Didn't Know About: Practical overview of keyboard navigation, tab order, and accessibility features.
Tableau
Tableau: Author Views for Accessibility: Guidance for creating Tableau visualizations that support keyboard navigation and other accessibility considerations.
Tableau Enablement Series, Part 3: Building Accessible Dashboards: Demonstrates accessibility techniques and design considerations for Tableau dashboards.
Testing & Evaluation
WAVE Evaluation Tool: Helps identify accessibility issues affecting interactive content, navigation, and page structure. [Data Vis A...Resources | Excel]
Accessibility Insights: Accessibility testing tools that help evaluate keyboard accessibility and focus management.
Interactive Elements
Interactive Elements
Why It Matters
Why It Matters
Interactive elements such as filters, slicers, buttons, drill-through actions, and tooltips help users explore and customize data. When these controls are difficult to identify or operate, users may struggle to find information, apply filters, or understand how to interact with a dashboard. Accessible interactive elements help ensure users can effectively explore data regardless of their device, input method, or assistive technology.
What to Avoid
What to Avoid
Hover-only interactions.
Small click or tap targets.
Ambiguous icons without labels.
Hidden drill-through or filtering actions.
Controls that blend into surrounding content.
Inconsistent behavior across filters and controls.
What Good Looks Like
What Good Looks Like
Controls are clearly labeled and easy to identify.
Interactive elements are visually distinct from static content.
Click and tap targets are large enough to activate easily.
Important information is available without relying solely on hover.
Similar controls behave consistently throughout the dashboard.
Users receive clear cues about available actions.
Example: Improving Interactive Elements
Example: Improving Interactive Elements
The example below demonstrates how clearer controls, more visible actions, and improved interaction cues can make dashboards easier to explore and use.
Before: Less Accessible Dashboard
Accessibility Challenges
Interactive controls are difficult to distinguish from surrounding content.
Available actions may not be obvious to first-time users.
Small controls can be difficult to select or activate.
Dashboard functionality relies on discovery rather than guidance.
Users may not understand how to filter or drill into data.
After: More Accessible Dashboard
Accessibility Improvements
Controls and filters are clearly labeled using familiar language.
Important actions are easier to identify and activate.
Dashboard guidance helps users understand how to interact with the content.
Interactive features are easier to discover and use.
Clear instructions reduce guesswork and support first-time users.
Consistent interaction cues improve usability.
Quick Test: Ask a first-time user to apply a filter, clear a selection, and view additional details. Can those tasks be completed without explanation?
Resources: Interactive Elements
Resources: Interactive Elements
These tools and resources can help you design dashboard interactions that are clear, discoverable, and accessible.
General Guidance
Highcharts: 10 Guidelines for Data Visualization Accessibility: Practical recommendations for accessible charts and interactions, including navigation, controls, and discoverability.
A11Y Collective: The Ultimate Checklist for Accessible Data Visualizations: Includes considerations for interactive elements, navigation, controls, and user accessibility testing.
PowerBI
Microsoft: Design PowerBI Reports for Accessibility: Design Power BI Reports for Accessibility: Practical overview of accessibility features related to navigation, controls, and interaction design.
Microsoft: Create Reports in Power BI Using Accessibility Tools: Covers accessibility features available to report authors, including keyboard accessibility and interactive report components.
MoonStory: Accessibility Features in Power BI You Probably Didn't Know About: Practical overview of keyboard navigation, tab order, and accessibility features.
Tableau
Tableau: Author Views for Accessibility: Guidance on creating Tableau dashboards that support accessible navigation and user interactions.
Tableau Enablement Series, Part 3: Building Accessible Dashboards: Demonstrates techniques for creating accessible and user-friendly Tableau interactions.
Testing & Evaluation
WAVE Evaluation Tool: Helps identify accessibility issues affecting navigation, controls, and interactive content.
Accessibility Insights: Accessibility evaluation tools that help assess usability and interaction patterns.
Microsoft: Consume Power BI Reports Using Accessibility Features: Provides insight into how users interact with reports using keyboards and assistive technologies.
Zoom, Mobile, & Responsive Design
Zoom, Mobile, & Responsive Design
Why It Matters
Why It Matters
Users may access dashboards on phones, tablets, laptops, large monitors, or while using screen magnification. A dashboard that works well on a desktop screen may become difficult to use when viewed on a smaller display or at higher zoom levels. Responsive design and thoughtful layout choices help ensure visualizations remain readable, usable, and accessible across devices and viewing conditions.
What to Avoid
What to Avoid
Small text that becomes difficult to read when zoomed.
Fixed layouts that require horizontal scrolling.
Overcrowded dashboards with too many visualizations.
Controls that become difficult to access on smaller screens.
Content that is truncated, hidden, or overlaps.
Assuming desktop layouts will work effectively on mobile devices.
What Good Looks Like
What Good Looks Like
Text remains readable at 200% zoom.
Important information remains visible without horizontal scrolling.
Controls are large enough to use on touch devices.
Dashboard layouts adapt to different screen sizes.
Related content is grouped logically.
Key insights remain accessible on smaller screens.
Example: Designing for Mobile Viewing
Example: Designing for Mobile Viewing
The example below demonstrates how prioritizing content and simplifying layouts can improve dashboard usability on smaller screens.
Before: Less Accessible Mobile Dashboard
Accessibility Challenges
Dashboard content requires extensive scrolling to access.
Tables and visualizations may require additional horizontal navigation.
Filters and visualizations are separated across multiple screens.
Important information is difficult to access quickly.
Users may lose context while moving through the dashboard.
The layout does not adapt effectively to smaller screens.
After: More Accessible Mobile Dashboard
Accessibility Improvements
The dashboard is intentionally organized for mobile viewing.
The layout prioritizes the most important filters and visualizations.
Key information can be accessed with fewer navigation steps.
Related controls and visualizations are grouped together.
Important insights are easier to locate on smaller screens.
Users can access filters and dashboard content more efficiently.
The reduced number of mobile elements lowers cognitive load.
Quick Test: View the dashboard at 200% zoom or on a mobile device. Can you still access filters, read labels, and understand key insights without excessive scrolling or horizontal navigation?
Resources: Zoom, Responsive & Mobile Design
Resources: Zoom, Responsive & Mobile Design
These tools and resources can help you evaluate and improve dashboard usability across devices, screen sizes, zoom levels, and responsive layouts.
General Guidance
Highcharts: 10 Guidelines for Data Visualization Accessibility: Practical recommendations for creating accessible and responsive data visualizations across devices.
A11Y Collective: The Ultimate Checklist for Accessible Data Visualizations: Checklist covering responsive design, readability, navigation, and accessibility testing.
Power BI
Microsoft: Design Power BI Reports for Accessibility: Checklist covering responsive design, readability, navigation, and accessibility testing.
Microsoft: Create Reports in Power BI Using Accessibility Tools: Overview of accessibility features and design considerations available to Power BI report creators.
MoonStory: Accessibility Features in Power BI You Probably Didn't Know About: Practical overview of accessibility features that improve usability across devices and viewing conditions.
Tableau
Tableau: Author Views for Accessibility: Guidance for creating Tableau dashboards that remain accessible across devices and interaction methods.
Tableau Enablement Series: Building Accessible Dashboards: Demonstrates accessibility-focused dashboard design techniques, including mobile and responsive considerations.
Testing & Evaluation
WAVE Evaluation Tool: Helps identify accessibility issues that may affect usability, navigation, and responsive behavior.
Page updated
Google Sites
Report abuse