图片加载失败替代文字_替代艺术：为图像编写出色的描述性文字

图片加载失败替代文字

The web gains its strength through diversification: the more accessible it is to everyone, the better the results. The alt attribute was an early example of this, but writing good, accurate descriptive text for your images takes knowing a few rules:

网络通过多元化而获得优势：每个人都能访问的越多，结果越好。 alt属性是一个较早的示例，但是为图像编写良好，准确的描述性文本需要了解一些规则：

alt (alt)

alt represents the alternative text representation of an image. If an image fails to load or is blocked, the alt value will appear in its place; for accessibility users, the text may be translated by a text-to-speech or text-to-Braille service. alt is also useful for SEO, as it is part of what search engines use to determine the content of the image, and thus your site’s association with search terms.

alt表示图像的替代文本表示 。 如果图像无法加载或被阻止，则alt值将出现在其位置； 对于可访问性用户，可以通过文本到语音或文本到盲文服务来翻译文本。 alt对于SEO也很有用，因为它是搜索引擎用来确定图像内容的一部分，从而确定您的网站与搜索字词的关联。

The alt attribute (commonly, but mistakenly, referred to as “the alt tag”) is required for every <img> element on your site. In the majority of cases, the easiest way to compose alt text is to write as if you’re trying to describe the image to someone. For example, the photograph at the top of this article could be described as:

站点上每个<img>元素都需要alt属性(通常，但错误地称为“ alt标签”)。 在大多数情况下，撰写alt文本的最简单方法是像试图将图像描述给某人一样书写 。 例如，本文顶部的照片可以描述为：

<img src="singel.jpg" alt="Dusk in Jordaan, Amsterdam, North Holland">

Alternatively, and better:

或者，更好的是：

<img src="singel.jpg" alt="A row of houses with lit windows along an Amsterdam canal">

As a general rule, more descriptive text is better.

通常，描述性较好的文本更好。

alt例外：徽标 (alt Exceptions: Logos)

If an image’s primary content is text, the rules change. Bitmap images that feature text “baked” into them, like this one:

如果图像的主要内容是文本，则规则会更改。 具有文本特征的位图图像被“烘焙”到其中，如下图所示：

…should have an alt value that directly reflects the bitmapped text:

…应具有直接反映位图文本的alt 值 ：

<img src="festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577">

The reason for this is simple: most screen readers can’t yet reliably recognize and translate bitmapped text, making it impenetrable to both search engines and the blind. By placing the text as an alt value, you do the translation work for both.

原因很简单：大多数屏幕阅读器尚不能可靠地识别和翻译位图文本，这使得搜索引擎和盲人都无法理解。 通过将文本作为alt值，您可以同时进行这两种翻译。

You will often see poorly written markup such as: <img src="logo.gif" alt="Logo">. Don’t do that.

您经常会看到书写不佳的标记，例如： <img src="logo.gif" alt="Logo">. 不要那样做

This is also a very good reason to consider using inline SVG or markup for logos. Correctly built, the text in an SVG logo will be true text, and thus readable. It’s important to note that if the text was broken into SVG paths, the semantic value of the text is lost. An alternative (and perhaps better) solution would be to keep the graphic portion of the logo as SVG, and write the rest as styled markup. Of course, both options have to be weighted against the load time of an embedded font.

这也是考虑对徽标使用嵌入式SVG或标记的一个很好的理由。 正确构建的SVG徽标中的文本将是真实文本，因此易于阅读。 重要的是要注意，如果将文本分成SVG路径，则文本的语义值会丢失。 另一种(也许更好)的解决方案是将徽标的图形部分保留为SVG，并将其余部分写为样式标记。 当然，必须针对嵌入式字体的加载时间对这两个选项进行加权。

空白alt (Blank alt)

There are two conditions when alt may be left blank:

alt可能留空有两个条件：

• The image is purely decorative, i.e. it has no informational value;

  图像纯粹是装饰性的，即没有信息价值。

• The image is effectively described by an appropriate semantic element immediately beside it: usually a <figcaption>.

  图像由紧靠其旁边的适当语义元素有效地描述：通常是<figcaption> 。

  If you wish to keep your page valid, alt should still be present for every image: to keep it blank, set alt to the value of two quotes with no space between them:

  如果您希望保持页面有效，则每张图片都应显示alt ：将其保留为空白，请将alt设置为两个引号之间没有空格的值：

  <img src="flourish.png" alt="">

  Alternatively, in HTML5 you can simply set the alt attribute with no value:

  另外，在HTML5中，您可以简单地将alt属性设置为无值：

  <img src="flourish.png" alt>

  There are rare occasions when the alt value for an image may be very similar to its figcaption. In that case, the alt becomes redundant, and can be dropped:

  在极少数情况下，图像的alt值可能与它的figcaption非常相似。 在这种情况下， alt变得多余，可以将其删除：

  <figure>
  	<img src="rio-di-san-barnaba.jpg" alt>
  	<figcaption>Photograph down the canal of the Rio di San Barnaba, Venice</figcaption>
  	</figure>

  The differences can be subtle: alt describes an image, whereas <figcaption> titles the content of a <figure> element. In most cases, the two will be different, and both should be preserved:

  差异可能很细微： alt 描述图像，而<figcaption> 标题 <figure>元素的内容。 在大多数情况下，两者将有所不同，并且都应保留：

  <figure>
  	<img src="doge-portrait.jpg" alt="Oil painting of an old man in a peaked cap and embroidered cloak">
  	<figcaption>Portrait of Doge Leonardo Loredan by Giovanni_Bellini</figcaption>
  </figure>

  不要将alt与标题混淆 (Don’t Confuse alt with title)

  You’ll sometimes find markup that applies the same text value to alt and title for a image. As a general rule, this is not a good idea; the popup tooltip text is hardly ever seen by users, as it takes several seconds to come up, and it won’t be encountered by accessibility users unless the element is focused.

  有时您会发现将相同文本值应用于图片的alt和title标记。 一般来说，这不是一个好主意。 弹出工具提示文本几乎不会被用户看到，因为它需要花费几秒钟的时间，并且可访问性用户不会遇到它，除非该元素已被聚焦。

  alt的定位 (Positioning of alt)

  As screenreaders will read alt text inline with content, you should write your descriptive text in a way that flows with the content immediately around it, especially if the image is floated.

  由于屏幕阅读器会读取与内容内联的alt文本，因此您应该以一种与内容紧紧围绕的方式来编写描述性文字，尤其是在图像浮动的情况下。

  不要忽视其他媒体 (Don’t Neglect Other Media)

  alt is almost exclusively associated with images. This does not mean that descriptive text for other media formats on your site should be neglected: video and audio should feature WebVTT subtitles, for example.

  alt几乎只与图像相关。 这并不意味着您网站上其他媒体格式的描述性文字应被忽略：例如，视频和音频应带有WebVTT字幕 。

• 翻译自: https://thenewcode.com/969/The-Art-of-alt-Writing-Great-Descriptive-Text-For-Images

  图片加载失败替代文字