Dashboard Week 2 - Accessible Road Damage Mobile Dashboard (DS24)

by Garth Turner

Accessibility, defined by the Oxford dictionary as "how easy something is to reach, enter, use, see, etc.", was the topic for today's session. This is something that often flies under the radar when trying to design a dashboard, as we tend to assume everyone interprets and understands things similarly to us. This is definitely not the case, which is why it is essential to make sure your visualizations are clear, understandable and most of all - accessible to everyone.

Some forms of accessibility are synonymous with dashboard best practices, such as ensuring charts are clear, colours don't clash or contrast too heavily, things work intuitively etc. Some are not so obvious, such as accommodating for for people with impaired vision, or for people who struggle to read. In order to help facilitate ease of use for such individuals, there should be addition options such as a screen reader, or options to download the data.

Wandering Koreatown I found a welcoming watering hole.
Photo by Adam Solomon / Unsplash

After discussing the different considerations and efforts that need to be made in order to ensure accessibility, we were tasked with building a dashboard of our own that was as accessible as possible. The data we were provided with outlined the locations of all potholes and other road inconsistencies in Glasgow, Scotland. This posed quite a challenge, as seeing as the data was essentially just addresses and coordinates, the temptation to plot it on a map seem to be overwhelming.

I decided I wanted to use this opportunity to try a build my first mobile dashboard so that people on their phones could access the information easily via the dashboard. I also wanted to provide the option to export the data to a csv file, incase some people preferred to read data that way. In the end, I landed up with a very simple dashboard that consisted of 3 filters and a map, with a button to download the data at the bottom - here is how it looks:

Yes, it's very simple, but I'm glad I was able to build something I haven't done before. This dashboard would be useful to those people driving around Glasgow, wanting to avoid potholes, with only a mobile device on hand. Is it completely accessible? Not yet - I would still need to ensure the desktop version flowed efficiently and and was usable without a mouse/track pad. I did choose a colour pallet that is suitable for colour blindness, but there would need to be more implemented in order to ensure a smooth experience for someone with impaired vision.

Some cool tools I learnt about today:

Funkify - Simulates a variety of impairments (e.g. low vision, tremor, colour-blindness) in browser setting.

Colour Palette contrast checker - Compares up to 5 different colors for contrast accessibility and suggests replacements

Color Oracle - Desktop color blindness simulator

Edit XML for Focus Order Walkthrough - Kelly Gupton, Director of Project Management, Tableau

TC19: Designing Accessible Dashboards in Tableau - Kelly Gupton

Chartability - Thorough Rubric for scoring "Data Experiences" on accessibility Data Tables Extension

Keyboard Accessibility for Tableau on the Web

Web Contact Accessibility Guidelines (WCAG)

NVDA Free Screen Reader

If you want to read more about accessibility when designing a dashboard, check out this blog by Henry Mak!

Avatar

Garth Turner

Mon 27 Sep 2021

Tue 24 Aug 2021

Tue 13 Jul 2021