Invisible Animations

During the summer holidays I read a book, written by Hannes Wallrafen, called The Blind Photographer.¹ In it Hannes describes both his life as a successful documentary photographer, and his life after he became blind, 15 years ago. What do you do as a photographer when all of a sudden you cannot see anymore? In the case of Hannes, he kept doing what he did before: he kept telling stories, but instead of photography he now uses sound.

Over the years Hannes has created all kinds of audio objects. In some of these he might explore a certain part of the city, like he did in the project De stad bij nacht/De IJ-oeververbinding which documents the nightly sounds of the ferries that travel from the north of Amsterdam to the center.

There’s a small collection of these audio objects on his website. When I asked him to show me this website on his own computer it struck me that the page itself is unnecessarily hard to use for him: the page starts with a long irrelevant navigation, the audio player is very hard to understand for someone who can’t see it, and there are all kinds of non essential elements on the page that can — and thus do — cause confusion.

We decided that I would try and make a tailor made version of this page for Hannes.

It was pretty easy to get the page to a functional level: I removed everything that’s not necessary, designed and created a new audio player that works nicely with his screen reader and a keyboard, and made it easier to skip from one audio object to the next.

Even adding a basic visual style was not too hard. Hannes has a clear preference for colour, he insists on high contrast and readability, and he is a very kind, very accessible person. These requirements combined with the subject resulted in a visual style that works. Hannes can’t see it, but he did understand my explanation, and liked the sound of it.

While it is interesting to design a visual style for someone who cannot see, I wanted to take this design a step further. We had a few conversations about his personality, his character, and about how he socialises. This resulted in some improvements of the tone of voice, which is now more human, and not as systematic as before. As if Hannes is showing you around in person.

The really interesting step in the design process happened when I asked Hannes if he could think of some nonsensical elements, some things that might not necessarily be needed, but could add to the experience. Hannes immediately knew what was missing on his web page: small, funny, illustrative animations. He wanted animations because they have a temporal dimension, which makes them perfect for illustrating audio, which is temporal and ever changing as well. But.

Animations for a blind photographer. What does that mean?

Animations are very visual. And I wanted to make this website first and foremost for Hannes. How could I make sure that these animations are funny for Hannes as well? Of course I could follow the current web content accessibility guidelines,² and create the visual animation first, and then try to create a textual description that comes close. But I have to agree with Kat Holmes who says that treating accessibility and inclusion as an afterthought is an exclusion habit.³ So I decided to approach it differently: first I had to write the description, make sure it sounds funny with the voice of Hannes’ screen reader, and only then make the animation itself.

Voices of screen readers nowadays sound convincingly human, yet very decent. Every webpage is read out with the same neutral emotion. From the voice you will not be able to discern what the page is about. Is it about some horrible disaster? Or is it an entertaining page with funny animations?

I tried to make Hannes’ screen reader laugh, giggle, and sound surprised. For instance, one of the illustrations reads:

hè hè hè hè hè, so funny! All of a sudden there’s a hammer that ticks the text down a bit.

Another one:

Ha, look at that. Two ferries are ferrying from one side of the screen to the other, bouncing, boing boing boing boing, against the sides of the browser.

If Hannes sniggers it’s good.⁴

I haven’t found any cross platform documentation of strings that give emotion to the different voices of screen readers. There is a large page that documents all special codes you can use for Acapela Group voices. They call these vocal smileys. Unfortunately this is not a standard used by other voice manufacturers. A platform independent overview of the different strings that make different voices laugh would be very welcome for people who want to create more emotional designs for screen reader users.

I started working on a simple application that tries to provide such a documentation.

Together with Hannes Wallrafen we managed to go well beyond the functional in this project. We did this by focusing on the needs of one single person, and by exploring nonsensical ideas.

Here I tried to design for the screen reader that Hannes uses. Which is hard. In the next chapter I explain that this has to do with the default settings screen readers use.