img alt text examples need more context

[JohannesBeranek]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

What specific section or headline is this issue about?

alt attribute example

What information was incorrect, unhelpful, or incomplete?

<img alt="A Rockhopper Penguin is standing on a beach." src="penguin.jpg" />

What did you expect to see?

A better example for what should be in an alt tag. I can't imagine a single situation where the provided alt text example would actually make sense.

You could for example do

<img alt="down" src="down-arrow.jpg" />

(I deliberately didn't use "next" or something like that, because it could be dependent on the writing direction)

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/web/html/element/img` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/element/img/index.md * Last commit: https://github.com/mdn/content/commit/75326725db2daa924618e58ae31a43345c7a16dc * Document last modified: 2024-08-12T06:55:47.000Z

[Josh-Cena]

The alt text example accurately describes what you should write if you have an image of "A Rockhopper Penguin is standing on a beach". The alt text should be a 1-to-1 reflection of the image content, as if your browser can only display text.

[JohannesBeranek]

@Josh-Cena AFAIK the alt text should be what screen readers should read instead of the image. The text "A Rockhopper Penguin is standing on a beach." is not useful information for the visitor in any context, and giving an example like that leads to just people putting image descriptions into alt texts for purely decorative images, which is wrong.

[JohannesBeranek]

"... what the image is trying to communicate." is not the same as "... what you can see on the image." or "... what is depicted by the image."

If you used a right arrow image for a "next page" action, an alt text should NOT be alt="right arrow", but alt="next page".

[Josh-Cena]

Right, it should describe whatever you want the screen reader to announce. Imagine it in this context:

Last week, I went on a trip to South Africa. I saw a lot of fascinating things, such as these:

[Image: A Rockhopper penguin is standing on a beach.]

I don't see how your suggestion is incompatible with the current example: the alt text for a photo describes the information of what's in that photo, and the alt text for an icon describes the information of that icon.

[JohannesBeranek]

@Josh-Cena That's why I reported it as a "bad" example, not a "wrong" one - your example looks very contrived to me to be honest. I've never in my live encountered a page that was even remotely similar to that. At the same time I'm pretty sure most people have seen a page with navigation images like a down arrow, or maybe social media icons (e.g. Follow me on <img alt="youtube" img="youtube-icon.jpg" />. vs Follow me on <img alt="white triangle on red rectangle" img="youtube-icon.jpg" />).

Maybe you could just add some context to the example?

The reason this is so important to me is because I see dozens of articles and websites doing it wrong basically every day, and MDN is a very authoritative source on all basic web-tech topics for developers.

[Josh-Cena]

Why is it unrealistic? It seems like a very plausible personal blog article, or a popular science article about penguins. This example is just to illustrate the following point:

An alt attribute's value should provide a clear and concise text replacement for the image's content. It should not describe the presence of the image itself or the file name of the image.

You are suggesting to replace a valid example with another valid example. Your example is correct but not related to this very basic point, which is "you should not use 'image' or 'arrow-down.jpg' as the alt text". It is a more nuanced suggestion about what exact information should be included, which is good, but we already provide ample links that explain the same thing on a case by case basis.

[JohannesBeranek]

@Josh-Cena I get what you mean and understand it from the context you provided, but that's exactly my issue - that context is missing there. And while I don't have the visitor numbers of MDN, I would assume that most people won't follow those links, but just take the examples as they are, without any further context provided by the links.

I'd be very happy to just add that little bit of context somehow, i.e. instead of having only the <img ...> tag in the DO and DON'T boxes, also add that little bit of text before it, and/or maybe a note like A screen reader could read this as 'Last week, I went on a trip to South Africa. I saw a lot of fascinating things, such as these: image'. People who've never done anything accessibility related wouldn't event think about screen readers usually, and without that context, I think that the examples, as they are, make for a bad introduction to alt texts.

[Josh-Cena]

Alright! More context to demonstrate user experience is welcome. If you want to add a paragraph about alt text for icons I'm open to it too.

cc @estelle

[Josh-Cena]

Also apparently rockhopper penguins do not live in South Africa as a natural habitat—they are from the southern islands of Atlantic and Indian oceans.

[JohannesBeranek]

I can provide "raw" texts, but I'm not natively English speaking unfortunately.

Should I create a PR to continue a discussion there, or just add something here?

[Josh-Cena]

I would prefer a PR, but whatever you feel comfortable with x