8 ms·

This is all good top-level stuff, but one thing I'd quibble with in this article is something that they don't say, except in the linked article about writing al

This is all good top-level stuff, but one thing I'd quibble with in this article is something that they don't say, except in the linked article about writing alt text - the vast majority of images are decorative, and those images should have an empty alt attribute. I see far too many images with pointless alt text because "you need to add alt text to all images". The easy way to think about this is to read the page as if the image alt text was part of the body copy. So if it goes like this: "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?

amelius 6y ago
But shouldn't there be software that treats the entire page as an image, and from there reconstruct what parts are important? Web design practices are far too unpredictable, and you can't rely on them to extract semantics.
Grumbledour 6y ago
I strongly disagree. Empty alt text means no image description. Think about that. You are blind. Your Screen reader tells you "image", nothing more. 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.
- deleted 6y ago
  [deleted]
- chmod775 6y ago
  > I strongly disagree. Empty alt text means no image description. Think about that. You are blind. Your Screen reader tells you "image", nothing more. 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/get-image-descriptions/ 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.
  - JimDabell 6y ago
    > I feel like this is something where AI can actually shine: generating descriptions of images and video for blind people. 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".
  - goldcd 6y ago
    I think it might already be there - I just right clicked in Chrome to see what options I could pull up for an image, and noticed a "Get image descriptions from Google" option
strogonoff 6y ago
It is unfortunate that nonexistent alt attribute is treated differently from empty alt attribute on images. I would prefer to add role="presentation" instead.
- jscholes 6y ago
  > I would prefer to add role="presentation" instead. 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.
  - strogonoff 6y ago
    Decorative graphics is prime example use case in WAI-ARIA docs for the presentation role. Its purpose is to remove the element from the accessibility tree. 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.
detaro 6y ago
Photos, illustrations, ... basically always should have an alt-text. a) They are added for a reason for sighted users (e.g. to set atmosphere), a non-sighted user should be able to understand what is intended b) not all screen-reader users are entirely blind - they can see that there is an image and want to know what it is. Divider lines etc done as images should have an empty alt-text to be skipped.
- frereubu 6y ago
  Not sure I agree with your first point (I do think people add pointless images though, which muddies the water somewhat) but that's an interesting point about partially-sighted users that I hadn't considered before. There's clearly not a binary blind / not blind distinction in people. Thanks for pointing that out - I'll consider that in future.
kubanczyk 6y ago
> "Stock photograph of students talking at a table." You can see that this is pointless alt text. 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.
- jamil7 6y ago
  The way it's a standard feature on so many blog articles to lead with a big pointless unsplash image vaguely related to the content drives me crazy. What a waste of resources.
  - jefftk 6y ago
    The advice I've seen that recommends this is because articles with images are prioritized on social media, especially Facebook.
    - jamil7 6y ago
      That figures, depressing though.
- Vrondi 6y ago
  No, to sighted persons, decorative images are not pointless.
dmitriid 6y ago
It should be aria-hidden=true then, not alt=""
- mweberxyz 6y ago
  Or potentially aria-role="presentation" 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.
  - jscholes 6y ago
    > Or potentially aria-role="presentation" 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.
  - chrismorgan 6y ago
    I wouldn’t describe role=presentation like that. Rather, it says “ignore what you know about what this element should be, pretend it doesn’t exist and only consider its children”. Technically, that is “replace this node in the accessibility tree with its children”. And then in the case of <img> specifically, it doesn’t have any children, so the effect is removing the entire thing from the accessibility tree, same as an empty alt attribute or aria-hidden=true. 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 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.
globular-toast 6y ago
Decorative images should be in your style sheet, not the html document. I know this purity isn't always possible with every design, but if you care about blind readers you'll change your design, I guess.
- srtjstjsj 6y ago
  Huh? Decoration is for humans and doesn't fit the robotic split of content vs presentation.
  - globular-toast 6y ago
    Yes? The whole style sheet is for humans. Specifically, sighted humans. Blind users have no use for any of that.
- darekkay 6y ago
  > Decorative images should be in your style sheet, not the html document. 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-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
zachrose 6y ago
This post and the above comment prompted me to add alt text for an image on a landing page I’m working on. 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. [1] https://en.m.wikipedia.org/wiki/Ornament_and_Crime https://en.m.wikipedia.org/wiki/Ornament_and_Crime
- frereubu 6y ago
  I dunno. I sort of get where you're coming from, but I think "describing the image with words that evoke that mood" is a bit like explaining why a joke is funny.
