Dungeons & Dragons taught me how to write alt text

I played a lot of the pen-and-paper roleplaying game in high school and college. I’m now conceptually more into Dungeon World’s approach, but I digress.

Unlike Tom Hanks, I avoided turning into a delusional murderer. Instead, I deepened some friendships, had a lot of big laughs, learned some cool vocabulary, and had an indirect introduction to systems design. Importantly, I also annoyed the hell out of my high school principal.

If you are not familiar with Dungeons & Dragons, there are two general flavors for how to play:

Using miniatures and a map, or
Theater of the mind.

We elected for theater of the mind more often than not. This was mostly because the rule books by themselves were expensive enough, and my friends and I were lower middle class.

Theater of the mind play means that the entire game is conducted verbally. The sole exception is your character sheet, which is a text and number-based armature you build the rest of your character from.

The narrative is shared amongst everyone by talking. The aesthetics of the game exist entirely in each player’s mind, and not communicated via moving little figures around on a map.

You can probably guess where this post is going now.

Thank you, random Dragon Magazine issue

Because I cannot half-ass anything, I went hard on immersing myself in the culture surrounding Dungeons and Dragons. This included subscribing to Dragon magazine.

I don’t remember the issue number, or the original author. However, I do remember it was from an advice column. The problem was the person who was running the game wanting to enliven his descriptions, as they felt like their narration was both boring and confusing.

The advice for that problem was spectacular, and it boiled down to describing the most important thing first.

Consider:

A large room with rough stone walls. Brownish moss clings to the walls, and trickles of brackish water also flow down parts of it. Broken furniture is scattered across on the floor. The ceiling is so high that you cannot see it. Also, there is a large red dragon attacking you.

I don’t know about you, but I’d want to know about the red dragon’s presence and activity a lot more than the quality of the masonry. There’s also another odd bit of putting too much detail on the wrong thing.

Let’s rephrase it:

A huge dragon the color of a smoldering coal is attacking you! It is rearing its snake-like neck up to strike, head poised underneath a ceiling that is so high you cannot see it. Its dull black, iron-like claws dig into the floor of the rough stone room as it prepares to lunge at you. Broken furniture is scattered about, no doubt victims of previous altercations.

We’ve put the most important thing first. We then supply detail in an order that aids in understanding the main point, and discard information that is irrelevant to the overall concept we’re trying to communicate and mood we’re trying to evoke.

We now know:

There’s a big dragon, and it’s seriously pissed off,
There’s ample room for it to move around,
It can, and has previously made good on its threats, and that
There’s not a lot of places to take cover.

This is explicit prioritization of information. It also demonstrates that informative information can also be entertaining.

Context, context, context

Observant readers may also note I’ve added some emotion with the exclamation point, as well as adding some more flowery language into the mix.

Alternative text descriptions (alt text) are as much an art as much as they are a science.

A red dragon attack is a significant event, so additional detail and emotion helps. I feel confident in both editorializing the experience as well as punching it up, given that the larger goal is to communicate a frenetic, action-packed encounter.

The same also applies in reverse. Smaller, more succinct descriptions can be equally helpful in situations where the content is not a major contributor of the overall thing you’re trying to communicate.

In Dungeons & Dragons this is a bit of an in-joke. Over-describing something trivial can lead to your players fixating on it, completely derailing the plot as they try and uncover the secrets behind something mundane that you had no pre-formulated plans for.

This is why you want to go with this:

A worn, wooden mug full of cheap ale.

Over this:

A stout mug crafted from reclaimed lumber. It is poorly stained and worn smooth from years of heavy use. Twin iron bands are placed at the top and bottom, equally as worn and giving it a comfortable heft. A thin, frothy ale has been poured into it, smelling weakly of hops and strongly of alcohol. A single rivulet of ale pours down the side of the mug to stain the bar top the mug is placed on.

I mean, it’s a great description, but also not the point. The point is you’re in a seedy pub chasing down rumors about a goblin who somehow got its grubby little hands on a powerful magic artifact.

For alt text, we want to also consider the larger context of what you’re trying to communicate, why, and if the detail you provide helps that effort to communicate.

Consider the difference between a small badge that indicates a product has been recently-added to the storefront:

New!

