Search
  • Charlotte Vosseler

The Design of Alt Text

In my blogs week to week, you may have noticed, dear reader, that I include some very silly collages to either inspire or just motivate me to sit down and write. I have stacks of magazines and accordion files full of different cutouts and pages and am constantly surrounded by scraps of paper or the occasional exacto blade I forgot to throw away. Some weeks, this comes much easier than others, but sometimes just the collage takes me most of the week to put together. Sometimes the topic comes to me first and that will give me a collage direction, sometimes the collage inspires me, sometimes they’re totally unrelated and I just throw in whatever I was working on since I’ve set this requirement for myself and don’t want to break it! My favorite part about them though, has nothing to do with the blog at all, it’s been writing the alt text.


Alt text refers to the invisible written description of images which appears on the place of a webpage if the image fails to load on the screen. It’s also utilized by screen reading tools to describe images to visually impaged readers as well as allowing search engines to optimize website ranking and searching. Accessibility is not only much needed, it’s a hot topic in UX design. As usability designers, we have the responsibility to make sure that everyone who wishes to access what we create. There are so many articles on the visual aspects of accessibility: proper contrast, color usage, focus indicators, labels, I could go on. There was very little focused on the hidden design of alt text.


The WCAG 2.1 guidelines of web accessibility outline that images must have text alternatives that describe the information or function represented by them. There are many different categories of images to help provide appropriate alt text based on each image which is determined by the author. For example, a picture of a park with a bird in the sky would be described differently on a website about parks than a website about birds. A great rule of thumb I discovered is to include what you might relay over the phone. They should be concise, about 125 characters if you don’t have a limit of 120 like on LinkedIn…


So why do I bring this up? Collages are hard to describe! Most of the time they don’t make any sense. The titles I give them don’t really describe the image and a lot of the time 120 character’s doesn’t really capture the essence of the image. For example this one (which my scanner could not handle for whatever reason):

A collage of a man pouring a bushel of carrots into the bathtub of a modern, formal bathroom
Don’t Put All Your Carrots In One Bathtub Before They Hatch / A collage of a man pouring a bushel of carrots into the bathtub of a modern, formal bathroom

I’ve titled it “Don’t put all your carrots in one bathtub before they hatch” and my alt text would be “A collage of a man pouring a bushel of carrots into the bathtub of a modern, formal bathroom”. This doesn’t really give a good description of what I’ve got! The man with the carrots is from a vintage national geographic magazine from the 1960’s, it’s a lovely juxtaposition of textures and colors from the shiny modern bathroom image (which I think I found in an issue of Architectural Digest) that just can’t be described succinctly. Do I include details about the sculpture hanging from the ceiling? The red marble? The table or the towel on the edge of the tub?


I created this collage specifically for this blog:


A collage of 5 fashion models with lightbulbs as heads
Shine Bright Like a Diamond / A collage of 5 fashion models with lightbulbs as heads

I found a couple of the same ad for a Nutrogena moisturizer about bright skin with lots of light bulbs and thought it would be funny to make them the heads of some models from various fashion magazines. I call it “Shine Bright Like a Diamond” (because the woman furthest left was a picture of Rhianna) and the alt text is “A collage of 5 fashion models with lightbulbs as heads”. At only 54 characters, I could go on. “A collage of 5 fashion models with lightbulbs as heads. 1 holds 2 trashbags, 1 has her hands up holding her lightbulb, 1 is in a formal pink ballgown, 1 is walking away behind, and 1 has her hand on the shoulder of the model next to her while leaning back” Ooffa, 255 characters. But how do you cut down a description of something so…strange to 120 characters?


I wanted to see how other art was described, so I went to the Metropolitan Museum of Art’s Website. This painting has the alt text “A painting of a landscape with mountains and a waterfall, and Native American’s camped in the foreground”


A painting of a landscape with mountains and a waterfall, and Native American’s camped in the foreground
Albert Bierstadt (American, 1830–1902). The Rocky Mountains, Lander's Peak, 1863

Pretty accurate, although a little bland I would say. No mention of horses or tipi’s or the large lake, which if I were visually impaired I would like to hear about. But what about something more complicated? I think I went a little too weird, since this painting by Gerhard Richter has no alt text at all:

An abstract painting that looks like a woven texture of white, black, red, and green
Gerhard Richter (German, b. 1932). Birkenau (detail), 2014

Is that fair to the person using a screen reader? It certainly would be a feat to explain, and I would love to talk to the curator in charge of the exhibit to get a better understanding of WHAT the alt text would say - but that is my job as a UX designer. (The alt text I set here is "An abstract painting that looks like a woven texture of white, black, red, and green") I want all users to have the best experience using my product as possible. Hey, anyone who works at the Met, I’m available to write all your alt texts! Just give me a call and we can chat.


I understand websites wanting to put a cap on user-entered alt texts. I’m sure it’s incredibly difficult to implement an open-ended section to the code for anyone to enter their chosen text - if they do it at all - but I hope in the name of accessibility we try and make as many images available to everyone as possible. Let the images speak for themselves, until they need help finding the words.


So how can I, as a User Experience and Interface designer help change this? I think the industry is moving in the right direction with more accessible tech being designed, but the world is still inherently designed with able bodied bias. There needs to be more testing with people with disabilities or people who are differently abled, thinking about these users concurrently with able bodied users. We need to stop assuming that people with disabilities won’t use or will find a way to use the tech we design, we need to make sure that every user is included from the beginning, and not just as an afterthought or a hero project to tout over others. Make that research and solutions available to all so that eventually we aren’t all existing through an able bodied world, but a world for everyone!


10 views0 comments

Recent Posts

See All