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

到目前为止,我的理解是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:

06000

它继续显示其他示例与各种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生活标准,而不是W3C HTML5规范。

解决方法

何时将alt属性留空

通常,alt属性是必需的;然而,有几种情况,HTML规范表示可以将alt属性的内容留空。 alt属性是与图像相当的文本,这意味着如果图像的含义已经被周围的文本封装,它应该只是空的。

周边文字的图形表示(link)

考虑替代文本是非常重要的,因为在不可用的情况下,图像应该传达什么内容。如果图像可以通过围绕它的文本进行总结,那么它应该有一个空的alt属性,因为冗余是不利的。

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

如果要使用标题,该标题应该被包括作为标题元素或使用< figcaption&gt ;.如果图形可以通过页面上其他地方没有的信息来描述,那么应该使用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背景图像,但是在某些情况下,可以通过标记来完成CSS背景图像,例如在诗歌旁边绘画,或者在事件中观看风景照片。在这些情况下,图像是内容,但是如果用户能够看到图像,那么该内容才是相关的。

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

没有链接

只有一个图像应该有替代文本,以避免重复的文本给看不到图像的用户。

有链接

该规范建议您使用图像映射,但如果图像被切片,则每个链接必须有一个具有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属性可能会被省略。建议您将电子邮件或文件转发到附件中。

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

如果图像不是内容,它应该是一个背景图像。关于< img>之后的理由的细目与背景图像,请查看When to use IMG vs. CSS background-image?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是一门用来描述网页上样式的语言,通过编写CSS代码可以实现网页中各元素的大小、颜色、字体等各种样式的控制。那么如何在HTML代码中应用CSS样式来改变字体颜色呢?这里为大家介绍一下。 首先,在HTML代码...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及z-index属性。 img { position: relative; z-index: -1; } p { position: absolute; to...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的文字字体。常用的字体标签是font和style,下面我们来学习如何使用这些标签。 1. font标签 使用font标签可以改变文字的字体、颜色和大小。它有三个属性font-family、color和...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环节,因为它们直接关系到页面的可读性和视觉效果。 要指定文本的字体和字号,可以使用HTML中的样式属性。使用样式属性设置字体和字号,如下所示: <p style="font-family: Aria...
HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建网页的标准语言。它由许多标签(一对尖括号包围的关键字)组成,这些标签告诉浏览器如何显示内容。使用HTML代码,我们可以轻松地创建各种类型的图像和图形,如太极图。 在HTM...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以通过这个链接直接跳转到其他网站。在HTML中,实现外链的方法很简单,只需要使用标签就可以了。 <a href="http://www.example.com">这是一个外链,点击跳转到www.ex...
HTML代码是实现网页界面的基础,而网页中的各种表单则是用户和网站进行交互的重要方式之一。下面我们来介绍如何使用HTML代码实现一个简单的报名表格。 <form action="submit.php" method="post"> &lt...
HTML是一种标记语言,用于开发网站和其他互联网内容。字体是网站设计中的关键元素之一,它可以决定网站的整体风格和呈现效果。HTML提供了字体编辑器,使网站设计变得更加容易。 <font face="Arial"> 这里是Arial字体 &...
HTML代码中,字体样式是开发者们必备的一部分。在HTML中,我们可以通过特定的标签和属性设置字体的样式、颜色和大小,以达到更好的排版效果。 <p style="font-size: 14px; color: #333; font-family:...
HTML中的字体可以设为粗体,以强调文本信息。我们可以通过使用一些标签来实现这一功能。其中,常用的标签包括: 1. 标签:该标签会把文本加粗显示,语法如下: 这是一段加粗的文本 2. 标签:与标签作用相同,但语义更强,表示该文本内容的重要性。语法如下:...
HTML代码可以实现文件的上传和下载,在网页开发中相当常见。通过使用<input>标签和<form>标签,我们可以轻松创建一个文件上传表单。 <form action="upload.php" method="post" enct...
HTML代码非常常见于网页设计中。在一些需要处理时间相关数据的场景下,可能需要将时间戳转换为实际时间,这时候就需要使用一些特定的HTML代码。 function timeStamp2Time(time){ var date = new Date(time...
HTML是一种用于创建网页的标记语言。在HTML中,我们可以使用超链接标签实现下载文件到本地的功能。 具体实现步骤如下: <a href="文件的URL" download="文件名">下载文件</a> 其中,href属性是文件...
在HTML代码中,对于字体靠左对齐有各种方法。其中最简单的方式之一是使用pre标签。 使用pre标签可以保留一段文本中的空格和换行符,从而使代码排版更加整齐。下面是一个例子: <p>这是一个段落。</p> &lt...
HTML代码字典是一本解释HTML标记和属性的参考文献。这本字典中包含了最常用的HTML代码以及它们的属性和值的详细描述。 例如,以下是HTML代码字典中的一部分内容: <a href="url">link text</a> 在...
在网页开发过程中,遇到一些需要用户复制的内容,我们通常都会提供复制按钮,让用户更方便地复制所需内容。下面我们来介绍如何使用html代码实现一键复制的功能。 var copyBtn = document.querySelector('#copy-bt...
用户登录 欢迎来到公司登录界面,请输入用户名和密码登录 用户名: 密码: 代码解释: 第1行:定义了一个 HTML 文档 第2行:开始了 HTML 头部 第3行:定义了...
HTML 代码是用来创建网页的语言,它包含了许多不同的元素和属性,让我们可以在网页中添加各种不同的元素和内容,如文字、图片、链接等等。在编写 HTML 代码时,我们可以使用各种不同的样式来美化我们的网页,例如更改字体、颜色、大小等等。 font-family:...
HTML代码中的字体转移 在编写HTML代码时,我们经常会使用各种字体来增强页面的可读性和视觉效果。但是,有些字符或特殊符号可能会在HTML中具有不同的含义,这就需要使用字体转义转换成HTML可以正常显示的字符。 在HTML中,使用"&"符号表示一个特殊字符将要被转...
HTML 编程语言中,你可以使用字体属性来更改文本的字体大小、颜色和样式。其中,字体颜色是最常用的样式更改。在 HTML 中,你可以使用 "color" 属性来更改文本的颜色。下面是一个使用 "pre" 标签的代码示例,演示如何使用 "color" 属性来更改字体颜色...