You’re probably not doing it wrong — you’re just not doing enough.
Let Accessibility Guide You
This is not as straightforward of a task as it first appears — at least not if you want to do it right. It’s easy to assume that describing an image is straightforward, but we overlook the fact that our descriptions are based on a seeing perspective. You know who generally needs the alt tags most? Non-seeing or visually impaired people.
In much the same way we can’t assume people inherently know the language and jargon of our industry (try explaining “module” to your grandmother) — we can’t expect visually impaired individuals to grasp the descriptive language we use to portray the world. Many of our expressions rely on visual cues to differentiate similar attributes, such as various shades of blue (such as “sky blue”, or “ocean blue”, or “radiant blue”). Unfortunately, this visual emphasis can overpower the essential details that should be conveyed: the identifiable elements.
You’ll see me use “identifiable” throughout this article. This is an intentional use as I want to make it clear that sometimes what we consider to be relevant or necessary to context comes from an unintentional bias of our perception of the world. That isn’t to say non-sighted people don’t experience the world in the poetics of the visual (because they absolutely do), but their web experience is different than ours — and before we can experiment with their more profound experience, we need to be able to provide them the basics first.
It is crucial to acknowledge that we are still lagging embarrassingly behind in taking care of our accessible communities, and it is our responsibility to offer them something better.
What matters in the image anyway?
Context & Content Images –
What is the context of our image? That’s the biggest question, but it’s not always the easiest one. I speak below under Tips & Tricks on the PAM method, which is a great place to start when you’re unsure of how to write the alt text.
When writing alt text, your aim is to capture the value and relevance that the image adds. To some extent, you should already know. As a designer we are usually responsible for picking images that make sense. Sure, sometimes we pick overly dynamic images to fill the space — but it’s unlikely that you would select a cinematic shot of motorcycles for a website about baby care. There is usually some inherent connection between the context and the image. Your task is to focus on honing in on that essential element.
For a sighted person, we are usually really adept at scanning, but a non-sighted individual “scans” differently than us: they scan on-page elements, not words. They navigate through on-page elements, such as links, images, and headings. When it comes to alt text, the screen reader must read the entire description, so it’s crucial to provide concise and meaningful information.
Stay away from the overly detailed. You’re looking for contextual value and identifiable elements. Assume we’re designing for an event planning website, take a look at the image below:
Caption A:
Four college-aged women in a group drinking alcoholic beverages, smiling and laughing. They are standing in front of a brightly decorated mural around mid-afternoon and seem to be enjoying themselves.
Caption B:
Women gathered together and drinking.
Caption A is lengthy (200 character), filled with irrelevant visual descriptors (“decorated”. “mid-afternoon”, “seem to be”), and looses the emphasis on context/value by adding too many potenitals (“college-aged”, “standing”, “mural”). Caption B, however, is succinct (37 character) and references the websites context/value (activity: “gathering” and “drinking”) quickly. While there are plenty of non-visual descriptors that are present, reducing down to things that are identifiable (the people, the action) regardless of visual approach helps to reduce the clutter of the image — and it’s subsequent caption and alt text.
Graphic & Decorative elements –
This one is easy: ignore them. Don’t even place an alt text of “decorative accent.” Indicate to your developers to have the element completely ignored (“null”) in screen readers.
Screen readers will read out “Image: [alt text description]” when passing over an image. If your decorative accent (such as a line divider or fancy shapes) as an alt text, it takes away time from the content of the site. Imagine you have to stop at each line divider and spend time with it being forced to hear “Image of: decorative line element” — that’s awfully boring to hear and after the 5th time it’s likely also annoying.
Graphs & Data Visualization –
This is a trickier area, but not an impossible one. In its easiest form, the alt description for these are to describe what the graph is trying to convey (such as “Bar chart showing the average dollar spent per month in 2016”). Ideally, the content before or after explains the information that shouldn’t be missed. For these types of image inclusions, it’s imperative that we include peripherals to support the understanding. Consider also including a link to an excel spreadsheet so that the user can navigate and have true transparent access to the data shared.
This report from Do No Harm offers a great group of options, discussions, and essays that discuss this particular group of imagery in depth. It’s a fascinating collection that I suggest all designers read, regardless of it’s emphasis on alt text — it’s understanding of data visualization consumption by users is important to consider.
Tips & Tricks
Use stock photo titles –
When you find yourself unsure of where to start when writing alt tags, take a look at the details accompanying your image on stock photo websites, such as the title and tags. While these details may not perfectly align with your intended context, they can offer valuable clues to identify elements within the image.
Remember, stock photo websites primarily serve artists and photographers to promote their work, rather than catering to your specific context. However, examining the stock photo details can provide a helpful starting point for crafting alt tags that accurately describe the image and its relevant elements.
Get to know PAM (the people, the actions, and the message) –
When you need to experiment with proper alt text, start with getting to know your image. I usually break in image down into three parts: the (P) People, the (A) actions or activities that are happening, and the (M) message that precedes it.
Take PAM on a date, really get to know her. Sit down with a pen and paper and write these out in a column:
People — descriptions of the people such as number, age, race, ethnicity, characteristics, relationships.
Actions/Activities — what is physically happening in the image? Are people playing a sport, are they drinking, sitting alone?
Message — what was the context before the image? What is the context after? Why was this image chosen?
What you’re doing here is finding whats identifiable and important to comprehend the value. You want to remove emotion, and approach from logic. List everything out and cross out words or phrases that are not important, or need other clues to identify them. By listing things out, you can help choose relevant key words, and by crossing out irrelevancies you can narrow down what does need to be included.
Don’t make it long –
You’re writing a caption, not an essay. Try to keep your text under 150 characters (when your ideal should be less than 100). I understand that after the headache of even coming up with the alt text in the first place, you’re now responsible for shortening it. It’s hard to do — and writing is a skill a lot of designers overlook. When it doubt, it doesn’t hurt to find a content writer to check the work (or use something like ChatGPT with the command to reduce character count).
Alternative text is one of those areas we think as designers we don’t necessarily need to worry about — but who knows images better than us? Who knows how to tell a story in the imagery? We have trained ourselves how to respect the valuable of images and data visualization, it’s something we spend so much time with — it’s part of the process. Even if we aren’t sitting in the code ourselves, we can make valuable suggestions stemming from our unique understanding and relationship.
Background on the Series
This is the first article in the Advanced Web Accessibility Design | Critical and Intentional Approaches series.
Ever since my introduction to the design industry, I’ve been passionate about accessibility in design. My first job was with a healthcare solutions start-up where our clients were not the end-users of our products. This meant that we had very little interaction with the people who would ultimately be using our products, leading to poor outcomes for both our reputation and the end-users themselves. After leaving that company, I made a commitment to never overlook accessible populations again.
Drawing on my years of experience in digital design and problem-solving, I’ve created this series to help elevate the importance of accessibility beyond being a mere buzzword. As a designer, I’ve noticed that the conversation around accessibility often focuses on the basics, leaving out the nuances and complexities of the topic. I believe that this oversimplification does a disservice to both designers and the people they design for. My goal is to encourage and empower other designers to go beyond surface-level compliance and instead strive for genuine impact.
Disclosure
While I am not a certified accessible designer, researcher, or color science specialist, I am sharing some tips that have helped me make better decisions in my own work as a digital designer. If you notice any issues or have anything to discuss regarding the article, please do not hesitate to contact me via email.
I highly encourage you to seek advice and guidance from professionals in the field, as they possess the necessary knowledge and expertise to address specific concerns. It is important to note that while my suggestions may be helpful, they may not always be perfect, so it’s essential to rely on professional guidance when needed.
*Breaking the rules of WCAG AA standards should be avoided as much as possible, if not entirely, as doing so may result in legal repercussions in some states or countries. For instance, when dealing with an inactive button state, it’s crucial for your developer to ensure that the backend appropriately labels the button as inactive, according to the WCAG guidelines.
This article was originally posted on Medium by me on July 4, 2023.
Very informative!
This is an excellent resource, thank you! -Current O'Connor, Digital Skills Navigator at ASU