deleted 6y ago
[deleted]
chrismorgan 6y ago
I started writing an article in March entitled “<img alt> should be empty”, arguing the radical position that every image tag should have an empty alt attribute. I don’t quite hold that opinion in reality, but it’s pretty close. I stopped writing it because I was poking a few too many holes in my position, but I still hold to the bones of it. 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.html#a-figcaption-is-not-a-substitute-for-alt-text 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 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.
deleted 6y ago
[deleted]
Vrondi 6y ago
What we need in web pages is a way to mark an image as purely decorative, as recent versions of MS Word have. When so marked, a screen-reader will skip that image as if it doesn't exist. This is a big improvement over the past reality of hearing "Image: decorative bracket" as a document is read. This is what HTML needs.
- detaro 6y ago
  That's what setting an empty alt text is supposed to do.
- jscholes 6y ago
  > What we need in web pages is a way to mark an image as purely decorative 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.
jscholes 6y ago
> "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..." 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.
smoyer 6y ago
I was going to come here and ask about better alt-text until I read the linked page you referred to (https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/ https://bighack.org/how-to-write-better-alt-text-description...). I still have a question about a sight-impaired person's perception of what that image represents. Do you form an image in your head matching the text? Is this different for those who are blind from birth versus those that lost their sight after some time? Should the image be part of the "story" of the page or should the story stand on its own? And finally, for the case above where the image is decorative (as defined here: https://www.w3.org/WAI/tutorials/images/decorative/ https://www.w3.org/WAI/tutorials/images/decorative/) would you prefer that the empty alt tag recommendation is used (and do screen readers recognize that semantic).
- frereubu 6y ago
  If you look at most images in web pages, I'd argue that the vast majority are decorative or impossible to explain in a meaningful way. I've been building sites since the late 90s and I think this is probably a throwback to the times when we used to generate images with text in them, which doesn't really happen any more. Although there are probably cases where it's still relevant - I just can't think of any off the top of my head. 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.
Buttons840 6y ago
What about people with very poor eyesight, who can see the shape of the website, but can't decern words or image details. They may want to know that the dark square they perceive is a picture of the burst dam.
miki123211 6y ago
Blind person here, I definitely agree. 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.
boomlinde 6y ago
Regarding the first example, even if the photo seems inconsequential to you, it's part of the narrative content of the article, perhaps to set a tone; it's an illustration, not simply decoration. Sighted and non-sighted users alike can use it to determine and judge the perspective and tone of the article, even if it doesn't have any other function. 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.

amelius 6y ago

But shouldn't there be software that treats the entire page as an image, and from there reconstruct what parts are important? Web design practices are far too unpredictable, and you can't rely on them to extract semantics.

Grumbledour 6y ago

I strongly disagree. Empty alt text means no image description. Think about that. You are blind. Your Screen reader tells you "image", nothing more. 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.

deleted 6y ago
[deleted]
chmod775 6y ago
> I strongly disagree. Empty alt text means no image description. Think about that. You are blind. Your Screen reader tells you "image", nothing more. 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/get-image-descriptions/ 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.
- JimDabell 6y ago
  > I feel like this is something where AI can actually shine: generating descriptions of images and video for blind people. 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".
- goldcd 6y ago
  I think it might already be there - I just right clicked in Chrome to see what options I could pull up for an image, and noticed a "Get image descriptions from Google" option

strogonoff 6y ago

It is unfortunate that nonexistent alt attribute is treated differently from empty alt attribute on images. I would prefer to add role="presentation" instead.

jscholes 6y ago
> I would prefer to add role="presentation" instead. 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.
- strogonoff 6y ago
  Decorative graphics is prime example use case in WAI-ARIA docs for the presentation role. Its purpose is to remove the element from the accessibility tree. 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.

detaro 6y ago

Photos, illustrations, ... basically always should have an alt-text. a) They are added for a reason for sighted users (e.g. to set atmosphere), a non-sighted user should be able to understand what is intended b) not all screen-reader users are entirely blind - they can see that there is an image and want to know what it is. Divider lines etc done as images should have an empty alt-text to be skipped.

frereubu 6y ago
Not sure I agree with your first point (I do think people add pointless images though, which muddies the water somewhat) but that's an interesting point about partially-sighted users that I hadn't considered before. There's clearly not a binary blind / not blind distinction in people. Thanks for pointing that out - I'll consider that in future.

kubanczyk 6y ago

> "Stock photograph of students talking at a table." You can see that this is pointless alt text. 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.

