Creating a visually accessible map

How the City of Austin is improving ATXflood’s accessibility

ATXfloods is a web app created by the City of Austin in partnership with Code for America Fellows in 2012. It maps low-water crossings and is an important resource in flash-flooding-prone Austin and its surrounding areas.

Earlier this year, the Design, Technology, and Innovation Fellows started a project with the City’s Watershed Protection Department to improve the UX and the UI for both the public-facing experience and the backend City employee dashboard. One of our major project goals is to increase the accessibility of the primary public view—the map that shows all of the crossing statuses.

Current accessibility issues

The most significant visual accessibility issue with the current map is that the status markers are the same shape and only use color to differentiate between the two types: open or closed. For people with the most common form of vision impairment (Deuteranopia), using red and green alone to indicate status doesn’t work.

How the current version of the ATXfloods map appears to people with typical vision (left) and with Deuteranopia (right).

Red and green have natural associations, but when the colors aren’t discernible it’s impossible to know whether the darker or lighter color is the closed or open status. It’s harder yet if the statuses aren’t shown together—since it’s just tonal, the user has to be able to compare them in order to accurately read the difference.

Another visual accessibility issue concerns the contrast between the markers and the map. I recently read Geri Coady’s “Color Accessibility Workflows” from the A Book Apart series, and while there aren’t WCAG guidelines around the needed contrast ratio between non-text elements, she cites that best practice is to aim for 3:1. While the red passes that requirement, the green marker is below the 2:1 threshold (I like to use WebAIM’s Color Contrast Checker).

Explorations in increased accessibility

We’re currently prototyping using Mapbox GL as our map source for ATXfloods. One of the cool things with Mapbox is the studio interface where you can fine-tune the details of what the map looks like — from what level of information is shown, to fonts, colors of different elements, and more.

That amount of control meant that I could align the typography with the existing direction we’re going in for the City’s design standards and determine what levels of contrast between the map’s main elements—background, street, street names, parks, and waterways—worked well to make the information easy to read without overshadowing the status markers.

A screenshot of the Mapbox GL Studio—defining fonts and colors for major road labels.

Preliminary research and interviews indicated that in addition to showing open and closed crossings, also showing two new statuses—caution (for areas that will likely close soon) and long-term closures (crossings closed due to constructions or previous washouts)—would give users a more accurate understanding of the map.

In my explorations in redesigning the status symbols, I used color combined with shape to differentiate between the different states. Since our status types align with frequently-used terms, I wanted to leverage familiar colors and shapes — i.e. caution is shown with a yellow triangle — to speed up initial comprehension.

How a current exploration of the ATXfloods map appears to people with typical vision (left) and with Deuteranopia (right).

For users with typical vision, color acts as the primary indicator of status, while users with vision impairment can read the shape to understand the status. Using shape and color together also means that a status can be confidently understood even if it’s isolated from the other types—users don’t need to see an open status next to a closed status to discern which is which.

I also revisited the map design as I was iterating on these markers and symbols to make sure I was meeting that best-practice 3:1 contrast ratio between the map, the marker, and the marker’s symbols — navigating between three layers of contrast.

Next steps

These are initial explorations into how to improve the accessibility of the ATXfloods map. We need to do testing with users on status marker comprehension (there will be a key accompanying it, but it’d be great to find out what initial reactions are), and more testing around the user experience in general as we continue to design and refine.

Read more about how we’re connecting this project and others to overall efforts to design web design standards for the City.

Designing UI Patterns for Government

If this sounds interesting, we’re hiring! We have open positions for Senior UI designers, Senior UX designers, developers, and more.