你的形象可能不是装饰性的

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>

确保您的替代描述也包括标点符号！

为什么要制作图像装饰？

辅助技术将跳过无效图像并且不会宣布它们的存在。 想要这样做的原因主要是历史原因。

旧的布局技术

早期的 Web 开发技术依靠图像来帮助他们保证跨不同操作系统、浏览器和浏览器版本的一致布局。 最常见的例子是spacer.gif ，一个 1×1 的透明像素，它被拉伸到不同的大小以将内容推送到位。

这种技术通常会使用许多间距图像来创建视觉设计。 如果没有办法让他们的存在保持沉默，这些图像会混淆辅助技术宣布的内容，并使导航和对 Web 内容采取行动变得混乱和耗时。

旧的设计技术

在出现诸如box-shadow之类的 CSS 属性之前，开发人员必须使用切碎装饰样式的技术，使其适用于高度或宽度不确定的内容。 这种技术被称为 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 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等其他属性相结合，将确保在不破坏设计的情况下显示未知大小的内容。

在这种情况下，我们的老朋友spacer.gif可能会再次提供帮助！

内联 SVG

SVG 可以通过img元素中的src属性链接到它来显示，或者通过将 SVG 代码内嵌在页面或视图中来显示。

如果您使用的是内联 SVG，则需要使用 SVG 的title （可能还有desc ）元素来代替alt属性。

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

同等经验

在现代网页设计和开发中，显示图像是一种高度有意的行为。 替代描述使我们能够解释图像的内容，并在此过程中传达为什么值得包含.

仅仅因为图像显示了一些奇特的东西并不意味着它不值得描述。 宣布它的存在可确保任何人，无论能力或环境如何，都可以充分了解您的数字体验。

关于 SmashingMag 的进一步阅读：

• Chrome DevTools 中的可访问性
• 可访问性工具的完整指南
• 最重要时的可访问图像
• 可访问的 SVG：屏幕阅读器用户的完美模式
• 针对运动灵敏度进行减少运动设计
• 阅读更多关于可访问性、可用性和用户体验的文章。