Dashboards That Pop: Accessibility
What would you think if you were presented with this dashboard? Would you know what is going on? Would you understand the data being presented? Would you even bother trying to understand it or would you just move on?
It is hard to read, hard to tell which colors are what in the pie chart, and there’s no indication of what those indicators and image are. Most users (rightfully) would not even try to use this.
If you aren’t using Accessibility best practices when designing your dashboards, then your dashboards could look/act very similar to this one for some of your users. Let’s look at how we can make this dashboard clearer for everyone.
Colors
Contrast
The higher the contrast between background and foreground colors, the easier it is to distinguish between the two. This is especially important for text. My sample dashboard is so hard to read because there is poor contrast between the font color and the background color. To those of you thinking, “It’s not that bad. I can still read it.”, did you even notice the filter text?
What may be enough contrast for you, might not be enough contrast for others. So instead of simply eye-balling it, you should use contrast checkers to determine exactly how much contrast there is between colors. At a minimum, your contrast should be 4.5 or higher.
The smaller the object, the more sensitive it is to contrast. While you may still be able to see the large circle on both sides, how well can you read the same colored text at the top?
With the introduction of Themes, Dashboard now alerts you when you do not have enough contrast between your theme colors and provides you with the contrast score.
So, I'll change our text color to something more accessible.
While text is typically the focus with color contrast conversations, don’t forget about your chart colors as well. While the large blocks of color are more forgiving than dainty text, you still want to ensure that your charts stand out from the background.
Color Combinations
Whenever we are using color to differentiate features or categories, we want to ensure that each color is distinct. This is especially important if color is the only way to distinguish them.
Which slice is bigger the Hail events or the Flash Flood events?
The above chart really isn’t very helpful, is it? You can’t tell the categories apart because the colors are too similar.
What about this chart? Is it easier to understand?
While this might be clearer for you, for folks with protanopia, a type of color blindness, this chart looks exactly like the first one. Once again, you can’t simply trust that just because it looks clear to you that your dashboard will be clear to your users.
When color is important, be sure you are using color blind friendly color palettes. I’ll go ahead and adjust the pie chart to something with more distinct, color-blind friendly colors.
Images
Alt Text
Alternative Text, frequently referred to as Alt Text provides a brief description of images that allows users to understand what is happening in the image if it cannot be viewed. These descriptions are not only useful for users with visual impairments but also for users in situations where the image won't load (poor internet connections, broken image links, etc).
The Super Cool Design blog provides this great alt text tip:
One of the best suggestions I’ve heard is to think how you’d briefly describe the image over the phone.
That blog and other alt text resources are linked below in the Tools & Resources section.
To add alt text to images included in your dashboard, click on the Alt Icon when adding your image URL.
Icons
Icons can be added to a variety of dashboard elements, where they can become problematic when they are the only way used to convey information. I most frequently see this with Indicators.
The below indicator relies on the icon to tell the user what that thing that value is measuring. In this case users could assume that the Indicator is displaying the number of tornadoes.
But what if the icon used is confusing to users? What is this Indicator measuring?
Turtle sightings? In a storm dashboard? Maybe it is turtles injured by storms? No silly, it is obviously the number of slow-moving storms!
If you are using a screen reader, it’s even worse. It’s just a number with zero context.
Therefore, to ensure that your data is clear to everyone, you should also include text.
Navigation
Screen readers use headings and other text markers as navigation, so it is important that you are using them appropriately.
Headings
Headings should be used to create a text hierarchy and not simply to make text bigger or to stand out. In my current list, I have the event type in the middle of each feature row. I wanted it to stand out a bit, so I made it a heading. This is confusing and can cause screen reader users to potentially miss information as they may navigate into the middle of your content instead of the beginning. You wouldn’t put a title in the middle of a paragraph, would you? Of course not, that’s weird. Table of Contents don’t direct you to some random spot mid-sentence, so don’t inflict that on your users.
When it is appropriate for you to use a heading, ensure that the heading level is appropriate for the entire dashboard and not just that element. Here are some general heading guidelines:
- Heading 1: Title of your dashboard.
- Heading 2: A section of grouped elements or stand-alone elements.
- Heading 3: Individual elements in a grouped section or heading within a List, Details, or Rich Text element.
If you are struggling with headings, consider creating an outline of your dashboard content, just like you would for a paper.
I frequently see people using a lower heading level because the appropriate heading level font size is too big. Remember, headings are for navigation and hierarchy, not font styling. If a heading is too big, simply change the font size instead of using a different heading level.
I’ll go ahead and adjust my dashboard, so it has appropriate headers. I formatted my second level headings so they’re not as large; they are still tagged as Heading 2.
Accessible Name
You can (and should!) add an accessible name to each of your indicators. This can be found in the Accessibility section of each element’s configuration settings.
The name you enter here will be read aloud by screen readers and helps with navigation. It should be similar to the title of the element and clearly state what the user can expect to find in this element.
Here is our final dashboard, as well as what it looks like when we use Topal’s Color Blind Webpage Filter (link in the resources section) to simulate protanopia.
Note: This filter doesn't seem to load dashboards and webmaps properly. Instead I used a screenshot of my dashboard.
What an improvement from the original dashboard! Making accessible decisions really did make this dashboard better for everyone.
Tools & Resources
Contrast Checkers
Color Blindness Color Checker: Takes color blindness into consideration when checking the contrast between colors.
Coolors Contrast Checker: Checks color contrast and provides suggestions if your colors fail.
Contrast Triangle: Checks contrast between text, background, and link colors.
Color-Blind Friendly Colors & Simulators
Color Blind Webpage Filter: Simulates how a web page appears to people with different types of color blindness.
Esri Color Ramps: Filter for color-blind friendly colors.
Color Brewer: Color advice for maps, includes color-blind friendly palettes.
Alt Text
How to: Write Good Alt Text by Super Cool Design
Write helpful Alt Text to describe images by Harvard University
Accessibility in ArcGIS
Improving the accessibility of your dashboard
Accessibility essentials for GIS and mapping
Designing and testing for accessibility in GIS and mapping
For more dashboard tips check out the rest of the Dashboards That Pop series. Happy Dashboarding!