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.
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.