Creating an accessible data visualization
Visualizations can be added to Information Details pages.
Data visualizations built using tools such as Tableau and Power BI can be an effective way to present information on Mass.gov Information Details pages by using the Visual Story template. Visualizations require up-front work to ensure they are accessible to all users, regardless of the impairments they may have or the method they may use to access the information.
These tools don’t produce accessible data visualizations by default.
While it is not possible to make all content accessible to all Mass.gov visitors at all times, following our accessibility guidelines will get you as close as possible.
To successfully build accessibility considerations into a data visualization project, think of it in three phases:
Design: Drawing a blueprint for your data visualization
Development: Building your data visualization in your chosen tool
Testing and quality assurance: Verifying accessibility and consistency across users
Design phase
Before you start building the visualization in your software, take some time to consider your design and how users will engage with your product. A professional data visualization or graphic designer could be helpful in this phase if scope and budget allow.
Think through the layout of your presentation. Will your presentation include one visualization or several? Do your visualizations have multiple components? Create a clear layout that supports the flow of how you want users to engage with your presentation.
Think about how a user who is using a keyboard rather than a mouse will interact with your presentation. Keyboard users often use the ‘tab’ key to move from one component in a presentation to the next. Set a tabbing order that takes a keyboard user logically from one component to the next in your presentation.
Consider how you will lay out the presentation to ensure the visualizations can be used from a desktop or mobile device. You may need to create alternative layouts for different screen sizes. This is called “mobile responsiveness.”
Choose color combinations that meet the required color contrast ratios to help users with low vision or color blindness can identify each element. Color contrast varies based on surrounding colors directly next to each other. When a color is directly next to other colors like in a pie chart, the color should have the required color contrast against the colors on each side (2 colors) in addition to the background color. In this case, the contrasts against 3 colors are involved with this one color. Verify color contrasts with every graphic element against the colors next to it.
Make sure all components are labeled clearly. Try not to rely on tooltips or hovers to present labels, as these features are often not accessible to keyboard users.
Make sure any filters you apply are defined clearly and the filter options are intuitive. Think about how keyboard and screen reader users will interact with your filters. If the filter selection can only be made with a mouse, or if a screen reader would need to read through such a long list of filter selections that the user might get lost remembering them, rethink how you will create your filters.
Where your software allows, include “alternative text” for graphic elements to give screen reader users a description of the visual if they are unable to see it. If your software does not have an alternative text feature, be sure to include enough information in the text on the page to orient the user to the visual.
Ensure your design can be implemented with your BI tool of choice. BI tools each have unique limitations.
See our design guide for more detailed information about how to design your presentation.
Development
Your tool doesn’t create an accessible data visualization/dashboard automatically. You configure your data visualizations to be accessible where applicable. Check the tool’s documentation, its user forums, and other tutorial resources for available configurations for accessibility.
Develop the presentation in your BI tool using the design from Phase I.
Ensure the presentation matches the design specifications as closely as possible.
Set up the presentation in various screen widths to ensure mobile responsiveness.
Set the tabbing order.
Ensure all components can be resized by users who may need to magnify them to see them clearly.
Include the alternative text.
Implement the color scheme from the design to ensure color contrast.
Include all labels in the correct locations.
Ensure filter components are intuitive, laid out in a logical order, and can be used with a keyboard.
Testing and quality assurance
Testing must be done with a published version of a visualization, not in the authoring area. This will enable you, based on audience experience, to:
Check layout variations in different screen widths in a web browser.
◦ You can adjust a window size or use a browser plugin to simulate different devices.
Resize the presentation to 200% using a browser’s zoom feature.
◦ See if components blur as they get enlarged.
Use the Tab key to navigate through the presentation to check tabbing order.
Ensure colors meet the required contrasts.
Check the presentation in a color blind simulator to ensure that visual elements are uniquely identifiable.
Resolving accessibility issues
If you find some features or components aren’t accessible and can’t be made so, you’ll need to provide your audience with workarounds (aka, mitigation approaches) to access your presentation and data.
Where to turn for more accessibility help
Supportive documentations:
Design and Develop Accessible Data Visualization: Covers how and when to apply accessibility to your data visualization project
User Challenges with Data Visualization: Learn about difficulties users could face
Mitigation Approaches for Data Visualization Accessibility: Shows what can be done when accessibility issues are unresolvable
Accessibility Information for Tableau: A list of known accessibility issues
EOTSS Data Team is here to help you
Mass Digital’s Data Team is here to help you with data visualization projects, and we’ll soon be offering audits for data visualization presentations via ServiceNow.
Was this article helpful?
Last updated
