Visualization Without Vision

How blind users perceive data images.

Naman Phadnis
VisUMD
4 min readNov 9, 2022

--

Man looking up while listening to audio on headphones.
Photo by Andrik Langfield on Unsplash.

We all love visuals. Who doesn’t? Not only do they make boring things fun, they also help us understand complex things easily. A large dataset about the consumption of sweet products across the globe might make you yawn, but a nice bright picture of countries portrayed as various-sized lollipops based on how many sweets they consume can make you stop scrolling. But there is one problem. What about the readers who can’t see?

Thanks to technology, we live in an era that is more inclusive than ever. Blind users can browse the internet thanks to screen readers, which convert any text on the screen to speech. But what happens when they run into an image?

A block of computer code with a sample alt text
An example of alt text code.

That’s where alt text comes in. Alternative text, or alt text for short, is an invisible piece of text associated with an image. If you are old enough to remember the days of dial-up internet and Internet Explorer, then you might remember when sometimes an image would fail to load, and a small piece of placeholder text would show up instead.

An online image failing to load displaying some alt text
Alt text example.

That is exactly what alt text is: an alternative to the image in text format. It is what the screen reader reads instead of the image, thus allowing blind users to interpret visuals. There is just one small issue: people are lazy.

A bar graph showing percentages of paper with elements of alt text in Assets and CHI papers. 99% Assets and 97% CHI had summary, 73% Assets and 19% CHI had axes, 58% Assets and 13% CHI had data points, 56% assets and 34% chi had chart type, 54% assets and 10% chi had ticks, 40% assets and 14% chi had data trends, 6% assets and 4% chi had colors, and 0% assets and 0.4% chi had mentioned colors
Alt text frequency in ASSETS and CHI papers.

According to a recent study by Jung et al., while most papers published in two major academic conferences contained a summary alt-text for visuals (shame on the 1–3% who didn’t even have that!), these descriptions are very basic. The paper looked at all the other factors that help make visualizations easy to understand for a blind user, and as we can see in the chart above, few cared about colors and shape at all.

Now, if this is happening in top-notch academic conferences, imagine what our average blind user must be going through when reading regular articles and publications.

The same study found out through interviews that blind users hope to find the same amount of details as a sighted person will be able to access. Whether they are looking for a quick peruse or a detailed study, having the option to mentally visualize as much data as a sighted user is very important in removing the inequity. But how do we go about this?

Firstly, make sure all your images have alt text. Don’t make assumptions such as “most of my users will be sighted so it’s not that big a deal.” If we designed everything with the same mentality, we wouldn’t have subtitles on Netflix today, which are beloved by people who are both deaf and not deaf. When you design for the edges, the middle takes care of itself.

“When you design for the edges, the middle takes care of itself.”

Make sure the alt text is brief, to the point, and summarizes everything important in a short and sweet manner. At the same time, while we generally don’t want to overload the user with too much information, when the visual is informative or data-based, we want to be as descriptive as possible. In other words, make sure both the summary and description of the alt text are rich.

Finally, the least we can do is add a table apart from the visualization as an alternate way for blind users to view the data with a screen reader.

Two designers brainstorming on a piece of paper
Photo by Scott Graham on Unsplash.

Now, some of you reading this article might be UX people, data analysts, coders, designers, whatever. Someone who is involved with alt text in their work. Go out there and use this information to make someone’s experience better!

References

--

--