html - 什么时候可以在 HTML 图像上将替代文本留空(如果有的话)?

标签 html image alt

到目前为止,我的理解是 alt 属性是必需的,不应留空。这似乎在现有问题中得到证实,例如 this one .

然而,在阅读HTML spec今天,我注意到以下几点:

A single image can have different appropriate alternative text depending on the context.

In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the Carouge municipality in the canton Geneva in Switzerland.

Here it is used as a supplementary icon:

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>

它继续显示其他示例,其中包含各种 alt 文本,但在此(以及其他几个示例)中,缺少 alt 文本。

规范后面说(强调我的):

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image.

可以使用 alt="" 吗?如果是这样,什么时候这是可以接受的用途?如果图片不需要 alt 文本,它应该是 CSS 背景图片吗?

注意:这是基于 WHATWG HTML Living Standard,而不是 W3C HTML5 规范。

最佳答案

什么时候离开alt属性为空

通常,alt属性是必需的;但是,在某些情况下,HTML 规范表示可以保留 alt。属性的内容为空。 alt属性是图像的文本等价物,这意味着只有当图像的含义已经被周围的文本封装时,它才应该为空。

周围文本的图形表示 (link)

重要的是将替代文本视为图像在不可用的情况下应传达的内容。如果图像可以通过围绕它的文本进行总结,那么它应该有一个空的 alt。属性,因为冗余不会带来好处。

示例包括重复周围文本的流程图或图表。

如果要使用标题,该标题应包含为 title元素或使用 <figcaption> . alt如果图表可以用页面上其他地方没有的信息来描述,则应该使用。规范说明了为什么应该避免这种重复:

Including the caption in the alternative text like this isn't useful because it effectively duplicates the caption for users who don't have images, taunting them twice yet not helping them any more than if they had only read or heard the caption once.

装饰图片(link)

通常,规范建议 CSS background-image用于此,但澄清在某些情况下,这可以通过标记来完成,例如诗歌旁边的绘画,或事件中的风景照片。在这些情况下,图像是内容,但只有当用户能够看到图像时,该内容才相关。

形成更大图片的图像组 (link)

没有链接

只有一张图片应该有 alt文本,以避免向看不到图像的用户重复文本。

带链接

规范建议为此使用图像映射,但如果图像被切片,则必须有一个图像带有 alt每个链接的文本。

何时省略 alt完全属性

在某些情况下,替代文本未知或不必要,在这些情况下,alt=""是不准确的,因为它暗示图像没有添加任何东西。 HTML 规范警告:

If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.

但是,它承认在一些情况下 alt可以省略。

未知alt (link)

在某些情况下,例如盲人用户的博客或元数据不包含有用信息的照片共享网站,alt可能是未知的。

在这些情况下,使用 title属性或 <figcaption>必需的。虽然可能不知道图像的确切细节,但仍应包括一些解释性文字。在这种情况下,<figcaption>是首选,因为

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification.

可以查看图像的已知收件人 (link)

如果您编写的文档只会被少数已知收件人查看,并且已知所有收件人都能够看到图像,则 alt属性可以省略。建议alt无论如何都要包括在内,以防电子邮件或文档被转发。

附录:CSS 背景图片呢?

如果图像不是内容,它可能应该是背景图像。 <img>背后的基本原理分割与 background-image , 查看 When to use IMG vs. CSS background-image?

关于html - 什么时候可以在 HTML 图像上将替代文本留空(如果有的话)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23526791/

相关文章:

html - 指向 Bootstrap 模式打开的 anchor

javascript - 如何防止固定位置 <ul> 覆盖链接从而阻止它们被点击?

html - 无法让导航列表内联显示

ios - 如何在 iOS swift 中水平滚动图像

python - 将图像转换为 numpy 数组,然后立即将其转换回图像会产生两种不同的结果

map - 如何使 Leaflet tile 图层可访问

c# - 如何在 C# 控制台应用程序中输出 Windows Alt 键码

javascript - .attr 'alt' 仅显示第一个单词

javascript - window.location.replace 登录表单问题(html、javascript)

image - CSS 3 不透明度过渡不适用于 <img>