无障碍 意义图像和装饰图像

为什么

屏幕阅读器 会忽略装饰图像。屏幕阅读器会尝试说出有意义图像的含义。

什么

有些图像是有意义的，有些是装饰性的。这在无障碍方面是一个重要的区别。每个图像都必须被编码为有意义的或装饰性的。

怎样

您将学习如何区分有意义图像和装饰图像。

装饰图像

如果一个图像对于用户理解网页或应用程序的功能或内容并不重要，它就被认为是装饰性的。您可以将其删除而不会产生任何影响吗？那么它就是一个装饰性图像。

空 alt 属性

将图像设置为装饰性的最基本方法是使用空的 alt 属性。

在阿里巴巴的首页，我们有四个快捷方式 - *所有类别*、*询价*、*线上展会* 和 *个人防护装备*。每个快捷方式都有一个说明性的图标。*所有类别* 快捷方式有一个显示三个深蓝色方块和一个橙色圆圈的图像。此图像是一个装饰性图像。我们通过添加一个空的 alt 属性来设置它。

<img src="Ha50044a3568449409f3396e5b36be8c3h.png_80x80q80.jpg" alt="">

像屏幕阅读器这样的辅助技术将忽略该图像。如果没有空的 alt 属性，屏幕阅读器可能会读出文件名。这毫无意义，会让用户感到困惑。

背景图像

装饰图像的另一种方法是使用 CSS background-image 属性 添加它们。当我们创建 英雄图像 时，这很常见。

字体图标

在阿里巴巴移动版底部，我们有五个链接，它们是图标和文本的组合 - *首页*、*资讯*、*消息*、*购物车* 和 *我的阿里巴巴*。由于该网站即使删除图标仍然可读，因此它们是装饰性的。这些图标是用字体图标创建的。没有 <img> 元素，也没有背景图像。添加 role="img" 和 aria-hidden="true"

<i class="navbarIcon" role="img" aria-hidden="true"></i>

使用此代码，我们使用图像角色为 <i> 添加了一些语义。用户代理现在理解这是一个图像。屏幕阅读器也理解它们应该忽略图像。

内联 SVG 图像

如果您使用 <img> 元素添加装饰性的 SVG 图像，则必须添加空的 alt 属性，如上所述。SVG 图像通常使用 <svg> 元素内联插入。在这种情况下，aria-hidden="true" 将使您的图像成为装饰性的。

<svg aria-hidden="true" …></svg>

有意义的图像

我们的大多数图像都是有意义的。在此阿里巴巴示例中，我们有六个图像

• 徽标
• 搜索图标
• 咖啡
• 夹克
• 1 年徽章
• 金牌徽章

这里唯一装饰性的图像就是搜索图标。这是装饰性的，因为有文字 *搜索产品*。如果打开搜索的图标是独立的，它就是一个有意义的图像。

与装饰图像一样，我们有几种方法可以对意义图像进行编码。

描述性 alt 属性

alt 属性为图像提供替代文本，如果用户出于某种原因无法查看图像。原因可能是连接缓慢、图像文件错误，或者用户使用屏幕阅读器。alt 属性的值应该描述图像，或者更好：图像的**意图**。您将在页面 图像的描述性文字 中学习如何编写内容。

在此阿里巴巴示例中，徽标存在有两个原因。首先，告诉用户他们位于哪个网站。其次，为用户提供一个回到首页的链接。

不可访问

更好，但仍然不好

更好

最佳

背景图像、字体图标和 <svg> 图像

背景图像、字体图标和 <svg> 的方法相同

• 添加 role="img"
• 添加描述性的 aria-label 或 aria-labelledby 属性。

<div role="img" aria-label="私人住宅，现代建筑。极简主义，带有一个大车库。">

现在您知道如何对装饰图像和有意义图像进行编码。接下来您将学习如何编写 描述性文字 以用于有意义图像。