jamil7 6y ago
The way it's a standard feature on so many blog articles to lead with a big pointless unsplash image vaguely related to the content drives me crazy. What a waste of resources.
- jefftk 6y ago
  The advice I've seen that recommends this is because articles with images are prioritized on social media, especially Facebook.
  - jamil7 6y ago
    That figures, depressing though.
Vrondi 6y ago
No, to sighted persons, decorative images are not pointless.

dmitriid 6y ago

It should be aria-hidden=true then, not alt=""

mweberxyz 6y ago
Or potentially aria-role="presentation" 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.
- jscholes 6y ago
  > Or potentially aria-role="presentation" 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.
- chrismorgan 6y ago
  I wouldn’t describe role=presentation like that. Rather, it says “ignore what you know about what this element should be, pretend it doesn’t exist and only consider its children”. Technically, that is “replace this node in the accessibility tree with its children”. And then in the case of <img> specifically, it doesn’t have any children, so the effect is removing the entire thing from the accessibility tree, same as an empty alt attribute or aria-hidden=true. 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 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.

globular-toast 6y ago

Decorative images should be in your style sheet, not the html document. I know this purity isn't always possible with every design, but if you care about blind readers you'll change your design, I guess.

srtjstjsj 6y ago
Huh? Decoration is for humans and doesn't fit the robotic split of content vs presentation.
- globular-toast 6y ago
  Yes? The whole style sheet is for humans. Specifically, sighted humans. Blind users have no use for any of that.
darekkay 6y ago
> Decorative images should be in your style sheet, not the html document. 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-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

zachrose 6y ago

This post and the above comment prompted me to add alt text for an image on a landing page I’m working on. 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. [1] https://en.m.wikipedia.org/wiki/Ornament_and_Crime https://en.m.wikipedia.org/wiki/Ornament_and_Crime

frereubu 6y ago
I dunno. I sort of get where you're coming from, but I think "describing the image with words that evoke that mood" is a bit like explaining why a joke is funny.

deleted 6y ago

[deleted]

chrismorgan 6y ago

I started writing an article in March entitled “<img alt> should be empty”, arguing the radical position that every image tag should have an empty alt attribute. I don’t quite hold that opinion in reality, but it’s pretty close. I stopped writing it because I was poking a few too many holes in my position, but I still hold to the bones of it. 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.html#a-figcaption-is-not-a-substitute-for-alt-text 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 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.

deleted 6y ago

[deleted]

Vrondi 6y ago

What we need in web pages is a way to mark an image as purely decorative, as recent versions of MS Word have. When so marked, a screen-reader will skip that image as if it doesn't exist. This is a big improvement over the past reality of hearing "Image: decorative bracket" as a document is read. This is what HTML needs.

detaro 6y ago
That's what setting an empty alt text is supposed to do.
jscholes 6y ago
> What we need in web pages is a way to mark an image as purely decorative 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.

jscholes 6y ago

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

smoyer 6y ago

I was going to come here and ask about better alt-text until I read the linked page you referred to (https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/ https://bighack.org/how-to-write-better-alt-text-description...). I still have a question about a sight-impaired person's perception of what that image represents. Do you form an image in your head matching the text? Is this different for those who are blind from birth versus those that lost their sight after some time? Should the image be part of the "story" of the page or should the story stand on its own? And finally, for the case above where the image is decorative (as defined here: https://www.w3.org/WAI/tutorials/images/decorative/ https://www.w3.org/WAI/tutorials/images/decorative/) would you prefer that the empty alt tag recommendation is used (and do screen readers recognize that semantic).

frereubu 6y ago
If you look at most images in web pages, I'd argue that the vast majority are decorative or impossible to explain in a meaningful way. I've been building sites since the late 90s and I think this is probably a throwback to the times when we used to generate images with text in them, which doesn't really happen any more. Although there are probably cases where it's still relevant - I just can't think of any off the top of my head. 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.

Buttons840 6y ago

What about people with very poor eyesight, who can see the shape of the website, but can't decern words or image details. They may want to know that the dark square they perceive is a picture of the burst dam.

miki123211 6y ago

Blind person here, I definitely agree. 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.

boomlinde 6y ago

Regarding the first example, even if the photo seems inconsequential to you, it's part of the narrative content of the article, perhaps to set a tone; it's an illustration, not simply decoration. Sighted and non-sighted users alike can use it to determine and judge the perspective and tone of the article, even if it doesn't have any other function. 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.