And this Tweet from NASA showcasing a photo from the James Webb telescope:

A dramatic blade made of red gaseous wisps comes down top-to-bottom in the center of the image as smaller green wisps feather out in horizontal directions. A bright star shrouded in blue light is near the center of the bow-like blade. Blue dots in different sizes dot the background of the image, signifying neighboring stars.⁣

Tone and mood

These two concepts are the bread and butter of a roleplaying game experience. Consider:

The vizier prattles on, clearly in love with the sound of their own voice. Meanwhile, the rest of the court slumps—bored, exasperated, and succumbing to the stifling heat of the high summer. They are taking their cue from the sultan, some nakedly jealous of the cushioned throne he is slowly nodding off on.

In the desperation of scanning the room to find something more interesting to look at, you catch the unblinking gaze of the court jester. His stare makes you feel like a butterfly pinned to a specimen spreading board. The room begins to slowly fade to black as you continue to lock eyes. A subtle foxfire aura begins to shimmer around his frame, while a placeless humming sound gets louder and louder. The heat of the room is forgotten as a chill runs down your spine.

Or:

A white woman with short blue hair smirks at the camera and raises a glass to it. Her drink is a margarita, and the glass is beaded with sweat from the heat of the day. She is wearing a loose white shirt, and oversized red sunglasses are perched perfectly on her head. Her hair is slightly frizzy from the humidity, but her expression clearly communicates that she is unbothered by it. It is the golden hour, and the sun casts a warm, hazy amber glow on her skin. The table she is sitting at is wooden and well-worn. Behind her is a busy street, a blur of people going about their day.

Both of these descriptions are evocative.

As the author of both experiences I am trying to not only:

Describe what is physically present, but also
How all the qualities add up as a suggestion for how to feel when taken in as a composite whole.

For the roleplaying game description, I am injecting an immediate sense of fear and menace into an otherwise boring situation. For the image description, I am creating a sense of relaxation and contentment.

Additionally, the introduction of the vizier may seem contradictory when compared to the dragon on a first read through. Remember that this is an editorialized experience.

The most important thing in this scene is the feelings of shock and fear when something unexpected and unsettling interrupts the mundane. In order to create that feeling, we need to first establish the humdrum experience of a boring, endless meeting in a stifling room.

The user experience of assistive technology

Another reason why I advocate for describing the most important thing first is because of how screen readers announce alt text. A screen reader will read it in a linear order, starting from the first word in the string and ending with the last.

Unlike other web content, there isn’t really any other special way screen readers can work with alt text strings—short of increasing or decreasing the speaking rate. This is also why things like bolding, italicizing, links, and paragraphs aren’t allowed.

Another important thing to know about screen readers is that they have dedicated keyboard commands to make them pause or stop announcing. There are a few use cases for this behavior, but the most common one is, “Yup, I got it. Shut up now.”

Placing helpful, but ultimately non-critical information after the most important thing lets the person using the screen reader decide when they know enough to get what they need. It also saves them from wasting time re-listening to superfluous information if re-navigating to the image to glean some important detail (“Oh, what was the subject of that painting again?”).

Remember, you control the narrative

The person who runs the game of Dungeons & Dragons has a responsibility to provide an entertaining and memorable experience for the other participants.

You wield power as the person enabling and facilitating the experiences others have. This applies to roleplaying games as well as writing alt text.

This is why I believe most contemporary images on the web are not decorative. It’s also why I think it’s important to include details like race, gender, and ethnicity.

It is important to acknowledge this fact. For roleplaying games, it centers around consent. For alt text, it centers around autonomy.

We want to ensure that people who cannot see the image have the capability to understand it the same way as someone who can. There is a huge amount of power in this act.

Skills you can cultivate

A decent amount of people are uncomfortable the first time they play a roleplaying game. Acting out a character in front of others can feel strange at first, but is also a feeling that passes the more you do it.

The same applies for writing alt text. The more often you practice it, the better you get at it.

The grim reality is the state of alt text on the web leaves a lot to be desired. That said, writing it can be a joy and an art. If you’re looking for a new adventure to start, here are some resources that can help you on your quest:

Published on July 16, 2024. Alt Text, Accessibility, Approach, Assistive Technology, Attributes, Design, Development, HTML, Inclusion.

Updating in the open