Question

当img无法显示时，浏览器应该做什么？

官方消息来源对此有意模糊。他们说alt文本应该被使用，但他们不会说如何！
所以，除非我没有足够好的搜索（我做了很多谷歌搜索。我甚至是Binged！）这些信息并不存在。浏览器在他们的工作中差别很大。

如果图片无法加载，因为它不在那里，

Mozilla将alt文本显示为当前文本的一部分
IE将替换文字显示为内嵌块，前面是＆＃34;损坏的图像＆＃34;图标，并以不同的字体
Chrome还会显示一个内嵌块和“＃34;已损坏的图像＆＃34;图标，它围绕它放置一个边框。但它并没有改变字体。

＆＃13;

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

＆＃13;

现在，如果您更改浏览器＆＃39;设置为不加载图像，大多数浏览器的行为都会发生变化。

Chrome现在无法显示任何内容，甚至不会显示替代文字。
IE仍然以较小的字体显示替代文字，但现在没有＆＃34;破碎的图像＆＃34;前面的图标。
Mozilla仍然显示内联的替换文字。

所以我的问题是，哪些浏览器做对了？

并且我并不意味着，＆＃34;你认为什么是最好的方法＆＃34;？我真的是指管理这种行为的官方规则是什么？是否有我错过的W3C页面（甚至是WHATWG页面），或者我误解了规则的地方？

Answer 1

似乎没有严格的规则。 HTML规范仅描述了浏览器期望的行为方式，但对浏览器没有规定要求遵循上述行为。 CSS规范甚至没有触及它。

Section 10.4.2 of W3C HTML5描述了如何根据一组引用img元素代表的规则来呈现img元素。

Section 4.7.1，向下，描述了img元素代表的src和alt属性所代表的内容：

img元素代表什么取决于src属性和alt属性。

[...]

如果设置了src属性且alt属性设置为非空值

图像是内容的关键部分; alt属性为图像提供了文本等效或替换。

如果图像可用且用户代理配置为显示该图像，则该元素表示该元素的图像数据。

否则，该元素表示alt属性给出的文本。用户代理可以向用户提供图像存在但已从渲染中省略的通知。

因此，如果图像不可用，则img元素表示其替代文字（因为没有要表示的图像！）。

因此，回到10.4.2节，适用以下规则：

如果元素是代表某些文字的img元素，并且用户代理不希望此更改
期望用户代理将元素视为未替换的短语元素，其内容是文本，可选地具有指示图像缺失的图标，以便用户可以请求显示图像或调查其未呈现的原因。在非图形上下文中，应省略这样的图标。

Firefox似乎最接近这种期望（注意：不是要求），尽管生成的框是替换还是未替换，我不确定。对于其他浏览器也是如此 - 内联块可以替换也可以不替换。请注意，HTML表示“短语元素”，而不是“内联元素”或“内联块元素”，这再次增加了整个事物的模糊性。

当通过用户偏好禁用图片时，Chrome所做的事情不是我所说的“[向用户提供图像存在但已从渲染中省略的通知”，但同样，这也不是必需的。不过，我不明白为什么Chrome认为这是一个好主意。什么是替代文字？

Answer 2

来自MDN HTML元素<img> IMG

浏览器并不总是显示元素引用的图像。这是非图形浏览器的情况（包括那些使用的浏览器）如果用户选择不显示，则有视力障碍的人）图像，或者如果浏览器无法显示图像，因为它是无效或不受支持的类型。在这些情况下，浏览器可能会使用此元素的alt中定义的文本替换图像属性。

默认行为si显示alt属性的内容

请参阅this doc参考MDN doc for ref 您也可以参考this W3C ref

这种用于WCAG成功标准的http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/understanding-techniques.html理解技术

当img无法显示时应该会发生什么？

2 个答案: