The Bread song “If” says:
If a picture paints a thousand words,
then why can’t I paint you?
It turns out, pictures can’t … express pictures for visually impaired computer users without words.
Those words are Alt text.
I don’t fully understand Alt text, but as usual, I’m going to try to make progress toward understanding it better by attempting to explain it (and why it’s important) to you. Hopefully there are some awesome people reading this who might be willing to fill in the blanks and/or correct what I’ve gotten wrong.
The little bit I know about web accessibility for visually impaired people comes from helping my mother-in-law, who was blind. She used a computer with a screen reader. She also, for obvious reasons, needed to use keyboard commands rather than a mouse and a pointer. Teaching her how to do things on her computer without using the mouse was a constant reminder to me that tasks such as “cut” and “paste” are not as simple for some people as they are for others.
Alt text never came up between her and me. She died in 2013 — if she had lived longer and chosen to blog or delve deeper into web accessibility, I think she would have turned into an Alt text advocate. Or at least I would have had to learn in order to help her.
What is Alt text and why does it matter?
Years ago, a friend started providing descriptions of images when she posted to Facebook. Let’s say the Facebook post was, “Our family went sailing today” along with a picture of the view from the sailboat. The status would say: “Our family enjoyed our trip on the water today” and then below that, it would say, “A blue sky, slight ocean waves with whitecaps and a view of a beach on the horizon from the bow of a sailboat.”
Someone asked my friend why she was doing that, and she explained that some people can’t see the images or their screen readers can’t process them, so the wording gives them context and includes them more in the experience of the message. (Thank you, Jess, for opening this door that led to so many other things I need to learn.)
Alt text (or alternative text) provides a reader with information to describe an image that is displayed in a piece of web content.
And here’s the first of many things I still don’t fully understand, so I’m putting it out here! There is a difference between describing a picture you share on Facebook or other social media and creating an alt text description via HTML code. I can’t fully explain the difference and welcome input from anyone who can. The main point is we need to make the images we publish — wherever we do that — something that our readers can understand. That’s my intent for the rest of this post — to highlight the need to explain our images.
I met with Jennifer Sarrett of Disruptive Inclusion in November to get some of her thoughts on how the style guide committee I’m on at Future plc can best approach our task. She reminded me (OK — informed me — I didn’t know this figure prior to our conversation) that 20% of the population has a disability of some kind.
Not everyone in this 20% has a problem digesting an image on a screen, but the 20% is a reminder that it’s a bad idea to make assumptions about what our readers can do. I’m just a blogger trying to share a few stories. In my company’s case, we have subscribers, advertisers, stockholders and authors to consider — our revenue can be reduced if we are only reaching four of every five readers.
Being on the style guide committee has definitely made me think about all of the considerations around accessibility more (all the ones I know about, at least).
I decided I had to up my personal Alt text game last month. I wanted to tag my incredible friend Tinu in a tweet. She agreed to the language I had chosen, but said, “Is there Alt text so I can share it!?” There wasn’t, but I redid the tweet with Alt text and decided that — if I had any control over things — no one would ever have to ask me to add Alt text again. (Tinu also introduced me to @ImageAltText, which will create a description of a tweet when it is tagged. There’s an example here.)
I haven’t started captioning my Facebook posts yet, but there’s Alt text on every Tweet and LinkedIn post I share on my personal accounts and my work account (please follow it!). I’m still figuring out what to do on my blog, because I was taught to use the blog post’s title as the Alt text, but that contradicts the guidance I’ve read today while drafting this post, so I need to figure this out. I’m also still figuring out Instagram, which apparently adds a rudimentary Alt Text but also has an advanced option.
(Bonus: Using Alt text appropriately can also be good for your SEO.)
How to incorporate Alt text
These are some of the most important tips, via MOZ:
Describe the image as specifically as possible
Keep it (relatively) short
Use your keywords
Avoid keyword stuffing
Don’t use images as text
Don’t include “image of,” “picture of,” etc. in your alt text
Here are some resources from people who actually may know what they’re talking about:
If you’re not using Alt text yet, what’s stopping you?
As I said earlier, it’s one thing for me as a microinfluencer and relatively low-profile blogger to decide it’s right to start using Alt text. It’s quite another for a business. They have to grapple with spending money on the additional time and technology involved to be compliant. The expense is probably worth it given the threat of being held legally liable for being inaccessible (this applies to the job application process too, which has its own details to work through). It’s also just the right, humane thing to do.
I recently watched “Crip Camp.” Although the film is about a camp as the title implies, it’s about so much more. One camper needed a wheelchair but lived in a second-floor walkup, so she rarely left her apartment as a child, because she couldn’t easily do that. The film is like a little capsule of disability-rights history and I highly recommend it. It taught me about how much harder our country was to navigate before the Americans with Disabilities Act passed. Watch it — you’ll find the energy to type a few words explaining every image you share.
The last thing I’ll share about my dawning realization of how to use Alt text and why is this: Adding the Alt text to an image makes me stop a minute and think about what I’m sharing. We do things so fast on social media these days — share big news with a few keystrokes, vent our frustrations by tapping out our ire, bestow all our genius thoughts (ha ha) on the world quickly before scrolling on to read everyone else’s genius (or not) thoughts.
It doesn’t have anything to do with disability or SEO, but maybe having to take a few seconds to think about what we’re putting out into the world paints the best picture of all.