Dashboards and data visualizations can be a good addition to your website but must be planned with accessibility in mind. Tools like Tableau include several features to create accessible dashboards. Follow these three steps to plan and publish a more accessible dashboard or data visualization on your site.
1. Create and publish an accessible dashboard with Tableau
Tableau has several great resources on how to create your dashboard with accessibility in mind.
Play Create and Publish Accessible Dashboard in Tableau
In this video from Tableau, you’ll learn more about the following topics:
- Accessibility Basics [2:48]
- Web Accessibility Standards [17:43]
- Creating Accessible Dashboards [23:20]
- Case Study Application [47:29]
- Demo with screen reader and keyboard [59:57]
Additional Resources from Tableau
- Tableau FAQ: Accessibility
- Three ways to make your COVID-19 dashboards more accessible to people with disabilities
2. Publish your accessible dashboard on an accessible web page in WordPress
After creating your accessible dashboard, your next step is to publish it on an accessible webpage. Please note: as an iFrame is required to embed your dashboard on the webpage, contact the WordPress Support Team for assistance early on in your project. For Boise State’s WordPress instance, we recommend using the following tips for making your Dashboard page accessible:
Use a Clear Page Title
The page title announces to your readers what the page is about. Instead of something generic like “Dashboard” give your page a title that clearly describes what your readers will find on the page. Example, COVID Tracking Dashboard.
Describe Your Dashboard
One of the first pieces of information on your page should be a clear description of the dashboard. A good description includes the following information:
- What type of data is in the dashboard
- How often the dashboard is updated
- Who is responsible for the dashboard
Example description from Boise State COVID Dashboard
[What’s in the dashboard] The following dashboard tracks the weekly number of new COVID cases on campus broken down by category — faculty and staff, residential student, and off-campus student. The dashboard also tracks the percentage increase of cases over the prior week, as well as how many of the university’s 90 beds designated for isolation are in use.
[How often the dashboard is updated and who’s responsible] Boise State’s Public Health Office provides updated data each week for the dashboard. This allows the Boise State community to stay up-to-date on the campus incidence of COVID-19.
Instructions for navigating the dashboard and/or links to accessible alternatives
After the description and before your dashboard, provide any relevant instructions on how to navigate the dashboard, such as the order in which content is presented or if there are multiple dashboards available on the same page. Also in this section, provide information on how to download an accessible version of the data.
We highly recommend creating an accessible Web version and provide it on the same page after your dashboard or link to a new page.
If your dashboard includes an option to download data, provide directions for how users can find the download button.
Example instructions from Boise State COVID Dashboard
[Instructions for finding and downloading accessible alternative for screen reader users] For the best reading experience for screen reader users, access the Google Sheet version of the data with Screen Reader Support enabled (see Accessibility for Doc Editors). To download an alternative file format from Google Sheets select File, Download As, then select one of the alternative formats available including Excel, OpenDocument, PDF, webpage, comma separated, or tab separated.
Embed Dashboard
We recommend using the iFrame panel to display your dashboard on the page. This panel requires a descriptive title. For assistance configuring your Tableau dashboard embed code, please contact the WordPress Support Team.
Contact Information
Also include on your page contact information should visitors have questions about the data.
3. Test your dashboard and resolve any remaining issues
Finally, perform some quick usability tests on your dashboard before sharing with your audience.
- Tab through the dashboard to ensure reading order makes sense
- Verify the color contrast is accessible with a Color Contrast Checker
- Ensure labels are visible and easy to read
- Use the WAVE browser extension to verify headings tags are used and nested properly and all images have alt text
- Verify instructions to direct users to any accessible alternatives are accurate and complete