whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
8.16k stars 2.69k forks source link

Which type of replaced elements should a "`<img>` with empty src or without src" be treated #8354

Open cathiechen opened 2 years ago

cathiechen commented 2 years ago

For <img src="">, per [1]:

If the src attribute is set and the alt attribute is not If the image has a src attribute whose value is the empty string, then the element represents nothing.

For <img>, per [1]:

If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all The element represents nothing.

So both present nothing.

Then per [2]:

If the element does not represent an image and either: the element has no alt attribute, or

So these two img should be treated as:

The user agent is expected to treat the element as a replaced element whose content is the text that the element represents, if any, optionally alongside an icon indicating that the image is being obtained (if applicable).

IIUC, that is an image with broken icon.

See https://jsbin.com/wazewogavu/edit?html,css, it looks like Chormium, WebKit and Gecko are not quite align with the specification, treat them as nothing, i.e,

The user agent is expected to treat the element as a replaced element whose intrinsic dimensions are 0

I wonder which one is expected? If it's nothing, maybe we should reword [2] a little bit? Add non-empty src value constraint to "the element has no alt attribute, or"? Or it's an image with a broken icon? Or maybe I misunderstand something here?

[1] https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element [2] https://html.spec.whatwg.org/multipage/rendering.html#images-3

cathiechen commented 2 years ago

cc @annevk Thanks:)

mfreed7 commented 2 years ago

I believe it's the second one - if it doesn't have alt text, it should have size-0. This is tested via this WPT, with all engines passing:

https://wpt.fyi/results/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-empty-alt-replaced.html?label=experimental&label=master&aligned

Maybe spec needs small update?

annevk commented 2 years ago

This could certainly do with some refactoring. #2211 seems related.

Unfortunately I don't even know if "does not represent an image" and "represents nothing" are equivalent.

I suspect the only way out here would be testing the full matrix of possibilities.

cc @zcorpan

scottaohara commented 2 years ago

seems we have parallel issues going on here - https://github.com/w3c/html-aam/issues/439

doing some initial tests even when a broken image 'should' represent nothing, and no broken image/file icon is displayed, browsers (across OSs) will inconsistently still expose the element to the a11y api as an image, or as nothing.

I'd expect that in the instances where a broken file/image is not displayed, then that would indicate to me the element represents nothing and should be exposed as such. But in the instances where the icon is displayed, then it still represents an image, though a broken one.

in case this helps, I had put this together for my quick testing: https://codepen.io/scottohara/full/yLjwaxb