If there’s one thing out there that I don’t agree with other web accessibility experts on, it’s the recommendation to in certain instances *other than* decorative images, leave alt text empty. As in, alt="". Here’s why I disagree.
The "for" argument to omit alt text (aka leave the alt tag empty), is in instances where an image has adjacent text that can serve as effective alt text. Why? Because it can create information redundancy for someone using a screen reader.
How? Well, let’s imagine you can’t see and therefore use a screen reader to browse the web.
A screen reader, translates visual information into text. Text is then verbally read back to the screen reader. So, imagine you land on an image. The image you land on, is accompanied by a *visually descriptive* caption.
For those who don’t know or need a reminder, an image caption is a block of text adjacent to the image that provides the reader with information about the image.
The caption gives context, and, sometimes describes the essence and key visual details about the image—in those latter instances, the caption becomes a viable candidate for alt text.
If that’s the case, then why "not" repurpose it as alt text?
Because it’s redundant, and redundancy is bad—that’s the "against" argument.
I’m here to argue that while yes, redundancy is not *ideal*, you know what’s worse? Nothing at all. So in the instance described above, I argue against leaving the alt text empty (alt="").
But why, young Anakin?
Here are some reasons why leaving the alt text empty—yes, even when it’s in close proximity to text that can arguably serve as a good substitute for it, is problematic.
Three reasons NOT to leave your alt text empty
1) Decorative images aside, the first reason not to leave alt text empty, has to do with inclusive design 101: Avoid making ASSUMPTIONS.
By omiting alt text, you’re assuming the user who uses a screen reader *will* interpret the adjacent complementing text you’ve deemed a good substitute for the alt text. You: ".. of course they will, it’s right there beside the image, can’t be missed."
Umm, yeah—it can be missed. And, rather easily too.
Who’s affected by this "to alt or not to alt" decision? Someone who is blind, who *cannot see*.
Someone who can’t see, can’t formulate the connections a sighted person makes by visually analyzing and interpreting a page’s spatial composition (e.g. the connection between one element and another based on its physical footprint).
All to say—no, the immediate connections we make as sighted persons, aren’t as "direct" (so to speak), for a person who cannot see.
You: ".. no, but the screen reader reading order can help orient a blind person. Don’t you know that?"
Me: ".. yes, I know that. But I also know that a screen reader follows USER instructions. And, like the variable ways a sighted person browses a site and interprets information, those same variabilities apply to people who are blind too. They browse a site, and interpret content, in all kinds of ways (surprise!)"
﹡﹡
2) The second reason, is closely connected to the first. It has to do with the fact that people who use screen readers, access information in more than one way, another pillar of inclusive design: Inclusive design provides OPTIONS.
Assuming a person who is blind will traverse your content linearly and therefore interpret the caption text designated to a given image, is wrong. Some will, yes. Others—no.
Here’s a fact for you: People who are blind, do not browse like we do.
Most people wrongly assume that people who are blind, interpret page content in a mostly fulsome manner, from left to right and then top to bottom (much like a sighted person).
Guess what Charlie? That’s not the case. Yes, it’s *one* way (sort of), but even in those cases where that *is* the browsing intent (to "read all" in a fulsome, left to right and top to bottom manner), it usually doesn’t translate exactly as one expects it to (e.g. matching the visual order / hierarchy).
The most popular way a page is browsed with a screen reader is by element type. What element? The heading element (e.g. h1, h2, ...). What does that mean? It means, a blind person will peruse the page’s heading structure, and start reading from a heading that sounds attractive or at par with the information they’re seeking out.
After "selecting" a heading (using a screen reader command), the screen reader will time warp the user directly to that heading, which will now serve as the user’s *starting point* for ingesting information.
You: ".. objection your honour, how is this relevant?"
Me: ".. I’m building up my argument, bear with me a while longer."
Justice Peters: ".. very well, overruled. But be on with your point Mr. Joanisse, you’re on thin ice here."
My point is, screen readers offer a "browse by type" mechanism. And while yes browsing by heading is one option, there are also others like browse by link, or browse by IMAGE.
When you browse by element type, the screen reader jumps from element to element (matching the type selected), bypassing anything in between and around that element type.
Let’s simulate what would happen if a *sighted* person browsed by element type IMAGE.
1. You scroll the page.
2. You stop and gaze at the images, without noticing its surrounding text.
3. You look for supporting text, .. but you find none? You are dazed, and confused. You’re missing KEY image information and image CONTEXT, which leaves you with what? Your poor interpretation skills.
See where I’m going? The point I am making? I hope so.
In an instance where a person who is blind browses the page by element type IMAGE, and you’ve deliberately OMITTED the alt text (alt="") in exchange for its brother / sister / cousin text—they get zilch.
The assumption that the image caption will always be interpreted WITH the image, is wrong. The decision to omit alt text under the false pretense that the adjacent text will serve as a good substitute, is wrong.
That was a long-winded way to say—one way a person who is blind might browse a page is by ELEMENT type = image. It’s effectively a command that tells the screen reader to crawl the page and return a list of all images. Guess what text values it gets? THE ALT TEXT. Guess what text it doesn’t consider? Surrounding text.
Guess what happens when the alt text is empty (alt="")? It returns a list of empty values, rendering it utterly useless and unviable to use.
For a sighted person, it would be like looking at a page full of empty images—all the same, and all equally unhelpful.
﹡﹡
3) The third reason I will rest my case on, are the search engine crawlability factors. As in, the ability for a search engine to properly associate (match) your images against keywords.
All search engines have this in common: They prompt you to input keywords, and then they "crawl" the web and return a list of pages or content that "matches" those keywords (a search results list).
Question 1: Guess what’s rich in keywords? Alt text!
Question 2: Guess what’s not rich in keywords? Empty alt text!
Question 3: Guess what correlates more directly to an image’s visual characteristics and keywords than alt text? Nothing!
When you leave alt text empty, you rob your image the opportunity to RANK predictably.
I’m not here to argue that search engine algorithms aren’t sophisticated enough to consider surrounding text and return a match if the page your image finds itself on has attributable words matching the search query. What I am saying though, is that the most predictable and consistent model, to reliably associate keywords to your images, is certainly not alt="" but rather alt="something".
﹡﹡
So there you have it, three reasons NOT to alt="".
Three very real and legitimate reasons. For the last time, no! Don’t leave alt text empty. Not even when your image is presided by caption or body text that serves as a good alt text substitute.
I can sense some of you shouting at me through your screens saying: ".. you devil! What about your article title! There is REDUNDANCY, .. and redundancy is BAD".
Look, yes—in certain instances where someone is browsing via a read all command, if the caption text and alt text were the same (or similar), you would run into some redundancy. But guess what? Redundancy *here*, is the better of two imperfect solutions. Including alt text, even when it’s at the expense of redundancy, is a more inclusive approach (for at least the three reasons outlined above).
Redundancy, is easy to circumvent by invoking the screen readers "mute" or "skip" command. Sure, it’s not *ideal*, and in exceptional cases may even be a slight PITA—but it’s far from being *as* disruptive as many claim it to be. What do I do when I hear a song I don’t like? I press the next or skip button, and I am on my merry way.
And, that slight inconvenience, certainly outweights the NO information alternative caused by the alt text exclusion (alt="").
You: ".. ok but, say we are talking about HUNDREDS of images. Surely THAT would be inconveniencing? No? I don’t know, .. even I’m a skeptic now!"
Me: ".. you should be! We AREN’T talking galleries here, so that argument is pointless and not a real circumstance. Galleries rarely include caption text—case closed, question overruled."
Context context context
When people argue "for" the omision of alt text, they are doing so in the context of a CONTENT page. A page with cohabitating bodies of text and images.
If that’s the case, then we should ask: Does any one given page have more than ~a dozen images presented in a narrative / storytelling context? Rarely.
So then, is skipping over "redudant" information where there is redundancy really that big a problem? Only if you consider selecting a single button to be a problem. I say, there are bigger fish to fry.
Don’t forget, those affected (persons who are blind), are more often than not quite afluent in firing key presses at rates faster than the average sighted person can, triggering the "skip" action a few times is not overly burdensome.
You: ".. fair enough. But a gallery page. Ha! Now I got you—cornered at last, nowhere to run."
Me: ".. no, not applicable—nice try. Gallery pages (e.g. a mosaic of images) *do not* include caption or other text that can subsitute alt text—meaning, the alt="" method technique / trickery being contested doesn’t even apply here since there’s no serviceable *sub* text."
﹡﹡
Hmm, how to finish? I guess I’ll end by saying if content is king, then CONTEXT is queen. And, in a game of chest at least, the queen trumps the king. When you leave alt text empty, you’re in certain instances removing the king AND the queen.
When you remove all surrounding text (context) from an image, and the image’s alt text is empty, you’re left with a standalone image without content OR context.
Including alt text (even when its semi or fully redundant with text on a page) gives you the opportunity to give standalone images content AND context, making it more robust and versatile to variable browsing experiences.
Leaving alt text blank (alt="") that *isn’t* decorative, is like disembodying an image. It’s the butterflies empty cocoon vs the butterfly in its cocoon.