What should happen when img cannot be displayed?

Question

What should the browser do exactly when img cannot be displayed?

Official sources are intentionally vague about this. They say that alt text should be used, but they don’t say how! Therefore, if I did not search well enough (and I did a lot of Googling. I even Binged!), This information is not. And browsers are very different from each other in what they do.

If the image cannot be uploaded because it is not there,

• Mozilla displays inline text as part of the current text
• IE displays alt text as an inline block, preceded by a "broken image" icon and a different font
• Chrome also displays an inline block and a broken image icon, and it places a border around it. However, it does not change the font.

<p>This is my new car. <img src="images/mynewcar.jpg" alt="It a red car, with four wheels."/> And that it.</p> 

Now, if you change your browser settings so as not to load images, the behavior changes in most browsers.

• Chrome now doesn’t display anything, even alt text.
• IE still displays the text in a smaller font, but now without the “broken image” icon in front.
• Mozilla still displays inline text.

So my question is which of these browsers is doing the right thing?

And by this I do not mean, "what do you think is the best approach"? I really mean, what are the official rules governing this behavior? Are there any W3C pages (or even WHATWG pages) that I was able to skip, or where I misunderstood the rules?

Answer 1

It would seem that there are no strict rules. The HTML specification only describes how you can expect a browser to behave, but it does not establish browser regulatory requirements to follow the specified behavior with a letter. The CSS specification does not even affect it.

Section 10.4.2 of W3C HTML5 describes how img elements are displayed according to a set of rules that refer to what img represent.

Section 4.7.1 , paths down, describes what the img element represents, depending on its src and alt attributes

What the img element represents depends on the src attribute and the alt attribute.

[...]

If the src attribute is set and the alt attribute is set to non-empty

The image is a key part of the content; the alt attribute gives the text equivalent or replacement of the image.

If an image is available and the user agent is configured to display this image, then the item represents the image data of the item.

Otherwise, the element represents the text specified by the alt attribute. User agents can provide the user with a notification that the image is present, but has been omitted from rendering.

So, if the image is not available, the img element represents its alt text (since the image should not be presented!).

So, back to section 10.4.2, the following rule applies:

If the element is an img element that represents some text and the user agent does not expect this to change
It is expected that the user agent will treat the element as an irreplaceable phrasing element, the contents of which are text, optionally with an icon indicating that the image is missing, so the user can request the image to be displayed or find out why it is not displayed.In non-graphic contexts, this icon should be omitted.

It seems that Firefox is closely monitoring this expectation (note: do not require), although I am not sure if the box that is generated is replaced or not replaced. Similarly for other browsers - the built-in block can be replaced or not replaced. Note that HTML says “phrasing element”, not “inline element” or “inline block element”, adding to the uncertainty of all this again.

What Chrome does when images are disabled using user preferences is not what I would call “[giving] the user a notification that the image is present but has been omitted from rendering,” but again this is also not a requirement. However, I don’t understand why Chrome thinks this is a good idea. What else was there for the text?

Answer 2

From the HTML file MDN <img> IMG

Browsers do not always display the image that the element refers to. This applies to non-graphical browsers (including people with visual impairments) if the user does not want to display images or if the browser cannot display the image because it is an invalid or unsupported type. In these cases, the browser may replace the image with the text defined in this element's alt attribute.

Si default behavior displays alt attribute content

see this document ref MDN doc for ref You can also refer to this W3C ref

And these are http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/understanding-techniques.html understanding methods for WCAG success criteria