何时可以在HTML图像上保留alt文本为空(如果有的话)?

ran*_*dak 19 html html5 image alt

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

但是,在今天阅读HTML规范时,我注意到以下内容:

根据上下文,单个图像可以具有不同的适当替代文本.

在以下每种情况下,使用相同的图像,但alt文本每次都不同.图像是瑞士日内瓦州卡鲁日市的徽章.

在这里它被用作补充图标:

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
Run Code Online (Sandbox Code Playgroud)

它继续显示具有各种alt文本的其他示例,但是在此(以及其他几个示例)alt中缺少该文本.

该规范后来说(强调我的):

除非另有指定,否则必须指定alt属性且其值不能为空 ; 该值必须是图像的适当替代.

可以使用alt=""吗?如果是这样,何时可以接受?如果图像不需要alt文本,它应该是CSS背景图像吗?

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

ran*_*dak 24

何时将alt属性留空

通常,该alt属性是必需的 ; 但是,有几种情况下HTML规范说可以将alt属性的内容留空.该alt属性是图像的等效文本,这意味着如果图像的含义已被周围文本封装,则该属性应为空.

周围文本的图形表示(链接)

重要的是要考虑alt文本作为图像在不可用的情况下应传达的内容.如果图像可以通过它周围的文本进行汇总,那么它应该具有空alt属性,因为冗余不会有益.

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

如果要使用标题,则该标题应作为title元素包含或使用<figcaption>.该alt如果图可以通过不提供的网页上的其他信息来说明应该使用.该规范说明了应该避免这种重复的原因:

在这样的替代文本中包含标题是没有用的,因为它有效地复制了没有图像的用户的标题,嘲讽他们两次但没有帮助他们,只要他们只阅读或听过一次标题.

装饰图片(链接)

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

形成更大图片的图像组(链接)

没有链接

只有一个图像应该有alt文本,以避免重复文本给无法看到图像的用户.

有链接

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

何时alt完全省略该属性

在某些情况下,备用文本无法知道或不必要,在这些情况下,alt=""是不准确的,因为它意味着图像不会添加任何内容.HTML规范警告:

如果作者有能力提供真正的替代文本,那么省略alt属性是不可接受的.

但是,它承认alt可以省略的几种情况.

未知alt (链接)

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

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

目前不鼓励依赖title属性,因为许多用户代理不以本规范要求的可访问方式公开属性.

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

如果您正在编写仅由少数已知收件人查看的文档,而且所有收件人都知道能够查看图像,则alt可以省略该属性.如果alt转发电子邮件或文档,建议无论如何都要包括在内.

附录:CSS背景图片怎么样?

如果图像不是内容,则它可能应该是背景图像.对于背后的基本原理的崩溃<img>background-image,看看何时使用IMG与CSS背景图像?

  • 这个答案很有用,但不完美.首先也是最重要的是,关于今天的现实世界视觉浏览器和屏幕阅读器使用`alt`,`title`和`figcaption`做的事实,而不是至少4年前的理想主义文件不得不说,它将大大增强.其次,当您对图像内容一无所知时(例如,如果您是图像托管网站,或者您是Chrome生成"在新标签页中打开图像"文档),建议该怎么做是没有意义的; 它等于"你必须把除了'alt`属性之外的其他信息放在你的地方".咦? (2认同)