How are you to know if this image is purely decorational or if the author just didn't include any alt text, like happens so often?
Also, don't think of the alt text as part of the surrounding text. Think of it as many browsers would display it, a box with a broken image icon with the alt text besides it. Would you not wonder what would have been displayed there if the image would work?
And do images that are just for decoration really need to be images? Can they not be for example background images in other elements? Like styling an hr element for a visual divider instead of using just a divider image?
But in any case, provide some alt text! If it just says "divider", "logo" or "decoration", that is still better than nothing for someone who can't see it at all.
https://www.w3.org/WAI/tutorials/images/decorative/
https://web.dev/image-alt/#how-to-add-alternative-text-to-im...
https://yoast.com/image-seo-alt-tag-and-title-tag-optimizati...
As far as I understand it, screen readers should skip over the image with an empty alt attribute because it's like a page in a document saying "page deliberately left blank". Unlike no alt attribute in which no intention can be inferred and which screen readers do read (as far as I know they read the URL), an empty alt attribute is deliberately saying "ignore this image". Not being blind or partially-sighted I'm not sure whether this is the case in all screen readers, or whether theory is different than practice.
I don't use one myself and have most of my knowledge from friends that do, but this info is obviously outdated.
Screen readers have skipped over empty alt attributes for decades. I'm not certain they ever behaved differently, but if there were a time when empty alt attributes caused problems, it was back in the 90s. Best practice for purely decorative images has been to use empty alt attributes for 20+ years.
Maybe my memory is off but I think up until the middle of the first decade of this century empty alt text was not good for screen readers, although maybe that was just because you always have to take into account older screen readers still in use.
https://www.w3.org/TR/WD-html40-970708/struct/includes.html#...
This is a generalisation and one that many screen reader users wouldn't agree with. People who can only read through audio or braille are already facing certain disadvantages, such as not being able to quickly scan a piece of content in the same way visual readers can. Polluting the content with meaningless alternative text makes for an overly verbose user experience.
> Empty alt text means no image description. Think about that. You are blind. Your Screen reader tells you "image", nothing more.
This is factually incorrect. Using an empty string as the alt attribute on an image is the correct way to mark an image as decorative, and as such a screen reader user will never be informed about its presence. If the alt attribute is omitted entirely, that's when screen readers try to guess by announcing the filename and/or URL (or on iOS, actually trying to perform object recognition on its contents).
I guess you can then use alt="" for "decorational" images and practically hide them from screen readers? It still seems odd to me though to even have these kind of images.
Of course a stock image in an article is not really important and may not add much value, but someone thought including it did add some at least. It just seems weird then to say that screen reader users should never even be made aware that it is there.
Obviously from all the comments, this seems to be what people do. Still, it seems somehow wrong to me. If the image sets tone, should we not try to convey that? If it really serves no purpose, should we not just leave it out at all?
Not sure if anybody has mentioned this, but a super common case is that stock and other images (photos especially) require attribution. Working in the digital accessibility space, I see a huge number of examples of an image being marked as decorative (or worse, being implemented as a background image in the CSS) with an inline credit line. So as a screen reader user, I'm reading an article and keep spotting these notices all over the place, with no hint of what they accompany. In those cases, the image must have a description, even if it is thought that it doesn't add value.
Haha! Someone of roughly my own vintage I see...
I get what you're saying, but perhaps if you think about it in terms of sensory modalities it might help. There are images which convey a feeling purely through its aesthetic that are ruined to the point of uselessness by plain description in written language, a bit like having to explain a joke: "You see, the expectation is that the chicken crossing the road is going to be for a funny reason, like a pun, or something, but having set up that expectation the fact that you've subverted the expectation makes it funny."
Another good example might be the story in this This American Life episode of the guy who sees a colour that is indescribable: https://www.thisamericanlife.org/577/something-only-i-can-se...
Better not to interrupt the reading flow just to let someone know there's something there, the purpose of which you can't really describe in any meaningful way.
Spamming a page with redundant visual imagery that's easy to take in at a glance is fine. But its terrible to screen read, because reading is much more expensive than glancing. For the alt text, it's important to only give valuable non-redundant information.
I feel like this is something where AI can actually shine: generating descriptions of images and video for blind people.
Best of all it's already a solved problem (and others have thought about it already): https://www.blog.google/outreach-initiatives/accessibility/g...
The next step is using AI to describe (important) changes to pages. Think of a chat on a website with new messages appearing. A voice saying: "Alice writes 'hello'" goes a long way. Thinking of it there really ought to be a way for JavaScript to interact with screen readers, allowing developers to give changes performed by JS something like an alt text.
The final step would be using AI to make interacting with sites easier. Finding the right button/element to click/focus can be really annoying with a screen reader. If you could just tell the AI "fill the form with X and Y and click submit", or "go to the next page", and possibly having that work even if what you're looking is buried in some context menu, pretty much any non-accessible page becomes accessible.
That's exactly what you don't want in the majority of cases. The alt attribute is for an alternative to the image, not a description of the image. For decorative images, the alternative is the empty string, no matter what the image contains. "Laughing group of people" might be a correct description of a stock image, but completely wrong as alt text. For, e.g. a red arrow pointing out a required field, the alternative is "Required", not "Red arrow pointing right".
If you have Instagram, scroll through the alt text on the images some time. You'll see descriptions like "May contain: Person standing outside". That may be an accurate description of the picture, but it may be a poor substitute for what a sighted person sees -- someone showing off their new sweater, or posing in front of an interesting wall, or an aesthetic splash of colours. Of course, maybe someone who is fully blind doesn't care too much about a splash of colours, but the point is that describing an image is more than just about identifying the individual objects visible in the image. Because when we see a picture of an adorable puppy, we get more out of that image than just "dog sitting on floor". As of now, human-generated alt text is still the best solution in most cases, even if we are definitely making progress with AI. It's hard enough for humans to describe the aesthetics of an image, let alone a machine.
Decorational images aren't important, so use empty alt texts or aria hide them.
Most images should have short, to the point descriptions, containing the information you need to fully enjoy a given article. When writing a good alt description, think about why the image is there and why does it matter, not only about what it shows.
There could be two articles with the same image, but completely different alt descriptions. If your article is talking about how pretty graphs produced by a given tool are, describe what kinds of data the graphs contain and how they look like. For example, "A screen with three graphs, showing a company's stock prices across the last month, year and decade. There are points for the highest and lowest values marked on each graph. There are also average prices displayed". It doesn't matter what company it is, or what the actual values are. If your article talks about how tech companies did during the coronavirus pandemic, that same image would be described like "the stock price of x was $100 on march 20th, fell to $5 on march 21st, then slowly started rising, ending back at $95 on june 3rd". Same image, completely different information highlighted.
Sometimes you need very detailed and complete alt descriptions, particularly when you're describing diagrams showing complex relationships, function graphs and so on.No, "screenshot" is definitely not a good alt when you're trying to show what kind of output a given command is expected to produce. Yes, you should painstakingly retype the text (assuming you can't copypaste for some reason), or at least put it through OCR.
No. The alt text is fine. It's the image that is pointless.
The problem is admittedly worse for the blind, but bothering to varied extent also some of the non-blind.
Divider lines etc done as images should have an empty alt-text to be skipped.
Whether an image is decorative or not is a complex question that probably hinges on a lot of modernist ideology about the role of ornament[1].
A more functional approach is ask why the image is there. If it’s setting a mood, describe the image with words that evoke that mood.
In my case, the image was an illustration that I’d written off as not interesting to a blind person. But in putting forth the effort to “read” the image I realized it depicted our target demographic using our product in a fantasy setting, which is much more fun to describe than it appeared at first glance.
In your example, the "rubble and uprooted trees" aren't mentioned in the surrounding text. So this image description, while a bit short and vague, does add something.
I'd argue that if the image is useless to the narrative, it shouldn't be included at all, blind users or not. But in your example it does seem related to the narrative, and just as we can say that non-verbal cues are important to spoken communication, non-written cues are important to written communication.
This doesn't always do what you think it does. The presentation role is for negating any accessible role implied by the use of a particular HTML element, not for hiding it entirely. For example, you've used an unordered list for appearance/styling, but it only contains one child item. In those circumstances, a list of one thing is semantically meaningless and role="presentation" on the ul is completely appropriate.
The fact that applying the presentation to an img removes it from the page for screen reader users shouldn't be relied upon.
By comparison, alt="" is much less direct and obvious. I consider it an unfortunate historical quirk that it is not the same as a nonexistent alt attribute.
For decorative images I recommend using presentation role to make the intention clear.
Edit: Perhaps a news story where the victim of a crime is in the foreground of an old photo and the person who committed the crime is in the background. But then that would be referenced in the text of the story, and the alt text would mention that reference.
Setting the alt attribute to an empty string already accomplishes this task. If you find there are cases where it shouldn't, as well as reporting it as a bug to the appropriate browser and/or screen reader vendor, you can use aria-hidden="true" on the img. This is useful e.g. for inline SVGs which don't have an alt attribute.
The primary categories of images that exist are:
• Decorative or ornamental imagery. Part of art direction; typically implemented with CSS (commonly background images) rather than <img> these days.
• Stock imagery. Part of art direction. An annoying waste of time, space and bandwidth that is unfortunately valuable because of human psychology.
• Meaningful figures: photos, diagrams and other images that are actually related to the content.
Art direction <img> tags should always have an empty alt attribute, even stock imagery: because it’s not adding anything to the content. (I hear someone crying, “but I put that stock image there for a reason!” Sure, you put it there to manipulate a particular facet of human psychology, but it’s purely a visual phenomenon, and it doesn’t transfer to other media at all. In fact, rendered to speech it’ll have the opposite effect, so drop it like a hot potato. There are equivalent phenomena for other senses, e.g. there’s a reason audiobooks, podcasts, &c. add music; but you can’t do that in this place.)
What remains, then, is the meaningful figures; and for that, I hold that images should basically always be described in the visible text anyway, typically as a <figure> with a <figcaption>. And if you have a <figcaption> describing the image sufficiently, I see no cause for any image tag to have anything but empty alt text, because you shouldn’t be writing the same thing again, and there’s no other useful value. Some decry this, and insist figcaption and alt serve different purposes and you should have both, e.g. https://www.scottohara.me/blog/2019/01/21/how-do-you-figure...., part of an article which another decent resource https://webaim.org/techniques/alttext/#figure cites, but I disagree with the argument and its conclusions—especially its “if you empty the alt then the figcaption is not describing anything”, because the figcaption was never describing the image in the first place, but rather the figure, which is still there. Hiding the image in this way because it has been fully described is thus perfectly reasonable.
(Related: avatar images that are paired with the user name in text should have empty alt text. Otherwise you get the name twice in a row. In this case, the image is effectively ornamental, just like icons on buttons that also have labels are ornamental. I receive emails from multiple systems and interact with multiple web apps that commit this sin. It’s annoying, especially when they style things in such a way that the visual presentation of alt text when the image is not loaded is broken anyway.)
So the main case that people might think is left is diagrams where a figcaption would say “the results of such-and-such a benchmark” or similar. But even then the alt text should quite probably be empty: remember also that alt text shouldn’t be too long; the picture may be worth a thousand words, but alt text should not be even a tenth of that length, so you probably shouldn’t list all the values of a bar chart in alt text. Rather, any details that matter, draw attention to them in the caption or the prose surrounding the image! Also most diagrams would be better done as SVG, and if you do that you have much finer control over accessibility presentation than alt text, as well. Though you still have to be careful about pushing too much information to the screen reader.
To be clear, I’m not saying that everyone should take their documents and document.querySelectorAll('img').forEach(e => e.alt = ''), but rather that they should strongly consider designing their documents and massaging their content to the point where that is reasonable, with writing good captions and the likes.
I disagree as a screen reader user. To be clear, I completely support your assertions around describing complex imagery, e.g. the alt text is a completely inappropriate place to describe a graph, chart, etc. But a figcaption with no accompanying figure content is semantically wrong. If you have a figure with a textual description or semantic representation of the data displayed in an image, e.g. a table behind a disclosure button, then fine: the figure body is meaningful, as is the caption. But if I'm testing a site and find cases of figures where the only screen-reader-accessible element is the figcaption, that is an antipattern that I will insist be addressed.
What would you do? For a concrete case, let’s say you have a bar chart in a <figure> with the figcaption “Figure 3: results of Benchmark Q, showing X to be 40% faster than Y.” What alt attribute would you give the <img src=benchmark-results.svg>?
Let's imagine a more realistic bar chart with the results of benchmark Q, showing the speed difference of X and Y in four different [resolutions/tasks/memory limits/processors/whatever], so 4x2 bars. Should the advantage of X over Y and all the other patterns visible in the chart be described in the figtext? IMHO not. In such a case, a reasonable alternative for that content would be not a sentence but a data table, providing all the information but leaving the interpretation up to the reader - just as for the visual chart.
Completely agree with this (and your other comments re: interpretation). In the real world, it's rare for content and data to be as simplistic as the example described here, and presenting it in an inclusive fashion which allows all users to make their own conclusions is the key.
In this case, the bar chart most likely should be accompanied by an accessible textual alternative. For example, a link to a textual version/download of the results, a disclosure button you can hit to view a textual description, a table, whatever. If that is included, the img itself can be marked decorative, because the figure contains an accessible body element as well as the caption. For me, that would most likely be enough to pass my semantic and accessibility requirements.
On the other hand, if you're not going to provide that or feel that the caption already sufficiently describes the data, you could provide a straight visual description of the image for the img's alt. For example, which data is shown on which axis? Not all screen reader users will find that helpful, but there are two things to keep in mind:
1. If a screen reader user moves into the figure with certain keystrokes, the text of the figcaption will be announced as the figure's accessible name or description. So the presence of alt text need not in any way block them from getting to the data.
2. Are you catering for all possible screen-reader-using audiences? Okay, if I'm reading an article about the benchmarks between two databases or something on a blog, it's more personal/for work and I just want the data. But what if I'm in a classroom setting and need to tell my students how to read this chart? If I don't know anything about the layout of the data, I can't do it.
A straight visual description of the diagram is probably inappropriate for alt text: too long, too wordy; it’s the longdesc problem again.
I’m not convinced that there is a properly correct solution here.
We're now entering the realm of what represents a caption and what doesn't. Given my earlier point that the figcaption text is mapped as the accessible name or description for screen reader users, interactive elements inside the caption should be avoided because they don't make sense when spoken inside a flattened, plain text string. So to answer the specific question, "now what?" Don't put the link inside the figcaption, put it inside the <figure> as a sibling of the image (or inside a container which is a sibling of the image).
To look at it another way: I might be inclined to say that caption text should make sense when presented with the accompanying image in a non-web context (e.g. a printout). This is why captions are often used for credit lines, attribution info, etc.
> I’m not convinced that there is a properly correct solution here.
Without a more specific use case, it's difficult to make a recommendation. However, I will say one thing that I've found to be universally true: the power of the image description is often underrated. I've had many conversations with designers, developers, content editors et al, where the assertion has been made that there's not much to describe in a particular image. And then as a blind user, I have multiple questions about what it shows, the answers to which can make it into the descriptive text.
This is often a lightbulb moment for many, as they realise that actually, all those details I asked about were subconsciously filled in/processed, and they just didn't think about them. Data is the same.
Is a bridge too far. Sure you should summarize the key takeway of a chart, but a chart has a lot of detail that sighted users don't need to reread in a worse layout, but blind users need a way to access.
There’s no good way of exposing lengthy information about a chart to screen readers. Don’t try doing it via alt, it’s a bad experience; and don’t try doing it by screen-reader-only text, that just gets confusing. The longdesc attribute was an attempt to do this, but it failed to gain traction among users or assistance tech. Consensus now is that you should instead include in the caption a link to a page that focuses just on the chart, which can then include more detail for the screen readers.
aria-hidden="true" will make the element completely invisible to the screen reader software, whereas setting aria-role will tell the screen reader "hey there is something here but it's job is purely aesthetic", and then the screen reader can determine what it wants to do with it.
There is no such attribute as "aria-role", only the single word "role".
> aria-hidden="true" will make the element completely invisible to the screen reader software, whereas setting role will tell the screen reader "hey there is something here but it's job is purely aesthetic", and then the screen reader can determine what it wants to do with it.
This is accurate, but you should also ask yourself about design intent if you have the knowledge to do so (or can consult with someone who does). If you have decided that something should be hidden from a screen reader user, and have verified that your intentions are correct, aria-hidden is the way to go. Many accessibility bugs are caused by people using something like role="presentation" because they wanted to leave it up to the browser and/or screen reader to make a decision. The problem is, those software decisions are often wrong and inconsistent, leading to support requests and hard-to-track-down bugs.
Note: the above applies across the board, not just to images. The correct way to mark an image as decorative is via alt="" on the img, and you should be careful applying aria-hidden to anything as it can be extremely destructive. No ARIA is better than bad ARIA.
Specifically I’m finding fault with “the screen reader can determine what it wants to do with it”. This isn’t true because the screen reader will never see the image, because the browser removed it from the accessibility tree.
But yeah, https://www.w3.org/TR/wai-aria-practices/#presentation_role lists this as the first of three common uses of role=presentation:
> Hiding a decorative image; it is equivalent to giving the image null alt text.
But still I echo how jscholes ends, and how the WAI-ARIA Authoring Practices document starts: No ARIA is better than Bad ARIA. Be careful what you do if you’re straying from the beaten track, and test things out. In view of this, I will confirm that I have not tested anything that I have said in this comment in order to verify it, though I believe that my mental model of how the accessibility tree and the mentioned details works is accurate.
Similar to the discussion around functional CSS [1], HTML vs. CSS is a separation of technologies, not a separation of concerns. Neither approach is _wrong_, they just come with different trade-offs.
[1] https://adamwathan.me/css-utility-classes-and-separation-of-...
Web design practices are far too unpredictable, and you can't rely on them to extract semantics.
"There are a number of different issues at play in universities at the moment. Stock photograph of students talking at a table. We spoke to the dean of the faculty of social sciences..."
You can see that this is pointless alt text. So the default should be no alt text unless there's some content in the image that is important for the context of the article.
I'm even dubious that photos that show something described in the article should have alt text, and I'd be interested to hear from blind and partially-sighted users what they think. For example:
"The dam burst on Saturday, inundating the local town. Photo of burst dam with rubble and uprooted trees at the side. The mayor said that they were lucky nobody was injured..."
Presumably if what the dam looked like after it burst was described in the article, that image shouldn't have alt text?