This blog post is based on two talks I gave at IASSIST in Austrailia and the Michigan State University Accessible Learning Conference in 2019. This is a sparsely published on subject and the talks and this blog post were/are meant to spark conversation on an under considered subject.
I do not write out my talks prior to giving them, I have basic notes and give presentations extemporaneously. The style of this blog post reflects that conversational tone.
My reason for giving presentations on this subject is that prior to arriving at my current position as GIS Librarian I had not much considered accessibility. MSU Libraries are very committed to accessibility, and when I arrived many people asked me about the accessibility of maps, especially digital maps. I didn’t have a good answer, and received many suggestions that seemed inadequate to me. For example, a suggestion was giving bounding coordinates as alt-text (if you don’t know what alt-text it, more on that in a bit). How many people actually know the latitude and longitude of where they are, let alone well enough to place coordinates globally? Bounding coordinates seemed inadequate to represent maps. So I have kept an ear out and began to consider this subject more deeply. I am still keeping an ear out and looking for more information on making data visualization and maps more accessible, what I present here are nascent ideas, and I welcome input and other suggestions. There is room for expansion.
People often frame accessibility concerning graphics such as data visualizations and maps as being a matter of assisting the blind. Sight is a range, and sight impairment is much more common than blindness. Not being able to use a mouse and thus having to tab through webpages and graphics is another consideration. However, it is important to think of improvements in accessibility as being improvements for everyone, not just those that are in need of assistance. Clarity in presentation helps everyone.
WCAG Guidelines
The basis for my suggestions to make visualizations (both data and maps) more accessible come from the WCAG guidelines. The WCAG guidelines are a large set of instructions for making web pages more accessible. They have been in development since 1999 and are currently on version 2.1, which was made official in 2017.
Of the WCAG guidelines, the specific instructions I see as being most important for data visualization and digital maps are as follows:
- Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- The visual presentation of text and images of text has a contrast ratio of at least 7:1, graphical objects have a contrast ratio of at least 3:1 against adjacent color(s)
- All non-text content that is presented to the user has a text alternative that serves the equivalent purpose
- When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
- If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (don’t put text in your jpegs)
Color and Contrast
Color is often seen as a first and last stop for improving accessibility, if color blindness is considered and adjusted for, then the data visualization or map is good to go in many people's view. Color can be problematic, red green color blindness is especially common, too many colors “a rainbow” can render graphics unintelligible, and color is culturally situated (red is negative in the United States but has a positive, lucky connotation in China, for example). A common tool for finding color blind accessible color palettes is the venerable website ColorBrewer, https://colorbrewer2.org
However, while being aware of color blindness is a good idea, color should not be the only means of following information. As the guidelines state, color should not be the only means of conveying information. Can you make sense of a map or graphic in grey scale? You should be able to if you are using good contrast ratios. Contrast is more vital for intelligibility than color.
WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. WCAG guidelines indicate a minimum contrast of 3:1 for graphics, 7:1 preferred (AAA). I suggest trying to achieve 3:1 between colors used in your data visualization or map.
How can you check the contrast levels in your visualizations and maps? There are web applications that check your contrast levels, if you know the RGB or hexadecimal value of the colors you are using. Two examples of these are:
https://webaim.org/resources/contrastchecker/
As these apps are designed for web pages, instead of thinking of foreground/background, take elements of the map or data visualization to test the contrast between parts of the graphic.
Examples
Having laid out some basic considerations, prime among them being contrast, let’s consider some examples.
Given the importance of contrast, which is the better option?
Option 1 a Pie Chart?
Or Option 2 a Column Chart?
These data visualizations depict the exact same data. Option one does have white boarders around the pie slices, which improves contrast and readability. However, option two doesn’t need boarders, and it is less complicated to create good contrast ratios for it, the bars and the background are the only considerations. It also more clearly tells a story, it is far easier to see the differences between categories in a bar chart than a pie chart.
This is a trickier decision, which of these options is better?
Option 1 – a Stacked Column chart
Option 2 – a Side by side bar chart.
Again, same data. I suggest Option 2 is the better choice, because again, the main contrast consideration is between the background and the bar, whereas for 1 there are three sets of contrast to consider. Also, when you have one color that is, or appears, darker than another it has more weight and can appear larger than it is. Which can make comparing amounts on stacked bars difficult. Option two is easier to understand, but may not convey the same story as option one (it loses the emphasis on the combined amount) so this decision is tricky.
Alt-text
In any of these cases, these figures need to have alt-text. Alt-text is a description that sits with the figure such that screen readers can describe the picture, rather than just rely on the file name of the object. Barchart.jpg is not a great description of a data visualization. Having a brief description of what it is you want people to see in the data, not just what the data is, is important. “This is a bar chart showing bars of 1, 1.5, 3, and 5” isn’t terribly descriptive by itself, saying that category five is larger than the others by 4 to 2 and that it stands out as a category would be better.
Having the raw data in a table for a screen reader to read is often looked to as a solution, but practically it is, especially for large data sets, unintelligible.
Let’s look at a map.
(The data for this map comes from SimplyAnalytics)
The gray to black of the tracts are actually in a 3:1 ratio from one another. A point of confusion is with the background, which is not at a 3:1 ratio with some of the map elements. It always helps to have black or white boundary lines around the tracts. This helps clarity and in some respects mitigates the need of the 3:1 contrast between the tracts and the background.
Another problem in addition to the background is how the information is embedded into the map, the title and legend are embedded into the jpeg. This means that a screen reader would miss that information. Using alt-text that includes the title would be helpful. A potential alt-text might read “this is a map of East Lansing census tracts that show the number of flavored alcoholic beverages consumed by capita, with the lowest being 0-57 on campus, and the highest being 229-286 which found in tracts north of the campus.” Alt-text should be short descriptions, which is challenging with maps. The main goal should be telling the story of the map and the reason for its inclusion in wherever it is.
Final thoughts
There are many possibilities to expand the very basic ideas I have presented here. Haptic or sound feedback can be used to characterize data (which can almost turn data into art, a favorite example which sonifies Wikipedia edits: http://listen.hatnote.com/#nowelcomes,en). Also graphics are becoming more nuanced about alt text, where if they are produced as svg graphic files, where each component of the graphic is clickable as a vector with its own alt-text, is a direction of improvement. This conversation around how to present data and maps more effectively is just beginning.
