img 元素的alt 属性可以被 "置空"，也就是把它设置为一个空字符串，而不是一个文本描述。
空化一个alt描述意味着在开头和结尾的引号之间没有任何信息。如果有一个空的空间，它就不会被认为是空的。
<img alt="" src="/images/cat.jpg" />
这张图片已经作废了。
<img alt=" " src="/images/dog.jpg" />
这张图片没有被取消。
装饰性 "是什么意思？
剔除一个图像表明它只是出于装饰目的。
在这种情况下，装饰性意味着该图像没有在视觉上传达对理解页面或视图的目的很重要的信息，以及为什么该图像被作为其中的一部分。
装饰性并不意味着该图像包含被视为装饰的内容。
例如，一个销售墙纸的网站会希望有墙纸样本的备用描述。
<a href="/products/umbrella?variant=73849024783051">
<img
alt="Small red and white illustrated umbrellas on a teal background."
src="/images/73849024783051.png" />
</a>
另一个例子是一个博物馆的网站，介绍他们的收藏品可以从备用描述和说明中受益。
<figure
role="figure"
aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds.">
<img
alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border."
src="/collection/w0895/2005-1057.png" />
<figcaption>
View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds.
</figcaption>
</figure>
请确保你的备用描述也包括标点符号!
为什么要使图片具有装饰性？
辅助技术会跳过无效的图像，不宣布其存在。希望这样做的原因主要是历史原因。
旧的版面设计技术
早期的网络开发技术依靠图像来帮助他们保证在不同的操作系统、浏览器和浏览器版本中的一致布局。这方面最常见的例子是一个 spacer.gif，一个1×1的透明像素，被拉伸到不同的尺寸来推动内容的位置。
这种技术通常会使用许多间隔的图像来创建一个视觉设计。如果没有办法让它们不存在，这些图像就会使辅助技术宣布的内容变得杂乱无章，并使浏览和对网页内容采取行动变得混乱和费时。
旧的设计技术
在有CSS属性之前，如 box-shadow之前，开发者不得不使用一些技术，将装饰性的样式分割开来，使其适用于高度或宽度不确定的内容。这种技术被称为9片式缩放，这个术语指的是你需要创建的9段内容。
与间隔图像一样，9片式缩放也是使用多个图像来创造所需的视觉效果。而且，和间隔图像一样，消除这些图像造成的混乱的唯一方法是把它们标记为装饰性的。
冗长的公告
有一种罕见的情况是，一张图片在一个页面或视图上重复出现，而它的重复位置并没有提供任何额外的背景。在这种情况下，你应该小心地将图像标记为装饰性的，因为对于使用屏幕阅读器的低视力者来说，可见的图像缺乏公告可能会引起混淆。
补充性图标
使用图标的链接和按钮应该始终有一个传达功能的无障碍名称。如果设计中也包含了一个图标，那么图标的设计就不需要被传达。
<button type="button">
<img src="icon-print.svg" alt="" />
Print
</button>
如果组件只使用一个图标，那么图像本身应该被用来创建无障碍名称。
<button type="button">
<img src="icon-print.svg" alt="Print." />
</button>
请注意，可见的文本标签是首选技术。可见的文本标签可以被翻译，并能更直接地传达目的。
我不知道这个按钮是做什么的。
现代使用
现代的CSS布局和造型技术意味着图像的位置现在是非常有意的。这意味着，如果使用图片，它很可能需要一个备用的描述。
替代描述应该传达图像的目的。这包括图片的内容，但也可能包括它被包含在页面或视图的背景中的原因。这就是为什么备用图像描述永远无法完全自动化的原因之一。
显示图片的其他方式
还有一些其他的方式来显示页面或视图上的图片。重要的是，如果图片包含有意义的内容，无论使用何种技术，都要确保提供一个备用描述。
picture 元素
picture 元素没有隐含的作用，这意味着它的存在并没有向辅助技术传达任何目的。这意味着它不能被用来从语义上描述 "图片 "的存在。
picture 元素是source 和img 元素的一个容器。使用img 元素的alt 属性，为父级picture 元素提供一个替代的描述。
<a href="/product/9091866/color/3">
<picture>
<source
srcset="9091866-3.avif"
type="image/avif" />
<img
alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue."
src="9091866-3.png" />
</picture>
</a>
背景图片
我们可以使用CSS来声明一个图像作为HTML元素的背景。这最常被用来为设计增加一种质感。
然而，另一种流行的技术是使用background-image ，以这样一种方式放置图片，开发人员将无法控制别人上传的图片的尺寸。background-image ，结合其他属性，如 background-size将确保显示未知大小的内容而不破坏设计。
请参阅埃里克-贝利（Eric Bailey）所写的《将背景图像作为前景图像的例子》。
在这样的情况下，我们的老朋友spacer.gif ，可能又会有帮助!
内联SVG
SVG可以通过img 元素中的src 属性链接到它，或者通过在页面或视图中内联SVG代码来显示。
如果你使用内联SVG，你需要使用SVG的title （可能还有desc ）元素来代替alt 属性。
<svg
role="img"
aria-labelledby="icon-bookmark-desc"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title id="icon-bookmark-desc">Bookmark.</title>
<path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
</svg>
等效的经验
在现代的网页设计和开发中，显示图像是一种高度有意的行为。替代描述允许我们解释图像的内容，并在这样做的时候，传达出为什么它值得包括在内。
仅仅因为一张图片显示了一些令人遐想的东西，并不意味着它不值得描述。宣布它的存在可以确保任何人，无论其能力或情况如何，都能充分理解你的数字体验。
